1. 현재 개발 툴
- computer : window 운영체제
- text editor : vscode로 코드작성
- browser : Chrome으로 개발
ㄴChrome으로 개발 하더라도, Edge, Safari, Firefox에서 작동하는지 꼭 확인할 것
2. Frontend 지식
🥕 html : 프레임워크 구조
- html 태그
- 페이지 구조
- 시맨틱 태그
- SEO(검색엔진최적화)
- 접근성 고려
🥕 css : 사용자에게 보여지는
- 스타일링(폰트 색, 배경 등)
- 레이아웃 : float, flex, grid
- 반응형 디자인 속성, 미디어쿼리
- animation
💫 bem
css 설계
css 클래스명 충돌로 스타일이 다른 요소에 영향을 줄 경우, 덮어씌워지는 것을 방지하기 위해 css 클래스명 작성을 규정한 아키텍처
💫 css전처리기 : sass/scss, less, postcss
ㅇ반복적으로 부모 클래스명을 작성하는 번거로움을 개선한 전처리기
변수 선언이 가능하며, 재사용성이 높다.
모듈, mixin, 함수 제공
💫 css framework
프레임워크를 사용하는 이유 : 개발, 유지보수 용이
- bootstrap : 이미 만들어진 ui요소가 있어, class 요소를 지정하면 나타나는 프레임워크
- tailwind css : 부트스트랩과 유사하게 class 요소 지정하면 만들어지는 ui컴포넌트
- meterial ui : react에서 그대로 가져와 사용할 수 있는 css컴포넌트. 미리 만들어진 ui를 가져와서 사용하여 빠른 개발 작업이 가능
- postcss : 순수 css에서 고립된 환경에서도 쉽게 사용할 수 있음. css 모듈화 가능
- styled componets : css, js에 정의하여 동적으로 스타일링을 정의(직접 스타일을 만들거나, 스타일을 커스텀) 유시보수가 힘들고, 코드가 지저분하다는 단점 존재
🥕 javascript : 동작, 행동
1) 자바스크립트 프로그래밍 문법
자바스크립트 문법에 대한 기초적인 지식
로직들을 문법을 이용해 프로그래밍 할 수 있는 능력 함양
⬜ 기본적인 변수할당 방법
- let, const
- if, for, switch, while
- function(함수)
- object(객체)
⬜ 자바스크립트 언어가 가진 특징
- prototype
- hoisting (호스팅)
- scope
- closure
2) 브라우저 함수 api
어떻게 네트워크 통신을 하는지?
어떤 api들이 있는지?
어떤 상황에서 어떤 것을 사용해야하는지?
- dom manipulation(돔 요소) 조작
- events : 특정한 이벤트
- fetch api(async) : 서브데이터 가져오기
💫 typescrip
자바스크립트에 타입이 더해져, 자바스크립트를 사용하는 모든 곳에서 사용 가능한 프로그래밍 언어
안정성&유지보수성 높음. 동적타입, 객체지향
어떤 프레임워크를 사용하던 타입스크립트로 개발 하는 것이 좋다.
자바스크립트의 타입이 더해진 프로그래밍 언어. 자스를 사용하는 모든곳에서 사용가능.
💫 javascript framework : react, vue, angular, svelte
공통적인 것을 처리하며, 기본적인 것을 제공하는 프레임워크
순수 자바스크립트만으로 개발에 어려움을 느껴, 프레임워크를 사용해 유지보수성을 높인다.
리액트를 가장 선호
단점
1. Search Engine Optimizer(검색엔진 최적화도구)에 취약하다
2. 사용자 웹페이지 로딩 시간이 오래 걸린다
💫 gatsby(react), gridsome(vue)
ssg(static site generators)를 위한 프레임워크
서버에서 사이트를 미리 만들어 놓는다
💫next.js(react) , nuxt.js(vue) :
ssr(server side rendering)을 위한 프레임워크
클라이언트 요청이 있을 때 실시간으로 사이트를 미리 만들어주는 프레임워크. 기존 서버에서 실시간으로 사이트 개발 가능
*** 공부 방향성
1) javasciprt -> typescript -> typescript에서 framework 사용
2) javascript -> react(framework) -> typescript에서 사용
3) 어떤 경우에 서버에서 페이지를 미리 만들면 좋은지 포인트로 공부
3. 생산성 높일 개발 툴 병행
버전관리시스템
- git
로컬에서 작업할때 버전 관리. 로컬을 서버에 올리는 github서비스 등을 이용해 작업물, 히스토리를 잃어버리지않고 관리
패키지매니저 (패키지관리)
- npm, yarn
외부라이브러리를 설치하고 관리할 수 있게 해주는 패키지
모듈 번들러
- webpack, rollup, parcel
프로젝트 배포시 사용자에게 모든 소스를 배포X.사이즈를 작게하고 배포한다
보통 자바스크립트 프레임워크에 번들링이 포함되어있음
4. 어플리케이션 테스팅 (자동화)
test pyramid
어떤 테스트종류가있고 언제 어떤 테스트를 하면 좋은지
- jest, cypress, enzyme : 자바스크립트 프레임워크 라이브러리
- react-testing-library : 리액트 프레임워크 라이브러리
좋은 테스트코드 작성 원칙
ci/cd
- 테스트코드가 배포 전에 수행으로 실패되서 배포되지않도록 하는 부분
5. 어플리케이션 배포
웹어플리케이션 배포 서비스
github pages, netify, vercel, heroku,aws등
각각 플랫폼에어떻게 배포할수있는지 연습
