스파르타코딩클럽65 [리액트 React] 입문 학습 자료 정리 ✅ React란 무엇일까? 1️⃣ React.js React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript라이브러리이다. "컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다. 프론트엔드 개발자사이에서는 앵귤러, 뷰와 더불어 가장 많은 인기를 얻고 있다. SPA를 전제로 하고 있으며, Virtual DOM을 활용하여 업데이트 해야하는 DOM요소를 찾아서 해당 부분만 업데이트 하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 빠른 퍼포먼스를 낼 수 있다. 2️⃣ 주요 특징 🔹 컴포넌트 기반 스스로 상태를 관리하는 캡슐화된 컴포넌트를 만든다. 그리고 이를 조합해 복잡한 UI를 만들어본다. 컴포넌트 로직은 템플릿이 아닌 JavaScri.. 2022. 7. 28. [리액트 React] 기초반 강의 4주차 정리 ✅ keyframes 1️⃣ keyframes 사용하기 keyframes는 styled-components 안에 이미 들어있다. 웹에서 애니메이션을 구현할 때는 transition과 animation이라는 스타일 속성을 많이 사용한다. 🔹 transition : 단순한 엘리먼트 상태변화에 쓰기 좋다. 🔹 animation : 다이나믹한 효과를 주는데 쓰기 좋다. keyframes는 animation에서 사용하는 속성 중 하나이다. 👌 네모 박스를 동그라미로 바꾸고 위 아래로 움직이는 것 만들어 보기 ▶️ 새 프로젝트에 styled-components 설치해주어야 한다. ▶️ 네모박스 만들기 import React from 'react'; import './App.css'; // styled와 keyfra.. 2022. 7. 28. [리액트 React] 기초반 강의 3주차 정리 ✅ Event Listener 1️⃣ 이벤트 리스너란? 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것 ex) 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등 이벤트 리스터는 에서처럼 엘리먼트에 직접 넣어줄 수도 있고 addEventListener를 통해 추가해볼 수도 있다. 👌 클래스형 컴포넌트에서 event listener 구독하기 🔹 이벤트 리스너의 위치 클릭을 하건, 마우스를 올리건 DOM 요소가 있어야 이벤트가 발생하는 지 지켜볼 수 있다. 즉, componentDidMount()에 넣어주면 된다. ▶️ 어떤 행동(= 이벤트 발생) 뒤에 실행할 함수 먼저 만들기 hoverEvent = (e) => { // 콘솔로 이 이벤트가 누구에게서 일어났는 지 확인할 수 있다. .. 2022. 7. 27. [도서] 1일 1로그 100일 완성 IT지식 #통신 ✅ 통신 79번 : 곳곳에 도사리는 위험 👌 웹의 보안 위협 문제 1. 클라이언트(여러분) 공격 2. 서버(가령 온라인 매장 또는 은행) 공격 3. 전송 중인 정보 공격(무선 통신을 스누핑하거나 NSA가 광케이블상의 모든 트래픽을 탈취하는 행위 등) 1️⃣ 클라이언트 공격 스팸이나 추적같은 단순히 골칫거리를 만드는 공격뿐만 아니라 더 심각한 문제를 야기하는 공격, 특히 다른 사람이 여러분으로 가장할 수 있게 하는 신용카드 번호, 은행 계좌 번호 또는 비밀번호 같은 개인정보 유출이 포함된다. 🟡 추적을 줄이려면? 🔹 제 3자 쿠키(third-party cookie)(여러분이 방문한 웹사이트가 아닌 다른 웹사이트에서 온 쿠키)를 금지한다. 🔹 트래커를 비활성화하는 브라우저 애드온을 사용한다. 🔹 자바스크립트.. 2022. 7. 25. [리액트 React] 3주차 입문 주차 팀 과제 정리 1️⃣ 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요? 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까요? 👌 유사배열 배열은 여러 개의 값을 순차적으로 나열한 순회 가능한 자료구조 유사 배열은 배열처럼 length가 있고, index로 프로퍼티 값에 접근할 수 있는 객체 (EX. NodeList) 유사 배열은 배열 메서드를 사용할 수 없다. 유사 배열을 수정하려면 Array.from 메서드를 사용해서 진짜 배열로 변경하고 배열 메서드를 사용하여 수정한다. 2️⃣ 부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니.. 2022. 7. 24. 항해99 2주차 WIL - ES5/ES6 문법 차이 항해99 2주차를 마무리하며 2주차에는 프로그래머스 알고리즘을 한 주간 풀었고 기본적인 React에 관한 내용을 정리했다. 솔직히 과제를 정리했지만 무슨 말인지 이해하기가 어렵고 과제가 여러부분 중복되는 부분이 있었음에도, 내용이 다 다른 것 같아서 헷갈렸다. 지금 3주차를 시작해서 하고 있는데 3주차는 더 어렵다. 큰일이다. 알고리즘 문제풀이는 거의 대부분 블로그로 기재해두어서 WIL 내용에는 제외하려고 한다. 2주차엔 팀장을 맡게 되어서, 알고리즘과 개인과제를 풀기 위한 스케줄링을 매일 밤이나 새벽에 해두고 다음 날 오전 9시에 팀 미팅을 통해 공유하였다. 하루 일정과 일주일 일정은 이런식으로 수정해두고 매일 해야 하는 목표치를 정해두고 완료했으면 블로그 링크를 달아두거나, 미해결한 부분은 기록해서 .. 2022. 7. 24. 이전 1 2 3 4 5 ··· 11 다음
