멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습
👨🏻🏫 선배 특강 메모
이것만큼은 꼭! (Do)
- 회고조 활동 열심히 하기 (VSC 확장자 Live Share 통해 페어 프로그래밍)
- AI와 친해지기 (챗GPT)
- 프롬프트 엔지니어링(질문을 잘 해서 효과적으로 답변을 얻는 것)
- 열린 질문보다 닫힌 지시문으로 질문하는 것이 좋음
- 특강 잘 챙겨듣기
- 좋은 스터디에 참여하기
- 좋은 스터디: 단순한 공부 내용 정리X, 질문 많이 던지기, 가능하다면 오프라인 환경 추천
- Done is better than perfect : 일단 Go! 고민,계획 많이 하지 않기!
- 코드 리뷰에 빠질 수 없는 소프트 스킬 중요성, 상호작용과 소통 중요!
이것만큼은 꼭 절대! (Don't)
- 복습 미루지 말기
- 코드를 눈으로만 보지 않기
- (때에 따라서)완벽한 이해를 하려고 하지 않기
멋사 수료 후
- 스스로 길을 잃지 말자(초심으로!)
- 지금의 나는 어디에?
- 남들과 비교하지 말고, 어제의 나와 비교하자 (난 어제보다 성장했는가?)
- 뭘 더 해야 할까?
- html, css, js, react 복습 혹은 다른 프레임 워크나 라이브러리 공부
꿀팁
- 깃허브 어플 다운
- 깃허브 관리 용이 및 위젯에 잔디 추가 가능
- 챗GPT 어플 다운
- 현재 IOS만 지원 (안드로이드는 카카오톡 Askup)
- JavaScript 공부
- 3대장: 코어 자바스크립트/모던 자바스크립트/모던 javascript 튜토리얼
- 코어 자바스크립트 먼저 공부 (e-book 구매 추천)
- 모던 자바스크립트는 나무위키처럼 사전용으로 쓰는 것도 좋음
- https://poiemaweb.com/
- 공부하면서 본 개념들이 너무 어렵게 느껴질 때
- 그 개념이 낯설지 않을 정도로만 공부하는 것도 좋음
- 코테 맛보기
- 프로그래머스 → 코딩테스트 연습 → 코딩 기초 트레이닝 or 코딩테스트 입문
- https://github.com/BaekjoonHub/BaekjoonHub = 깃헙 자동 푸쉬
- API 공부하기
회고조
- 함께 가기 위한 힘을 뭉치는 조
- 멋사 수료 이후에도 함께 가는 조
- 간단한 프로젝트 같이 하면서 github 연습해보면 좋음
파이널 프로젝트 팁
- API 연결하는 방법 중요 (공공 API 연동 연습해보기)
- github 익숙해지기
👨🏻🎨 CSS 특강 메모
- 엔지니어 관점에서 CSS, JavaScript 구동 원리를 알고나면 매우 재밌음
- 용어 공부할 때 영어 원문으로 어떻게 되어있는지 관심을 가져야 함
- div = type selector
- div 크기 = 직계 부모가 제공해주는 컨텐츠 영역의 크기 = 컨테이닝 블럭
- Mdn Web Docs에서 속성들의 '초기값' 확인 (initial value)
- 초기값은 해당 속성을 만든 사람이 제작한 것
- property(속성) value(값)
- background-color 초기값: transparent(투명)
- width 초기값: auto
- 모든 property는 initial value가 있다 = 모든 속성은 초기값이 있다
- 사용자 에이전트가 하는 일 = 브라우저 기본 스타일
- 사용자 에이전트 기본 스타일과 프로퍼티의 초기값과는 별개
- 100% 와 auto의 차이?
- auto는 자동 계산
- 100%는 마진, 보더, 패딩을 고려하지 않음
- auto와 %가 어떠한 기준으로 작동되는지 아는 것이 중요함
- 핵심: 프로퍼티를 배웠다 = 초기값이 뭐지? 궁금해 해야함
- 특별한 경우가 아니라면 height를 고정값으로 주지 않음(유지보수 용이)
- 작업순서: 레이아웃을 우선 생각해서 큰 틀을 먼저 시각적으로 쌓고, 그 다음 컨텐츠 넣기
- selector와 selector 사이에 한 칸 띄는 것 = combinator = 조합 생성
- .header img = descendant combinator = 하위 자손 선택
- .header > img = child combinator = 직계 자식 선택
- 상속 = 부모 요소에 속성을 주면 부모 요소 하위에 적용됨
- 단, 모든 프로퍼티가 상속되지는 않음 (상속 지원되는 프로퍼티는 정해져있음)
unset: 부모로부터 상속할 값이 존재하면 상속값을, 그렇지 않다면 초기값 사용 (브라우저에게 자동으로 해달라고 명령하는 것)initial: 초기값을 요소에 적용(상속되지 않는 속성에 사용)inherit: 부모 요소로부터 해당 속성의 값을 상속받음(상속되는 속성에 사용)
열정적 끈기의 힘(GRIT)