전체 글 (21) 썸네일형 리스트형 [React + TS] react-router 사용해 페이지 라우터 적용하기 1. 라이브러리 설치하기npm install react-router-dom @types/react-router-dom 2. src > index.tsx 파일에 App 컴포넌트 BrouserRouter 컴포넌트로 감싸주기BrouserRouter 컴포넌트는 웹앱에 HTML5의 History API를 사용해 페이지를 새로 불러오지 않고도 주소를 변경하고 현재 주소의 경로와 관련된 정보를 리액트 컴포넌트에서 사용할 수 있도록 해준다.import React from "react";import ReactDOM from "react-dom/client";import "./index.css";import App from "./App";import reportWebVitals from "./reportWebVitals".. [React] 리액트 훅 - useRef useRefuseRef는 리액트 훅의 한 종류로, Ref는 reference(참조)의 줄임말이다. useRef의 용도useRef의 용도는 크게 값을 저장할때와 DOM에 접근할때 2가지로 나뉜다.1. 값의 저장리액트에서 값을 저장할때 useRef를 사용하며 다음과 같이 사용할 수 있다.const 변수명 = useRef(초기값) // 반환값 {current: 0}위처럼 사용하면 현재 값을 나타내는 current속성을 가진 객체가 반환된다.리액트에서는 useRef외에도 useState를 사용하거나 일반 변수(let, const)를 사용해서 값을 저장할 수 있는데useRef는 이 두 방식과 다음과 같은 차이를 보인다. useRef와 useState의 차이useState는 값이 변경될 때 화면이 재렌더링 되지만.. [Next.js 14] styled-component 사용 시 "className did not match" 에러 styled-component를 사용하는데 className did not match 에러가 발생했다. 에러 로그에도 나와 있듯이 서버에서 렌더링 된 className과 클라이언트에서 렌더링 된 className의 불일치로 인해 발생하는 에러였다.위 에러로 인해서 첫화면 렌더링시에는 css가 안먹히다가 코드 수정 후 저장해 재렌더링 했을 경우에만 먹히는 이슈가 발생했다.검색해보니 Next.js에서 styled-component를 사용하기 위해서 서버와 클라이언트의 스타일 일치를 보장하기 위한 추가 설정이 필요하다고 한다.1. next.config.js 설정 추가next.config.js 파일에 styledComponent 를 활성화해준다.const nextConfig = { compiler: { .. git hook 설정으로 코드 포맷팅 자동화하기 with Husky 지난번에 eslint와 prettier의 설정방법에 대해 포스팅 했다.이번 포스팅에서는 husky를 사용해서 git hook을 간편하게 설정해 코드 포맷팅을 자동화 하는 방법에 대해 알아본다. Git Hook 이란?특정 액션이 일어났을 때 커스텀 스크립트를 실행 할 수 있도록 하는 기능이다. git 하위 디렉터리에 포함되어 있기 때문에 별도 설치 없이 git init 명령어를 입력하면 .git/hooks 디렉토리가 생성되고이 안에는 깃훅의 종류와 예시 스크립트가 포함되어 있다.이미 git과 연동이 되어있는 경우에는 cd .git/hooks 를 통해 hooks 폴더에 들어가면 볼 수 있다.코드 포맷팅 자동화를 위해서는 이중에서 커밋과 푸시되기 전에 실행되는 pre-commit 훅과 pre-push 훅을 .. [WEB] 웹의 렌더링 방식(CSR, SSG, ISR, SSR)과 Next.js의 Hybrid Rendering Next.js를 공부하기 전에 웹의 렌더링 방식에 대해 알면 좋을 것 같아 정리해본다.웹에서 렌더링이란?HTML, CSS, JS 등과 같이 개발자가 작성한 문서를 서버로부터 응답 받아 화면에 그려주는 동작을 말한다.렌더링하는 주체가 무엇인지, 언제 렌더링을 하는지에 따라 렌더링 방식이 달라진다.Client Side Rendering (CSR)렌더링 하는 주체자가 클라이언트 즉, 브라우저인 렌더링 방식이다. 렌더링 과정은 다음과 같다.1. 사용자가 홈페이지 접속 시 클라이언트가 서버에게 웹페이지를 요청한다.2. 서버에서 빈 HTML을 먼저 전달해준다.3. 서버에서 번들파일(JS)을 전달받는다.4. 클라이언트 측에서 응답받은 코드를 DOM 요소로 변환하는 렌더링을 진행한다. 장점👍- 로딩이 한번 완료되고 .. ESLint, Prettier의 차이 + 설정 방법 어렴풋이 알고 있던 ESLint와 Prettier에 대해 이번 포스팅에서 제대로 알아보려 한다.둘 다 코드의 규칙을 정해주어 협업할 때 일관성 있는 로직 작성을 도와주는 것이라고는 알고 있는데,정확히 둘의 차이는 무엇이며, 어떻게 사용하는 것일까? 🤔ESLintESLint는 자바스크립트 코드에서 발견되는 문제시되는 패턴들을 식별하기 위한 정적 코드 분석 도구이다. ESLint에 대해 검색하면 가장 자주 보이는 문장이나, 와닿지가 않기 때문에 예시 코드로 알아보자.// function 키워드 사용function foo() { ...}// arrow function 사용const foo = () => { ...} 위 예시코드 처럼 함수를 생성할 때 누군가는 function 키워드를 사용하고, 누군가는 화.. [모던 리액트 Deep Dive 스터디] 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈 웹사이트의 성능만큼이나 중요한 것 → 웹사이트의 보안프론트엔드에서 해야 할 일이 많아질수록 프론트엔드의 보안 위험성이 증대되고 있다.그렇다면, 프론트엔드 개발자가 신경 써야 할 다양한 보인 이슈는 무엇이 있을까?리액트에서 발생하는 크로스 사이트 스크립팅 (XSS)크로스 사이트 스크립팅(Cross-Site Scription, XSS)란 웹사이트 개발자가 아닌 제 3자가 웹사이트에 악성 스크립트를 삽입해 실행 할 수 있는 취약점을 의미한다.사용자가 글을 작성했습니다.예를 들어 사용자가 위처럼 게시글을 작성했다면, 위 글 방문 시 script도 실행되어 window.alert도 함께 실행된다.이렇게 script에 대한 별도의 조치가 없어 실행된다면 웹사이트 개발자가 할 수 있는 모든 작업을 함께 수행할 수 있.. [모던 리액트 Deep Dive 스터디] 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표 단순히 버그 없이 웹 서비스를 운영하는 것도 중요하지만 사용자가 쾌적하게 이용하는 것도 중요하다. 이러한 웹 서비스의 성능을 객관적으로 평가할 수 있는 지표인 핵심 웹 지표에 대해 알아보자.웹사이트의 성능사용자가 웹사이트 접속 시 공통적으로 기대하는 사항웹사이트를 방문한 목적을 손쉽게 달성하기방문 목적을 달성하는데 걸리는 시간 최소화 하기웹사이트에서 개인정보가 누출되는 등의 사고 없이 보안이 철저하기또한 웹사이트의 성능은 다음과 같은 요소에 영향을 미친다.사이트의 로딩 속도는 전자 상거래 전환율에 막대한 영향을 미친다.소비자의 70%는 페이지 속도가 사이트 방문에 영향을 미친다고 말했다.절반에 가까운 사람들은 빠른 로딩속도가 보장되어 있으면 애니메이션과 동영상은 필요없다고 밝혔다.이처럼 많은 사용자들은 .. 이전 1 2 3 다음
