내가 보려고 쓰는 기록

브라우저 랜더링 과정 (브라우저 동작 방식) 먼저 브라우저에 렌더링 엔진이 html 코드를 읽고 파싱(분석)하여 ① DOM tree 생성 css파일이나 html에 inline으로 작성된 style코드를 파싱하여 DOM + CSSOM => ② CSS DOM 생성 이렇게 만들어진 DOM tree와 css DOM을 결합하여 render tree가 만들어짐 render tree는 문서에 시각적인 구조를 나타냄 ③ Layout(reflow) - 뷰 포트 내에서 생성된 render tree의 각 노드들이 스크린 상에 어느 공간에 위치해야할지 결정됨(position, size 등이 여기서 계산 되는 것) ④ Paint(repaint) - 위에서 구성된 레이아웃을 실제로 화면에 그리는 repaint과정을 통해 브라우저..

var - scope(해당 값을 사용할 수 있는 코드 영역)이 함수단위, 함수 안에서 선언되었어도 함수 밖에서 쓸 수 있음 동일 변수명 사용 가능 let - 동적인 값을 담을 수 있는 변수를 선언할 때 사용(재할당 가능), 동일 변수명 못씀 const - ES6 문법에서 새로 도입되었으며 한번 지정하고 나면 변경이 불가능(재할당 불가능), 동일 변수명 못씀 const, let은 scope이 함수 단위가 아닌 블록 단위로 함수 안에서 선언되었다면 함수 밖에서 쓸 수 없음 const, let은 같은 블록 내부에서 중복 선언 불가능 ES6 문법에서 var 사용할 일은 없음 let은 한번 선언한 후 값이 유동적으로 변할 수 있을 때만(예:for문, useState) 사용하고 const는 한번 설정한 후 변할 일..

Redux 쓰는 이유 - props 없이도 편리하게 state 공유 가능해서! Redux store안에 모든걸 넣을 필욘 없음, 컴포넌트간 공유가 필요없는 state는 그냥 useState로 만드는게 나음 Redux store에 state 보관하는 법 - state 생성 후 등록 1. state 생성 import createSlice 한 후 createSlice( ) 안에 state와 같은 이름의 변수 만들고 { name : 'state이름', initialState : 'state의 초기값' } 넣으면 state 하나 생성되는 것 createSlice( )와 useState( ) 용도 비슷하다고 생각하면 됨 2. state 등록 import configureStore 한 후 configureStore ..

Redux Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리 이거 설치하면 js 파일 하나에 state들을 보관할 수 있는데 그걸 모든 컴포넌트가 직접 꺼내쓸 수 있음 컴포넌트 많아질수록 state 가져오기 복잡스러워서 Redux 사용하면 귣 Redux 설치 store store는 state들을 관리하는 장소로, state들이 객체 형식으로 저장됨 Redux 셋팅 1. src폴더 안에 store.js 파일 만들어서 아래 코드 복붙 1 2 3 4 5 import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: { } }) Colored by Color Scripter cs 2. ..

전환 애니메이션은 1. 애니메이션 동작 전 className을 css에 만들기 2. 애니메이션 동작 후 className을 css에 만들기 3. className에 transition 속성 추가 4. 원할 때 애니메이션 동작 후 className 부착시키기 이 순서대로 코드를 짜면 된다. 1. 애니메이션 동작 전 className을 css에 만들기 2. 애니메이션 동작 후 className을 css에 만들기 3. className에 transition 속성 추가 transition은 해당 속성이 변할 때 서서히 변경시켜 주세요 라는 뜻이다. 원하는 div 요소에 start 을 넣어두고 end를 탈부착시키면 전환 시 transition 효과를 줄 수 있다. 4. 원할 때 end 부착시키기 tap state..

1. html, css 탭 디자인 미리 완성하기 리액트 부트스트랩에서 그대로 가져오면 된다. 2. UI의 현재 상태를 저장할 state 하나 만들기 버튼0 / 버튼1 / 버튼2 누르면 각각 내용이 보여야 하므로 state 상태를 0, 1, 2 숫자로 설정한 후 해당 버튼 누를시 state 값 변경되게 설정한다. 3. state에 따라서 UI가 어떻게 보일지 작성 ex) state가 0이면 버튼0 내용 보여주세요 state가 1이면 버튼1 내용 보여주세요 state가 2이면 버튼2 내용 보여주세요 삼항연산자로 만들어보기 **삼항연산자는 안타깝게도 연달아서 여러개 쓸수 없어서 중괄호 또 열어서 만들어야된다. 뭔가 복잡 일반 if 조건문 삼항연산자로 조건 여러개 만들면 복잡하므로 if조건문 쓰는게 더 효율적이..

서버에서 데이터를 받아오기도 하지만 데이터를 보낼 때도 있음 서버로 데이터 전송하는 POST 요청 axios.post('/url', { key : "value" }) 원래 서버와 데이터 주고받을 때 문자만 주고받을 수 있음 array/object 형태는 못 주고받는다는 뜻 근데 위에서 계속 주고받지 않았음? array/object 주고받을때 따옴표 쳐놓으면 문자로 인식해서 가능 "{"name":"kim"}" → JSON이라고 함 JSON은 문자 취급받기 가능해서 데이터 맘대로 주고받을 수 있음 ajax가 JSON 형태로 받아온 데이터를 알아서 array 형태로 변환해줌 굳 만약 ajax 요청을 여러곳에서 하고싶으면 ?

React Hooks중 가장 중요한 useEffect - 코드가 딱 한번만 실행될 수 있도록 해줌 mount - 화면에 첫 렌더링 update - 다시 렌더링 unmount - 화면에서 사라질때 특정작업을 하는 코드를 실행하고 싶다면 useEffect 사용하는 것 useEffect 2가지 형태 있음 인자로 콜백함수만 받는 형태 useEffect (( ) => { // 작업 }) 컴포넌트 매번 랜더링 될때 마다 실행 인자로 콜백함수, 배열 받는 형태 useEffect (( ) => { // 작업 }, [value] ) - 컴포넌트가 화면에 첫 렌더링 될때 - value 값이 바뀔때 실행 인자로 받은 배열이 빈배열일때 useEffect (( ) => { // 작업 }, [ ] ) 컴포넌트가 화면에 첫 렌더링..