내가 보려고 쓰는 기록

https://apis.map.kakao.com/web/ https://react-kakao-maps-sdk.jaeseokim.dev/ 1. index.html에 카카오 API 코드를 복붙한다 2. map.js에 지도를 담을 영역을 만든다 3. 지도를 띄우는 코드를 작성한다 var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스 var options = { //지도를 생성할 때 필요한 기본 옵션 center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표. level: 3 //지도의 레벨(확대, 축소 정도) }; var map = new kakao.maps.Map(container..

만약 부모컴포넌트에 카운트+1 되는 버튼이 있다면 버튼 클릭할때마다 그 안에 있는 자식컴포넌트도 재렌더링됨 자식컴포넌트까지 계속 재렌더링 되버리면 성능이 저하됨 (자식컴포넌트가 무거울수도 있으니까) 내가 꼭 필요할때만 자식컴포넌트 재렌더링 시키고 싶으면? 자식 컴포넌트 만들때 memo 함수 안에 담아서 만들면 됨 memo - 자식 컴포넌트 꼭 필요할때만 재렌더링 1. import memo 2. 자식컴포넌트를 memo 함수로 감싸서 만들음 ● 원래 컴포넌트 ● memo로 감싸서 만든 컴포넌트 memo의 원리 memo는 그냥 재렌더링을 막아주는게 아니라 특정상황에서만 막아줌 부모에게 받은 props가 변할때는 재렌더링됨 부모 컴포에 있는 count state 자식 컴포에 props로 count state 전..

개발자도구 props 보냈는데 출력 안되는 경우, 이미지 경로 잘못되어서 이미지 출력 안나오는 경우 등 버그 생기면 개발자 도구를 확인해서 찾음 but 우리는 컴포넌트로 만드는데 개발자 도구에서는 일반 html로 나옴 컴포넌트 구조를 미리 보고싶으면 크롬 웹 스토어에서 React Developer Tools 설치 개발자도구에 Components, Profiler 탭 생김 ● Components - props, state 등 어떻게 반영되는지 확인 ● Profiler - 성능저하되는 컴포넌트 범인 찾기 컴포넌트 렌더링 시간은 보통 빠름, 대부분의 지연원인은 ajax 요청임 - 서버에서 데이터 늦게오는 경우 lazy import - 메인페이지 로딩 속도 개선 가능 SPA(Single Page Applicat..

서버랑 통신하는 코드를 ajax로 짜다보면 응용기능이 필요해질때가 있음 -ajax 성공시/실패시 각각 html 보여주려면? -몇초마다 자동으로 ajax 요청해서 서버에서 데이터 실시간으로 받으려면? -ajax 요청 실패시 몇초 후 요청 재시도하려면? -다음페이지 미리 가져오고 싶으면? React Query라는 라이브러리 쓰면 위의 기능 사용 가능 React Query가 유용한 분야는 실시간 sns이나 코인거래소 등 실시간 데이터를 계속 가져와야하는 사이트들 그외에는 굳이 필요 없음 React Query 1. 라이브러리 설치 2. index.js 셋팅 서버에서 유저이름 가져와 보여주기 사이트 접속 후 로그인하면 오른쪽 맨위에 유저이름 출력되는 기능 만들기 ● ajax 요청하기 ● react-query 에 ..

개발 하기 전에 배포를 먼저 해서 얻을 수 있는 이점 내가 개발을 했을 때 내 로컬에서는 잘 동작하던게 실제로 배포를 하면 제대로 동작하지 않는 경우가 많음 개발을 다 하고 나서 배포를 하면 어떤 코드때문에 배포 했을 때 문제가 생기는지 늦게 알게 됨 그런데 매일매일 개발 끝나고 바로 배포를 하여 실서버에서 확인한다면 실서버에서 문제가 되는 코드를 훨씬 빨리 파악하고 수정할 수 있음 개발이 끝날때마다 매일 배포하면 너무 번거로우니까 개발 끝나면 자동으로 배포를 할수있게 만들기 서버만들기 1. 프론트엔드, 백엔드가 있어야 하므로 client, server 폴더 만들기 2. git 레파지토리 만들기 (git init) *깃으로 관리하는 저장소 3. client 폴더에 리액트 설치하기 (npx create-r..

왜 브라우저를 새로고침하면 state값이 초기값으로 돌아갈까? → html,js 처음부터 다시 읽기때문에 사이트 재접속해도 state가 남아있게 하고싶으면? → state를 서버로 보내서 데이터 베이스에 영구적으로 저장하고, 필요할때마다 데이터베이스에서 가져오면 됨 근데 서버도 모르고 데이터베이스 만드는 방법도 모른다면? → 차선책 localStorage에 저장해둬도 됨(반영구적 저장가능) localStorage : 브라우저에서 제공하는 반영구적 데이터 저장소 ● 위치 브라우저 → 개발자도구 → Application → Local Storage ● 특징 1. key : value 형태로 저장 가능 2. 최대 5MB까지 문자만 저장 가능 (숫자로 저장해도 문자로 바뀜) 3. 사이트 재접속해도 남아있음(브라..

함수 만드는 3가지 방법 1. 일반적인 방법 function f1(num1,num2){ return num1+num2 } 2. 변수에 함수 담기 const f1 = function(num1, num2){ return num1+num2 } 3. 변수에 화살표 함수 담기 const f1 = (num1,num2) => { return num1+num2 } 4. 변수에 중괄호,리턴 생략한 화살표 함수 담기 *바디안의 코드가 한줄인 경우 생략 가능 const f1 = (num1,num2) => num1+num2

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