프론트엔드 모의면접 질문 정리 + 후기

하 질문을 받자마자 머리가 새하얘져서 아무말이나 했다..입다물고 들어온 문으로 그대로 나가버려 그냥 일단 울자!!! 으허어헝 그래 지금이라도 충격받고 면접 공부 열심히 해야하겠다 오늘 받은 질문 정리 상태 관리를 왜 하고, 평소에 상태 관리를 어떻게 하나요?요약 ) 리액트에서 상태의 역할, 리렌더링, useState  리액트에서 상태 관리는 애플리케이션 UI와 데이터의 동기화를 유지하는데 중요한 역할을 합니다리액트에서는 기존 상태와 변경된 상태를 버추얼 돔을 통해 비교하고 실제 dom에 반영되어 리렌더링이 발생하게 됩니다 저는 가장 기본적으로 useState를 통해 상태관리를 합니다리렌더링의 조건에는 state가 변경이 되거나, props가 변경이되었을 때 리렌더링이 발생하게 됩니다 하지만 useSta..

• format_list_bulleted FrontEnd ✨/CS
• · 2024. 8. 1.
• textsms

[CS] 개발하며 한번쯤은 만나는 CORS 오류 원인과 해결 방법 정리

CORS (Cross Origin Resource Sharing) : 교차 출처 리소스 공유CORS는 서로 다른 출처(origin) 간에 자원을 공유할 수 있도록 해주는 보안 매커니즘이다. 기본적으로 브라우저에서는 보안을 위해 같은 출처에서만 자원 공유를 허용한다 (= SOP)따라서 CORS 오류는 다른 Origin으로 리소스를 요청했을 때 발생한다. 다른 도메인으로 요청을 보내면 cross-origin HTTP 요청에 의해 요청 되며, 요청 헤더에 Origin 필드를 추가한다하지만 대부분의 브라우저들은 보안상의 이유로 cross-origin 요청을 제한한다 이때 SOP로 인한 보안상의 이유가 원인이다. SOP (Same Origin Policy) : 동일 출처 정책해당 정책은 브라우저의 기본 보안 정책..

• format_list_bulleted FrontEnd ✨/CS
• · 2024. 7. 25.
• textsms

tanstackQuery에서 useQuery, useMutation 타입 지정하기

React Query는 서버 상태 관리를 간단하고 효율적으로 할 수 있게 해주는 강력한 라이브러리이다React Query는 제네릭 타입 형식으로 지원하고 있다 그래서 제네릭을 잘 사용한다면 타입을 보장 받으면서 편리하게 데이터를 다룰 수 있다 ! 타입 지정을 안하면, 대부분 unknown, any 타입을 사용하고 있기 때문에 명시적으로 타입을 지정해서 비동기 상태의 타입 안정성을 확보하자 useQueryuseQuery 타입은 아래와 같다export function useQuery TQueryFnData , TError queryFn의 리턴값const { data, error } = useQuery(['todo'], getTodo);// data = number | undefined// error = Ax..

• format_list_bulleted FrontEnd ✨/TypeScript
• · 2024. 7. 23.
• textsms

Next에서 소셜 로그인(카카오 로그인) 구현하기

추후 변경될 수 있지만, 이번에 이메일 로그인 대신에 소셜 로그인을 메인으로 사용하기로 했습니다 가장 많이 쓰는 카카오 로그인을 next 프로젝트에 적용하는 방법을 기록해보겠습니다 (참고로 SSR을 사용하였습니다) 카카오 로그인 서비스 과정로그인은 사용자가 자신을 인증해 서비스에 권한을 인가하는 절차입니다카카오 로그인은 사용자 로그인 완료 시, 보안 데이터인 토큰을 서비스에 발급합니다 카카오dev에서 로그인을 사용할 애플리케이션 등록하기 1. 카카오 로그인 활성화 + OpenId Connect 활성화 2. 앱키 위치 기억해두기supabase에서 연결해야 하기 때문에 일단 위치만 기억해두고 넘어갑니다 3. 동의항목 설정하기필요한 거에 따라 각자 설정하면 됩니다설정하고 나면 위에 '동의 화면 미리 보기'로 ..

• format_list_bulleted FrontEnd ✨/Next
• · 2024. 7. 19.
• textsms

next build 시, router not working 🐛

이번에 next 프로젝트를 하면서 서버 컴포넌트, app rotuer, router handler 등 다양한 개념들을 사용하면서 SSG, CSR을 사용하였다문제 상황정상적으로 빌드가 진행되었는데, 로그인 페이지('/log-in')에서 로그인은 성공적으로 이루어지지만, 홈페이지로 리디렉션이 이루어지지 않는다 (router 사용) 빌드 후, start 했을 때 쿠키는 비어있다 로그인을 진행하면, 정상적으로 토스트가 뜨고 나서 홈페이지로 페이지 이동이 되어야 한다 하지만, 현재 토스트와 헤더에 로그아웃 버튼만 갱신되고, 페이지 이동은 이루어지지 않았다즉, 로그인은 진행되었지만 리디렉션은 진행되지 않았다..! 문제 해결 과정 1.  route handler, middleware, login 메서드에 모두 콘솔을..

• format_list_bulleted FrontEnd ✨/Next
• · 2024. 7. 17.
• textsms

React-Toastify를 처음 써보는 사람의 간단 사용법 정리

생각보다 사용법은 너무 쉬워서 공식문서에서 만드는 것만으로도 사용 가능하다playground에서 만든 걸 붙여넣기하면 된다 구웃 공식문서에서 코드를 빌려보자면, 2가지 조건만 지키면된다.필요 조건1. ToastContainer 를 한번 렌더링한다. (루트에서 렌더링하는 것이 가장 좋다)2. import 'react-toastify/dist/ReactToastify.css'; 로 스타일을 불러와야한다.  import React from 'react'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; // minified version is also included..

• format_list_bulleted FrontEnd ✨/React
• · 2024. 7. 10.
• textsms