DEV 체크리스트

출처: youtube / 채널명: scrimba / 링크: https://youtu.be/p1zJExpDvxs

 

●HTML

1. non-semantic elements / h1과 p의 차이점, img와 picture의 차이점 

2. semantic elements / header, section, nav를 구분해서 쓸 수 있는지 

3. form / input의 type종류와 input type="text"와 textarea를 구분할수있는지 +validation attributes(method)

4. metadata / viewport metadata, link to stylesheet, link to favicon,

=회사들은 본인들의 컨텐츠, 웹사이트가 최대한 많이 공유되고 알려지길 원한다. 그러기 위해 preview card로 socialize를 할 줄 알아야 하고 어떤 플랫폼에서 구현되어도 좋은 웹사이트로 보일수있는지 이해할 수 있어야 한다. 

5. how to add google analytics 

=회사들은 사이트의 트래픽이나 인터렉션의 양을 측정하기 원하므로 분석 프로그램을 하나정도는 어떻게 작동하는지 알고 있어야 한다. 

6.svg basic의 이해 / 확장 가능한 벡터 그래픽(Scalable Vector Graphics)

=별도의 파일이 존재하지않아도 코드로 이미지를 구현할수있고 이미지가 깨지지도 않는다 하지만 로고나 단순한 이미지에만 사용하는것이 좋다.

7.구글은 잘만들어진 웹사이트를 분석하여 most accessible한 사이트를 랭킹한다 

=사이트를 잘 만들면 서치엔진의 상위권에 노출될수있다는 말

 

●CSS

1. the box model 

2. display value type (block, inline-block, inline, flex, grid)

3. positioning (stati, absolute, fixed, relative)

4. selector 선택자 (a, component, component>a)

5. 가상선택자 (;hover, :active)

6. specificity, important ( when to use !important responsibly)

7. responsive web design (@media queries, relative units like em, mobile-first design philosophy)

8. default stylesheet and how to import reset.css files 

9. animation basics (keyframes)

10. understading of css framewoekrs and their trade-offs (experience with one preferred) / ex) bootstrap

11. understanding of saas (mixins, loops, condition, functions)

12. understading of BEM methodology (naming convention)

정리하자면 지금 배우고있는 css 요소들, 포지셔닝, 스크롤해도 고정될수있게 하는 속성, 반응형, 애니메이션, 

부트스트랩, css naming에 대한 이해를 말함 

 

●JAVASCRIPT

1. functions

2. pass by value vs pass by reference 

3. values, types, and basic operators ( arithmetic, assignment, comparison, difference between == and ===)

4. truthiness and it's quirks 

5. DOM = the document object model (getElementByld, onClick, window.location,reload)

6. data structure (objects, arrays, arrays as queues, arrays as stack, set) and how to manipulate them (loops, map, filter, reduce, object.keys)

7. how to send and handle HTTP requests using fetch 

8. promises and asynchronous programming (chaining promises, handling errors, awaiting multiple promises in order, await keyword)

9. basics of regular expressions (matching characters, wildcards, achors, quantifiers, greediness)

10. how to encode and decode text (base64, url encoding)

11. cloning objects

12. ES6 syntactic sugar( arrow functions, destructuring assignments, object initializer shorthand, rest parameters, spread operator)

13. prototypes (constructor functions and new keyword, this keyword, basics of prototypical inheritance)

14. cookies, local storage, session storage

 

 

●REACT or equivalent

1. virtual DOM 

2. JSX (syntax, JSX's relation to React.createElement)

3. props (when to use, prop drilling)

4. state (when to use, global state, avoiding unnecessary renders)

5. lifecycle methods and/or hooks 

6. uncontrolled vs controlled components

7. refs

8. class-based components vs functional components

9. context API

 

●TOOLS

1. GIT (clone, add, commit, push, pull, branch, log, rebase)

2. github (forking, pull requests)

3. npm (package.json, package-lock.json, upgrade)

4. chrome developer tools (how to track request, inspect storage, clear cache, preview website on mobile, simulate slow network)

5. cross-browser testing tool like browserstack 

6. visual studio code or equivalent (search, search and replace, refactor tools, productive extensions, productive shortcuts)

7. how to install and utilise html, css, and javascript linters 

8. precomplier like babel 

9. any platform where you can deploy your website (github pages, netlify, digital ocean vercel)

10. unix command (cd, is, mv, cp, rm, touch) or windows equivalent

 

설명-

 

if you learn the fundamental of git you see on the screen right here 

and get an understanding about how people collaborate on projects that def sever you in a job interview

because you reduce so much uncerntainty about your ability to collaborate on a code base.

 

if you are learning gits and gitbut this could be confusing but basically github is a hosting provider for the tool git

and its the one i recommend you learn if you are starting out even if you join a copnay that uses bitbucket or

gitlab um everything you learned will transfer so its no trouble. this might not take much time to master but a solid

understanding of npm which is the package manger most commonly used for friend sand web applications will take you a long way you know what is a package,json file, what can it unlock for your application, what is a packagelock.json file, should you commit that to source control. these are things you should have at the tip of your fingers,  as well as understanding of how to ungrade modules without breaking everything because you can imagine depeding on a project do a huge rewrite and change their api. if you just blindly update that could affect your application, not just the commands but an understanding of how this impact whole application.

if you learn chrome web developer tools, there is the console in there is a way to preview your website in defferent viewpoints theres way t throttle the connection speed really master the network tap, how to filter to only see specific requests, learn how to use that preserve log function. these are things that web developers use every day.

 

finally something you should know is the editor, probably you use vs code i mean most peope do nowadays

im talking about strong understanding of how to use the tool efficiently to navigate the code base to rename and refactor things, you should have some productive extensions and productive shortcuts installed as well. 

not essential but good to know is how to install configure and utilize linters like css or javascript linter, these can 

reveal errors in your code as wel as inconsistencies super useful when you start to work on a code base 

you might also try and understand something like bable in more depth. this is a transpiler that enables you to use things like jsx if you are using react or maybe even use you know experimental javascript features in a way that will still work on even older browers because babel will basically take that succinct brand new juicy feature and turn it into some equivalent older lookingcode and set up these tools and the plugins and things are very good to know. 

 

i really recomend that you deploy at least one website including a custom domain and https 

because this will expose you to tools like dns, platforms like versal or netify or aws or digitalocean 

i think because ultimately the expectation is that you as a junir dev contributed some production code 

you should have at least an understanding of how that part of web developmnet works.

 

last is a solid understanding of unix commands or windows equivalent commands, these can be basic ones like 

jsut navigating file directories but where it relates to deployment ssh which is when you basically connect to a server and start typing commands on that sever. its hard to learn but try to use linux for a week 

 

●WEB

1. HTTP method(post, put, etc)

2. HTTP status codes (404,400,501,200)

3. JSON

4. basic of REST methodology (motivation, principles, "rules")

5. basic of web security (HTTPS, XSS, CORS, how to fix a website with blocked mixed content) and familiarity with OWASP top 10 

6. authentication

7. cookies (session cookies, session ID, expiration)

8. tokens (JWT, refresh tokens)

 

(내 생각에 이부분은 지금 웹디 필기 인터넷일반에 나오는 내용이 있는것같음)

 

●PERFORMANCE

1. image optimisation (webp, png, imageoptim)

2. minification and bundling 

3. critical rendering path 

4. what is server-side rendering

 

●DSA data structures and algorithms 

1. how to implement fundamental data structures (stack, queue, list, linked list, set)

2. how to implement fundamental algorithms like sort (bubble sort, heap sort, qucik sort)

3. rudimentary understanding of big o 

 

●TESTING

●SOFTWARE DESIGN