내가 보려고 쓰는 기록

즐거운 부산 앨범 2탄 이오리다 해운대 오면 꼭 먹어야 하는 진짜 정말 완전 인생 크레이지 전복죽 맛집 바다마루 전복죽 진짜 안좋아하는데 여기서 깨달았다 난 전복죽을 좋아함 밑반찬도 맛있어서 같이먹으면 눈물 전날엔 흐렸는데 다음날엔 엄청 맑아졌다 갈매기 자세히 보면 바다보고 멍때림 단체멍 아힛 찍지마세연 맑은눈 아니고 그냥 광인 다리 이메다 해운대에 카카오프렌즈도 있다 그림자놀이 삽가능 사진 오만장 찍음 이흿 먼일로 정상적인 사진을 찍을리 만무 광안리로 넘어가서 소품샵도 쭈루룩 구경해주고요 재밌꾸요 광안리에 소품샵 많아서 아주 절거웠다 숙소에 짐풀고 영도에 밀면 먹으러 사연있어보임 흰여울마을에 예쁜카페 진짜 많았다 택시에 목도리 두고내려서 목도리 새로 사심 ^-^.. 너가 따뜻하다면 언닌 그걸로 만족해 ..

state 변경함수를 store.js 안에 만들면 컴포넌트는 store.js한테 수정함수를 실행해달라고 부탁하는 개념 store state 보관하는 장소로, state를 객체형식으로 저장 store 안에 state 변경함수 만들기 reducers : { } 열고 안에 함수 만들면 됨 - 변경함수 작명은 마음대로 (useState에서 변경함수 작명시 set붙인것처럼) - 함수의 파라미터인 state는 함수의 초기값 - 변경함수안에서 return문에 state 변경값 입력하면 그 값이 state의 변경값 이제 setUser( )쓸때마다 'kim' - > 'join kim'으로 변함 다른 컴포넌트에서 쓸 수 있게 내보내기 export .actions라고 적으면 만든 변경함수 export 됨 컴포넌트에서 변경함..

🟠 리액트를 사용하는 이유 1.버츄얼 돔 사용해서 불필요한 렌더링을 최소화 2. 컴포넌트 사용하여 블럭처럼 사용가능하고 가독성이 높음 3. JSX 확장 문법 사용으로 개발자가 코드짜기 편함 4. 다른 프레임워크와 라이브러리 함께 쓰기 편함 🟠 Rest API 란 - http에 요청을 보낼때 어떤 uri를 사용할지, 어떤 메소드를 사용할지에 대한 약속 Rest API는 주소만으로도 대략 이게 뭘하는 요청인지 파악 가능 컴퓨터의 기능을 실행시키는 명령 내컴터아니고 남의 컴터 api : 컴퓨터의 기능을 실행시키기는 방법 ex) 파이선은 print('hello world'), 자바스크립트는 document.write('hello world') 기계와 기계가 웹을 통해 통신할수 있게 돕는 통신 규칙 웹의 통신규약..

브라우저 랜더링 과정 (브라우저 동작 방식) 먼저 브라우저에 렌더링 엔진이 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과정을 통해 브라우저..

git flow란 git 브랜치 전략! 크게 5개의 브랜치를 사용 메인브랜치는 master, deveolp 보조브랜치는 feature release, hotfix 가장 큰 원칙 master와 develop 브랜치를 구분 하는 것 메인브랜치 master 현재 배포할 수 있는 코드들이 있는 브랜치, 바로 실행 가능한 상태를 유지 develop 실제 일상적인 개발은 진행되는 곳, 개발자들이 다음 버전을 실시하기 위해 사용하는 브랜치, 실행가능한 상태를 만들어가는 과정을 진행하는 브랜치 보조브랜치 - 메인브랜치와 다르게 사용을 마치면 삭제함, 필요에 의해 사용 feature : develop으로 부터 생성됨, 기능 구현하기 위해 사용, feature에서 개발을 완료하고 develop으로 merge한 후 삭제 r..

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