멋쟁이사자처럼 프론트엔드스쿨 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로 들어갈 수 있다.
'기록 > 멋쟁이사자처럼 FE 스쿨' 카테고리의 다른 글
[멋사 FE 스쿨] 39일차 스쿨 (2) | 2021.12.25 |
---|---|
[멋사 FE 스쿨] 37일차 리뷰 (0) | 2021.12.21 |
[멋사 FE 스쿨] 36일차 리뷰 (2) | 2021.12.20 |
[멋사 FE 스쿨] 35일차 리뷰 (0) | 2021.12.20 |
[멋사 FE 스쿨] 34일차 리뷰 (0) | 2021.12.16 |
댓글