rosie

feat : 새로운 기능 추가 fix : 버그 수정 docs : 문서 수정 style : 코드 formatting, 세미콜론(;) 누락, 코드 변경이 없는 경우 refactor : 코드 리팩터링 test : 테스트 코드, 리팩터링 테스트 코드 추가(프로덕션 코드 변경 X) chore : 빌드 업무 수정, 패키지 매니저 수정(프로덕션 코드 변경 X) design : CSS 등 사용자 UI 디자인 변경 comment : 필요한 주석 추가 및 변경 rename : 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우 remove : 파일을 삭제하는 작업만 수행한 경우 !BREAKING CHANGE : 커다란 API 변경의 경우 !HOTFIX : 급하게 치명적인 버그를 고쳐야 하는 경우

1. useContext(Context API) ⅰ. useContext란? react context 의 필요성 부모컴포넌트 -> 자식 컴포넌트로 데이터를 전달해 줄 때 props를 사용함 부모 -> 자식 -> 그 자식 -> 그자식의 자식 이렇게 너무 깊어지게 되면 prop drilling현상이 일어나게됨 porps drilling의 문제점은 깊이가 너무 깊어지면 이 prop가 어떤 컴포넌트로부터 왔는지 파악이 어려워짐 어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어져 대처가 늦어짐 그래서 등장한것이 react context API => useContext hook을 통해 쉽게 전역 데이터를 관리할 수 있게 됨 ⅱ. context API 필수 개념 createContext: context 생성 Con..

❓ 오류 발생 상황과 이유 npm install -g yarn을 하였는데 아래와 같은 오류 코드가 발생함 열심히 검색해서 이것저것 해보았지만 계속적으로 동일한 오류가 발생함 ....이정도면 yarn이랑 안맞는듯... yarn때문에 노트북도 바꾼건데...이번에도 yarn 설치 과정에서 오류가 발생했다ㅜㅜㅜㅜㅜ ⭐해결방법 일단 노드의 버전으로 확인해서 node.js의 버전에 16.10보다 크면 아래의 코드를 입력 node -v corepack enable 위에 코드를 입력했지만 아래와 같은 오류가 발생함 관리자 권한으로 위에 코드를 다시 입력!! sudo corepack enable

1. state VS props props(“properties”의 줄임말) 와 state는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다. ⅰ. state 와 props의 공통점 모두 일반 JS 객체 모두 렌더링 업데이트를 트리거함 ❓트리거(trigger)란? 데이터베이스가 미리 정해놓은 조건을 만족하거나 어떤 동작이 수행되면 자동적으로 수행되는 동작 ⅱ. state(상태) 가변 데이터 구성 요소에 의해 유지 변경 가능 ⅲ. props 불변의 데이터 부모컴포멈트로부터 전달됨 변경..

store does not have a valid reducer. make........ ❓ 오류 발생 상황과 이유 redux를 사용하여 초기값을 세팅하고 todo를 받아오는 input 과 그값을 저장하는 add 함수를 작성하고 난 후 실질적으로 사용하는 부분으로 넘어가서 세팅값을 연결하니 저런 에러 코드가 발생함 ⭐해결방법 config/comfigStore.js 파일을 만들고 combineReducer 안에 값을 넣어줘야 하는데 combineReducer안에 아무 값을 입력을 안해줬다........ import { createStore } from "redux"; import { combineReducers } from "redux"; import todos from "../modules/todos";..

1. React Hooks - useState ⅰ. useState 복습 useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해줌 const [state, setState] = useState(initialState); state가 원시 데이터타입이 아닌 객체 데이터 타입인 경우 불변성을 유지해줘야함 ⅱ. 함수형 업데이터 함수형 업데이트란? useState를 사용하는 방식에는 함수형 업데이트 방식도 있음 setState의 ()안에 수정할 값이 아니라, 함수를 넣을 수 있음 그 함수의 인자에서는 현재 state를 가져올 수 있고, {} 안에서는 이 값을 변경하는 코드를 작성할 수 있음 // 기존에 우리가 사용하던 방식 setState(number + 1); // 함수형 ..

1. Styled Components ⅰ. CSS -in - Js CSS - in - js 란 자바스크립트 코드로 CSS코드를 작성하여 컴포넌트를 꾸미는 방식 순수 CSS코드를 자바스크립트를 이용해서 CSS 코드를 만들어 내는 것 styled-components란? styled-components는 우리가 리액트에서 CSS - in JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지 패키지란, React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 써드파티 프로그램 패키지들은 누군가에 의해 만들어 진것으로 npm에 모여있음 사용하고자 하는 패키지를 npm install 또는 yarn add 를 통해서 설치할 수 있음 ⅱ. styled-components vscode 터미널에서 아래 명령을..

1. Component ⅰ. Component란? 컴퍼넌트는 리액트의 핵심 빌딩 블록 중 하나 리액트에서 개발한 모든 애플리케이션은 컴포넌트라는 조각으로 구성됨 컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어줌 컴포넌트란 리액트의 핵심 빌딩 블록 중 하나로 UI 요소를 표현하는 최소한의 단위이며 화면의 특정부분이 어떻게 생길지 정하는 선언체! 리액트의 컴포넌트기반 개발 이전에는 브라우저에서 동적으로 변하는 UI를 표현하기 위해 직접 DOM 객체를 조작하는 명령형 프로그래밍 방식으로 구현 => 직접 조작하는 방법(ex. querySelector, id나 class가지고 해당 하는 것을 찾음) 명령형은 어떻게(How)를 중요시 여겨서 프로그램의 제어 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태 선언..

1. State ⅰ. State State란? State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미 State의 목적 - UI(엘리먼트)로의 반영을 위해서 ❓ hook이란? - React에서 제공하고 있는 함수 => React의 api - React안에서 어떤 특정한 기능을 수행하는 것들을 hook이라고 함 State만들기 State를 만들 때는 useState()를 사용 useState() 괄호안에는 초기값을 입력하면 됨 배열 형태로 2가지를 리턴해줌 ex) [state, setState] => 이값을 구조분해할당을 이용하여 useSate로 받게 만듦\ const [count, setCount] = useState(0) // 숫자형 초기값 const [todoList, setTodoList] = us..

1. Virtual DOM React의 장점 중 Virtual DOM Virtual은 말 그대로 가상이라는 뜻이고, DOM은 Document Object Model의 약자로 그대로 해석하면 문서 객체 모델을 의미 문서 객체한 HTML, head, body와 같은 테그들을 JavaScript가 이용할 수 있는 개체를 의미함 div, input, a등이 DOM에 해당됨 ⅰ. DOM이란? DOM(Documet Object Model)은 HTML/XML 문서에 접근하기 위한 인터페이스 브라우저는 HTML 문서를 파싱하여 사용자에게 시각화해 줌 => 여러가지 이유로 브라우저가 띄워주는 HTML 문서에 어떤 동적 처리를 해주고 싶을때, 그 과정을 도와주는 인터페이스가 DOM 대표적인 DOM 규격 중 하나인 W3C ..