개발블로그

안녕하세요... 3탄으로 돌아왔습니다. 왜냐하면 ec2로 배포를 실패했기 때문입니다. 그래서 과감하게 제목에서도 ec2 뺐습니다 ㅎ시행착오를 겪었으니, 그 내용을 작성하고, 새로운 배포 방식을 소개하려고 합니다. 시행착오1. npm run build가 안되는 문제npm run build 하면 page가 모아지면서 빌드가 되어야하는데, 무한로딩이 발생했습니다...ec2 인스턴스 연결을 해도 똑같이 무한로딩... 정말 1시간 반이나 기다려봤지만, 안됩니다... 이유는 내 생각에는 저번보다 페이지가 늘어나고 파일들이 많아지니까 용량 부족이지 않을까 싶습니다... 아직까지도 의문입니다. 그래서 인스턴스를 삭제하고 만들고 2번정도 반복했네요.. 해결로컬에서 직접 npx next build 를 한 후 out 폴더를..

수업 듣고 공부하느라 밀린 서버 배포하기를 마저 작성하려고 합니다! 1. 프로그램 창이 열린 것까지 저번 1 때 완료했고, login ad:라고 쓰여있는 곳에 ec2-user라고 입력합니다! 그리고 엔터 이제 순서는 node.js 설치, git 설치, Next.js 앱 빌드 및 실행, Nginx 설정, Let's Encrypt 사용 입니다.  2. node.js 설치이제는 캡처본에는 프라이빗 IPv4 주소가 나오기 때문에 코드로 알려드립니다!curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -command not found가 나오셨다면 아래를 입력해 주세요. 위 명령어가 되셨다면 아래 코드는 스킵!sudo yum install curl -y..

AWS 배포에 대한 강의를 못 들었지만, 검색을 바탕으로 결과에 성공했기에 나중에 또 쓸 일을 위해 작성해둡니다. 혹시나 잘못된 점이 있다면 알려주세요! 그리고 나중에 수업을 듣고 잘못된 점이 있다면 추가적인 글을 남기려고 합니다.   1. AWS에 로그인 후 EC2를 검색하여 EC2 서비스에 진입합니다. 2. 리전을 서울로 선택한다. (기본적으로 버지니아 북부로 설정되어 있고, 우리나라로 하면 확실히 속도가 빠른 것을 느꼈습니다.)3. 인스턴스 시작을 누른다4. 원하는 이름을 채운 후 Amazon Linux가 선택되어 있는 지 확인한다. 저는 2023 AMI 기준으로 작성합니다. Linux2도 있고 Ubuntu도 있지만, 사실 상 배우지 않아서 무슨 차이점이 있는지 모릅니다..ㅎ 그러나 ubuntu로 ..

1. guard clause 사용하기중첩 if문 사용하였기 때문에 guard clause를 사용해보라고 하셨다. 사실 처음 들어서 guard clause부터 찾아봤다. Guard clause는 특정 조건을 만족하면 바로 함수를 종료할 수 있도록 하여 복잡도를 줄이고, 가독성을 높이는 프로그래밍 패턴이라고 합니다.    2. 토글 위치const rect = e.target.getBoundingClientRect();    setModalPosition({      top: rect.bottom + window.scrollY + 5,      left: rect.left - 150,    }); 어느 정도 위치는 잡았지만 스크롤하면서 위치가 변했다... 그래서 창 상하를 기준을 플러스해서 잡아주니 내가 원하..

1. 띄어쓰기예전 html 코드를 가져와서 next.js로 마이그레이션 하는 과정에서 띄어쓰기 부분이 글자 그대로 출력되는 부분을 발견했다.원래는잘 활용했는데...&nbspnext.js에서는 아래처럼 사용해야한다. 유니코드 문자라고 한다.{"\u00A0"}2. 제출 버튼button            type="submit"            className={`${styles.login_btn} ${              isButtonDisabled ? styles.btn_disabled : styles.btn_active            }`}          > type을 항상 button으로 줬는데, submit으로 하면 클릭을 하든 "엔터"를 하든 post가 가능해진다! 엔터는 처음 ..

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..

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