본문 바로가기
반응형

프로젝트

 (42)
[Error] ESLint: Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): 'jsx, flow, typescript' 해결 방법 1. npm i @babel/preset-react 을 진행한다. 2. ESLint 설정파일에 다음 코드를 추가한다. "parser": "@babel/eslint-parser", "parserOptions": { ... "babelOptions": { "presets": ["@babel/preset-react"] }, } https://stackoverflow.com/questions/68677437/eslint-parsing-error-this-experimental-syntax-requires-enabling-one-of-the-fol ESLint: Parsing error: This experimental syntax requires enabling one of the following ..
[ESLint&Prettier] React CRA 후 ESLint & Prettier 설정하기(feat. javascript) 지금까지 팀 프로젝트 또는 개인 프로젝트에서 내가 ESLint 및 Prettier 등의 초기 세팅을 진행해본 적이 없었다. 이번 프로젝트 '나무'는 스터디원분과 함께 총 2인으로 구성된 팀 프로젝트인 만큼 서로가 할 수 있는, 해보고 싶은 최대한의 다양한 경험을 하기로 했다. 우리 하고 싶은거 다 해~ 나의 첫 미션은 나무 프로젝트의 프로젝트 초기 세팅(CRA + ESLint + Prettier)이다. ESLint와 Prettier는 협업을 위해 꼭 필요한 존재이다. 각자의 코딩 스타일이 다르기에 이러한 도구들을 사용해 우리의 프로젝트에 하나의 일관된 규칙을 적용해줄 수 있다. 먼저 ESLint와 Prettier가 무엇인지 간략하게 정리하고 넘어가자. ESLint와 같은 Linter 는 소스 코드에 문제..
[리팩토링] 자바스크립트로 작성한 프로젝트 타입스크립트로 마이그레이션하기 드디어, 오심테의 타입스크립트 마이그레이션을 진행했다. 미루고 미뤄뒀는데 손이 근질근질해서 생각난김에 바로 해버렸다. 처음엔 자바스크립트로 개발하고, 전체적인 개발을 마친 후 타입스크립트로 전환했다. 한 입 크기로 잘라먹는 타입스크립트 강의를 수강하고 배운 내용을 적용해보고자 하였다. 사실 아직 타입스크립트에는 더 익숙해져야 한다는 걸 느꼈다. 그래도 강의를 수강한 덕분에 이전에 '맛피' 프로젝트를 할 때보다는 아주 조금? 더 다양한 타입스크립트 문법을 적용해본 것 같다. 앞으로 타입스크립트와 더 친해질 수 있도록 간간히 강의 내용을 복습해야겠다. 자바스크립트 프로젝트를 타입스크립트로 마이그레이션 하는 과정을 간단히 기록해보고자 한다. 먼저 타입스크립트 관련 패키지를 설치한다. 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. 사용자 경험 개선: 현재 웹 사이트의 사용자 경험을 분석하고 개선할 수 있는 방법을 고려해보세요. 예를 들어, ..
반응형

티스토리툴바