Skip to content

Latest commit

ย 

History

History
277 lines (151 loc) ยท 9.29 KB

README.md

File metadata and controls

277 lines (151 loc) ยท 9.29 KB
Raw

๐Ÿ‘จโ€๐Ÿ’ป 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

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