FrontEnd89 JWT 관련 면접 질문 모음 1. Explain the difference between request and response interceptors in Axios.Request interceptor: 요청 보내기 전 가로채서 수정.Response interceptor: 응답 받은 후 가로채서 처리.2. How would you add a custom header to all Axios requests using interceptors?axios.interceptors.request.use(config => { config.headers['Custom-Header'] = 'value'; return config; });3. What is a JWT, and what are its three components?J.. 2025. 4. 26. 토스의 "자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기"를 구현해보기 (3) https://toss.tech/article/frontend-tree-structure 자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기왜 토스증권 PC의 그리드 레이아웃을 왜 직접 구현하게 되었는지, 그리고 어떻게 만들어져 있는지를 이제부터 소개해 드릴게요.toss.tech1. 드래그 앤 드랍시 트리 구조가 변하게 되므로 이를 위한 메서드를 추가해준다.2. 각 컴포넌트에 draggable을 추가해준 뒤 (1)번 포스팅에서 구해놨던 드랍 시 어떤 사분면일지 결정 할 함수를 생성해준다. 3. DnD시 메서드에 따른 DnD 동작이 잘 되는지 확인해준다. (이 떄 DnD와 연관 없는 컴포넌트가 리렌더링 되지는 않는지 확인도 필요) 1. 드래그 앤 드랍시 트리 구조가 변하게 되므로 이를 위한 메서드를 추가.. 2025. 4. 14. 토스의 "자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기"를 구현해보기 (2) https://toss.tech/article/frontend-tree-structure 자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기왜 토스증권 PC의 그리드 레이아웃을 왜 직접 구현하게 되었는지, 그리고 어떻게 만들어져 있는지를 이제부터 소개해 드릴게요.toss.tech1) 레이아웃 노드인 패널과 스플릿트 노드를 제작한다.2) 생성 된 트리를 통해 컴포넌트와 연결한다.1) 레이아웃 노드인 패널과 스플릿트 노드를 제작한다.type LayoutNode = PanelNode | SplitNode;interface PanelNode { type: "panel"; id: string;}interface SplitNode { type: "split"; id: string; le.. 2025. 4. 13. 토스의 "자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기"를 구현해보기 (1) https://toss.tech/article/frontend-tree-structure 자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기왜 토스증권 PC의 그리드 레이아웃을 왜 직접 구현하게 되었는지, 그리고 어떻게 만들어져 있는지를 이제부터 소개해 드릴게요.toss.tech토스의 포스팅에서는 자료구조 이진트리를 활용하여 그리드 레이아웃을 유연하게 그릴 수 있는 혜안을 제시해줬다.이 포스팅을 직접 구현해보기 위해 각각의 단계에 필요한 개념들을 만들어본 뒤 적용해볼려고 한다./** 이후 수정할 계획1. 드래그 앤 드랍을 구현해본다.2. 드랍 할 위치에 있는 콘텐츠를 대각선 2개 그은 뒤 사분면 중 어느 곳에 둘지를 결정하는 함수를 작성한다.3. 드래그 드랍과 사분면 함수를 연결하여 드래그 한 것을 드.. 2025. 4. 9. [RN] xcode 초기 셋팅 시 시뮬레이터가 실행 되지 않을 때 https://de-code.tistory.com/3 Xcode로 ios simulator 사용하기React Native 앱 개발을 하면서 핸드폰으로만 개발상황을 확인하는 게 불편해서 가상 simulator를 설치하게 됐다. Xcode는 Mac OS환경에서만 사용할 수 있다. expo simulator 실행방법 먼저 Xcode앱을 설치한다.de-code.tistory.com해당 블로그에서 제시한 방법 순서대로 진행하더라도 6번째에서 i 키를 누르면 사용가능한 시뮬 앱이 없다는 에러 문구가 터미널에 나온다.지피티한테 물어보니 아래와 같은 에러 원인들을 제시해줬고 나는 첫번째 문제를 통해 해결할 수 있었다.이전에 시뮬레이터에 직접 접근하여 새로운 시뮬 앱을 생성할려고 할 때는 os version 에서 클릭이.. 2025. 3. 27. 모노레포의 공통 ui 컴포넌트에 tailwind 적용 안될 때 (turborepo, tawilwind) 이전 포스팅에서 공통된 tailwind-config을 생성하여 apps/web에 적용시키는 것을 학습하였다.똑같은 방식으로 packages/ui에 컴포넌트를 생성한 후 tailwind 들을 적용시킨 뒤 webs 에서 사용할려고 하는데 공통 컴포넌트에 작성해두었던 tailwind가 먹히지 않는 사례가 생겼다.packages/ui 에 tailwind config도 똑같이 적용시켰는데 안되는 것에 대해 여러 삽질을 해본 결과 apps/web/tailwind.config.ts의 content에 /packages/ui에 있는 요소들에게도 tailwind를 입혀줘야한다고 설정하지 않아서였다.즉, // apps/web/tailwind.config.jscontent: [ "./pages/**/*.{js,ts,js.. 2024. 12. 11. 모노레포로 공통 된 tailwind config를 생성하기(turborepo, next.js, tailwind) - 2024.12.11 기준 turborepo에서 제공하는 with tailwind 옵션을 통해 초기 셋팅을 한다면 tailwind-config가 자동으로 추가되지만 학습 목적을 가지고 기본 셋팅을 통해 추가해 봄. pnpm dlx create-turbo@latest --example with-tailwind( 옵션을 통해 추가하는 방법은 위 cli를 입력해주면 됨. 링크)목적 - 공통으로 쓰일 tailwind config 을 만들어서 각 패키지에 적용시키기turborepo의 공식 문서에서는 패키지 매니저를 pnpm을 추천하여 pnpm으로 진행1. turbo 전역 설치 pnpm install turbo --global2. 초기 셋팅pnpm dlx create-turbo@latest위 명령어를 실행하면 packages 와 apps .. 2024. 12. 11. Next.js에서 data를 받아오는 방식에 따른 장단점 Next.js에서 서버로부터 data를 받아오는 방식으로는 크게 5가지가 있다고 생각한다.서버 컴포넌트에서의 바로 데이터 페칭api/route.ts를 활용한 Route Handlers 사용server actions를 사용SWR 사용React Query 사용각 방식의 특징과 주의점을 우선 살펴본다1. 서버 컴포넌트에서의 데이터 페칭// app/page.tsxasync function getData() { const res = await fetch('https://api.example.com/data') return res.json()}export default async function Page() { const data = await getData() return {data.title}}이 방식을.. 2024. 12. 9. 클로저에 대해 알아보기 with useState 클로저란 실행 컨텍스트와 렉시컬 스코프의 조합으로 함수가 선언 되었을 당시에 환경을 기억하여 상위 스코프내의 변수에 접근 할 수 있게 해주는 문법이다.아래 함수를 실행해보면 10이 출력되는 것을 통해 inner 함수가 상위 스코프인 outer의 _var를 참조하는 것을 알 수 있다.이는 클로저에 의해 접근 가능한 것.const outer = () => { let _var = 10; const inner = () => console.log(_var); inner();};outer(); // 10아래 함수를 예측해보면 어떻게 출력될까const outer = () => { let _var = 10; const setVar = (newVal) => { _var = newV.. 2024. 10. 9. 이전 1 2 3 4 ··· 10 다음
