on
[멋사 FE 스쿨] 38일차 리뷰
[멋사 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/
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로 들어갈 수 있다.
from http://devahj.tistory.com/149 by ccl(A) rewrite - 2021-12-25 01:01:00