Skip to content

Latest commit

 

History

History
80 lines (58 loc) · 5.86 KB

study-links.md

File metadata and controls

80 lines (58 loc) · 5.86 KB

written by @woohm402

HTML

프론트엔드의 근본이 되는 HTML 입니다. 사실 react를 하다 보면 몇 개의 태그만 가지고도 구현을 할 수 있기 때문에 HTML 의 기본적인 태그들을 잊게 되는데, 적절한 위치에 적절한 태그를 잘 사용하는 게 생각보다 아주 중요합니다.

하지만 그 모든 태그를 처음부터 독학으로 하나하나 개념을 잡고 암기하는 것은 불가능하기 때문에, 추천드리는 공부방식은 다음과 같습니다.

  1. 공부해서 알고 나서 쓰는 방식보다는 일단 써 보고 나서 찾아보고 공부해서 알게 되는 방식
  2. 하지만 쓰고 나서는 아래 링크 등에서 공부해서 뭐 하는 태그인지 무조건 확실하게 알아야 합니다.
  • 한눈에 보는 HTML 요소(Elements & Attributes) 총정리
    • 유명한 헤로피님이 작성하신 요소 총정리해둔 블로그 글입니다. 다소 길지만, 미리 공부하는 느낌으로 한번쯤 읽어볼만합니다.
  • w3schools
    • 무려 튜토리얼과 직접 코드를 수정할 수 있는 기능이 있는 아주아주 친절한 사이트입니다.
  • MDN
    • w3schools보다는 다소 불친절하고 딱딱한 느낌이 있습니다. 간단하고 깔끔한 소개를 원한다면 여기도 좋습니다.

CSS

웹을 눈 뜨고 볼 수 있는 수준으로 만들어주는 소중한 css 입니다. 정말 많은 속성이 있기 때문에 많이 경험해보는 것이 중요합니다.

css 의 경우 링크를 보고 공부하기보다는, 깃헙 이나 이런 사이트 등의 사이트를 직접 클론해보면서 자연스럽게 익히시는 걸 추천드립니다. HTML과 비슷하게, 써 보고 나서 공부하는 방식이 지루하지 않고 좋으실 거예요

  • CSS 개요
    • 미리 공부좀 해보자는 느낌으로 볼만합니다
  • CSS 속성
    • 미리 공부좀 해보자는 느낌으로 볼만합니다.
  • w3schools
    • 앞에 있었으니 생략
  • MDN
    • 앞에 있었으니 설명은 생략

JavaScript

프론트엔드라면 필수적으로 사용하게 될 javascript 입니다. 문법을 하나하나 가르쳐 드리기엔 시간이 부족해서, 기본적인 문법은 위의 사이트를 참고하시어 공부하시면 될 것 같습니다. 중요한 문법 같은 경우에는 수업 시간에 당연하게도 설명을 드리겠지만, 다들 언어 하나씩은 하실 수 있고, 초반 러닝 커브는 높지 않기 때문에 너무 기본적인 문법은 건너뛰고 진행할 예정입니다.

  • 벨로퍼트 자바스크립트
    • 개인적으로 가장 친절하게 이론과 실습을 모두 커버해주신다고 생각하는 벨로퍼트님의 자바스크립트 튜토리얼입니다.
    • 아무래도 이론보다는 실습 위주인지라 개념이 충실하게 적혀 있지는 않습니다. (자바스크립트를 깊게 파게 되면 꽤 어려워집니다)
    • 자바스크립트를 처음부터 감을 잡고 싶으시다면, 쭉 따라하면서 공부해보면 많은 도움이 됩니다.

React

우리가 학습 목표로 잡고 있는 React 입니다. vite + react을 이용하고, functional component 와 hooks 를 이용한 수업을 진행할 예정입니다.

  • 공식문서
    • RTFM 이라는 말이 있는 만큼 리액트를 공부할 때 가장 중요한 문서입니다.
    • 원래도 문서화가 잘 되어있었는데, 한번 갈아엎고 정리가 더더 잘 돼있습니다.
    • 아쉽게도 새로운 문서는 영어로만 제공됩니다.
    • 여러 가지 공부 가이드도 얘가 제공해 줍니다.
    • 단점이라면 아무래도 리액트 얘기밖에 없고, 추가적인 라이브러리 (가령 react-router-dom) 등은 따로 공부해야 합니다.
  • 벨로퍼트 모던 리액트
    • 고-전이라고 합니다.
    • 벨로퍼트님답게 친절하고 잘 정리된 문서입니다. 따라해 보면 좋습니다만 우리 수업에서 다루지 않는 내용도 다소? 있습니다. (가령 ref)

개발자 도구 사용법

웹 개발 중 거의 필수적으로 사용하게 되는 개발자 도구입니다. 굳이 쓰지 않으셔도 되지만, 사용하신다면 개발 시간을 10배 가량 단축할 수 있습니다. 급하게 공부하실 필요는 없고, 사용법을 하나씩 하나씩 숙지하시면서 사용하시는 걸 추천드립니다.

이 방법은 크롬 기준입니다.

  1. 크롬을 켠 상태에서 아래 커맨드를 입력합니다. 아래의 사진과 같이 개발자 도구가 열립니다.

    Windows: F12, Ctrl + Shift + I
    MacOS: cmd + option + I

    image

  2. 최상단 메뉴바에서 Elements를 클릭하면 해당 페이지의 HTML을 파일을 볼 수 있습니다. (위 사진의 좌측 부분입니다.)

  3. 원하는 태그를 클릭하면 우측 혹은 하단에서 CSS도 확인 가능합니다. (위 사진의 우측 부분입니다.)

  4. 개발자 도구의 좌측 상단의 버튼을 클릭 후, 브라우저로 돌아가면 사진과 같이 원하는 영역을 선택할 수 있습니다. 개발자 도구를 확인하면 해당 태그가 선택된 것을 확인할 수 있습니다.

    image