에러와 싸우느라 36시간을 고생한 이야기

next.js와 mongodb로 개인 프로젝트를 진행하던 중 임시로 배포를 해봤다. 이전 react 프로젝트를 netlify로 배포했었고, netlify에서 next.js 배포도 지원하기 때문에 금방 할 줄 알고 netlify로 먼저 배포했었다. 사담인데 vercel이 훨씬 배포가 쉬웠다...next.js 개발한 곳에서 vercel도 개발했으니 어찌보면 당연하긴 한데 이 쪽도 push시 자동 배포가 안 되어서 원인을 찾느라 고생 꽤나 했다 (따로 레포지토리를 연결하고 브렌치 지정해주니 정상 작동). 직면한 문제 문제는 netlify 배포에 성공하고 나니 페이지는 불러오지만 db에서 데이터를 가져오지 못하는 것이었다. console을 확인해도 network를 확인해도 에러에 대한 명확한 원인이 없어 이걸 ..

• format_list_bulleted InventoryManagement
• · 2023. 10. 22.
• textsms

풀지 못 한 문제(실시간 시계)

현재 시간을 실시간으로 사용해야 하는데 문제가 생겼다. setInterval을 사용해서 1초마다 시간을 뽑아낸 후 recoil에 보냈는데... 보낸 시간을 불러와 뽑아보면 오늘 날짜보다 하루 늦은 날짜로 나온다. recoil에 보낸 후 다시 불러오는 동안 아무런 가공도 거치지 않았다. 그저 recoil에 set 한 후 다시 import 해서 찍었을 뿐인데... 하루는 어디에 잡아먹힌 것인가. // component.js useEffect(() => { const id = setInterval(() => { const now = new Date(); const todayInKorea = new Intl.DateTimeFormat("en-US", { timeZone: "Asia/Seoul", year: "n..

• format_list_bulleted InventoryManagement
• · 2023. 10. 20.
• textsms

Solo - Coz Shopping

Coz-Shopping 개요 React를 사용해 주어진 요구사항을 만족하는 상품리스트 페이지와 사용자가 북마크 한 상품들을 조회할 수 있는 북마크 페이지를 포함하는 SPA 앱을 구현한다. 프로젝트 요구사항 사용스택 react axios redux toolkit react-router-dom react-toastify styled-components 제작기간 5/12(金) : 프로젝트 요구사항 분석 및 플래닝 5/15(月) - 5/21(日) (7일간) : 프로젝트 구현 src 디렉토리 구조 📦src ┣ 📂Pages ┃ ┣ 📜Bookmark.js ┃ ┣ 📜Main.js ┃ ┗ 📜ProductList.js ┣ 📂components ┃ ┣ 📜Footer.js ┃ ┣ 📜HambergerModal.js ┃ ┣ 📜H..

• format_list_bulleted Coz' Shopping
• · 2023. 6. 11.
• textsms

[Toy Projects] 나만의 아고라스테이츠 만들기

Codestates - 나만의 아고라스테이츠 만들기 23년 3월 9~10일, 코드스테이츠에서의 한 달이 지나 Section 1의 마지막으로 솔로 프로젝트 '나만의 아고라스테이츠 만들기'가 이틀간 진행되었다. 동작설명 질문 리스트 10개씩 페이지네이션 질문 등록하면 질문 리스트에 디스커션 추가(현지 시간 반영) 제목 검색 기능(Coz' 요구사항 외 개인적으로 추가한 기능) ## Bare Minimum Requirement Self Checklist - [⭕️ ] 디스커션 나열 기능 - [⭕️ ] `script.js`를 수정하여 `agoraStatesDiscussions` 배열의 데이터를 나열할 수 있게 구현합니다. - [⭕️ ] CSS - [⭕️ ] 아고라 스테이츠 질문 리스트가 중앙으로 와야 합니다. ..

• format_list_bulleted Frontend Mentor
• · 2023. 3. 15.
• textsms

[Toy Projects] 레트로 Space Shooter Game 만들기

Space Shooter Game 유튜버 '코딩알려주는누나'의 영상을 참고하여 space shooter game을 만들었다. 동작설명 키보드의 좌우키로 우주선을 조종하고 스페이스바로 총알을 발사할 수 있다. UFO가 1초간격으로 랜덤하게 내려오고 총알로 UFO를 격추시키면 SCORE가 올라간다. 우주선이 화면 바닥에 닿으면 게임오버화면이 뜨며 게임이 멈춘다. 사용스택 html, css, javascript 결과물 배운 것 1. KeyboardEvent.KeyCode가 지원 중단되고 KeyboardEvent.Key로 바뀌었다고 한다. 키값을 보면 KeyCode는 32(스페이스바), 37, 39(좌우방향키) 등 숫자로 콜아웃되고 Key는 'ArrowRight', 'ArrowLeft' 등 상대적으로 직관적인 ..

• format_list_bulleted Frontend Mentor
• · 2023. 3. 7.
• textsms

[Toy Projects] 팁 계산기

Frontend Mentor - tip calculator app 동작설명 bill(가격), select tip%(팁 퍼센테이지), Number of people(사람 수)을 입력/선택하면 팁값(가격/사람수*(팁퍼센트/100))과 본인이 내야하는 전체 금액(음식값(가격/사람수)+팁값)을 입력과 동시에 실시간으로 계산해준다. 팁 값과 전체 금액은 소수점 이하 2자리로 표시. Number of people(사람 수)의 경우 입력하지 않으면 한 명(1)으로 계산되지만 0을 입력하면 입력창의 테두리가 붉게 변하며 can't be zero라는 안내문구가 뜬다. RESET버튼을 누르면 모든 입력값이 초기화된다. bill을 제외한 select tip%과 number of people 은 입력하지 않아도 작동한다 (b..

• format_list_bulleted Frontend Mentor
• · 2023. 2. 12.
• textsms