개발자 박가나

유지보수성이 높은 코드를 작성하기 위한 방법들에 대해서 설명해주세요.먼저, 의미있는 변수 및 함수 이름을 사용하여 이름만 보고도 어떤 역할을 하는지 예상할 수 있도록 하고 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를 사용했고 보안에 민감할 수 있는..

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

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