HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 3기 교육생/
📚
3기 스터디 가이드/
🧑‍💻
CS 학습 및 면접대비 스터디 /
🏖️
학습주제 고르는 공간
🏖️

학습주제 고르는 공간

✨
아래 포스팅을 참고해서 학습주제를 고릅니다. - 면접질문 포스팅 (메인) - 면접질문 우선순위 (참고) - 리액트 질문
 

학습하고 싶은 주제들

면접대비로 공부해야하는 지식인데, 혼자하기 너무 많으니까 서로 쪼개서 공부하고 공유합시당
알고싶은 주제들 자유롭게 적어주세요 ~~
  • Rest api
상태관리 라이브러리 - redux (왜 필요하고, 어떤 컨셉인지)
props driling 방법
리액트 - 메모이제이션
크로스 브라우징
웹사이트 성능 최적화에는 어떤 방법이 있나요?
useEffect가 동작하는 방식?
requestAnimationFrame
  • next
  • react-hook-form
Vue와 React 차이
ES6의 Arrow 함수를 언제, 왜 사용하는지
CORS 대처 방법 및 우회하는 방법
 
 
알고리즘
  • 시간 복잡도, 공간 복잡도(big O)
  • 재귀(DP), 반복문

알고리즘

준비 가이드: 동작 원리, js 구현 코드, 복잡도(시간, 공간), 언제 사용하는지 예시와 함께 설명
  • https://okky.kr/articles/673648
  • 문자열 탐색(보이어무어, KMP) ⇒ 지원
  • 정렬 알고리즘(버블, 선택, 삽입 등)
    • 퀵, 힙, 병렬, 계수 ⇒ 은지
    • 선택, 버블, 삽입, 기수 ⇒ 천욱
  • 최단 경로 알고리즘(다익스트라 알고리즘, 벨만-포드 알고리즘, 플로이드-워셜 알고리즘) ⇒ 예지
  • 최소 비용 신장 트리 알고리즘(프림, 크루스칼) ⇒ 수화
 
 
notion image
운영체제

운영체제

  • 프로세스와 스레드 → 프로세스(수화) | 스레드(은지)
    • 프로세스와 스레드의 개념과 차이
    • 컨텍스트 스위칭
    • 멀티스레드.. → 동기화 문제
    • PCB
    • 공유 자원과 임계 영역
  • 프로세스 동기화 (천욱)
    • 교착상태(데드락, Deadlock)의 개념과 조건
    • 뮤텍스와 세마포어의 차이
  • 중앙처리장치(CPU) 작동 원리 (예지)
    • CPU 스케줄링 : 비선점형 방식, 선점형 방식
  • 가상 메모리(페이징, 세그먼테이션)
  • 페이지 교체 알고리즘
  • 리눅스 유닉스
  • 메모리 (구조, 캐시-L1,L2,L3.., 계층성)
  • 입출력
    • 인터럽트
    • dma
  • 동기, 비동기, 블로킹, 논블로킹
  • 데이터 버스
네트워크 / FE지식 / Web
 
프론트엔드 개발자 기술면접 인터뷰 질문 모음(업데이트)
프론트엔드 기술면접 실제현업 질문 모음 최근 1년 간 프론트엔드 면접을 7번 정도 본 것 같다. 국내 IT 대기업 N사만 여러번, K사, 온라인쇼핑몰 C사 등등 여러군데를 면접을 진행했으며 비록 떨어졌지만 여러모로 좋은 경험을 하였습니다. 프론트엔드 엔지니어를 꿈꾸는 시니어 주니어 엔지니어들에게 면접을 진행하기전 필수적으로 알아야 할 질문과 마음가짐에 대해서 공유해보려고 합니다.
프론트엔드 개발자 기술면접 인터뷰 질문 모음(업데이트)
https://realmojo.tistory.com/300
프론트엔드 개발자 기술면접 인터뷰 질문 모음(업데이트)
지금까지 받았던 신입 프론트엔드 면접 질문들
새로운 회사에서 최종 합격 결과를 받게 되었다. 그동안 면접에서 받았던 질문들을 공유해보려고 한다. 짧게 돌아보자면... 나는 경영정보학과 출신 비전공자이고, 항해 99 부트캠프를 수료했다. 그리고 약 7 ~ 8개월 정도 혼자서 더 공부하다가 올해 8월에 졸업했고, 본격적인 입사 지원을 시작했다. 10월에 작은 스타트업에 합류했지만 재정난으로 인해 11월까지 근무하고 퇴사했다.
지금까지 받았던 신입 프론트엔드 면접 질문들
https://velog.io/@arthur/%EC%A7%80%EA%B8%88%EA%B9%8C%EC%A7%80-%EB%B0%9B%EC%95%98%EB%8D%98-%EC%8B%A0%EC%9E%85-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%A9%B4%EC%A0%91-%EC%A7%88%EB%AC%B8%EB%93%A4
지금까지 받았던 신입 프론트엔드 면접 질문들
GitHub - gyoogle/tech-interview-for-developer: 👶🏻 신입 개발자 전공 지식 & 기술 면접 백과사전 📖
👶🏻 신입 개발자 전공 지식 & 기술 면접 백과사전 📖. Contribute to gyoogle/tech-interview-for-developer development by creating an account on GitHub.
GitHub - gyoogle/tech-interview-for-developer: 👶🏻 신입 개발자 전공 지식 & 기술 면접 백과사전 📖
https://github.com/gyoogle/tech-interview-for-developer#-web
GitHub - gyoogle/tech-interview-for-developer: 👶🏻 신입 개발자 전공 지식 & 기술 면접 백과사전 📖
Interview_Question_for_Beginner/FrontEnd at master · JaeYeopHan/Interview_Question_for_Beginner
HTML 마크업을 처리하고 DOM 트리를 빌드한다. ("무엇을" 그릴지 결정한다.) CSS 마크업을 처리하고 CSSOM 트리를 빌드한다. ("어떻게" 그릴지 결정한다.) DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성한다. ("화면에 그려질 것만" 결정) 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산한다. ("Box-Model" 을 생성한다.) 개별 노드를 화면에 페인트한다.(or 래스터화) Reference 웹에서는 수많은 이벤트(Event)가 발생하고 흐른다.
Interview_Question_for_Beginner/FrontEnd at master · JaeYeopHan/Interview_Question_for_Beginner
https://github.com/JaeYeopHan/Interview_Question_for_Beginner/tree/master/FrontEnd
Interview_Question_for_Beginner/FrontEnd at master · JaeYeopHan/Interview_Question_for_Beginner
책 리스트
  • 네트워크
    • http 완벽 가이드 (있는 사람: 예지) ← 추천: 로토님, 나영멘토님
    • 입문자용은 아님
      • 성공과 실패를 결정하는 1%의 네트워크 원리
      • 해킹 입문자를 위한 TCP/IP 이론과 보안 2/e
  • 이펙티브 타입스크립트 (있는 사람: )
  • 리팩터링 2판 (있는 사람: 수화)
 

네트워크

  • http, https 통신 - 암호키..? (수화)
    • http 메소드
  • CORS (천욱)
    • 프록시
  • 네트워크 보안 - XSS, CSRF 등등(은지)
    • 대응 방법
    • JWT
    • 유효성 검증
  • OSI 7계층(예지)
 

FE

  • JS
  • TS
  • React
  • Next.js
  • HTML/CSS
 

Web

  • 브라우저
  • 웹 접근성
  • 브라우저 검색창에 url 입력시 나타나는 일
  • 웹스토리지, 쿠키, 세션
  • 웹서버랑 WAS 차이
     
     
     
    (번외) 작년 라인필기
    • 캐시, TLB, fully associative, set associative 개념
    • 멀티스레드, 동기화 문제 해결
      • 락인 코드(C?) → 락인 코드의 동작원리
        • 임계영역이 길거나 짧을 때의 차이
        • 락인할 때 락을 1증가시킴.. 그래서 세마포어로 생각하고 풀었는데.. 단일 코어일 때, CPU 효율성 괜찮다? 멀티 코어일 때, 임계 영역이 짧으면 CPU 효율성이 괜찮다? 이런 선지였음
      • (보기) 마이클 바가 뮤텍스, 세마포어 기법을 해석함 ⇒ true
    • 메모리 구조
      • 스택, 힙
    • I/O DMA - direct memory access
      • 시스템 버스
      • 데이터 통신할 때, CPU 도움 필요없다?
      • 데이터를 통신한 후, 인터럽트를 보낸다?
        •  
    FE 1주차.

    브라우저에 url 입력 시 일어나는 일

    DNS (명재)
    http, https / http 1.1 vs http 2.0 / (web 2.0 vs web 3.0 차이) (천욱)
    브라우저 → 웹서버 (수화)
    웹서버 → 브라우저 (은지)
    브라우저 - html 파싱과정(dom생성) (민형)
    FE 2주차
    js 엔진이 자바스크립트 실행하는 방법
    실행컨텍스트에 대한 학습 + 세부주제에 초점!!
    • 실행컨텍스트
      • 호이스팅 (명재)
      • this (천욱)
      • 클로저 (민형)
      • 스코프체인 (수화)
      • 프로토타입 (은지)
    FE 3주차, 비동기 1/30(월)
    • 비동기 진화패턴 흐름(민형)
      • 콜백, promise, async-await
    • 비동기를 받는 과정(웹 api → 테스트큐/마이크로테스크큐 → 콜스택)
      • 제너레이터
    • 멀티스레드 / 싱글스레드 -
    FE 4주차, js
    이벤트 버블링, 캡처링 -
    브라우저 저장소 - 쿠키, 세션, 토큰, 스토리지 -
    var let const -
    csr vs ssr (spa, mpa) -
     
     
     
    FE 5주차, js
    이터러블, 이터레이터 프로토콜
    seo
    리액트 - 라이프사이클
    리액트 - Hooks -
     
    FE 6주차
    리액트 특징 - 가상돔
    react-query 컨셉 - 캐싱
    context, recoil -
    RESTful API (GET, POST, PUT…) -
     
     
    FE 7주차 - 플젝할 때 필요한 무기
    • 비제어 컴포넌트, 제어 컴포넌트
    • suspense, error-boundary
    • Generic 제네릭 -
      • utilty type 선언 정의
    • 함수, 컴포넌트, 파일, 폴더 등의 명확한 기능과 역할 -