👨‍💻 Web Dev

1. Problem Solving

Solving algorithm problems with your favoriate language.

DBA

배열(Array)

스택 (Stack)

큐 (queue)

트리(Tree)

맵(Map)

해시(Hash)

그래프(Graph)

정렬(Sorting) 알고리즘

탐욕법(greedy)

이진탐색 알고리즘

백트레킹

DFS:깊은 우선 탐색 알고리즘

BFS 알고리즘

DP(다이나믹 프로그래밍)

최단 경로

투 포인터 알고리즘

누적합 알고리즘

---

2. Coding Assignment

반응형 웹 구현(Responsive)

state와 props를 통한 컴포넌트간 데이터 바인딩

CSS 스타일링(CSS Modules, Sass/Scss, Styled-components 등)

REST API를 통해 비동기로 데이터 불러오기

Component Life Cycle

최적화 방법(Lazy Loading 등)

state management libraries(React : Redux, MobX / Vue : Vuex)

To-do List

---

3. Coding Interview

3-1. HTML

쿠키(Cookies)와 세션저장소(sessionStorage)와 로컬저장소(localStorage)의 차이점을 설명해주세요.

정답은?

script, script async와 script defer의 차이점에 관해 설명해주세요.

정답은?

3-2. JavaScript

• [callback, promise]
• sync vs Async
• [callstack, event loop, Execution Context]
• ES6: Promise
• [Prototype]

3-3. Framework - React

• What is redux?

🧩 TypeScript

Testing & Clean Code

📓 Database

🌐 Network

🔗 useful articles

Google FE dev interview questions or read the repo i attached

JaeYeopHan/Interview_Question_for_Beginner

gyoogle/tech-interview-for-developer

JS Interview

HTML Questions | Front End Interview Handbook

baeharam/Must-Know-About-Frontend

sudheerj/javascript-interview-questions

yjs03057/33-js-concepts

React

adam-golab/react-developer-roadmap

sudheerj/reactjs-interview-questions

appear/reactjs-interview-questions-ko

10 Common Data Structures Explained with Videos + Exercises https://www.freecodecamp.org/news/10-common-data-structures-explained-with-videos-exercises-aaff6c06fb2b/

Data structures and algorithms in JS https://www.youtube.com/watch?v=t2CEgPsws3U&t=2221s

algorithms-in-motion https://www.manning.com/livevideo/algorithms-in-motion

https://www.youtube.com/watch?v=t2CEgPsws3U&list=RDCMUC8butISFwT-Wl7EV0hUK0BQ&start_radio=1&t=2237

https://daniel-park.tistory.com/category/Alogorithm?page=1

https://github.com/trekhleb/javascript-algorithms

https://github.com/iDevBrandon/FrontEndCollection/tree/main

https://zero-base.co.kr/event/school_FE?utm_source=facebook&utm_medium=paid&utm_campaign=school_FE_conv_all_dr&utm_content=set1_ad15&external_browser_redirect=true&fbclid=IwAR3GEAkkmrLfEGK4vo1zCez-y_SFxQI8NZbVk87CccimR8uW9wPKzsbzrcc

Frontend Roadmap

프론트 기사

React Query

https://tkdodo.eu/blog/practical-react-query

https://2dowon.github.io/docs/react/how-to-use-react-query/

https://www.youtube.com/watch?v=VtWkSCZX0Ec&list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2&ab_channel=Codevolution

https://www.youtube.com/watch?v=lLWfZL-Y8lM&t=116s&ab_channel=DaveGray

https://www.youtube.com/watch?v=MArE6Hy371c&ab_channel=%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC

https://www.youtube.com/watch?v=r8Dg0KVnfMA&ab_channel=WebDevSimplified

React Hook form

https://www.daleseo.com/react-hook-form/

https://www.youtube.com/watch?v=JZjUv_qFtvM&ab_channel=DaveGray

Vite

https://www.youtube.com/watch?v=iX3Nu1FcZKA&ab_channel=%EC%BD%94%EB%94%A9%EC%95%A0%ED%94%8C

Testing

https://www.youtube.com/watch?v=mIO4Rbe_M74&ab_channel=%EC%9A%B0%EC%95%84%ED%95%9C%ED%85%8C%ED%81%AC

https://www.youtube.com/watch?v=Mnd1RpRSxhU&ab_channel=%ED%94%84%EB%A1%B1%ED%8A%B8

---

프론트 기술

토스가 사용하는 기술 • 코어: React, TypeScript, Next.js

• 상태 관리: React-Query, Recoil

• 스타일링: Emotion

• 패키지 매니저: Yarn Berry

• 빌드: Webpack, ESBuild, SWC, Babel

• CI/CD: GitHub Actions

[삼쩜삼 Front-end팀에서 사용하는 기술스택입니다.]

• Typescript, React

• Recoil, React-Query

• Storybook, Emotion

• Jest

• Yarn Berry

• Webpack, Vite

• AWS S3, AWS CloudFront, AWS CodeBuild

• GitHub Workflow, Git Flow

Data

Data Scrapy crawling

https://www.youtube.com/watch?v=mBoX_JCKZTE&ab_channel=freeCodeCamp.org https://thepythonscrapyplaybook.com/freecodecamp-beginner-course/

Data visualization

https://datascienceschool.net/intro.html - Python

Data Visualization with D3, JavaScript, React - Full Course PART 2

https://vizhub.com/forum/t/get-it-right-in-black-white-index/110

https://www.inflearn.com/course/lecture?courseSlug=%ED%95%B5%EC%8B%AC-%EC%9E%85%EB%AC%B8%EC%9E%90-%ED%8C%8C%EC%9D%B4%EC%8D%AC-%ED%8C%90%EB%8B%A4%EC%8A%A4&unitId=126069&tab=curriculum

D3

https://www.youtube.com/watch?v=TOJ9yjvlapY&ab_channel=Academind

Projects

1. OXINION - MERN + Next.js

2. OXINION Finance - MERN + GraphQL

Apollo GraphQL Server Setup - Full Stack Build Ep1

https://www.apollographql.com/tutorials/fullstack-quickstart/01-introduction

3. Fallen developer - T3

Do it! 알고리즘 코딩테스트 with Python

neetcode

Build and Deploy a LeetCode Clone with React, Next JS, TypeScript, Tailwind CSS, Firebase

t3 example - https://github.com/AntonioErdeljac/twitter-clone

Interview

https://careerly.co.kr/qnas/2625

https://app.slack.com/client/T0439Q8HNHG/C043NEW5AJV/thread/C0439Q8JFT4-1680180247.161849

📃 Things to read

https://github.com/react-korea-developer/article

• 정말 리액트에서 useMemo를 사용해야 할까요? 알아봅시다.
• react-query 시작부터 적용까지
• React Query 개념 및 정리
• react-query 파해치기
• 컴포넌트를 잘 만드는 방법
• 변경에 유연한 컴포넌트
• SWC 이용해서 React + Webpack 세팅해보기
• Next.js SSG가 작동하는 방식
• React로 결제 페이지 개발하기 (ft. 결제위젯)
• 정말 리액트에서 useMemo를 사용해야 할까요? 알아봅시다.
• React-query 사용하는 이유, useInfiniteQuery 로 무한 스크롤 구현하기 (+ react-infinite-scroller)
• React 18: 리액트 서버 컴포넌트 준비하기
• React에서 Canvas API로 애니메이션 구현하기
• react-testing-library 를 사용한 리액트 컴포넌트 테스트
• (번역) Next.js의 app 디렉터리 아키텍처 이해하기
• Next 13과 react 18 서버 컴포넌트 관련 질문 - 커리어리