본문 바로가기
반응형

분류 전체보기

 (501)
제 49회 SQL 개발자 시험 후기(준비 방법, 노랭이, 기출 문제, 준비물, 시험 난이도 등) 약 한 달간의 준비 기간을 마치고 어제 신도림 중학교에서 제49회 SQL 개발자 시험을 응시하고 왔다! 프론트엔드 개발자를 지망하고 있지만 데이터베이스에 대한 최소한의 지식이 있어야 백엔드 개발자 분들과의 의사소통을 조금 더 효율적으로 할 수 있을 것 같다고 생각했고, 스터디 동기 분께서도 함께 공부하자고 꼬드겨 주셔서(?) 함께 데이터 베이스 공부하는 김에 자격증까지 따자는 생각으로 준비하게 되었다. 나는 경기도에 거주하는데 집 근처에 응시할 수 있는 장소가 없어 그나마 1호선 또는 ktx를 타고 갈 수 있는 신도림 중학교를 택했다. 10시 시험인데 9시 반까지 입장하라고 해서 아침 7시 30분 대의 ktx를 타고 영등포역에 가서 신도림역까지 버스 타고 간 뒤 약 15분 정도 걸어서 신도림 중학교에 도..
[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..
[React] 함수에 useCallback 사용하여 리팩토링 해보기 예전에 진행했던 맛피 프로젝트에서 팀원분의 코드를 보던 중, 팀원분께서 메서드에 useCallback을 사용하시는 것을 보았다. 그 팀원분이 왜 useCallback을 사용하는지 알아보고 나도 적용해보고 싶었는데, 그때 당시에는 시간도 너무 촉박했을 뿐더러 useCallback과 useMemo에 대해 대략적인 느낌만 알고 있었던 터라 사용해야겠다는 생각 자체를 못해서(?) 적용을 못해본채로 넘어가 아쉬웠었다. 기회가 된다면 코드를 다시 보고 useCallback을 사용할 수 있는 부분은 사용해보도록 리팩토링 하고 싶다(그래서 언제할건데^^?하긴 할거냐구.) 그래서 이번 프로젝트에서는 useCallback을 꼭 한 번 사용해보기로 했다. 작은 부분이라도! 먼저 useCallback이 무엇인지 알아보자. u..
[NextJS & Firestore] 인기 Top3 테스트 목록 보여주기 오늘은 조회수 별 인기 Top3인 테스트들을 보여주는 기능을 만들었다. 먼저 index.js의 getStaticProps에서 또 하나의 props를 추가했다. 처음엔 topLists를 lists를 활용하여 조회수 별 내림 차순을 하도록 만들었다. const lists = data.docs .map((doc) => ({ ...doc.data(), id: doc.id })) .sort((a, b) => b.id - a.id); // id별 내림차순 const topLists = lists .sort((a, b) => b.views - a.views) .slice(0, 3); 이렇게 했더니 무슨 이유인지 lists에도 영향이 가서...조회수가 높은 것부터 보여지기 시작했다. 이유는 모르겠다. 그래서 다음과 같..
반응형

티스토리툴바