코딩 일기장

😎 React에서 리렌더링이 되는 조건 state 변경이 있을 때 전달받은 props 값이 업데이트 되는 경우 부모 컴포넌트가 렌더링 될 때 부모 컴포넌트가 렌더링되면, 모든 자식 컴포넌트를 순차적으로 리렌더링 하게 됨 forceUpdate가 실행될 때 😎 React에서 렌더링 성능 최적화 방법 1. useMemo, useCallback 훅 useMemo와 useCallback에 대한 상세한 내용은 아래에 기재되어 있습니다. 2. React.memo 컴포넌트 메모이제이션 React.memo는 훅이 아니기 때문에 클래스형 컴포넌트에서도 사용할 수 있다. React.memo를 사용하면 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정하여 렌더링 성능을 최적화 할 수 있다. 3. 컴포넌트 맵핑..

스크롤 탑 버튼 기능을 만들면서 마주했던 가장 큰 문제가 NextJS Document is not defined 였다. 위의 문제를 해결하려면 nextJS의 특징을 알아야 한다. nextJS란? nextJS는 React 라이브러리의 프레임워크이다. 가장 큰 이유는 pre-rendering을 통해 SEO(Search Engine Optimization)와 SSG(Static-Site-Generate)을 위한 Server-Side Rendering을 가능하기 때문에 사용한다. 기본 리액트는 Client Side Rendering이므로 웹사이트를 요청했을 때 빈 html을 가져와 script를 로딩하여 첫 로딩시간이 오래걸리고, SEO에 취약하다는 단점이 있다. NextJS를 사용하면 pre-reloading..

저번 파일 업로드에 이어서 이번엔 파일 불러오기 및 다운로드를 구현해보겠습니다! https://peachsoong.tistory.com/67 reactJS + springboot 파일 업로드 구현하기 (1) ✅ 개발 환경 Mac M1 노트북 React + Typescript SpringBoot + JPA - JDK 1.8 / Language Level 8 mySqk 사용 (로컬에서 돌렸습니다) IntelliJ 사용 React와 SpringBoot 환경이 모두 세팅되어 있다는 가정 하에.. peachsoong.tistory.com 기본 세팅 및 업로드는 위의 포스팅을 참고해주세요. ✅ React 코드 구현을 다 하고 나면 이미 저장된 이미지 목록을 확인할 수 있고, 다운로드 버튼을 통해 각 사진을 다운로..

✅ 개발 환경 Mac M1 노트북 React + Typescript SpringBoot + JPA - JDK 1.8 / Language Level 8 mySqk 사용 (로컬에서 돌렸습니다) IntelliJ 사용 React와 SpringBoot 환경이 모두 세팅되어 있다는 가정 하에 시작하겠습니다! 저는 이번에 JPA를 사용해보고 싶어서 사용했습니다 🙂 저는 아래에 첨부된 링크를 참고하여 환경을 세팅했습니다. React는 디폴트 3000번 포트를 사용하였고, SpringBoot는 8082번 포트를 사용했습니다. ✅ JPA란? - JPA는 ORM을 사용하기 위한 인터페이스를 모아둔 것이라고 볼 수 있다. - 자바 어플리케이션에서 관계형 데이터베이스를 사용하는 방식을 정의한 인터페이스이다. 여기서 ORM이란..

https://react.vlpt.us/using-typescript/01-practice.html https://react.vlpt.us/using-typescript/02-ts-react-basic.html 1. 타입스크립트 연습 · GitBook 01. 타입스크립트 연습 타입스크립트에서 가장 기본적인 것들을 연습해보겠습니다. 먼저 새로운 자바스크립트 프로젝트를 생성해보겠습니다. 터미널에서 다음 명령어들을 입력하세요. $ mkdir ts- react.vlpt.us 위의 링크를 참고하여 정리한 게시물입니다. 🙂 함수의 파라미터들에 변수 타입을 지정해주고, 함수의 리턴값에 대한 타입을 지정해준다 아무것도 반환하지 않을 경우 함수의 타입은 void가 된다. function sum(x:number, y:nu..

✅ 리액트 프로젝트 생성 아래의 명령어로 타입스크립트를 사용하는 리액트 프로젝트를 생성한다. npx create-react-app my-app --template typescript 프로젝트 폴더(cd my-app)으로 이동하여 npm start 명령어를 입력한다. localhost:3000 으로 접속하여 리액트 프로젝트가 정상적으로 실행되었음을 확인한다. ✅ 리액트 프로젝트 생성 해당 게시물은 react-router v6버전에 맞게 사용법을 변경하여 작성하였다. 맨 하단의 참고 링크를 들어가면 v5에서 v6로 바뀌면서 어떤 부분들이 바뀌었는지 상세하게 알 수 있다. App.tsx import React from 'react'; import {Navigate, Route, Routes} from 'rea..

✅ React + Nodejs 프로젝트 생성 참고 링크 https://baegofda.tistory.com/210 📞 React + Node.js(Express) 연동하기 (1) 💡 Express ? - Express.js, 또는 Express는 Node.js를 위한 웹 프레임워크의 하나이다. javascript를 이용하여 프론트와 함께 백엔드를 구축하여 서버-클라이언트를 모두 개발할 수 있다. 참고 : Express 개념정 baegofda.tistory.com 위의 React + Node.js 연동하기 (1), (2) 편을 참고하여 기본 환경을 세팅하고 시작합니다. ✅ og tag란? (meta tag, open graph) 카카오톡에 링크를 보냈을때 아래와 같이 링크의 대표 이미지와 대표 설명이 나오..