프론트엔드184 리액트 훅(Hooks)과 커스텀 훅(Custom Hooks) 최종 수정 : 2024-06-17리액트 훅(React Hooks)2019년 2월 16.8.0 버전에서 리액트 훅이라는 혁신적인 기능이 등장했다. 'use'라는 접두사가 이름에 들어가는 일련의 함수이며, 반드시 함수 컴포넌트에서만 사용해야 한다. # 리액트 훅 종류용도훅컴포넌트 데이터 관리useMemouseCallbackuseStateuseReducer컴포넌트 생명 주기 대응useEffectuseLayoutEffect컴포넌트 메서드 호출useRefuseImperativeHandle컴포넌트 간의 정보 공유useContext # 리액트 훅의 탄생 배경16.8.0 이전 버전에서 사용자 컴포넌트는 render 메서드를 반드시 구현하는 클래스 기반 컴포넌트 였다. 그런데 클래스에 많은 기능이 숨어 있어 코드가 직관.. 2024. 6. 17. 세션 기반 인증과 토큰 기반 인증의 차이 최종 수정 : 2024-06-15서버(세션) 기반 인증서버 측에서 사용자의 정보를 세션에 저장하여 기억하는 방식으로 메모리, 디스크, 데이터베이스 등을 통해 관리를 한다. ㅇ예를 들어, 로그인을 하면 세션에 사용자 정보를 저장하고 사용자 정보가 필요한 서버를 제공할 때 사용하곤 하는 방식이며, 이를 Statfull 서버라 한다. 서버(세션) 기반 인증은 세션(session)과 쿠키(Cookie)가 사용되며 아래와 같은 인증 절차가 진행된다. # 장점서버에서 세션정보가 관리되므로 상대적으로 안전하다.서버에 세션정보가 있기 때문에 상태 여부를 확인하기 수월하다.# 단점서버 확정서의 어려움이 있다.메모리 / 데이터베이스의 과부화로 성능에 영향을 준다.토큰 기반 인증서버는 인증받은 사용자에게 톸는을 발급, 클라.. 2024. 6. 15. [14week] 최종 수정 : 2024-06-08Q. CORS 에러에 대해 설명하고, 어떻게 해결하면 될지 설명해 주세요.# CORS(Cross Origin Resource Sharing)한 도메인 또는 Origin의 웹 페이지가 다른 도메인을 가진 리소스에 엑세스할 수 있게 하는 보안 메커니즘이다. 이는 동일 출처 정책때문에 등장하게 됐다. 동일 출처 정책?말 그대로 동일한 프로토콜, 호스트명, 포트의 리소스에만 접근하도록 제한하는 정책을 뜻한다. 동일 출처 정책의 경우에 브라우저에서 자동으로 쿠키가 첨부된다는 특징에서 해당 부분이 보안상의 문제를 발생시킬 수 있는 이슈로 생겨나게 되었고 이렇게 등장하게 된 출처 정책으로 인해 CORS가 발생하게 된다. 보안 뿐만 아니라 성능의 문제가 있다.미러 사이트에서 CORSCO.. 2024. 6. 8. Next.js page / layout / template 차이 최종 수정 : 2024-06-07Page말 그대로 페이지를 말한다. 하나의 페이지는 하나의 루트에 단일한 UI를 나타낸다. Layout페이지를 감싸는 레이아웃을 지정한다. 즉, 여러 페이지들이 공유하는 UI이다. 페이지를 이동할 때 리렌더링이 발생하지 않기에 상태를 유지한다. 또한 중첩하여 Layout을 사용할 수 있다. 각 부모 레이아웃은 React children props를 사용하여 자식 레이아웃을 래핑한다. 그러나 부모 자식 간에 데이터를 전달하는 것은 불가능하다. 이에 대해서는 레이아웃은 데이터를 fetch할 수 있다는 점을 활용하여 라우트에서 동일한 데이터를 여러번 fetch 함으로써 해결할 수 있다. React는 자동으로 중복된 요청을 제거하므로 성능에 영향을 미치지 않는다. 가장 최상단에 .. 2024. 6. 7. 환경 변수 최종 수정 : 2024-06-06환경 변수(Environement Variable)환경 변수는 프로그램에서 실행 환경에 따라 다른 값을 지정할 수 있는 변수이다. 꼭 웹 서비스가 아니더라도 데스크톱 프로그램이나 터미널에서도 이런 환경 변수를 많이 활용한다. 꼭 서버와 데이터베이스를 여러 개 쓰는 경우가 아니더라도 데이터베이스 주소와 같은 값을 소스코드에 그대로 쓰는 것은 위험하다. 이를 환경 변수로 사용하는 것이 좋은데, Node.js 환경에서는 이런 환경 변수들을 process.env라는 객체를 통해 참조할 수 있다. Next.js에서 환경 변수 추가하기Next.js에서 기본적으로 dotenv라는 라이브러리를 지원한다. 이 라이브러리는 .env 같은 이름의 파일에서 환경 변수들을 저장해 두면, Node.. 2024. 6. 6. 이전 1 2 3 4 5 6 7 8 ··· 37 다음
