제로베이스

리액트로 코드를 작성하다 보면 프로퍼티를 읽을 수 없다는 에러를 자주 접할 수 있습니다. null 또는 undefined와 같은 값이 발생할 수 있기 때문에 이러한 값에 대한 처리가 필요한데 이러한 값은 프로퍼티에 접근하거나 프로퍼티의 메소드를 호출하려고 시도할 때 런타임 오류가 발생할 수 있습니다. 이러한 오류를 방지하기 위해 null 또는 undefined와 같은 값에 대한 처리가 필요합니다. 이럴 때 안전하게 코드에 접근하는 방법 중 하나인 옵셔널 체이닝을 사용하면, 옵셔널 값이 undefined 일 경우 발생하는 런타임 오류를 방지할 수 있습니다. 이를 통해 코드의 안정성을 높일 수 있습니다. 옵셔널 체이닝 이란? 옵셔널 체이닝은 객체의 중첩된 프로퍼티 중 하나라도 null 또는 undefined..

useRef를 활용하는 경우는 2가지가 있다. 1. 원하는 돔 요소에 직접 접근할 때 2. 렌더링과 무관한 값을 저장할 때 돔 요소에 직접 접근하기 리액트로 작업하다 보면 돔 요소에 직접 접근해야 할 때가 있다. 예를 들어, 돔 요소에 포커스를 주거나 돔 요소의 크기나 스크롤 위치를 알고 싶은 경우다. 이때 ref 속성값을 이용하면 돔 요소에 직접 접근할 수 있다. import { useEffect, useRef } from "react"; function textInput() { const inputRef = useRef(null); useEffect(() => { inputRef.current.focus(); }, []); return ( 저장 ); } export default textInput; ..

리얼 돔과 버츄얼 돔을 알아보기 이전에 브라우저가 렌더링하는 과정을 알아보자. 웹 페이지 빌드 과정 브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계가 있다. 1. 브라우저는 서버가 보내준 HTML 파일을 파싱하여 DOM 트리를 만든다. 2. 브라우저는 서버가 보내준 CSS 파일을 파싱하여 CSSOM 트리도 만든다. 3. DOM트리 + CSSOM트리를 결합하여 렌더트리를 생성한다. 4. 레이아웃 단계에서는 각 노드의 위치와 크기를 계산한다. 5. 레이아웃 계산이 완료되면 이제 노드들을 실제 화면에 그리는 페인트 작업을 한다. (layer 형식으로 그림) 여기서 문제점은 어떤 인터렉션에 의해 DOM에 변화가 발생하면 그 때 마다 Render Tree가 재생성된다. 즉 ..

리액트 컨텍스트 Context는 한국어로 맥락이라는 뜻이다. 쉽게 말해서 어떤 상황에 대한 정보를 의미한다. Props만으로 리액트 개발을 하다보면 여러 곳에 쓰이는 데이터를 내려주고 싶을 때가 있는데 이때 컴포넌트의 단계가 많다면 여러번 반복해서 Prop을 내려줘야 한다. 이런 문제점을 프롭 드릴링이라고 한다. Context는 프롭 드릴링을 해결하기 위해 사용하는 기능이다. 📍 Context 만들기 Context는 createContext라는 함수를 통해 만들수 있다. import { createContext } from 'react'; const LocaleContext = createContext(); 참고로 이때 아래처럼 기본값을 넣어줄 수도 있다. import { createContext } f..

Nesting은 CSS 규칙안에서 CSS 규칙을 만드는걸 말한다. Styled Components에서 Nesting을 활용하는 두 가지 방법은 & 선택자와 컴포넌트 선택자가 있다. 📍 & 선택자 & 선택자를 사용해서 버튼 컴포넌트를 호버하거나 클릭했을 때 배경색이 바뀌도록 할 수 있다. import styled from 'styled-components'; const Button = styled.button` background-color: #6750a4; border: none; color: #ffffff; padding: 16px; &:hover, &:active { background-color: #463770; } `; export default Button; Nesting에서 &는 부모 선택자를..

📍 인증이란? 인증은 누군가 또는 시스템이 실제로 그 누구인지 또는 시스템인지를 결정하는 과정이다. 인증 기술은 사용자의 자격 증명 정보가 데이터 인증 서버의 자격 증명 정보와 일치하는지 확인하여 인증 절차를 통과한 시스템에 대해 엑세스 제어를 제공한다. 예를 들어, 돈을 인출하기 위해 은행에 간다면 은행원에게 통장과 도장을 제시해야 한다. 경우에 따라서 신분을 확인하기 위해 신분증과 같은 추가적인 정보를 은행원이 요구할 수도 있다. 만약 사용자가 제시한 정보가 은행의 데이터베이스의 존재하는 정보와 일치하지 않으면 은행 업무를 볼 수 없다. 📍 인증의 유형 인증에는 여러가지 유형이 있다. 자격증명 정보로서 사용자 ID와 비밀번호만을 요구하는 방식을 SFA(단일 요소 인증)라고 한다. SFA는 ID와 비밀..

Access 토큰은 갖고 있는 유저에게 특정 권한을 주기 위한 목적으로 사용한다. 사실 아무런 안전장치 없이 단독으로 사용하면 안정성 문제가 생길 수도 있다. 특히 토큰의 만료 기간을 길게 잡으면 토큰을 누군가 가로챘을 때 더 오랫동안 특정 권한을 갖는 유저 행세를 할 수 있다. 그렇다고 해서 만료 기간을 짧게 잡으면 이메일과 비밀번호로 인증을 너무 자주 해야 돼서 귀찮고 위험할 수 있다. 이 문제를 어느 정도 해소하기 위해서 때때로 refresh 토큰이란걸 같이 사용한다. refresh 토큰은 access 토큰이 만료됐을 때, 이메일 비밀번호를 사용하지 않고 access 토큰을 새롭게 발급받는 데 사용되는 토큰이다. 먼저 유저가 로그인을 하기 위해서 리퀘스트로 서버에 이메일과 비밀번호를 보내고, 서버가..

쿠키는 유저 인증뿐만 아니라, 브라우저 이용자에 대한 개인화된 기능과 데이터 제공 수단으로 사용할수 있다. 로그인을 하지 않아도 검색 기록이 저장되거나, 쇼핑 카트를 사용할 수 있다거나, 한번 설정한 라이트와 다크 테마도 유지 되는 경우가 있는데 이런걸 쿠키를 통해 할 수 있다. 하지만 브라우저 사용자가 아닌 다른 사람이 쿠키를 가로채거나 여러 방법들로 악용한다면, 보안 문제가 생길 수 있다. 특히 인증 관련 쿠키가 악용된다면 큰 문제로 이어질 수 있다. 보안 문제를 줄일 수 있는 설정들에 대해서 알아보자. 📍 Secure 첫 번째는 Secure 설정이다. 서버에서 리스폰스를 보낼 때 이 설정을 추가해 주면 HTTP보다 보안에 상한 HTTPS를 사용할 때만 클라이언트에서 서버로 쿠키가 보내진다. HTTP..

📍 Props JSX 문법에서 컴포넌트를 작성할 때 컴포넌트에도 속성을 지정할 수 있다. 리액트에서 이렇게 컴포넌트에 지정한 속성들을 Props라고 부른다. 더 정확히는 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체이다. Props는 Properties의 약자인데 컴포넌트 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫번째 파라미터로 전달된다. App 컴포넌트 import Dice from './Dice'; function App() { return ( ); } export default App; Dice 컴포넌트 import diceBlue01 from './assets/dice-blue-1.svg'; function Dice(props) { console.log..

중괄호 안에서 각 항목을 쉼표로 구분해서 적어주면 된다. 이때 기본값은 0부터 시작하는 정수라는 점에 주의해야 한다. enum Size { S, M, L, XL, } console.log(Size.S); // 0 console.log(Size.M); // 1 console.log(Size.L); // 2 숫자 0은 실수하기 쉽기 때문에 Enum을 사용할 땐 되도록이면 값을 정해놓고 쓰는게 좋다. 이퀄이랑 쉼표를 쓰면 값을 정할 수 있다. enum Size { S = 'S', M = 'M', L = 'L', XL = 'XL', }