useEffect 를 알아보기 이전에 rendering이라는 개념 먼저 잡고 가자렌더링이란?- 브라우저 렌더링 : html과 css리소스를 기반으로 웹페이지에 필요한 ui를 그려내는 과정- 리액트 렌더링 : 브라우저가 렌더링에 필요한 DOM트리를 만드는 과정 여기서 DOM이란?React element 들을 HTML body에 둘 수 있도록 하는 것을 말한다. 리액트 앱의 모든 컴포넌트들이 현재 자신들이 갖고 있는 props와 state의 값을 기반으로어떻게 ui를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할지 계산하는 일련의 과정이다. 리액트 렌더링은 언제 일어나는가?-최초 렌더링-useState() 의 두번째 요소인 setter가 실행될 경우-컴포넌트의 props가 변경되는 경우-부모 ..

본격적으로 리액트 프로젝트를 생성해보자 ⦁ 시작 전 필요한 것① node가 깔려 있어야 한다. node -v버전이 잘 출력되면 node 준비완료없다면 설치해야 함 ② npx 커맨드 작동되는지 확인npx 리액트 설치npx create-react-app 프로젝트명리액트 실행npm start package.json 파일 "scripts" 에서 명령어를 확인할 수 있다. "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, prop-types(프롭타입스)라이브러리 설치프롭타입을 검사해주는 라..

Prop Types프롭타입 검사해주는 기능 - 스크립트 추가 - 프롭타입 지정Btn.propTypes = { text: PropTypes.string.isRequired, fontSize: PropTypes.number,} 타입이 맞지 않으면 error - 전체 코드

컴포넌트 render 원리첫번째 버튼(저장)onClick 이 되면 value가 재설정됨value가 바뀔 때(상태가 바뀔 때) 다시 App이 render됨 부모(App)이 state를 변경함App(컴포넌트)의 상태가 바뀌면 다시 render 되는것    ※ 하지만, 하나의 컴포넌트가 천개의 컴포넌트를 그리고 있다고 상상해봤을 때부모의 상태가 변경되었다고 모든 컴포넌트를 re-render하는 것은매우 비효율적이며 속도가 느려지는 원인이 될 수 있다. Memo를 사용하여 수정새로운 버튼만 re-renderconst MemorizedBtn = React.memo(Btn);function App() { const [value, setValue] = React.useState('저장'); const c..

nvm 이란? node version manager로 노드 버전을 쉽게 변경하고 관리할 수 있다.각 프로젝트 별로 요구하는 노드 버전이 다를 수 있기에 nvm을 사용해 프로젝트 별로 노드 버전을 바꿔 사용해주는것이 편리하다.  nvm 설치방법은 추후에 올리도록 하겠습니다 각 프로젝트에서 요구하는 노드 버전을 사용하는 방법1. 프로젝트 파일안에 .nvmrc 파일을 생성한다.mkdir .nvmrc 2. 해당 파일안에 노드 버전을 작성한다. (v는 생략 가능)ex) v12.16.3 3. 사용nvm ls //nvm에 설치 되어있는 노드 버전 확인nvm install // 본인의 nvm에 해당 버전이 없다면 실행nvm use // 해당 버전 사용  참고 https://mong-blog.tistory.com/ent..

네트워크 기능 - 애플리케이션 목적에 맞는 통신 방법 제공 - 신뢰할 수 있는 데이터 전송 방법 제공 - 네트워크 간의 최적의 통신 경로 결정 - 목적지로 데이터 전송 - 노드 사이의 데이터 전송 이러한 통신 기능이 제대로 동작하기 위해서는 참여자들 사이에서 약속된 통신 방법이 있어야 한다. 네트워크 프로토콜 네트워크 통신을 하기 위해서 통신에 참여하는 주체들이 따라야 하는 형식, 절차, 규약 단, 이 모든 기능을 단 하나의 프로토콜로 구현할 수는 없을 것이다. 모듈화(기능별로 분리시켜 구현)가 필요하다. 그래서 나온것! - OSI 7계층 : 범용적인 네트워크 구조 - TCP/IP 4계층 : 인터넷에 특화된 네트워크 구조

컴퓨터와 인터넷을 연결하는 과정! 1. IP 주소 할당 컴퓨터와 인터넷이 연결되기 위해서는 IP 주소가 필요하다. IP 주소란 인터넷에 연결되기 위해 필요한 인터넷 상의 주소이다. 2. 모뎀(modem) 물리적으로는 인터넷 케이블선과 모뎀을 연결시켜줘야 한다. 모뎀이란 네트워크 통신에 필요한 신호 변환 장치이다. 3. 공유기(home router) 모뎀에 공유기를 연결시켜주어야 한다. 공유기 - 여러 기기들을 인터넷에 연결될 수 있도록 하는 장치 - 하나의 IP주소로도 동시에 인터넷을 사용하는 것이 가능 - 공유기에 연결된 기기들은 같은 네트워크 소속 공유기에 여러 기기들을 연결시켜주면 된다. 티비나 컴퓨터, 프린터는 공유기에 유선으로 연결, 스마트폰, 노트북은 와이파이를 통해 무선으로 연결 4. 스위치..

Next.js 에서 font 설정하기 font 설정하는 방법에는 2가지가 있다. 1. 구글 폰트 사용하기 (링크 : https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) 2. Local Font ✔️ Local Font 사용하려는 폰트가 prentandard인데 구글 폰트에 없어서 로컬 폰트로 적용하는 방법을 선택할 수 밖에 없었다. 나는 public 폴더 안에 fonts 폴더를 만들어서 ttf 파일들을 넣어주었다. 그 다음 fonts.css 파일을 생성하여 폰트를 설정해준다. @font-face { font-family: 'Pretendard'; font-weight: 100; font-style: normal; src: u..