프론트엔드 작업 시 알아두면 좋은 지식 모음

 

 

 

가장 기본적으로 HTML, CSS, JavaScript를 공부하는 것이 우선입니다.

빨리 배우고 싶다고 기본적인 3가지를 배우지 않고 바로 라이브러리나 프레임워크를 다루게 되면

의존도가 높아지고 혼자서 포트폴리오를 하거나 현업에 나가게 될 때 문제 해결 능력이 떨어질 수 있습니다.

 

HTML : 웹 페이지의 전체적인 구조

CSS : 스타일링

JavaScript : 웹 페이지를 위한 스크립트 언어

 

CSS를 스타일링하게 되면 많은 것들이 반복되는데

이때, SASS나 LESS, PostCSS와 같은 CSS 전처리자라는 프레임워크를 사용하여 CSS를 간편하게 관리할 수 있습니다.

CSS 프레임워크 중에 부트스트랩을 사용하기도 하지만, React 출시 이후 자주 사용되고 있지 않습니다.

JavaScript를 어느 정도 공부했다면 TypeScript로 추가로 공부하는 것이 좋습니다.

TypeScript를 사용하면 기본 JavaScript에서 사용되는 모든 기능을 사용할 수 있고

JavaScript에서 하기 힘들었던 타입 지정이 훨씬 좋고 React와의 호환성이 좋습니다.

이렇게 모두 공부했으면 SPA 방식 프레임워크인 React나 Vue, Angular와 같은 프레임워크를 공부하는 것이 좋습니다.

 

SPA란?

Single Page Application의 약자로, 단일 페이지 어플리케이션을 뜻하고 현재 웹 개발의 트렌드입니다.

기존 웹 서비스는 요청할 때마다 서버로부터 소스들과 데이터를 해석하고 화면에 렌더링 하지만,

SPA는 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해

데이터를 바인딩합니다.

대표적인 프레임워크로는 React, Vue, Angular가 있습니다.

 

또한, 웹 공부를 어느 정도 하셨다면 문법이 비슷한 React Native도 추가로 배우는 것도 좋습니다.

 

현업에서 가장 중요한 3가지

1. Code Refactoring

2. Clean Code

3. Design

 

참고

1. 웹 사이트를 만들기 전에 부분 부분을 박스로 나누어서 구분하는 것이 좋습니다. (Wire Frame)

-> 정교한 웹사이트 구현 가능

2. 현업에서는 display와 position을 이해하는 것이 중요합니다.

position

- static

- relative

- absolute

- fixed

- sticky

3. React를 사용한다면 MobX를 함께 사용하는 것을 추천드립니다.

4. vw와 vh는 반응형 웹에서 사용하면 좋습니다.

5. 반복되는 코드인 boilerplate 코드를 최대한 줄이는 곳이 좋습니다.

6. 웹 사이트를 만들 때 반응형 웹으로 디자인하는 게 좋습니다.

- @media 사용

7. 웹 사이트를 만들 때는 모바일을 먼저 고려해서 만드는 것이 좋습니다.

8. 목록이 있다면 div 태그보다는 ul 태그를 사용하는 것이 좋습니다.

9. 리스트 줄일 때, margin이 아닌 padding을 줄여야 클릭할 수 있는 범위가 넓어집니다.

 

포트폴리오에 넣을 프로젝트에는 다음을 참고하세요!

1. 중요한 기술/스택을 1~2개에 초점을 맞춘다.

2. 독창적이고 창의적인 아이디어로 만든다.

3. 자주 쓰는 앱들의 주요 기능을 카피해서 만든다.