개인프로젝트
-
Next.js에서 Google Font 적용하기개인프로젝트 2023. 4. 10. 14:51
요새 면접보러 다니느라 너무 바쁘고 힘든 나날이 연속되서 프로젝트에 손을 놓고 있었습니다 ㅠㅠ.. 언능 마무리 짓고자 고고 하겠습니다. 저는 이 프로젝트를 크롬으로만 확인하며 UI를 제작했습니다. 그러다 기능테스트를 위해 사파리로 들어갔었는데 왠걸.. 궁서체 비슷한 폰트로 나오는겁니다. 다른 환경에서도 동일한 UI를 보여주기 위해서는 폰트를 꼭 적용해야겠다 라고 느끼고 Next.js에서는 어떻게 웹폰트를 적용시켜야 하는지 검색해보았습니다. 그냥 리액트는 Google Font 에서 지원해주는 주소를 복붙만 하면 됐는데 Next.js는 조금 다르다고 합니다. 관련 공식문서 https://nextjs.org/docs/basic-features/font-optimization Basic Features: Fon..
-
Next.js에서 Image컴포넌트가 적용되지 않습니다..개인프로젝트 2023. 4. 2. 14:00
이렇게 Next.js에서 이미지를 알아서 최적화해주는 Image컴포넌트를 사용하려고 했습니다. 근데 아래와 같이 이미지가 나오지 않습니다. 원인은 아마 이미지URL에 있을 것 같은데요. 저 src 안에 있는 profile을 콘솔로 출력하면 주소는 다음과 같습니다. popfile: 'http://www.animal.go.kr/files/shelter/2023/03/202304012104101.jpg'; URL에 실제 들어가보면 이미지는 잘 나옵니다. 이미지를 가지고 오는 과정에서 문제가 생기는 것 같아요. 혹시몰라 http를 https로 바꿔주고 하드코딩 했는데 아래와 같은 에러가 뜨네요. 저 빨간 문구를 눌러보니 이런 화면이 뜹니다. 아~~컨피그에 등록을 해줘야되는군요. 아래 코드를 next.config..
-
공공API 가져오기 너무 어렵다..개인프로젝트 2023. 4. 1. 03:01
일단 유기동물의 리스트를 가져오기 위해 https://www.data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15098931 농림축산식품부 농림축산검역본부_동물보호관리시스템 유기동물 정보 조회 서비스 동물보호관리시스템의 유기동물 정보를 조회할 수 있는 서비스이며, 유기동물정보에 포함되는 부가적인 정보를 조회할 수 있도록 시도 조회 API, 시군구 조회 API, 보호소 조회 API, 품종 조회 API www.data.go.kr 구글링하여 이런 API를 찾아 들어갔습니다. 활용신청을 하니 바로 API Key를 주네요. 이 것을 활용하기 위해 샘플코드를 봅니다. 음.. 뭔가 내가 원하는 형태는 아니네요. API Key는 소중하니 환경변수로 따로 만들어줍..
-
개인 프로젝트(유기동물 홍보 플랫폼) 구상하기개인프로젝트 2023. 3. 29. 22:29
개인 프로젝트로 유기동물 홍보 사이트를 만들어보려고 합니다. 포인핸드처럼 만들어보고 싶으나 실력이 부족해서 될지 모르겠어요. 최선을 다해서 만들어보겠습니다. 그리고 반응형으로 구현할 것이기 때문에 모바일 먼저 구현할 계획입니다. 와이어프레임은 시간이 너무 오래걸릴 것 같아 패스 이번 목표는 "나의 프론트엔드 개발 역량을 최대한 보여주자" 입니다. 채용된 기술 사용 언어 - Typescript / 런타임 이전 버그나 에러를 잡기위해 채용 프레임워크 - Next.js / SEO, 코드스플리팅을 통한 로딩속도 개선, 유연성과 확장성이 높아 채용 서버 상태관리 - React Query / API요청결과를 캐시해서 재사용할 수 있음, 상태관리와 비동기처리에 용이하여 채용 클라이언트 상태관리 - Redux Tool..