우연히 유튜브를 통해서, 우리가 흔히 알고 있는 버전의 로드맵이 아닌 간략하게 정리한 버전의 로드맵을 보게 되었다. 워낙 정리도 잘 되어있고 핵심만 잘 설명해주신 점이 매우 유익하여서 벨로그에 따로 정리하게 되었다.
https://www.youtube.com/watch?v=TTLHd3IyErM
*출처 : 본문의 이미지는 모두 유튜버 '드림코딩'님의2022 웹개발 로드맵 총정리
영상에서 캡쳐하여 사용했습니다.
<div>
, <span>
등이 아닌
<form>
, <table>
, and <article>
등 의미가 있는 태그를 사용해서 개발자와 브라우저가 이해하는 구조를 만들기
SEO(Search Engine Optimization, 검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정. 크롤링 할 때 더 높은 순위를 매기도록 수정하여 검색 결과(SERPs)의 상단에 노출을 시키는 것. 검색엔진 마케팅의 영역으로 디지털 마케팅에서 중요.
웹 접근성
CSS 클래스 이름 규칙 아키텍쳐로
.Block__Element--Modifier
와 같이 이름을 짓는 방법을 말한다.
ex) .header__form--email
다음에 나올 css 전처리기를 사용하면 활용할 일이 없긴하다. 게다가 [CSS in 2022]를 보면 Sass나 CSS Module의 기능까지도 포함하기 때문에 더더욱.. 레거시 파일들을 이해하는 정도로 알아두면 좋지 않을까
Sass (Syntactically Awesome Style Sheets)
Styled Components
이미 디자인된 요소를 가져와서 사용하는 것
Bootstrap
Material UI
*PostCSS는 처음 들었다.
작업 히스토리 버전 관리
외부 라이브러리 관리
배포 시 압축
react-testing-library(React)
? 무엇을 봐야하는지 모르겠다.
지속적인 통합 / 지속적인 제공 (Continuous Integration/Continuous Delivery). 빌드 시 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로 충돌할 수 있는 문제를 해결
필요에 따른 배포 툴 활용
트위터나 유튜브 등 무료 공식 API 활용
실시간 데이터 베이스 저장, API 활용
특정하게 성능이 중요한 경우 ex) 비디오, 이미지 등의 처리
*참고 :
GraphQL vs REST https://www.holaxprogramming.com/2018/01/20/graphql-vs-restful-api/
REST? https://dev-coco.tistory.com/97
*CMS란? WordPress, Wix처럼 전문 기술 없는 유저가 쉽게 디지털 컨텐츠를 구축, 생성, 관리할 수 있는 서비스.
Traditional CMS - 마케터에게 친숙, 프론트엔드 요소
Headless CMS - 개발자에게 친숙, API기반, 디바이스 제한이 없음 (HEAD = PC-모바일-워치 등)
Serverless CMS - 두 가지 결합
https://www.techmagic.co/blog/headless-vs-serverless-cms/
SSG에서 여기까지 왔다. 웹빌더, SI, 요즘 트렌드인 노코드와도 관련이 있어보인다. 그만 알아보자.
= SPA
+ 여러 방식을 보완한 하이브리드 방식 : Universal Rendering, ISR (Incremental Static Regeneration)
*참고 :
명령형 - HOW 절차지향, 객체지향
선언형 - WHAT 함수형
*이미지 출처 : 얄팍한 코딩사전 https://www.youtube.com/watch?v=KDiE5qQ3bZI
*절차지향과 객체지향은 반대되는 개념이 아니다.
map
reduce
등 복사본 함수 사용*참고 :
선언형, 명령형 프로그래밍 https://velog.io/@blackb0x/%EC%84%A0%EC%96%B8%ED%98%95-%EB%AA%85%EB%A0%B9%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D
함수형프로그래밍이 대세다?! (함수형 vs 객체지향) - 드림코딩
https://www.youtube.com/watch?v=4ezXhCuT2mw
리액트 함수형 vs 클래스형 https://devowen.com/298
*로드맵 - 프론트엔드 & 백엔드
https://roadmap.sh/frontend
https://roadmap.sh/backend
이미지로는 많이 봤는데 하나하나 항목별로 클릭할 수 있는 하이퍼링크가 있는 웹사이트 인건 처음 알았다. 누르면 어디서 무엇을 공부하라고 링크가 걸려있다. 일종의 목차같은
하지만 못생기고 복잡해서 싫다. 더 어렵게 느껴지는듯 😿.
어째 모르는 키워들 찾아서보다가 배보다 배꼽이 더 큰 글이 되었다. 시간도.. 가볍게 유튜브 본 거 정리하려다가 거의 강의 정리한 것보다 더 많이 들었네.
로드맵을 정리하면서 좋았던 것이 이름만 들어봤던 것들, 어디에 붙어있는지 몰랐던 것들을 자리정리를 해서 머리가 맑아진 느낌이다. 막막했던 것들도 걷히고 생각보다 웹 개발에 전반적인 경험과 지식이 있다는 자신감도 생겼다.
앞으로 나에게 필요한 것은 이 세 가지가 아닐까.
1. 실전의 경험
2. 습관화
3. 고급 기술로 레벨업