본문 바로가기

프로젝트/오심테(오늘의 심리테스트)

(24)

[리팩토링] 자바스크립트로 작성한 프로젝트 타입스크립트로 마이그레이션하기 드디어, 오심테의 타입스크립트 마이그레이션을 진행했다. 미루고 미뤄뒀는데 손이 근질근질해서 생각난김에 바로 해버렸다. 처음엔 자바스크립트로 개발하고, 전체적인 개발을 마친 후 타입스크립트로 전환했다. 한 입 크기로 잘라먹는 타입스크립트 강의를 수강하고 배운 내용을 적용해보고자 하였다. 사실 아직 타입스크립트에는 더 익숙해져야 한다는 걸 느꼈다. 그래도 강의를 수강한 덕분에 이전에 '맛피' 프로젝트를 할 때보다는 아주 조금? 더 다양한 타입스크립트 문법을 적용해본 것 같다. 앞으로 타입스크립트와 더 친해질 수 있도록 간간히 강의 내용을 복습해야겠다. 자바스크립트 프로젝트를 타입스크립트로 마이그레이션 하는 과정을 간단히 기록해보고자 한다. 먼저 타입스크립트 관련 패키지를 설치한다. npm i typescri..

오심테 기능 추가 시간 관계 상 Next JS를 체험해볼 수 있는 난이도 및 양을 고려하여 많은 기능을 만들지 못했다. 목표는 SQL 개발자 전까지 테스트 목록, 테스트, 테스트 공유 기능을 만드는 것이였다. 만들면서 욕심이 생겨 추가하고 싶었던 기능이 몇 가지가 더 있어서 추후 오심테를 리팩토링 하거나 기능을 추가할 수 있는 시간적 여유가 생기면 어떤 것을 하고 싶은지 순위 별로 정리해놓자. # 기능 추가 1. 로그인 기능 추가 - OAuth 사용하여 로그인 - 해보고 싶은 테스트 찜 하기 - 찜해놓은 테스트 목록 보기 2. 심리 테스트 소셜 공유 - 카카오톡으로 공유할 수 있는 기능 추가 3. 심리 테스트 결과 통계 - 각 답변 별 유저 선택 비율 보기

[회고] 토이 프로젝트 '오심테' 회고 프로젝트 명 : 오심테(오늘의 심리테스트) 프로젝트 기간 : 2023.05.17 ~ 2023.06.08 프로젝트 소개 : 카테고리 별 심리 테스트 모음집 다양한 심리 테스트를 하나의 플랫폼에서 빠르고 간편하게 찾기 심심할 때, 시간 때울 때, 아이스 브레이킹이 필요할 때 가볍게 즐기기 가족, 친구, 연인과 테스트를 공유하며 추억 쌓기 기술 스택 : NextJS, React, Javascript, TailwindCSS, Recoil, Firebase, Vercel 배포 링크 : psy-test-flame.vercel.app 깃허브 링크 : https://github.com/sweetyr928/Psy-Test 나의 첫 토이 프로젝트, '오심테'를 마무리 짓는다. 동생과 심리테스트를 즐겨했었다. 자기 전에 누..

[Vercel & NextJS] Vercel로 NextJS 배포하기(feat. 5시간 + 음주코딩) 오늘은 지금까지 약 한 달 조금 덜 되는 시간 동안 애정 깊게 만들었던 오심테를 Vercel을 사용해서 배포해 보았다. 약 5시간이 걸렸고, 계속 듣지도 보지도 못한 에러(찾아보니 NextJS와 Vercel의 버그인 듯)가 나를 끊임없이 괴롭혀서 진짜 배포는 포기할까 싶었다. 하도 이거 저거 수정해 보고 구글링 한 건 다 적용해 봐서 특정한 어떤 것을 수정했을 때 성공했는지 모르겠지만, "진짜 이것만 해보자"하고 마지막으로 수정했던 것이 해결책이었던 것 같다. 정말 너무 답답해서 저녁 먹고 술 꺼내와서 마시면서 했다. 엄마가 술 냄새난다고 한심하게 쳐다보셨지만(?) 배포 성공했을 때의 그 감동은 잊히지가 않는다. 맨 처음에 문제가 되었던 것은 node의 버전이었다. 내가 사용하던 노드 버전은 20번대였고..

[NextJS] NextJS에 네이버 폰트 적용해보기 지피티가 폰트나 레이아웃을 바꿔 분위기를 살려보라고 했으니(?) 폰트를 변경해보자. 기본 폰트는 조금 밋밋한 감이 있어 조금 더 깔끔하지만 둥글 둥글 편안한 폰트를 적용해줄 것이다. 먼저, 네이버 글꼴 모음 사이트에서 적용하기 원하는 파일을 다운받는다. 나는 나눔 스퀘어 체를 다운 받았다. https://hangeul.naver.com/font/nanum 다운을 완료했다면 public 폴더 내에 fonts 폴더를 만들어 준 후, 다운받았던 글씨체 파일을 넣어준다(압축 해제 후). 그런 다음 global.css에 다음과 같은 코드를 추가해준다. 무난한 regular와 bold 체만 사용해줄 것이다. 해당 font-family를 body에 작성해 주어 프로젝트 전체에서 해당 폰트가 사용되도록 하였다. @fo..

[리팩토링] 모바일 환경 반응성 추가 리팩토링 해보기 목표했던 기능 구현도 완료했고, 데이터도 많이 추가해 대략적으로 '오심테'를 완성한 것 같았다. 프로젝트 종료 예정일이였던 sqld 시험 전날까지 시간이 좀 남아 리팩토링을 해야겠다는 생각이 들었다. 디자인도 조금 더 손을 보고, 추가할만한 더 좋은 기능이 있으면 추가해보도록 해야겠다 싶어 지피티에게 물어보았다. 지피티의 대답은 이러했다. 꽤 좋은 아이디어들을 많이 제공해줬다. 3번을 제외하고는 시험 전 날까지 할 수 있는 만큼 해보려고 한다. 토이 프로젝트를 진행하면서 좋은 작업을 하셨습니다! 여러 가지 개선점을 고려하여 프로젝트를 보완할 수 있습니다. 아래는 몇 가지 제안 사항입니다: 1. 사용자 경험 개선: 현재 웹 사이트의 사용자 경험을 분석하고 개선할 수 있는 방법을 고려해보세요. 예를 들어, ..

[NextJS] 이미지 로딩 애니메이션 구현하기 NextJS는 SSR을 제공하기 때문에 Image 컴포넌트를 사용하면 로딩이 조금 느리게 된다는 것을 체감할 수 있다. 사용자 입장에서는 클릭했는데 아무 변화가 없으니 다시 클릭해야 하나 어쩌나 헷갈릴 수도 있다. 그래서 간단하게 이미지 로딩 애니메이션을 구현해보기로 했다. 먼저, global.css 파일에 해당 코드를 추가해준다. .animation { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; transform-origin: 50%; margin-left: -21px; margin-top: -21px; border-radius: 50%; border: 4px solid plum; border-top-color: transp..

[NextJs & Recoil] NextJS에 Recoil 적용하여 전역 상태 관리하기 props drilling으로도 해결이 안되는 문제는 꼭 있다. 오늘 그 문제가 발견되었다. 테스트 중 일 때 즉 test id 별 라우팅 되어 testing 페이지를 보고 있을 때에 네비게이션 바에 있는 카테고리를 누르면 메인 페이지로 이동하여 카테고리 별 테스트 목록을 볼 수가 없었다. 해결해보려고 props drilling을 해볼까 라우팅 시 props를 전달해볼까 별의별 생각을 다해보았지만 결론은 하나였다. 카테고리를 전역 상태로 관리해서 어느 페이지에서도 카테고리를 변경하여 메인페이지로 이동할 수 있도록 해야 한다. 지난번 프로젝트에서도 이용했던 Recoil을 다시 한번 꺼내게 되었다. Recoil은 간단하고 빠르게 적용시킬 수 있다는게 매우 큰 장점인 것 같다. 실제로 이 프로젝트에 Recoi..

이전 1 2 3 다음

티스토리툴바