마법사책

내 노트북에서 어느새부터 tailwindcss 를 사용하지 않음에도 Cannot find module 'tailwindcss 에러가 계속 발생하였다. GPT 에게 질의를 해도 마땅한 답을 내놓지 않아 어느정도 포기하고 있었다. 아무래도 해결되지 않아서 openAI 의 딥리서치를 써봤다. 이것저것 정보를 준 다음 검색을 해주더니 해결방안을 제시해줬다. 이 해결방안들은 그냥 4o에게 질의했을 때에도 주던 답변이었다. 그래도 정리해서 방안들을 나열해주니 따라해보기로 했다. 계속 보이던 해결 방안 중 무시했던 것이 있었는데, 상위 폴더에 tailwindconfig.js 가 있다는 것이었다. 상위 폴더에 이런 파일이 있을리 없다 생각했지만 혹시 모르니 상위로 폴더를 타고 가봤다. 언제적 프로젝트인지 제일 최상위인..

Cookie 는 간단한 정보를 저장할 수 있는거 같음. 인증에 자주 사용이 된다. 요청을 보내고 서버가 cookie 를 줌. 그럼 자동으로 http 요청을 보낼 때 같이 담겨져서 보낸다. 굿. 그러면 http 요청을 받을 때 그 쿠키를 확인해서 인증이랑 인가를 하는거지. 간단하네요 뭐 서버가 어떤 식으로 인증 인가를 하는 지에 따라 달라지긴 하겠습니다.

요즘 웹은 모바일 뷰포트랑 pc 뷰포트를 각각 반응형으로 설계하여야 한다. 이때, img 를 사용하게 된다면 일단 고해상도의 사진을 불러온 다음에 조정을 하게된다. 이는 모바일 사용자에게 치명적이다. picture 를 사용하면  뷰포트의 크기에 따라 다른 이미지를 제공할 수 있기 때문에 해상도를 달리한 이미지를 준비하여 각각 제공을 할 수 있다. 이러면 최적화에 도움이 된다. ref : https://developer.mozilla.org/ko/docs/conflicting/Learn_web_development/Core/Structuring_content_56f25f5ab024f40712bfcb6d2a4a419f560f3f86a2332133605f5e49a2219e4d

요즘 웹은 모바일 뷰포트랑 pc 뷰포트를 각각 반응형으로 설계하여야 한다. 이때, img 를 사용하게 된다면 일단 고해상도의 사진을 불러온 다음에 조정을 하게된다. 이는 모바일 사용자에게 치명적이다. picture 를 사용하면  뷰포트의 크기에 따라 다른 이미지를 제공할 수 있기 때문에 해상도를 달리한 이미지를 준비하여 각각 제공을 할 수 있다. 이러면 최적화에 도움이 된다. ref : https://developer.mozilla.org/ko/docs/conflicting/Learn_web_development/Core/Structuring_content_56f25f5ab024f40712bfcb6d2a4a419f560f3f86a2332133605f5e49a2219e4d

meta name="viewport" content="width=device-width, initial-scale=1.0"> 헤더의 메타 뷰포트 태그. 뷰포트는 사용자가 실제로 보고 있는 웹사이트의 부분을 말한다. 만약 사용자가 브라우저를 resize 하게 된다면 뷰포트의 크기가 달라지게 된다. 이 뷰포트의 크기를 기반으로 vw vh 의 값이 결정된다.    : 벡터 그래픽을 웹에 추가. 랑 다른 점은 ?  : WebGL 이나 도형 그리기 등등  픽셀 단위로 제어 가능한 요소.

어차피 프론트엔드의 코드는 브라우저로 전달되어 클라이언트 측에서 돌아가는 것이기 때문에 요청을 보낼 때는 어떻게든 사이트를 변조할 수 있다. 그렇기 때문에 프론트엔드 측에서 아무리 유효성 검사를 해봤자 어느 코드가 백엔드로 전달되는 것을 막을 수 없다. 그렇기 때문에 프론트 엔드는 사용자 경험을 위한 검사를 수행한다.(1) 사용자 경험(UX) 개선을 위한 검사사용자가 오류를 즉시 인지할 수 있도록 설계.예: 필수 입력 필드를 누락했거나, 이메일 형식이 잘못된 경우 즉각 알림.(2) 기본적인 입력 제한데이터가 서버로 전송되기 전에 명백히 잘못된 값을 차단.예: 이름 필드에 숫자가 입력되는 경우.등등 대충 UX 를 위한 설계만 해주면 된다!