개발블로그

1. 반응형 미디어 쿼리PC 버전일 때는, 3개TABLET일 때는, 2개MOBILE일 떄는, 1개이렇게 보여줘야했는데, CSS상에서 grid를 사용하면 그저 열만 정렬해줬다...내 나름 이론상 1행 고정에 3열, 2열, 1열하면 될 것 같아서 gird-template-rows: repeat(1, auto)를 추가로 해줬지만, 역시나 통하지 않았다... 그래서 오른쪽 사진처럼 JS에 넣어버렸다...결과는 성공적이지만, 찝찝하게 마무리했다... 근데 역시나 멘토님께서 JS보다는 CSS에서 하는게 좋다고 말씀해주셨다. 결론은 선택자에서 자손들을 안보이게 하기를 사용하기로 결정했다.

최대한 구글링을 통해 문제를 해결하려고 했으나, 한 문제에 너무 시간 소요가 되는 것 같아서 GPT에게 물어본 내용을 정리하려고 합니다. 아직 미션을 다 진행 한 것이 아니라서 추후 계속 업데이트할 예정입니다. 1. Textarea 문제이런 textarea를 적용할 때, 아래와 같이 너무 딱 달라붙는 문제가 생긴다. 너무 보기가 싫어서 패딩도 줘보고 했는데 해결이 안되었다...간단한 해결 방법!들여쓰기 css를 적용한다. px이 커질수록 안녕이 오른쪽으로 밀어내진다..input { text-indent: 20px;}2. 클릭 후 수정하기, 삭제하기 모달창 위치초급 프로젝트 때는 그냥 잘됐는데... 선택하는게 위쪽이랑 아래쪽에 따로따로 있어서 해결이 안되나보다... const [modalPosition..

오늘은 리액트만 사용할 때와 비교해서 Next.js 사용하는 이유에 대해서 포스팅을 진행하려고 합니다. Next.js에 대해서 먼저 알아봅시다.Next.js의 공식 사이트: https://nextjs.org/Next.js란? 서버 사이드 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다. 라고 사전에 나와있지만, 간단히 말하면 리액트에서 기본 기능을 확장하여 안정되고 빠른 웹 어플리케이션을 개발할 수 있습니다! Next.js 안정화된 버전인 15.0.0이 2024년 10월 21일에 발표가 되었다는 소식도 있답니다..ㅎ 안정화된 버전이지만 아직은 두고보고 사용할 예정입니다. 이제 React.js와 비교해서 Ne..

중간중간에 알게된 사실이나 배운 내용을 꾸준히 작성해야했는데, 첫 프로젝트라서 그런지 코드 작성하느라 바빠서 회고를 못했던 것 같다... 회고하면서 블로그 작성 시점이 늦은 것 같지만, 기억을 잃기 전에 회고록을 작성하려고 합니다!코드를 하나씩 분석해가며 알게 된 내용을 작성하겠습니다. 1. NVMNode version Manager의 약자로 node.js의 버전을 관리해주는 아이이다. 공식 홈페이지에는 나와있지 않은 더 높은 버전들이 있어서 dotenv를 이용하지 않고, .env를 바로 관리할 수 있었다.ㅇ 사용법https://github.com/coreybutler/nvm-windows/releases위 깃허브에서 nvm-setup.exe를 다운 받는다.nvm list availablenvm inst..