드림엘리 : 프론트엔드 입문 - 1. 기본 언어와 팁들

프레임 워크를 위한 기본언어

• html,css,js를 잘 배워야지 프레임워크를 바꿔도 금방 이해하고 적용할 수 있음
• html,css,js -> typescript(type 때문에 유저 사용시 충돌 일어나는 것 방지, 불린 타입은 불린에만 할당되게 하는 것)
• html : 구조,
• css : 디자인
• js : 다양한 동작 덧붙여서 구현(basics of js = banilla js)

기본 언어 외 부가적인 것

• 백엔드 커뮤니케이션을 위해 필요 : fetch api
• bootstrap은 react 나오고 나서 잘 사용되지 않음
• BEM 관련 architect 훑어보기
• module bundler - 코드 배포시 간편하게 압축하고 minify해서 최대한 사이즈 줄게 해줌
• react-mobx combination 추천
• 로드맵은 참고용으로 참고만 하기! 목표에 맞춰서 배우기, 한번에 배우려 들지 않기=

코딩 빨리 배우는 법

• 목표를 확실하게 설정 : 이 강의를 들어서 어떤 기술을 습득하고 싶은지, 어떤 것을 만들고 싶은지(세부 목표 설정)
• 자신과의 약속
• 노트에 직접 작성하며 듣는다.(디지털 노트 OneNote)
• 직접 정리하고 찾아보면서 배운다. 어려운 부분은 찾아보면서 듣기, 참조 사이트도 꼭 들어가보기
• 퀴즈나 과제는 직접 해보고 결과를 확인한다. 자신과 어떻게 다른지 비교하면서 듣기, 직접 문제를 해결하는 능력 배양
• 기본 적인 개념을 이해하고 이 기술이 왜 여기서 쓰이는지 다른 기술이랑 비교했을 때 어떤 점이 좋은지 확인하고 직접 코딩을 해보며 익히는 것이 좋다.
• 미니 프로젝트를 기획해서 연습하는 것이 좋다.

간단하게 동작하는지 확인 할 수 있는 사이트

• jsbin.com
• jsfiddle.net
• codesandbox.io

드림엘리 강의 펜툴

• screen brush -> 맥북만 있음
• 캡처한 웹사이트 사진을 원노트로 가져와서 구조 파악 시 사각형으로 나눠보는 것을 더 추천함
  • 영구적 보관 가능해서 더 좋음
  • section 나눠서 웹사이트 분석 칸 만들어서 해도 좋음