HTML 의 submit 버튼을 누르면 데이터가 서버로 갑니다. 간단해 보이지만, "어떤 형식으로 보내느냐"에 따라 서버가 받는 데이터의 모양이 완전히 달라집니다. 텍스트만 보낼 때, 파일을 함께 보낼 때, JavaScript로 API를 호출할 때 — 상황에 따라 각각 다른 인코딩 방식을 씁니다. application/xwwwformurlencoded, m...
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 모듈로 파일을 나누는 방법을 익혔습니다. 색상 변환 유틸리티도 만들었고, 개발 서버에서 동작하는 것까지 확인했고요. 뼈대는 갖춰졌으니, 이제 살을 붙일 차례입니다. 교육 현장에서 학생들이 프로젝트를 ...
내 사진 한 장으로 퍼스널 컬러 찾기 1편 프로젝트 세팅과 모듈화 첫걸음 교육 현장에서 HTML과 Tailwind CSS를 가르치고 나면, 학생들이 꼭 하는 질문이 있습니다. "이제 뭘 만들어야 하나요?" JavaScript로 객체와 배열까지 배웠는데, 막상 뭔가 그럴듯한 걸 만들려고 하면 막막합니다. 파일 하나에 HTML, CSS, JavaScript를 ...
더 이상 글이 없습니다.
