공모전

공모전관련 프로젝트를 하기 위해서 아이디어 회의를 진행 했다. 각자 2가지 아이디어를 제시하고, 투표 결과로 프로젝트를 하기로 하였다. 아이디어는 총 4가지로 펫케어 프로젝트공원, 두드림길, 운동장 api를 사용해 같이 운동멤버를 구하는 프로젝트지도 API와 부동산 정

공모전 > 2024년 서울 열린데이터광장 공공데이터 활용 창업경진대회 ( 03월 ~ 05월 01일 ) 프론트엔드 4명 / 백엔드 2명 Github : 깃허브 주소 사이트 주소 : https://www.daengdaengnyang.shop/ 공모전을 하게된 계기

요번 프로젝트에서의 나의 목표는, 다양한 util을 알아가고, 사용하고, 수정해보고 싶었기에 굳이 안써두 되는 것을 써보면서 알아가는 시간이였다. 프로젝트에서 내가 맡은 기능/페이지를 구현하기에 앞서서, 전반적으로 프론트엔드 개발자분들이 사용할 UI 컴포넌트가 있을

CVA의 helper인 VariantProps를 알게 되었고, 적용을 해보았는데..문제가 발생하였다. 원인을 뒤적여 보니 T_CVAProps 의 타입을 보면 객체이다. props로 전달하는 level은 Tag 컴포넌트로 dynamic하게 사용되는데 객체형태로 props

저번 글에서 해결하기 위해 extends 문법을 사용해서 해결이 되는 줄 알았으나 또다른 에러가 나타났다. hnull 은 JSX 문법에 존재하지 않는다는 에러였다. 이러한 type error가 발생하는 이유는 저번 코드 작성에서 본 사람들은 알겠지만T_CVAProps

이제 value에 들어있는 null을 없애줘보자null을 제거하기 위해서는 typescript의 utility 지원 NonNullable<T>을 '활용' 하면 될것 같다. NonNullable<T>은 유니온타입의 '값' 에서 null, undefined를 제

저번 글에서 내가 원하는 타입을 만드려면 3단계를 거쳤었다. 그렇지만, 하드 코딩 같기도 하고, 한번에 처리할 수 있는 Generic으로 만들고 싶은 욕심이 들었다. 기존 해결방법은작성을 3번 하면 끝이지만, 다른 컴포넌트 , 공통 UI를 만들 때 Cva로 style을

우리 프로젝트에서 처음 적용해보는 것 중 하나가 ShadCn UI Component library이다. ShadCn은 다양한 UI Component를 제공하는데 그 중에서 radix Ui , zod , react-hook-form으로 결합한 Form UI가 가장 눈여겨

Custom을 진행하기에 앞서서 ShadCn에서 용례를 제공하는데, 그 용례에 따라서 내가 활용해서 코드를 작성해 봤다. 로그인 UI만 해도 딱 70줄이고. 회원가입 부분까지 생각하면 70줄이상이다. 그리고 코드를 보면 import 부분 또한 매우 지저분 해보이고,

프로젝트 내에서 이미지 등록이 2군데 있는데, 2군데 모두 이미지 미리보기를 사용한다.기존 프로젝트에선, URL.createObjectURL()를 사용하였지만 , 다른 메소드를 사용해 보고자 결정한 것이 시작이였다. URL.createObjectURL는 동기 실행이다.

form 관련 라이브러리중 zod를 사용하고 있는데, zod에서는 File관련 스키마 형식과 타입이 존재하지 않는다고 한다. 그래서, zod를 사용하여 validation을 할 때 우회해서 하는데 zod의 property중 instanceof와 File 타입을 섞어서

FileController를 만들기 전에 비제어형과 제어형을 알아보자제어 컴포넌트는 React에서 상태(state)를 통해 관리되는 컴포넌트를 의미한다. 이 경우, 컴포넌트의 상태(state)를 업데이트하고, 이를 컴포넌트의 값으로 설정하여 관리하는데, 주로 onCha

저번 시간에 Controller에서 render 함수를 짤막하게 문장으로 작성해 봤었다. 비제어형 React-Hook-Form에서 어떻게 제어형 컴포넌트를 연결시키고 상호작용 할 수 있는지, render함수 안에 컴포넌트(제어형)를 등록하고 Controller의 pro

프로젝트에서 큰 줄기는 Main PageLogin/Sign UpAuthMap Page Schedule PageProfile PageGallery Page7가지로 나눌 수 있다. 공모전의 요구 사항으로는 반드시 공공데이터 API 1개이상 사용 할 것이에 따라, 공모전에

React에 카카오맵을 설정 하고 map을 불러오는데, 여러 방법들, 문제점등의 글이 작성되어있었다.여러 블로그와 공식문서를 읽어보고 내가 "이해"한 것을 적어본다. 카카오맵 공식문서와 블로그에서 자주 볼 수 있는 것이 있다.먼저 script를 index.html에 첨

내가 작성한 카카오맵 API설치 저번 시간에 쌈뽕하게 kakaoMap을 설치하고 주입하는 것을 알아보았다. 만족하면 한번 더 작성해 보는것이 예의!!😍 KakaoMap을 내가 어떻게 사용했을까?? >참고로 나는 배달장사를 하였는데, 이때 카카오맵을 사용했었고, 여행, 위치 찾기등을 할 때 네이버 보다 카카오맵을 선호하고 지금도 사용하고 있다. 서울시 ...

이전 시간에 사용자 행동을 예상해보는 블로그 글을 작성해 봤었다. 사용자 행동을 왜 예상해보는지 이해가 안 갈수도, 궁금할 수도 있는데, 첫 번째로는 외부 API를 무엇을 "기준"으로 공부해야 할지, 알 수있었다. (막상 해야지라고 생각했을 때는 너무 방대하고 어떻게

이전 글에서 사용자의 행동을 가정 했을 때 검색창을 통해 지도위에 데이터를 뿌려주는 것은 해보았다. 난관에 부딪혔다. 서울시 공공데이터 API들을 활용해서도 데이터를 지도 위에 뿌려줘야 하는데 어떻게 데이터를 불러들이고,사용자에게 무슨 UI를 보여주고 문제를 풀어가야

내가 사용할 API들의 주소와 url주소다. > - 서울시 동물약국 인허가 API http://openapi.seoul.go.kr:8088/(인증키)/json/LOCALDATA020302${지역구}/1/1000/01 서울시 동물병원 인허가 API http://ope

저번 시간에 API 두개를 병렬 호출 글을 써봤다. 이제 남은건 API 1개인데, 산책로 API 호출만 하면 된다. GetStaticProps > 서울시 주요 공원현황 http://openAPI.seoul.go.kr:8088/process.env.NEXTPUBLI

이전 글들에서 동물병원&동물약국 API 호출 처리 서울시 공공데이터인 산책로 API를 통해 데이터를 받아와서 데이터 가공 3개의 API 호출과 관련하여 글을 작성 했었다. 그렇지만, 동물병원&동물약국 API 데이터를 불러와 데이터를 가공하여 >각 탭을 클릭 해 봤

kakao map에서 기본적으로 위치 좌표계로 WGS84를 사용한다. 서울시 동물관련 데이터 좌표는 EPSG:2097을 사용하는데 kakao map에서 지원하는 다른 좌표계가 있는지, 좌표를 어떤 방법으로 변환 할지 위의 2가지를 다뤄보겠다. kakao.maps.

출저 : https://ryuhyun.tistory.com/15?category=855514지구의 형상은 완벽한 구형이 아니라, 실제로는 굉장히 울퉁불퉁하다. 울퉁불퉁한 지구상에 위치를 표현하기 위해서 가상의 지구 표면을 가정한다.중력 방향에 직각인 가상의 표

내가 생각하는 trouble shooting은 모르는 것을 알아가는 것만이 trouble shooting이라 생각하지 않는다. 알고 있음에도, - 어떻게 문제를 정의하거나, - 어떠한 고민을 나만의 방식으로 풀어나가거나, - 무언가를 사용할 때, 충분히 고민 후 .

이전 포스팅에서 Map Page에서 서울시 공공데이터 API들을 호출하여, 좌표계 변환 및 카카오맵에 표시 하는 것을 포스팅 하였다. 이제 완벽하게 끝난 줄 알았지만, 또 다른 하나의 이슈가 발생하였는데, 바로 Mixed Content Error 가 발생하였다. 댕댕냥

Mixed Content에러를 해결하기 위한 방법 근본적인 방법 Https사용 내 웹과 통신하는 서버의 프로토콜을 https로 업그레이드 해주면 된다. 그러나, 내가 서울시 공공데이터를 관리하는 관리자한테 전화해서 > "왜 http를 사용하죠? 바꾸세요 언능

이전 포스팅에서 내 상황에서 해결할 수 있는 조합은Next js에서는 api router를 통해 proxy server와 같은 역할을 해주며,CORS, 그리고 masking 하여 보안상이유로 사용 할 수 있는 Node기반serverless Function이다. Next

프로젝트에서 내가 맡은 기능과 페이지에서 Auth 와 로그인 / 회원가입 부분이 있다. 그 기능들과 페이지 작업을 하면서 느꼈던 점은 Auth는모든 페이지와 연관되어있으면서, 특히 Next.js를 사용하여 SSR과 같은 서버단에서 데이터를 미리 받아올 때 중추적인 역할

http 통신 먼저 http통신에 대해서 알아보자 왜냐하면, 서버와 통신 할 때 어떻게 작동을 하는지 알아야 인증/인가를 왜 하는지 그리고 쿠키, 세션, 토큰이라는 개념과 이것을 왜 접목 했는지를 알 수 있기 때문이다. 인증/ 인가 https://geuni620.g

이전 포스팅을 통해 http 통신의 특징으로 인해 불편함을 알아보았다. 이제는 이 불편함을 "웹 상에서" 해결하기 위해 어떠한 개념을 가지고, 어떻게 해결했는지를 이해하고 알아보자 인증 / 인가와 함께 접하게 될 세션, 쿠키, 토큰 듣기에 거북하고, 이해하려니 개념

우리 팀 프로젝트에서는 node하시는 백엔드 분이 계셔서, 서버와 통신을 http통신으로 한다. 서버작업 하시는 분이 "세션,or 토큰" 중에 어떤 것으로 할건지 물어봤을 때, 내가 토큰으로 하시죠 해서 토큰방식으로 진행하기로 했다. 다시 복기 하자면, 토큰방식은

이전 포스팅에서 > 전역적으로 사용할 것이므로, 전역관리 상태를 사용하여햐 했고, 혹시나 하는 새로고침에도, 값이 사라지지 않아야 하므로, localStorage, SessionStorage중 하나에 저장해서 토큰 값을 받아오면 우선적으로 브라우저의 스토리지에 저장하

프로젝트에서 제일 중요한 지점중 하나는 auth관리라고 요번에 많이 느꼈다. 전반적인 기능개발(조건부 처리) , 페이지 단위에서 데이터 통신등 여러 조건들을 신경 쓰게 되는데, 요번 프로젝트에서 어떻게 하면 누구나 같이 사용하기 편한지 그리고, 로그인에 따른 조건부

토큰 관리를 클라이언트에서 하기에, 전역적으로 관리할 필요가 있으며, 그 값을 다루는데에는, Next.js프레임워크 위에서 한다. 클라이언트단 말고도 서버측에서도 토큰을 관리,처리를 하면 CSR 뿐 아닌 SSR로 빠르게 데이터를 패칭할 수 있고, 통신도 보다 빠르게

이전 포스팅에서 next-auth 라이브러리를 사용하게 된 이유를 성찰? 해보았는데, 어떻게 사용하는지를 한 번 알아보고자 한다. page router에서는 pages/api/auth/[...nextauth].ts dynamic router파일을 만들어야 한다. (O

이전 시간에는 config를 알아보았는데이것을 내 프로젝트에서 어떤 메소드, util, helper가 있고, client단과 server단에서 사용할 수 있는 것들을 정리해 나갈 예정이다. 먼저 SessionProvider는 우리가 익숙한 Context API를 적용한

라이브러리 사용법을 확장하는데 포커스를 맞췄고, 그것을 활용해 코드를 다시 작성한 것을 refactoring이라 하련다.

먼저 SSR을 하기 위해 CSR과 SSR을 비교하고자 한다.말 그대로 클라이언트에 Rendering을 맡긴다. CSR의 방식으로 렌더링을 진행하는 대표적인 예로는 SPA인 React , View 가 있다. 브라우저 URL입력 창에, 주소를 입력하면 서버측에서 HTML과

Next.js에서 React-Query 설정 _app.tsx 에서 QueryClient설정에 2가지 방법이 있는데, 이는 컴포넌트 라이프사이클 당 QueryClient 를 오직 한 번만 생성하여 데이터가 서로 다른 사용자와 요청 간에 공유되지 않게 하기 위함이다.

이전포스팅들과 달리 포스팅이 짧을 것같다. 개념과,이해를 설명하는데 중점적으로 설명했으며, 이제는 그것들을 가지고 적용과 활용을 할 차례이기 때문이다. 위와 같이 따로 axios를 사용하여 SSR에서 통신할 함수를 만들었다. 우리 프로젝트에서 Calendar.tsx 에

내가 맡은 페이지, 기능부분에서 일어난 이슈가 아니라, 다른 팀원한테서 일어난 이슈이지만, 디깅과, 해결해볼 가치가 있다고 판단을 했었다. issue - mixed content error 공모전 포스팅들 중에서 서울시 데이터 통신을 할 때 http 프로토콜로 인

코드를 작성 후에 api router로 보냈다. 실행 결과를 api router의 terminal창에서 확인해보면,FormData값이 찍히기는 찍히지만, file의 encoding이 깨진다. 인코딩이 화려하게 깨지기에, 단순히 body 값을 우리쪽 서버측에 보내는 방식

이전 포스팅에서 인코딩 깨짐 이슈로, Node.js 라이브러리를 통해서 해결했지만, 다른 팀원들과 상의한 결과 하나의 api router로 서버와 post ,delete , patch 통신을 최대한 간단하게 할 수 있게 했으면 좋겠다는 의견이 나왔다. 쉽게 말하면 Co

Generic에 들어갈 타입에는 interface 가 아닌, typeAlias가 암묵적으로 추론된다는 점을 알게 되었다. \[ 포스팅 ](https://velog.io/@cmk0905/%EA%B3%B5%EB%AA%A8%EC%A0%84-%EC%A7%80%EB%8

최적화의 힌트는 개요 요번 공모전 프로젝트는 반려동물 케어 및 소셜 네트워크 서비스다. 우리의 웹 서비스에는 라우팅 가드를 통해 조건부 라우팅을 하는데, 대체로 로그인 이후에 사용할 수 있는 서비스가 다를 이룬다. 그 와중에 소셜네트워크 (이하 Gallery )는

https://github.com/TanStack/query/discussions/2011 https://tkdodo.eu/blog/react-query-and-type-script#type-safety-with-the-enabled-option