React

자바스크립트 공부용

서여랑 2023. 9. 11. 06:03

어떻게 적용 할 것인가 대략적으로 어떤 것을 이용 할 수 있는지는 알고 있어야 한다. 세부 디테일은 검색해가면서 찾는다.

  • HTML : 웹 사이트에 기본적인 골격을 갖춰줌
  • CSS : HTML에서 조금 더 스타일을 입히고 어떻게 사용자에게 보여주는지 결정
  • JavaScript : 행동을 추가 할 수 있다.

중점적으로 공부하면 좋을 것

  1. HTML HTML Tags : 어떤 태그들이 어떻게 작용하는지 알고 있어야 한다. Page Structure : 페이지 구조를 어떻게 잡아나갈 것인가 Semantic Tags : 어떨 때 어떤 의미있는 태그를 사용해야 하는지 SEO : 사용자가 특정한 키워드로 검색했을 때 우리 웹 사이트가 나올 수 있을지 Accessibility : 접근성을 고려해야 함
  2. 기본적인 사용 방법만 공부하고 나머지는 찾으면서
  3. CSS Styling : 어떻게 스타일링 할 수 있는지. 폰트 색상 Layouts : 아이템을 배치 할 수 있는 레이아웃 Responsive Design : 어떻게 반응형으로 만들 수 있는지 속성들은 어떤 것들이 있는지 미디어 쿼리는 어떻게 이용하면 되는지 Animation : 애니메이션을 어떻게 만들 수 있는지
  4. JavaScript
    1. ES6+ Syntax (문법을 탄탄하게) 자바스크립트 문법에 대해 익숙하게 공부 해야 한다. 내가 생각한 로직들을 자바스크립트 문법을 이용해 만들 수 있도록
      1. Basic let,const (변수 할당 방식) if, for switch, while (조건문, 반복문 등 함수 사용 방법) function 함수 object 객체
      2. Advaced
      3. 자바스크립트 자체가 가지고 있는 특징들 Prototype Hoisting Scope Closure
    2. Browser APIs 브라우저에서 사용할 수 있는 API를 이용하여 어떻게 브라우저 위에 있는 것들을 가져올 수 있는지 어떤 방식으로 네트워크 통신을 하는지
      1. DOM Manipulation DOM 요소의 조작 방법
      2. Events 어떠한 특정한 이벤트에 내가 어떠한 일을 하고 싶을 때 어떻게 적용하면 되는지
      3. Fetch API(Async) 서버에 있는 데이터를 어떻게 가지고 오는지
  5. CSS
    1. CSS Framework #빠른 개발이 가능 정형화된 UI를 가져와 사용 #Bootstrap #Tailwind CSS #MaterialUI
    2. #PostCSS 기존 CSS 파일을 정의해서 사용하는 방식 #Styled-Components 자바스크립트의 CSS를 정의해서 사용하는 방식

JavaScript(무조건 배워야 함) - TypeScript - JavaScript Framework - Static Site Generators(SSG), Server Side Rendering(SSR)

  1. TypeScript 자바스크립트를 사용하는 대부분의 규모있는 프로젝트를 운영하는 현업에서 사용함
  2. 객체지향 언어까지 사용 할 수 있음
  3. JavaScript Framework (일단 내가 원하는 프레임워크를 하나 공부해서 써보는게 좋다) React -가장선호* Vue Angular Svelte -성장중
  4. Static Site Generators(SSG) 서버에서 사이트를 미리 만들어둠 Gatsby(React)* GridSome(Vue) 11ty(JS)
  5. Server Side Rendering(SSR) 클라이언트의 요청이 있을 때 실시간으로 서버에서 사이트를 미리 만들어주는 Next.js(React)* Nuxt.js(Vue) Universal(Angular) Sapper(Svelte)

결론 - 대충 자바스크립트 공부해서 리액트 쓰라는 소리;