내가 보려고 쓰는 기록

만약 부모컴포넌트에 카운트+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..

서버와 클라이언트 >> 서버와 클라이언트 관계 - 클라이언트가 서버로 요청(request)보냄 - 서버는 요청을 처리 - 처리 후 클라이언트에 응답(response)보냄 서버에게 주도권있어서 서버가 정해준대로 클라이언트가 따라감 클라이언트 - req(요청) 서버 - res(응답) 만약 /list 페이지로 접속했을때 DB에 저장된 데이터들을 꺼내서 보여주고 싶으면? ejs 라이브러리 사용 *ejs - html을 쓰기 쉽게 도와주는 라이브러리 ejs 1. 라이브러리 설치 npm install ejs 2. server.js 파일 상단에 코드 작성 app.set('view engine','ejs'); 3. list.html을 list.ejs로 이름 바꾸고 views 폴더를 만들어서 그 *안에 넣기 * ejs는 ..

API 소프트웨어가 다른 소프트웨어로 부터 지정된 형식으로 요청, 명령을 받을 수 있는 수단 ex) 날씨를 알려주는 다양한 웹사이트들, 앱들은 모두 기상청 서버에 데이터를 요청하고 그 데이터를 받아감 즉 서버와 웹, 앱들 사이에 정보들 요청되고 전송되는 것 웹, 앱들이 서버에 정보를 요청할때 지정된 형식이 있는데 그 지정된 형식을 API 라고함 기상청에 date:191023|place:seoul|which:temperature 주소 입력해서 데이터를 요청하면 17deree 라고 데이터 줌 이렇게 정해진 메뉴얼이 있으면 누구든 이 메뉴얼을 참조해서 기상청 정보를 활용하는 소프트웨어를 만들 수 있음 REST API - 주소 정하는 규칙 - 자원에 어떤 조작(CRUD)을 할지 HTTP 메소드로 나타냄 - 서버..

왜 브라우저를 새로고침하면 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