HTML, Tailwind CSS, JavaScript를 배웠다면 이제 여러 페이지짜리 웹사이트를 만들어볼 차례입니다. 그런데 페이지가 2~3개만 되어도 귀찮은 일이 생깁니다. 사이드바 메뉴가 모든 파일에 복사붙여넣기 되어 있으니까, 메뉴 하나 고치려면 파일을 전부 열어서 똑같이 수정해야 합니다. 파일이 늘어...
Express로 웹 페이지 띄우기 2/5 JavaScript 다음 스텝 Part 2: HTML 파일을 서버에서 서빙하기 Part 1에서 Express로 텍스트를 응답하는 서버를 만들었습니다. 브라우저에 "안녕하세요! 메모 앱 서버가 동작 중입니다."라는 메시지가 출력되는 걸 확인했죠. 동작은 하는데, 솔직히 이걸 "웹사이트"라고 부르기엔 좀 민망합니다. 실...
내 사진 한 장으로 퍼스널 컬러 찾기 4편 퍼스널 컬러 판별과 무료 배포 3편에서 MediaPipe로 얼굴의 478개 랜드마크를 찾고, 볼과 이마에서 700개 픽셀을 추출해서 평균 피부색 RGB를 구했습니다. 결과 화면에 색상 사각형과 RGB 값이 표시되는 것까지 확인했죠. 그런데 RGB195, 158, 135 같은 숫자만 봐서는 이 사람이 웜톤인지 쿨톤인...
내 사진 한 장으로 퍼스널 컬러 찾기 3편 브라우저에서 얼굴 찾기 만들 내용 2편에서 이미지 업로드 UI를 만들고 Canvas에 그리는 것까지 했습니다. 사용자가 사진을 올리면 화면에 표시되고, "퍼스널 컬러 분석하기" 버튼도 달아 뒀죠. 다만 버튼을 눌러도 "3편에서 구현합니다"라는 알림만 뜨고 아무 일도 일어나지 않았습니다. 이번 편에서 그 버튼에 진짜...
내 사진 한 장으로 퍼스널 컬러 찾기 2편 반응형 UI 만들기와 이미지 업로드 만들 내용 1편에서 Vite + Tailwind CSS 프로젝트를 세팅하고 ES 모듈로 파일을 나누는 방법을 익혔습니다. 색상 변환 유틸리티도 만들었고, 개발 서버에서 동작하는 것까지 확인했고요. 뼈대는 갖춰졌으니, 이제 살을 붙일 차례입니다. 교육 현장에서 학생들이 프로젝트를 ...
더 이상 글이 없습니다.
