본문 바로가기

TIL63

[ React ] React.memo 카운터로 React.memo 연습하기. 리렌더링 발생 조건 컴포넌트에서 state가 바뀌었을 때 컴포넌트가 내려받은 props가 변경되었을 때 부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두 리렌더링 된다. App.jsx import './App.css'; import { useState } from 'react'; import './App.css'; import Box1 from './components/Box1'; import Box2 from './components/Box2'; import Box3 from './components/Box3'; function App() { console.log('App 컴포넌트가 렌더링되었습니다.'); const [count, setCount] = us.. 2023. 2. 6.
[ TypeScript ] js 파일 ts로 변환 using-ts.js 파일을 using-ts.ts 파일로 바꾸니 아래와 같이 VScode에서 빨간 줄이 생겼다. const button = document.querySelector("button"); const input1 = document.getElementById("num1"); const input2 = document.getElementById("num2"); function add(num1, num2) { return num1 + num2; } button.addEventListener("click", function() { console.log(add(input1.value, input2.value)); }); ! 와 HTMLInputElement 추가 const button = docume.. 2023. 2. 2.
[ Next.js ] Data Fetching (CSR vs SSR vs SSG vs ISR) CSR vs SSR vs SSG vs ISR Client-Side Rendering (CSR) 브라우저에서 HTML file을 로드하면, Javascript를 이용하여 웹 브라우저에서 rendering 하는 방식이다. Ex. ReactDom.render 함수. Server-Side Rendering (SSR) 브라우저에서 해당하는 페이지를 접속하면, 그 순간 서버에서 html을 App server에서 렌더링 해서 전달해 주는 방식이다. ⛔️ 단점: 페이지를 요청할 때마다 렌더링 하기 때문에 오래 걸린다. Static-Site Generation (SSR) 페이지를 요청할 때마다 서버에서 렌더링 한다. 정적인 페이지를 제공하려고 할 때는 그럴 필요 없이 빌드할 때 렌더링하고 페이지를 요청할 때 이미 렌더링.. 2023. 2. 1.
[ Next.js ] Link, Dynamic Routes Next.js란 무엇이고, 왜 사용할까? 특징 개발 환경 설정이 쉽고 간단하다. SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원한다. 초기 로딩 속도 개선을 위한 자동 code splitting(코드 분할)을 지원한다. Next.js 프로젝트 시작하기 npx create-next-app 기본 구조 및 기능 개발 모드와 프로덕션 모드 // package.json ... "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, ... dev - next dev 개발 모드로 프로젝트를 실행 Hot reloading 등.. 2023. 1. 31.
[ KTP ] CSS 프로젝트 회고 Clone-Coding Share Space 프로젝트 기간: 2022.1.6 - 2022.1.12 프로젝트 S.A. KEEP 1. 노션을 활용한 프로젝트 관리 프로젝트 일정, 기능 개발, 참고자료 등 꼼꼼한 문서화를 통해 현재 작업하고 있는 것, 상태 등을 바로바로 기록해서 누가 뭘 하고 있는 지 한 눈에 확인 할 수 있게 했던 것, 반복해서 하는 작업이나 공통 부분은 페이지 별로 정리해서 확인할 수 있게 했던 것 2. Git flow로 작업 진행 Main, dev, feature로 브랜치를 나누고 feature는 기능별로 브랜치를 계속 생성해서 dev에 병합하며 작업했는데 기능에 따라 브랜치를 나누니 한 눈에 파악하기도 쉬웠고 작업하기 훨씬 편리했다. 3. PR 시 화면 공유를 통해 기능 구현 한 것 .. 2023. 1. 30.
[ TypeScript ] 보호되어 있는 글 입니다. 2023. 1. 27.
[ React ] 하나의 modal로 버튼에 따라 다른 내용 출력하기 modal 창 하나로 수정 버튼에 따라 그에 맞는 내용이 modal 창에 뜨게끔 구현을 해보았다. MyPage.jsx - 수정 버튼 import EditModal from '../../components/MyPage/EditModal/EditModal'; import { Fragment, useEffect } from 'react'; import { MyPageContainer, MyInfoContainer, MyPageTagTitle, MyInfoInput, MyInfoEditButton, NickNameContainer, GithubContainer, MyPageTabsContainer, InputCheckContainer, } from './style.js'; const MyPage = () => .. 2023. 1. 24.
[ TypeScript ] TypeScript 설치 및 파일 생성 새로운 파일 만들기 mkdir todolist-typescript typescript 파일 생성 npx create-react-app 파일이름 --template typescript Run Project npm start Firebase와 연결 npm install firebase 2023. 1. 21.
[ React Query ] 게시물에 따른 comments 업데이트 React Query에서 데이터가 만료되었다는 뜻은? 데이터 refatching 실행에는 만료된 데이터 외에도 여러 트리거가 있다. 컴포넌트가 다시 마운트 되거나 윈도가 다시 포커스 되었을 때 만료된 데이터일 경우에만 refatching이 실행된다. staleTime translates to ‘max age’ 데이터가 만료됐다고 판단하기 전까지 허용하는 시간. 웹사이트에 표시된 데이터가 10초까지는 그대로여도 괜찮다면 staleTime을 10초로 설정한다. staleTime의 기본 값이 0인 이유 데이터는 항상 만료 상태이므로 서버에서 다시 가져와야 한다고 가정한다는 뜻이다. 게시물에 따른 comments 업데이트 문제: 게시물에 따른 comments가 업데이트 되지 않는다. 첫 번째 게시물의 comme.. 2023. 1. 21.
728x90

티스토리툴바