개발자 박가나

로컬에서도 https로 동작하는 URL을 사용할 수 있게 해주는 ngrok에 대해서 알게 되어서 사용 방법을 기록해두고자 한다.  1. ngrok 사이트에 들어가서 로그인https://ngrok.com/ ngrok | API Gateway, IoT Device Gateway, Secure Tunnels for Containers, Apps & APIsngrok is a secure ingress platform that enables developers to add global server load balancing, reverse proxy, firewall, API gateway and Kubernetes Ingress to applications and APIs.ngrok.com  2. Your A..

기능적 이슈AI가 취향에 맞는 전통주를 추천해주는 기능이 너무 오래 걸린다. (21)다이닝바 상세 페이지에 지도가 뜨지 않는다. (13)추천 검색어로 검색했을 때 검색 결과가 나오지 않는다. (10)검색 결과가 없는 경우가 많아서 원하는 정보를 제대로 찾을 수 없다. (6)로그인 기능이 제대로 되지 않는다. (3)탈퇴하기 기능이 너무 오래 걸린다. (2)비밀번호 재설정 기능이 제대로 되지 않는다. (2)추천 결과에 동일한 전통주기 2개 나오는 경우가 있다. (2)좋아요 페이지에서 좋아요 해제 시 즉시 삭제된다. (2)동일한 키워드임에도 띄워쓰기 여부에 따라 검색 결과가 달라진다.동일한 전통주임에도 어떤 페이지에서 보느냐에 따라서 좋아요 정보가 다르게 나온다.취향 조사 진행 중 뒤로가기 버튼을 누르면 이전..

유지보수성이 높은 코드를 작성하기 위한 방법들에 대해서 설명해주세요.먼저, 의미있는 변수 및 함수 이름을 사용하여 이름만 보고도 어떤 역할을 하는지 예상할 수 있도록 하고 ESLint 및 Prettier를 활용하여 일관된 코드 스타일을 준수함으로써 코드의 가독성을 높일 수 있습니다.다음으로, 단일 책임 원칙을 토대로 컴포넌트를 적절히 분리하고 반복적으로 사용되는 로직은 커스텀 훅으로 분리함으로써 코드의 재사용성을 높일 수 있습니다.또한, 페이지의 특성에 맞는 적절한 렌더링 방식을 선택하거나 파일 기반 라우팅 구조를 명확하게 설계하는 등 React 및 Next.js의 이점을 적절하게 활용하는 것도 유지보수를 용이하게 해주는 방안이 될 수 있습니다.  JavaScript가 싱글 쓰레드임에도 불구하고 동시에 ..

'한잔해' 프로젝트에서 겪은 트러블슈팅을 기록하고자 한다.  문제 파악로그인 성공 시 유저 정보를 zustand에 저장하고 이후 유저 정보가 필요할 때마다 매번 API를 호출하는 것이 아니라 zustand에 저장된 유저 정보를 가져와서 사용하도록 구현하였는데, 로그인을 성공했음에도 불구하고 유저 정보를 제대로 받아오지 못하고 새로고침을 해야 비로소 유저 정보를 받아오는 문제가 발생하였다.  시행착오'use client';import { createContext, useContext, useEffect, useState } from 'react';import { useAuthStore } from '@/store/authStore';import { SignInDataType } from '@/types/A..

프론트엔드 개발자로서 최종 프로젝트를 통해 가장 성장했다고 느낀 부분은 무엇인가요?최종 프로젝트를 통해서 실제 실무에서 요구되는 개발 및 사고 능력을 향상시킬 수 있었다고 생각합니다. 모든 개발의 궁극적인 목표는 사용자에게 서비스를 제공하는 것이고 사용자에게 제공할 형태로 만들어내는 역할을 하는 것이 프론트엔드 개발자라고 생각하는데, 그동안의 프로젝트들은 실제 사용자가 있는 서비스가 아니었기 때문에 기술 습득이나 기능 구현 자체에 초점을 두고 개발을 했었다면 최종 프로젝트의 경우 실제 사용자가 있는 서비스라는 관점에서 진행됐다보니 기능 구현도 물론 중요했지만 사용자 경험을 높이고 성능을 최적화하는 것에 많은 시간을 투자했던 것 같고, 디자이너 분들과 소통을 하는 경험을 할 수 있었습니다.  CORS 에러..

Promise와 async/await의 차이점과 각각의 장단점은 무엇인가요?Promise는 비동기 로직을 처리하기 위해서 사용되는 객체로서, 비동기 로직의 결과 값을 Promise 객체로 반환합니다. then과 catch를 사용해서 성공과 실패를 보다 직관적으로 처리할 수 있고 Promise.all을 사용하여 병렬 작업을 처리하는 것도 가능하지만, 비동기 로직이 복잡해지면 가독성이 떨어질 수 있고 에러 디버깅이 어려워질 수 있습니다. async/await은 비동기식 코드를 동기식으로 표현해서 간단하게 나타내는 것으로 Promise와 마찬가지로 비동기 로직의 결과 값을 Promise 객체로 반환합니다. 동기식 코드처럼 보이기 때문에 비동기 흐름이 복잡해지더라도 가독성이 좋고 try-catch문을 사용해서 ..

'한잔해' 프로젝트에서 겪은 트러블슈팅을 기록하고자 한다.  문제 발생MVP 기능 개발을 마무리하고 중간 발표를 위해서 vercel에 배포를 하였는데, 로컬에서는 문제없이 동작하던 로그인 기능이 배포 링크에서는 너무 오래 걸리는 현상이 발생하였다.  시행착오 1가장 먼저 region 문제가 아닐까 싶어서 확인해봤는데 vercel과 supabase 모두 서울로 잘 설정되어 있었다.  시행착오 2비슷한 문제를 겪고 있는 stack overflow를 발견하였고, server action을 route handler로 변경해보기로 하였다. https://stackoverflow.com/questions/78078248/dalle3-request-in-next-js-14-server-actions-leading-t..

브라우저의 렌더링 과정에 대해 설명해주세요.사용자가 URL을 입력하면 브라우저는 DNS 서버를 통해서 해당 URL에 대응되는 IP 주소를 얻어온 후에 HTTP 요청을 통해 서버와의 연결을 시도하고 서버는 그에 대한 응답으로 HTML, CSS, JavaScript 파일을 보내주게 됩니다. 브라우저는 먼저 HTML 파일을 읽어서 DOM 트리를 생성하고, CSS 파일 및 style 태그의 내용을 파싱하여 CSSOM 트리를 생성한 후에 이 둘을 결합하여 렌더 트리를 생성합니다. 각 노드들의 위치와 크기를 계산하고 계산된 레이아웃을 기반으로 화면을 그리는 과정을 거친 후에 최종적으로 사용자에게 보여지게 됩니다.   프로덕트의 퀄리티를 올리자니 데드라인을 지키지 못할 것 같고, 데드라인을 지키자니 프로덕트의 퀄리티..

개발자 혹은 디자이너와 협업하면서 팀원과의 의견 충돌이 있었던 경험이 있다면, 어떻게 해결하셨는지 설명해주세요.이전 회사에 재직할 때 Chart.js라는 라이브러리를 사용해서 그래프를 구현했었는데 디자이너분께서 추가적인 UI 작업을 요청하셨던 적이 있습니다. 하지만 해당 UI를 구현할 수 있는 방법을 Chart.js에서 제공을 해주지 않았고 직접 구현하기에는 많은 시간이 소요될 것으로 예상되었기 때문에 팀원들과 의논해본 결과 정해진 기한 내에 구현이 불가능할 것이라는 판단이 들어서 디자이너분께 얘기를 드렸습니다. 다행히 이해를 해주셨고 Chart.js를 사용해서 구현이 가능한 범위 내에서 다시 디자인을 해주시기로 하였습니다. 의견 충돌이 있다는 것은 결국 정해진 정답이 없다는 것을 뜻하기 때문에 내 의견..

리팩터링을 통해 코드의 가독성을 높인 경험이 있으신가요?react 프로젝트에서 styled-components를 사용한 적이 있습니다.처음에는 스타일 코드, UI 코드, 그리고 비즈니스 로직 코드까지 모두 하나의 jsx 파일에 작성을 했었는데 기능이 구현되어 갈수록 자연스럽게 코드의 길이가 길어졌고 가독성이 떨어진다는 느낌이 들었습니다. 그래서 스타일, UI, 비즈니스 로직을 각각의 파일로 분리해서 하나의 파일이 하나의 역할을 담당하게끔 해줌으로써 가독성을 높일 수 있었습니다.  Next.js에서 라우트 핸들러를 사용했던 경험과 장단점에 대해 설명해 주세요.예전에 진행했던 프로젝트에서 검색 기능을 구현할 때 Route Handler를 사용한 적이 있고 공공 데이터 API를 사용했고 보안에 민감할 수 있는..