리액트의 데이터 흐름은 단방향 흐름이기 때문에 부모 → 자식으로 흘러야 함예를 들어 대규모 프로젝트 일 수록 데이터의 변화에 따라 변경되는 컴포넌트들이 증가하게 됨상태 업데이트 또한 흐름을 지켜야 하기 때문에 상당히 복잡한 과정을 거치게 됨→ 유지보수가 점점 힘들어짐따

axios로 쉽게 외부 데이터를 호출하여 사용가능useEffect를 활용하여 처음 렌더링 시점에 데이터 호출useEffect에 async를 사용하면 X → useEffect에서 반환해야 하는 값은 뒷정리 함수 이기 때문→ 내부에 다른 함수를 만들어 async/await

single page application의 약자로 하나의 페이지로 이루어진 애플리케이션을 말함기존 웹페이지는 페이지 변경 시 서버에 요청하며 화면을 새로 불러옴이러한 방식은 많은 트래픽을 서버에서 부담해야함SPA는 뷰 렌더링을 사용자의 브라우저가 담당하고 로딩이 필요

yarn add immer두가지 파라미터를 사용첫번째 - 수정하고 싶은 state두번째 - 상태를 어떤 방식으로 업데이트 할지 정의하는 함수두번째 파라미터로 전달되는 함수 내부에서 원하는 값을 변경하면 produce 함수가 불변성을 유지를 대신 해주어 새로운 상태를 생

기존 일정관리 어플리케이션 코드를 리팩토링 진행React.memo 사용onToggle, onRemove 리렌더링 방지react-virtualized 렌더링 최적화현재는 하나의 값만 체크해도 App의 연결되어 있는 state이 변경 되기 때문따라서 해당 컴포넌트 아래 있

node-sass, classnames, react-icons 설치prettier 프로젝트에서 제시하는 요구사항 설정TodoTemplate - 화면 전체를 감싸는 레이아웃 컴포너틑TodoInsert - 할 일 입력 폼TodoList - 할 일 목록 컴포넌트TodoLis

기존 css 사용처럼 작성 후 import하여 적용yarn add node-sass로 설치사용 방법은 css와 동일공통으로 사용하는 부분은 분리하여 관리프로젝트 디렉토리가 깊어지면 해당 스타일을 import할 때 불편하기 때문에 설정../../../../utils.sc

state를 설정할 때 사용 (하나의 상태값만 관리)파라미터 - init 값을 넣어줌리턴 - state 값, state를 설정하는 함수컴포넌트가 렌더링 될 때 마다 특정 작업을 수행하도록 설정 가능componentDidUpdate + componentDidMount 를

컴포넌트의 라이프사이클이 존재하며 페이지의 렌더링 전 ~ 페이지가 사라질 때 끝난다.클래스형 컴포넌트에서만 사용 할 수 있고 함수형은 Hooks의 기능으로 구현이 가능라이프사이클의 종류는 총 9개Will 접두사가 붙은 메소드 - 작업이 동작하기 전 실행Did 접두사가

arr.map(callback, \[thisArg])callback 파라미터currentValue - 현재 배열 값index - 현재 배열의 indexarray - 현재 원본 배열thisArg(선택 항목) - callback 함수 내부에서 사용할 this예시컴포넌트 배

DOM을 직접적으로 건드려야 할 때 사용특정 Input에 포커스 주기스크롤 박스 조작canvas 요소 활용콜백 함수를 통한 ref 설정함수 내부에서 전달받은 ref 파라미터를 컴포넌트의 멤버 변수로 설정createRef 설정리액트 내장 함수 (v16.3)컴포넌트에도 r

event 이름의 표기를 camelCase로 표기해야 함 (onClick, onMouseOver)js 코드가 아닌 함수 형태의 값을 전달 해야함DOM 요소에만 이벤트를 설정 할 수 있다. (컴포넌트 X)SyntheticEvent는 브라우저 native event와 달

함수형 컴포넌트와 달리 state 기능과 라이프 사이클 기능을 사용 가능임의 메소드를 정의 가능render 함수가 필수로 있어야 하고 jsx를 반환해야 함함수형선언하기 편하다메모리 자원이 작다state, 라이프 사이클 api가 불가능 하다 (Hooks의 추가로 해결)클

[개인 스터디] 리액트를 다루는 기술 - 2장 JSX

[개인 스터디] 리액트를 다루는 기술 - 1장 리액트 시작

Vue3에서 제시하는 새로운 방식의 컴포넌트 구조를 소개하려고 합니다. (composition api) Vue2에서도 적용이 가능하고 타입스크립트와 함께 사용하기도 용이하기 때문에 실무에 적용하는 것도 생각보다는 어렵지 않았습니다! 🥳

기존 js파일에서 폴더 자체를 import하는 것이 불가능 합니다. 하지만 Vue, React와 같은 프레임워크에서 index 파일을 생성하면 폴더 안에 들어있는 파일 전체를 import 하는게 가능합니다! 설정 방법은 import 할 폴더 안에 index.js를 만들

Vue cli3 이상부터는 프로젝트를 생성할 때 scss 관련 기능을 쉽게 추가할 수 있습니다. 하지만 프로젝트 진행 중간에 scss를 적용할 일이 생겨 해당 내용을 정리하였습니다 🙂제일 먼저 해당 package에 node-sass와 sass-loader를 설치해줍니

사이버 공격의 개요사이버 공격인터넷을 통해 다른 컴퓨터에 불법 접속하여 상대방 국가나 기업, 개인에 손상을 입히려는 행동과거에는 네트워크 혹은 로컬 호스트 상에서의 잘못된 설정을 이용해 관리자 권한을 업는 초보적 방식이 대다수기술의 발전에 따라 사이버 공격 방식도 다양

Vue 공식 문서 기반으로 작성한 필수 스타일 가이드에 대한 내용 정리입니다 🙂자세한 내용은 공식문서를 참고 부탁드립니다.Style Guide - Vue.js1\. 컴포넌트의 이름은 합성어를 사용한다.html 태그의 경우 한 단어로 태그가 구성되어 있기 때문에 충돌