분류 전체보기

Hoisting (호이스팅) 이란?

Hoisting 이란? 공사장이나 엘리베이터 같은 곳에 사용되는 리프트 휠 등을 이용해서 물건을 들어올리거나 내리는 장치를 Hoist 라고 한다. 이 호이스트 장치를 사용하는 것 처럼 Hoisiting 이란 변수 선언과 함수 선언이 그 범위에 따라 선언된 위치에 상관없이 항상 최상위로 끌어올려지는 것 처럼 동작하는 것을 말한다. 대표적으로 var 키워드로 선언된 변수는 호이스팅이 발생한다. console.log(a); // undefined var a = 1; let, const 키워드로 선언된 변수는 호이스팅이 발생하지 않는 것처럼 보인다. console.log(a); // ReferenceError: a is not defined let a = 1; 발생하지 않는 것 처럼 보이는 이유는 TDZ 라는 ..

[ React ] Recoil 이란

Recoil 이란? Recoil 은 많은 상태 관리 라이브러리 중 하나로, Facebook 에서 만든 상태 관리 라이브러리입니다. Facebook 은 React 를 만든 회사이기 때문에, React 에서 사용하기 쉽도록 만들어졌습니다. 가장 중요한 개념은 atom 과 selector 입니다. atom 은 하나의 상태를 의미하고, selector 는 atom 의 상태를 기반으로 계산된 상태를 의미합니다. Atom Atoms는 상태의 단위이며, 업데이트와 구독이 가능하다. atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링 된다. Atom 은 상태의 단위입니다. 해당 Atom 의 상태가 변경되면, 해당 Atom 을 구독하고 있는 컴포넌트들은 다시 렌더링 됩니다. 또 여러 개의 ..

[ Front ] 클라이언트 사이드 라우팅 ( Client Side Routing )

Client Side Routing이란? Client Side Routing은 클라이언트에서 라우팅을 처리하는 방식입니다. 서버에서 라우팅을 처리하는 방식은 Server Side Routing이라고 합니다. 보통 SPA에서는 Client Side Routing을 사용합니다. 동작 과정 : HTML 다운로드 -> JS 다운로드 -> JS 실행 -> Data Fetch -> Content Rendering Client Side Routing의 장점 Lazy Loading 지원 클라이언트 사이드 렌더링은 사용자에 행동에 필요한 부분만 읽기 때문에 빠른 인터렉션 가능 page 전체를 요청하지 않고 필요한 부분만 요청하기 때문에 트래픽 감소 Client Side Routing의 단점 SEO에 불리 (검색엔진이 S..

[ React ] Next.js

Next.js에 대해 간단히 설명 Next.js는 React 기반의 프레임워크입니다. React 는 기본적으로 Client Side Rendering만 지원합니다. 하지만 Next.js는 Server Side Rendering을 지원하기 때문에 SEO에 유리합니다. Next.js의 특징 Server Side Rendering 지원 기본적으로 리액트는 CSR만 지원하기 때문에 SEO에 유리하지 않습니다. 하지만 Next.js는 SSR을 지원하기 때문에 SEO에 유리합니다. Dynamic Routing 지원 Next.js는 폴더 및 파일 시스템 기반의 라우팅을 지원합니다. Code Splitting 지원 첫 페이지가 로딩되는 시간을 줄이기 위해 코드 스플리팅을 지원합니다. 페이지를 이동할 때마다 필요한 코드..

[ React ] Portal 이란 무엇인가

Portal이란? 게임이나 영화등에 나오는 물체를 순간이동 시키는 신기한 공간을 만들어내는 것을 포탈이라고 하죠. React 에서 사용하는 포탈도 비슷한 개념입니다. 부모 요소 밑에 있는 자식 요소를 부모 요소보다 더 위로 보내주는 역할을 하는 Portal 을 알아봅시다. Portal 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법 입니다. import React from "react"; const App = () => { return ( 안녕하세요 리액트 포탈 ); }; export default App; import React from "react"; const Portal = ({ children }) => { return ReactDOM.createPo..

[ React ] XSS, CSRF 공격이란

XSS (Cross Site Scripting) XSS는 웹사이트 취약점 공격의 일종으로, 사용자가 입력한 내용이 웹사이트에 그대로 반영되는 취약점을 이용하여 악의적인 스크립트를 삽입하는 공격입니다. XSS 공격에는 크게 Stored XSS와 Reflected XSS 그리고 DOM-based XSS가 있습니다. XSS 공격의 종류 Stored XSS -- 저장형 XSS XSS 취약점이 있는 웹 서버에 악성 스크립트를 입력해두고 방문자가 해당 페이지를 읽는 순간 방문자의 브라우저를 공격하는 방식이다. 일명 저장 방식이다. Reflected XSS -- 반사형 XSS 특정 파라미터 값을 통해서 공격하는 방식으로 검색, 에러메시지, URL 등 사용자로부터 입력한 값을 받아 브라우저에게 응답할 때 전송되는 방법..

[ React ] React Hook Form 이란

React Hook Form이란? React 에서 Form 의 validation 을 쉽게 할 수 있도록 도와주는 라이브러리입니다. 전체 폼이 리렌더링 되지 않으면서, 각각의 입력값 변화를 관찰할 수 있기에 성능도 빠르고 의존성도 적습니다. 설치 yarn add react-hook-form 을 통해 설치할 수 있습니다. 간단한 예제를 통해 사용법을 알아보겠습니다. React-Hook-Form import React from "react"; import { useForm } from "react-hook-form"; const App = () => { const { register, handleSubmit, errors } = useForm(); const onSubmit = (data) => consol..

[ React ] 메모이제이션 (Memoization) 이란

메모이제이션이란? 메모이제이션은 프로그래밍에서 이전에 계산한 값을 메모리에 저장해두고, 다음번에 같은 계산을 다시 하려고 할 때 이전에 계산한 값을 그대로 사용하는 기법을 말합니다. (동적 계획법의 한 종류) 마치 메모를 적어두고, 다음에 같은 계산을 할 때 메모를 보고 계산을 생략하는 것과 같습니다. 메모이제이션을 사용하는 이유 메모이제이션을 사용하는 이유는 동일한 계산을 반복할 때, 이전에 계산한 값을 재사용하기 때문에, 연산 속도를 높일 수 있습니다. N번째 피보나치 수를 구하는 함수를 예로 들어보겠습니다. const fibonacci = (n) => { if (n < 2) return n; return fibonacci(n - 1) + fibonacci(n - 2); }; 이 함수는 n이 1이 될..

[ React ] React Fragment 란

React Fragment 란 React 에서는 여러개의 컴포넌트를 렌더링 할 때, 하나의 부모 컴포넌트로 감싸야 합니다. 하지만, 이런 부모 컴포넌트는 불필요한 DOM 요소를 추가하게 됩니다. 이런 경우에 사용하는 것이 React.Fragment 입니다. import React from "react"; const App = () => { return ( 안녕하세요 리액트 ); }; export default App; 또는 다음과 같이 React.Framgment 를 생략하고 사용할 수 있습니다. import React from "react"; const App = () => { return ( 안녕하세요 리액트 ); }; export default App; 이렇게 사용하면, 불필요한 DOM 요소를 추가..

[ Redux ] Redux 란 무엇인가?

Redux 란? Redux 란 JavaScript 상태 관리 라이브러리 중 하나입니다. (Flux 아키텍처를 구현한 라이브러리) Redux = React + Flux Pattern Flux Pattern 이란? Flux Pattern 은 MVC 패턴의 단점을 보완하기 위해 Facebook 에서 만든 아키텍처입니다. MVC 패턴은 Model 에서 데이터가 정의되고, View 에서 데이터를 보여주고, Controller 에서 데이터를 조작합니다. 그런데 만약 어플리케이션이 규모가 커져서 이런 구조를 사용하게 되면, 데이터의 흐름이 복잡해지고, 데이터의 흐름을 추적하기 어려워집니다. 이러한 문제를 해결하기 위해 Flux Pattern 을 사용합니다. Flux Pattern 의 구조 Action : Action..