HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 3기 교육생/
📚
3기 스터디 가이드/
취뽀스터디
취뽀스터디/
프론트엔드 전반
프론트엔드 전반
프론트엔드 전반

프론트엔드 전반

5/9
민재
재관
CORS:
staleTime 기본값이 0 이라 설정하지 않으면 캐싱이 안일어나지 않나?
nextJS 동작방식
천욱
  • CORS란? 해결방법은? - 면접관이라면 더 꼬리질문 있을것같은데..
  • SPA, MPA - 차이 설명 좋았습니다!
  • CSR, SSR - 약간 설명이 부족한 느낌이 들었어요. Next로 추가 질문이 이어질 수 있어서 공부하면 좋을듯! (물론 나도)
  • 쿠키 세션 - 세션 방식 맞게 답한듯! 데이터 저장위치가 쿠키는 브라우저, 세션은 서버라고 더 말해주면 좋을것같아요
  • JWT - 본인이 했던 파트라서 그런지 설명 잘 해준것같습니다!
재관
민재
  • 프로젝트 초기 설정, 스펙 정한방법
  • 도전한 툴들
  • 브라우저 렌더링
  • CSR, SSR
  • 인증, 인가 - 인증은 신원을 확인, 로그인, 회원가입 같은거 인가는 로그인한 사용자가 어떤 서비스에 접근이 가능한가 권한을 확인
  • 성능 측정, 크기 제한 굳굳
  • 크로스 브라우징 - 브라우저 엔진을 언급한거 좋았음, 기본 CSS 설정들이 조금씩 다르다.
  • 리플로우 리페인트 어려웡..
  • 크로스 사이트 스크립팅 설명해준거는 CSRF랑 가까운걸
  • XSS CSRF
천욱
  • 브라우저 렌더링 과정 -
  • CSR, SSR -
  • 인증 인가 - 정확한 답변 x
  • CORS란?
    • 공통 출처?? 교차 아닌가욥?
    • 출처에 대해 아는가??
    • <문제> http://localhost와 동일 출처인 url은 무엇일까요? 모두 고르세요
        1. https://localhost
        1. http://localhost:80
        1. http://127.0.0.1
        1. http://localhost/api/cors
        정답
        2, 4
        1번 - https와 http가 다름
        2번 - http의 기본 포트는 80이고 생략이 가능하기 때문에 동일출처!
        참고로 https의 기본 포트는 443
        3번 - localhost의 ip는 127.0.0.1이 맞긴하지만 브라우저는 문자열 값으로 비교를 하기 때문에 “localhost”와 “127.0.0.1”이 서로 다르기 때문에 다른 출처다
        4번 - api/cors는 추가적으로 붙는 location이다. 즉, Protocol(https,https)과 Host(localhost)와 Port(80, 443)만 같으면 동일 출처!
  • 리플로우와 리페인트란? (몰라서 물어봄)
    • 발생조건? 언제 일어나는가? - 맞는 답변인건가? 찾아봐야겠다
  • XSS란? - 악의적인 사용자가 클라이언트에 악성 스크립트를 넣어서? 브라우저를 악용하는것..? 맞나?
  • SEO란? - 검색 엔진 최적화
  • 본인이 했던 경험? - Next를 사용했다 → 그럼 React는??
    • 구글 크롤링봇이 빈 html을 크롤러 할 수 있다?! wow
천욱
민재
  • rest API: 몇가지 설계 규칙이 있다는 점도 말해주면 좋을듯 나도 외우진 못했지만..
  • 장점: 유연성, 확장성, 독립성 근데 설명잘했음ㅎㅎ
  • vite: 조금 자신감이 없게 느껴졌는데 잘 설명해줬다고 생각함, 편리함은 초기 세팅이 간편했다고만 해도 좋을듯함!
    • - cra는 웹팩 저절로 세팅되지않나요..?
  • prettier eslint 이게 은근 준비안하면 말하기 힘들더라..
  • 굳굳 디펜던시 설명 좋았음
  • 나눠서 설치한 것: 내가 생각할땐 react query devtool 그런거 설치했다고 말하는게 좋을듯
  • 성능 측정: 라이트하우스, 점수도 좋지만 밑의 시간초들로 나오는 내용들을 확인하고 수정해야할 점을 생각한다고 하면 베스트일듯
    • 데이터Dog
  • 허스키:
  • 리코일: 잘 설명해준듯
재관
rest:
vite가 뭐임?
왜씀?
뭐가 좋음? 빌드 속도, 편리한점?
그래서 esbuild는 뭔데?
prettier, eslint?
  • eslint - 문법 오류 잡고
  • prettier - 포맷팅 (코딩 컨벤션 위주)
package deps 차이
나눠서 설치해본거 뭐있음?
왜 그랬음?
허스키:
  • github hook으로, commit을 하기 전에 커밋 컨벤션을 확인하여 오류를 던져주고
    • eslint와 다른 점은 똑같이 오류를 던져주지만 eslint는 에러가 나도 커밋이 가능하고, husky는 커밋이 불가능합니다.
리코일:
 
 
5/12
민재
재관
  • 랜더링 과정에서 레이어는 뭔가요?
  • bfs: 코드 쓸 수 있음?
  • axios 인스턴스 왜 만듬?
    • fetch랑 axios랑 뭐가 다름?
    • fetch에는 Interceptor 없음? ⇒ 그냥 물어본거임 ㅋㅋ 자신감 있게 말하면될듯
  • restAPI : rest : Representational State Transfer(REST)는 API 작동 방식에 대한 조건을 부과하는 소프트웨어 아키텍처입니다.
천욱
  • 주소창에 URL을 입력시 일어나는일은? -
  • 브라우저 렌더링 과정 - good
  • 리플로우, 리페인트 - 오 간략하고 좋았음!
  • bfs - 최단경로! 미로탐색?
  • TanStack-Query 사용하면서 어려운 점과 해결 - 나도 막상 생각하려면 생각 잘 안나는듯.. 러닝커브가 크다는걸 말하는게 맞는건가
    • query key 관리 전략은 어떻게 하셨나요??
  • REST API - 쪼꼼 부족한듯!
재관
민재
  • script 태그 async/defer DOM이 완성된 시점 둘이바뀐느낌이구만..
  • 폰트 woff!
  • 에러 바운더리: 굳굳
  • TCP/UDP: 확인하는 알고리즘 때문에? 신뢰성이 높으면 느리다?
  • gitflow: 굳굳
  • 에자일: 프로그래밍 설계론
  • 서버리스: 좋습니다
  • 객체지향 프로그래밍:
      • notion image
천욱
  • url입력시 일어나는 일 - 좋은 답변같아요!
  • TCP, UDP - 더 들어가서 꼬리질문한건데 되게 잘 알고있어서 놀랐음!
  • 그놈의 에자일 -
  • 객체지향 프로그래밍이란 - 간략하게 대답하는게 더 좋네
    • 장단점 - 단점이 없을까?
  • 선언형 명령형 그걸 물어본거였구만
천욱
민재
  • jwt:
  • 객체 지향: 패러다임
  • useReducer - 최적화와는 조금 다를듯!
  • 무한스크롤: 오우 이런것도 할줄 안다구~?
  • vite: 리렌더링마다..
재관
  • jwt 토큰이 머임?
      • 장/단: (쿠키와 비교)보안성 / 단점(보안) 읭?
  • 객체 지향이란?
  • useReducer? - 상태가 많아 질 때 유용하게 사용하는 hook
  • API 자체를 수정해봤다. 여기에 대해서 더 물어볼 수 도 있을듯? (난 사실 wumo 보고 물어본거임 ㅋㅋ)
  • vite?
    • esm module? 모듈 시스템이다. 까지만 말해도됨.
    • 빠른거 어케암?
      • 번들되는 과정 이라고해야하나? → 뭐가 빠른건지 정확하게 모르네? 라고 생각할지도.