개발자 박가나

로컬에서도 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)동일한 키워드임에도 띄워쓰기 여부에 따라 검색 결과가 달라진다.동일한 전통주임에도 어떤 페이지에서 보느냐에 따라서 좋아요 정보가 다르게 나온다.취향 조사 진행 중 뒤로가기 버튼을 누르면 이전..

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

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

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

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

기능구현할 때 특정 기술스택을 선택해야 했던 경험이 있다면 어떤 과정을 통해 기술스택을 선택했는지 설명해 주세요.회원가입과 로그인을 구현하는 과정에서 React Hook Form과 Zod를 사용한 경험이 있습니다. 사용자의 입력 값이 변경될 때마다 실시간으로 유효성 검사를 해주어야 하는데, useState를 이용해도 구현은 가능하지만 이럴 경우 제어 컴포넌트가 되면서 state 값이 변경될 때마다 리렌더링이 발생하기 때문에 성능이 저하될 수 있습니다. 하지만 React Hook Form과 Zod를 사용하게 되면 비제어 컴포넌트를 기반으로 동작하면서도 실시간 유효성 검사 또한 구현이 가능하기 때문에 선택을 하게 되었습니다.  제어컴포넌트와 비제어컴포넌트의 장단점에 대해 설명해주세요.제어 컴포넌트는 입력 값..

브라우저의 렌더링 과정에 대해 설명해주세요.사용자가 URL을 입력하면, 브라우저는 DNS 서버를 통해 해당 URL에 대응되는 IP 주소를 얻어온 후 서버와의 연결을 시도합니다. 브라우저가 HTTP 요청을 보내면 서버는 그에 대한 응답으로 HTML, CSS, JavaScript 파일을 보내줍니다. 브라우저는 전달받은 파일들을 분석해서 DOM과 CSSOM을 생성하고 이 둘을 결합해서 레이아웃을 계산합니다. 마지막으로 화면에 각 요소들을 그려줌으로써 화면이 출력됩니다.  프로덕트의 퀄리티를 올리자니 데드라인을 지키지 못할 것 같고, 데드라인을 지키자니 프로덕트의 퀄리티가 떨어지는 상황일 때, 어떤 부분에 좀 더 중요도를 둘 것인가요?회사에서의 업무를 생각하면 기획이나 영업 등 다른 분야의 업무들과 연결되기 때..

var, let, const의 차이점을 호이스팅의 관점에서 설명해 주세요.var의 경우 호이스팅이 발생하기 때문에 변수가 선언되기 전에 접근을 해도 에러가 아닌 undefined가 뜨게 됩니다. let과 const의 경우 var와 마찬가지로 호이스팅이 발생하지만 TDZ로 인해 변수가 선언되기 전에 접근하려고 하면 에러가 발생합니다. 또한 const는 선언과 동시에 초기화를 해주어야 하고 이후 재할당이 불가능하다는 점에서 let과 차이가 있습니다. 꼬리 질문호이스팅이라는 개념이 왜 나오게 되었을까요?JavaScript는 평가 단계와 실행 단계로 나눠서 실행이 됩니다. 평가 단계에서는 모든 선언을 레코드에 수집하는 과정을 거치게 되는데, 평가 단계가 실행된 이후에 실행 단계에서 코드가 실행되기 때문에 마치 ..

요청이 완료되기 전에 특정 동작을 실행시킬 수 있는 기능을 제공한다./* src/middleware.ts */import { NextResponse } from 'next/server';import type { NextRequest } from 'next/server';export function middleware(request: NextRequest) { return NextResponse.redirect(new URL('/home', request.url));}export const config = { matcher: '/about/:path*',};  MiddleWare는 Next.js가 처리하는 모든 route를 대상으로 동작하지만, 특정 path에서만 동작하게 하고 싶다면 matcher를 사용..