본문 바로가기

분류 전체보기137

[모던 리액트 Deep Dive] 14장 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈 14.1 리액트에서 발생하는 크로스 사이트 스크립팅(XSS) 웹사이트 개발자가 아닌 제3 자가 웹사이트에 악성 스크립트를 삽입해 실행할 수 있는 취약점을 의미한다.script 가 실행될 수 있다면 웹사이트 개발자가 할 수 있는 모든 작업을 함께 수행할 수 있으며, 쿠키를 획득해 사용자의 로그인 세션 등을 탈취하거나 사용자의 데이터를 변경하는 등 각종 위험성이 있다. 14.1.1 dangerouslySetlnnerHTMLprop특정 브라우저 DOM 의 innerHTML을 특정한 내용으로 교체할 수 있는 방법이다.dangerouslySetlnnerHTML은 오직 __ html 을 키를 가지고 있는 객체만 인수로 받을 수 있으며, 이 인수로 넘겨받은 문자열을 DOM에 그대로 표시하는 역할을 한다. 그러나 이 .. 2024. 12. 24.
[이벤트참여][항해99] 내가 심은 잔디로 기부를 할 수 있다고?! 커밋 남발해서 얻은 내 잔드덜 ......ㅎㅎㅎ 9월에 쉬느라 뻥 뚫린거 보며 마음 아파가지구 열심히 채우고 있었는데 드뎌 잔디의 쓸모를 찾았다 !  https://hanghae99.spartacodingclub.kr/campaign 개발자 커리어 개척 캠프 항해99 | 잔디 기부 캠페인세상의 성장에 기여하세요hanghae99.spartacodingclub.kr항해99에서 진행하는 기부 캠페인으로12월31일까지 진행하는데 깃허브 계정 연동하면 내 잔디를 자동으로 가져와서 잔디 수만큼 기부된다고 한다!   기부하면 이렇게 기부증서라며 파일도 다운로드된다 ㅋㅋㅋㅋ 기획력 넘모 좋고만렙은 몇일까? 내 잔디갯수 나쁘지 않은데?ㅎㅎㅎ참여하신 다른 분들도 짱짱맨 짱짱걸 ~  연말에 블로그쓰랴 스터디하랴 프로젝트하랴.. 2024. 12. 23.
[모던 리액트 Deep Dive] 13장 웹페이지 성능을 측정하는 다양한 방법 13.1 애플리케이션에서 확인하기13.1.1 create-react-appreportWebVitals .ts 파일의 reportWebVitals 함수는 웹에서 성능을 측정하기 위한 함수다. 각각 누적 레이아웃 이동( CLS) , 최초 입력 지연(FID) , 최초 콘텐츠풀 페인트(FCP) , 최대 콘텐츠 페인팅 (LCP) , 첫 바이트까지의 시간(TTFB)을 측정하는 용도로 사용된다. 이러한 지표의 측정을 가능케 하는 것은 web-vitals 라이브러리 덕분이다. PerformanceObserver 라는 API 를 사용하는데 브라우저에서 웹페이지의 성능을 측정하기 위해 사용된다.  ReportHandler는 단순히 성능 객체인 Metric 를 인수로 받는 함수 타입으로, Metric 을 원하는 대로 다룰.. 2024. 12. 21.
[모던리액트 Deep Dive] 12장 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표 12.1 웹사이트와 성능웹사이트의 성능은 어떻게 측정할 수 있을까?구글은 핵심 웹 지표(Core Web Vital)라고 하는, 웹사이트의 우수한 사용자 경험을 제공하는 데 필요한 몇 가지 핵심적인 요소를 꼽고 이에 대한 지표를 제시하고 있다. 12.2 핵심 웹 지표료란?구글에서 만든 지표로, 웹사이트에서 뛰어난 사용자 경험을 제공하는 데 필수적인 지표를 일컫는 용어다. 최대 콘텐츠풀 페인트(LCP: Largest Contentful Paint)최초 입력 지연(FID: First Input Delay)누적 레이아웃 이됨 CLS: Cumulative Layout Shift)아래 두 가지는 핵심은 아니지만 특정 문제를 진단하는데 사용한다.최초 바이트까지의 시간 (TTFB : Time To First Byte).. 2024. 12. 20.
[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.