[멋사 FE 스쿨] 38일차 리뷰

멋쟁이사자처럼 프론트엔드스쿨 w/ 제주코딩베이스캠프 38일차

---

오전(09:00~11:50) 수업 w/ Licat

어제 정규표현식 Recap

1. /일반문자열/
2. /^일반문자열/, /일반문자열$/ : 처음과 끝
3. /h.llo world/ : 모든 문자(dot, '.')
4. h[eay]llo world : 택1
5. /[a-zA-Z0-9]/ : 범위
6. /[^a-zA-Z0-9]/ : 부정(not)
7. /.(a|e|o)ll./ : group
8. 수량자
   8.1 [eay]{3} : e, a, y 중 택 1이 3개 ({3,} : 3개 이상, {1,3} : 1개 ~ 3개)
   8.2 * : 앞에 있는 문자가 0개 ~ N개, 예를 들어 [eay]*면 e, a, y 중 택 1이 0개~ N개
   8.3 + : 앞에 있는 문자가 1개 ~ N개
   8.4 _? : 앞에 있는 문자가 0개 ~ 1개
9. 캐릭터 클래스
   9.1 /\w/gm : 워드
   9.2 /\w{5} /gm : 5개의 글자와 스페이스 하나
   9.3 /\W/gm : not 워드
   9.4 /\d/gm : 숫자
   9.5 /\D/gm : not 숫자
   9.6 /\s/gm : 스페이스
   9.7 /\S/gm : not 스페이스
10. 이스케이프 문자(역슬러쉬, ) : /(.*)/g

전화번호 찾기 정규표현식

/[0-9]{3}[.-*,]*?[0-9]{3,4}[.-*,]*?[0-9]{3,4}/g

프로젝트 이야기

• 개인 플젝 마무리하고 팀 프로젝트 들어가자
• 팀 프로젝트(감귤 마켓)는 1월로 넘어갈 듯
• 제공된 API로 BE 직접 구현은 선택, SPA 구현
• 이력서 제출용에 깃헙 pinned는 공부한거로 하지마라
• 특히 벤딩머신 같은 거는 목적성이 불분명하기 때문에 프로젝트로 하기가 어렵다
• 웹사이트 클론은 회사 지적 재산권으로 이어져있으므로 프로젝트로 보기에 어렵다 → 공부한 것으로 만족하자

12월 28 ~ 30일까지 온전히 여러분들 프로젝트 및 정리 시간입니다.

1. (개인) P2 프로젝트 완성하기 (github 배포 필수)
    1.1 주제는 자기소개, 포트폴리오 소개용 렌딩페이지
    1.2 프로젝트가 이미 있으신 분들은 있는 그대로의 랜딩페이지
2. 1만시간의 법칙 완성하기 (github 배포 필수) - JS
3. 벤딩머신 완성하기
4. (선택) 지금 팀으로 하고 있는 팀 프로젝트 하기

* 현재 여러분 repo 상황
 - front-end school (강의내용)
 - boostrap (무료 템플릿 1개)
 - (project) tailwind(이력서)
 - CSS 그리기
 - UI 제작 컴포넌트(button, 로그인창)
 - (project) 1만시간의 법칙
 - 벤딩머신
 - 알고리즘 등 기타 공부 repo 
 - (project) 감귤마켓
 - (project) 프리마켓
 - (project) 랜딩페이지
 - 기타 멋사 프로젝트(세렝게티 동물 테스트(다듬으면 Project), 쿨찐 2개)

// 남은 프로젝트 //

1. 랜딩페이지(개인 프로젝트)
- 예정기간 : JS 수업 이후 진행
- 작업 페이지 개수 : 1개

2. 감귤마켓(팀 프로젝트)
- 예정기간 : 1.3 - 1.17 / node.js 수업 이후 진행
- 필수 : 피그마에 있는 모든 페이지 작성
- 선택 : 제공된 API 사용 또는 백엔드 직접 구현
- 참고사항 : API가 제공되므로 Node가 필수가 아닙니다. 
- 작업 페이지 개수 : 약 14개

3. 오픈마켓(개인 프로젝트)
- 예정기간 : 1.17~1.26 / react.js 수업 이후 진행
- 필수 : 피그마에 있는 모든 페이지 작성
- 선택 : 제공된 API 사용 또는 백엔드 직접 구현
- 참고사항 : API가 제공되므로 Node가 필수가 아닙니다. 
- 작업 페이지 개수 : 약 8개

• 취업 관련 조급 ㄴㄴ 기회는 또 있을 것임

출퇴근에 1시간 넘게 벌리는 건 무슨 의미가 있나..

Visualization

• https://www.chartjs.org/
• 어떤 데이터라도 일단 시각화를 잘 하는 게 중요한 것 같다.
• chartjs, D3는 잘 쓰이는데 강의가 없다. 관심이 있고 생각이 있다면 책 출판하거나 제코베와 함께 강의를 만들어보자..(!)
• canvas 강의는 많다.
• D3
  https://d3js.org/
• D3 구글 폰트 적용으로 검색하면 알 게 될 것임
• CSV(영어: comma-separated values)는 몇 가지 필드를 쉼표(,)로 구분한 텍스트 데이터 및 텍스트 파일이다.

---

오후(13:00~18:00) 수업 w/ Licat

disqus 댓글 서비스 https://disqus.com/

→ 서로의 서버가 interactive 해야 잘 작동한다.

깃헙

• https://opentutorials.org/course/2708 → 생코 강의 추천
• 유저의 신원을 확인하겠다는 절차
• 원래는 commit 시 로컬에만 저장 → 온라인에 올려주는 것이 push
• 깃헙 블로그는 배보다 배꼽이 더 큰 격이다
• 깃헙 사용해봤냐고 묻지 않고 형상관리툴을 써봤냐고 질문 할 것임
• 관심있으면 gitlab, github 등에 지원해보는 것도 좋다..(!)
• 코드 몇줄 추가 되었다고 커밋하면 안된다.
• 추가가 기능단위이고 의미가 있는 것일 때 커밋하자
• 한 repo로 협업하려면 Manage Access에서 추가해주고 clone 떠가라고 하면 된다
• git stash로 add 해주지 않고 임시로 branch이동 가능!!
• mode 중 자주 사용하는 것을 확인해보도록 하겠습니다.
• hard : 모든 변경사항 버림. 이후 변경사항을 다 버리고 옛날 커밋으로 reset
• mixed : 변경 사항은 로컬에 저장하고 커밋은 리셋, unstage
• soft : 커밋을 삭제하고 모든 로컬 변경사항을 유지, stage
• 파일의 아키텍쳐를 얼마나 아름답게 했는지도 중요
• error trouble shooting도 다 꼼꼼하게 깃헙에 기록
• https://techblog.woowahan.com/2553/

---

저녁(19:00~21:00) 특강 w/ 1분코딩

유준모 대표님

https://studiomeal.com/ → 공식 사이트

1인 기업..ㄷㄷ

인터렉티브 웹도 하지만 3D를 다루는 기술에 대한 강의

3js라는 것을 알려주실 예정

WebGL이란 무엇인가 Web Graphic Library

• 주로 3D 표현할 때 많이
• 2D 쓸땐든 canvas도 많이 사용
• WebGL은 3D에서 많이 사용
• 그래픽을 렌더링하기 위한 low level JS API다
• 어렵고 코드가 길어지는 단점이 있다. → 라이브러리 사용 가장 인기 있는게 three.js
• https://threejs.org/ → 뭔가 검색할 때 언어 영어로 바꾸고 검색하자. 번역 안되어 있으면 페이지 자체가 안나온다.
• Scene위에 Camera, Light 세팅하고 Renderer 장면을 보여준다.
• Mesh = Geometry(점선면으로 구성) + Material
• 공식문서가 다 모듈 기반이라서 모듈화해서 안하면 개발하기가 어렵다
• GPU를 쓰기 때문에 퍼포먼스가 좋다. 그림자가 빠지면 성능은 좋아지겠지만 성능 때문에 빼는 경우는 없고 그냥 기획에 맞게 넣고 빼고 하면 된다.
• near far 설정을 해줘야 하는 게 퍼포먼스 때문에
• 얼마나 가깝게 보이고 멀리 보이는지
• 숫자는 의미가 없다. 상대적인 값으로 생각.
• 기준이 중심점이다. canvas는 좌상 모서리가 기준인 반면
• requestAnimationFrame → threejs에서는 setAnimationLoop
• three.js에서의 clock은 성능에 따른 상대적인 값이 아니라 절대적인 시간값 → 이렇게 성능 보정해주는 것이 const delta = clock.getDelta();와 같은 것
• 아무튼 중요한 것은 delta를 통한 성능 보정
• glTF?→ JSON으로 구성 거의 표준이 됐음
• glb → gl binary → gltf 뿐 아니라 모든 것들을 때려넣고 바꿔논 놈
• 스크롤시 이벤트 현상 받아오기 → 현재 스크롤 / 브라우저 높이
• gsap은 따로 설치를 해줘야한다.
• 다른 사람이 만들어놓은거 쓰고 싶으면 구글에 그냥 free gltf나 free glb 치면 된다
• animation가 props로 들어갈 수 있다.