본문 바로가기
반응형

분류 전체보기157

[React] React 라이프 사이클 이해하기 + useEffect의 동작 순서 React의 렌더링이란?React 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정을 의미한다. 만약 컴포넌트가 props와 state와 같은 상태값을 가지고 있지 않다면 오직 해당 컴포넌트가 반환하는 JSX 값에 기반해 렌더링이 일어난다. 쉽게 말해, 브라우저 화면에 요소를 보여주는 것을 렌더링이라고 한다.React의 컴포넌트들은 모두 이 생명주기를 가지고 있다. 렌더링 과정mount : 처음 화면에 보여주는 최초 렌더링이다.update : 화면의 요소 하나라도 바뀌면 업데이트 된 것이다. ex) 0 -> 1로 변경unmount : 보여줄.. 2024. 12. 17.
[React] 페이지 이동 시 스크롤 위치가 하단에 있을 때 ScrollToTop 사이드 프로젝트에서 푸터를 만들고 난 뒤하단에 스크롤 위치한 상태에서 다른 카테고리 페이지로 이동하면그 페이지 역시 스크롤이 하단에 위치한 채 렌더링되는 문제가 생겼다. 그래서 렌더링될때 스크롤이 항상 상단에 위치시키기 위한 컴포넌트를 만들었다.import { useEffect } from "react";import { useLocation } from "react-router-dom";function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null;}export default ScrollToTop;"/"와 같은 pathnam.. 2024. 12. 16.
[프로그래머스][스택/큐] 올바른 괄호, 프로세스 javascript 스택은 LIFO: Last in First out 방식으로 마지막 들어온 데이터에 가장 먼저 접근한다.function solution(s){ const answer = []; for(let i=0; i 큐는 FIFO: First in First out 방식으로 먼저 들어온 데이터에 가장 먼저 접근한다.function solution(priorities, location) { let answer = 0; // priorities 배열의 각 프로세스에 대해 { priority, index } 형태로 객체 배열을 만듦 // 이렇게 하면 우선순위와 해당 프로세스의 원래 위치를 추적할 수 있음 const queue = priorities.map((priority, index.. 2024. 12. 14.
React 프로젝트 성능 및 최적화 개선하기 사이드 프로젝트를 어느 정도 마무리하고 성능을 확인해봤는데 ....... 왜이리 점수가 짜나요....랜딩페이지와 디자인에 힘을 많이 주는 프로젝트라 이미지 최적화가 시급했다.최적화 방법을 찾아보던 중 코드 스플리팅을 주로 사용한다는 것을 알았다.아래는 개선 전 코드 .. import { createBrowserRouter } from "react-router-dom";import App from "../App";import Home from "../pages/home";import Login from "../pages/auth/components/Login";import Signup from "../pages/auth/components/Signup";import Recipes from "../pages.. 2024. 12. 12.
[프로그래머스 Lv.1] 로또의 최고 순위와 최저 순위 function solution(lottos, win_nums) { // 0의 개수와 일치하는 숫자 개수 계산 const zeroCount = lottos.filter(num => num === 0).length; const matchCount = lottos.filter(num => win_nums.includes(num)).length; // 순위를 계산 const getRank = (count) => (count >= 2 ? 7 - count : 6); // 최고 순위와 최저 순위 계산 const maxRank = getRank(matchCount + zeroCount); const minRank = getRank(matchCount); ret.. 2024. 12. 12.
[프로그래머스 Lv.1] [1차] 다트게임 javascript function solution(scoreStr) { const scores = []; // 각 세트의 점수를 저장할 배열 const regex = /(\d{1,2})([SDT])([*#]?)/g; // 점수, 보너스, 옵션 추출하는 정규표현식 let match; // 입력된 문자열에서 각 세트를 추출 while ((match = regex.exec(scoreStr)) !== null) { let [_, point, bonus, option] = match; // 추출된 점수, 보너스, 옵션 let score = Number(point); // 점수를 숫자로 변환 // 보너스(S, D, T)에 따른 점수 제곱 적용 if (bonus === 'S') score **= 1; /.. 2024. 12. 11.
[프로그래머스 Lv.1] 실패율 javascript function solution(N, stages) { var answer = []; let totalPlayers = stages.length; // 전체 사용자 수 let failureRates = []; // 실패율을 저장할 배열 // 각 스테이지별 실패율 계산 for (let i = 1; i stage === i).length; // i번 스테이지에 멈춰 있는 사람 수 let failureRate = notCleared / totalPlayers; // 실패율 계산 failureRates.push({ stage: i, rate: failureRate }); // 실패율과 스테이지 저장 totalPlayers -= notCleared.. 2024. 12. 10.
[모던리액트 Deep Dive] 11장 Next.js 13과 리액트 18 11.1 app 디렉터리의 등장Next.js 12버전까지는 페이지 공통 레이아웃을 유지하려면 _app을 사용하는 것이 유일했다. 이 방식은 제한적이고 각 페이지별로 다른 레이아웃을 유지하는 방법이 부족했다. 이를 극복하기 위해 나온 것이 app 레이아웃이다./** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: true, experimental: { appDir: true, //이 옵션을 experimental 아래에서 활성화해야 한다. },}module.exports = nextConfig Next.js 13.4.0 버전 이하라면 next.config.js에 위와 같이 옵션을 활성화해야 app기반 라우팅을 사용할 수 .. 2024. 12. 10.
[모던 리액트 Deep Dive] 10장 리액트 17과 18의 변경 사항 살펴보기 10.1 리액트 17 버전 살펴보기리액트 17버전은 16버전에서 더 추가된 기능은 없고 기존에 사용하던 코드의 수정을 필요로 하는 변경 사항을 최소화했다는 점이 가장 큰 특징이다. 10.1.1 리액트의 점진적인 업그레이드16에서 더 이상 호환되지 않는 API가 있거나 새로운 리액트 17을 사용하는 데 있어 이전과 작동 방식이 달라질 수 있기 때문에 단행된 주 버전 업데이트다.전체 애플리케이션 트리는 리액트17이지만 일부 트리와 컴포넌트에 대해서는 리액트18을 선택하는 점진적인 버전 업이 가능해진다. 한 애플리케이션 내에 여러 버전의 리액트가 존재하는 경우 예제 659p리액트 17 애플리케이션은 내부에서 리액트 16을 게으르게(lazy) 불러온다.불러오는 과정에서 리액트 16을 위한 별도의 루트 요소를 만.. 2024. 12. 9.
[9장 발표] 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기 9.1 Next.js로 리액트 개발 환경 구축하기 9.1.1 create-next-app 없이 하나씩 구축하기npm init//package.json을 만드는 CLI를 실행할 수 있다.npm i react react-dom next//핵심 라이브러리인 react, react-dom, next 설치npm i @types/react @types/react-dom eslint eslint-config-next typescript --save-dev//devDependencies에 필요한 패키지를 설치 9.1.2 tsconfig.json 작성하기 9.1.3 next.config.js 작성하기poweredByHeader- 보안 취약점으로 취급되는 헤더를 제거한다.- 웹서버에서 사용되는 프로그램 엔진 정보가 노출될.. 2024. 12. 8.
[프로그래머스 Lv.1] 옹알이(2) javascript function solution(babbling) { var answer = 0; const words = ["aya", "ye", "woo", "ma"]; // 조카가 발음할 수 있는 단어 목록 // 각 단어에 대해 처리 babbling.forEach(babble => { let isValid = true; // 유효한 발음인지 체크 let prevWord = ""; // 이전에 발음한 단어를 저장 while (babble.length > 0 && isValid) { let found = false; for (let word of words) { if (babble.. 2024. 12. 6.
[프로그래머스 Lv.1] 덧칠하기 javascript 너무 어렵게 생각해서 잘 안 풀렸는데 다른 분 코드를 보니 이제 보인다 ....ㅎㅎ다른 사람 풀이function solution(n, m, sections) { var answer = 0; var painted = 0; for(var section of sections) { if(painted 2024. 12. 6.
반응형