rosie

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 ..

❓ git 기본 브랜치명이 master에서 main으로 변경된 이유 Black Lives Matter 운동으로 master/slave 등의 IT에서 사용되는 용어에도 정화가 필요하다는 의식이 생기고 있을때 Github에서 2020년에 레포지토리의 기본 브랜치명을 master에서 main으로 변경됨 ❗ 기존의 레포지토리의 브랜치명 변경(master -> main) git branch -m master main git fetch origin git branch -u origin/main main git remote set-head origin -a 위에 코드를 터미널에 입력시 로컬에 master로 생성된 브랜치설정을 main으로 변경할 수 있다

1. Props란? ⅰ. props란? 컴포넌트 끼리의 정보교환 방식 부모 컴포넌트가 자식컴포넌트에게 물려준 데이터 반드시 기억해야 하는 2가지 props는 반드시 위에서 아래 방향으로 흐름 => 부모 -> 자식 방향으로만 흐른다!!(단방향) props는 반드시 읽기 전용으로 취급하며 변경하지 않음 부모 컨포넌트에서 자식컴포넌트로 props전달 방법 import React from "react"; const Son = () => { return 나는 아들이에요; }; // 부모 -> 자식으로 정보를 전달 const Mother = () => { const name = "흥부인"; return ; }; const GrandFather = () => { return ; }; const App = () => ..

📌 프로젝트명 To-Do-List 📌 프로젝트 설명 기술 매니저님의 권유로 주특기 주차 프로젝트와 관련 없이 만들어본 to-do-list 📍구현하고 싶은 기능 ✔️input - 할일을 입력할 수 있는 input 및 추가 버튼 포함 ✔️출력 - 입력기능을 통해 추가된 요소들을 추가 순서대로 리스팅 됨 ✔️삭제 - 휴지통 아이콘 생성, 아이콘을 누르면 삭제됨 ✔️완료 - 각각 추가된 요소들을 누르면 글자색 연하게 변경하기 📌 코드 링크👇 GitHub - Kang-Gyeongwon/to-do-list-hw: 항해99 주특기 주차 중 숙제 항해99 주특기 주차 중 숙제. Contribute to Kang-Gyeongwon/to-do-list-hw development by creating an account o..

error: failed to push some refs to ....... ❓ 오류 발생 상황과 이유 git push를 하자마자 발생한 error: failed to push some refs to ..... 오류 원격저장소인 github에 내 로컬에는 없는 파일이 있을때 내 파일을 push 하는 순간 발생하는 오류 원격저장소에서 내 로컬에 저장하지 않은 파일을 pull 한 후 원격저장소에 다시 push 해주면 오류가 해결됨!! ⭐해결방법 // 1. pull git pull origin branch # origin - 원격저장소 이름 / branch 설정한 브랜치명 // 2. push git push origin branch 위에 방법을 해도 해결이 나지 않을 경우 git push -f origin #..

error: Command failed with exit code 1 ❓ 오류 발생 상황과 이유 앞에 발생한 window 권한 문제로 yarn install이 되지 않고 발생한 오류를 해결한 후 yarn create react-app 파일명 이라는 명령어를 실행하니 발생한 오류.... 보통은 yarn start npm start로 서버를 시작할 때에 발생하는 에러라고 하는데... 시작은 커녕 build자체가 안되지만 열심히 구글링해서 방법을 따라 해봄..... ⭐해결방법 yarn으로 생성된 모든것을 지우기(내 오류는 생성조차 되지 않았기 때문에 아래의 코드를 실행하니 파일을 찾을수 없다고함...) rm -rf node_modules rm -rf yarn.lock yarn 공유 캐시 파일 지우기 yarn ..