개발자 박가나

기능구현할 때 특정 기술스택을 선택해야 했던 경험이 있다면 어떤 과정을 통해 기술스택을 선택했는지 설명해 주세요.회원가입과 로그인을 구현하는 과정에서 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를 사용..

제어 컴포넌트React에 의해 값이 제어되는 컴포넌트로서, 입력 값을 state로 관리하고 값이 변경될 때마다 리렌더링이 발생한다. 값에 대한 즉각적인 피드백이 필요한 경우 사용된다.export default function Component() { const [inputValue, setInputValue] = useState(null); const handleChange = (e) => { setInputValue(e.target.value); }; return ( handleChange(e)} value={inputValue} /> );}  비제어 컴포넌트React에서 값이 제어되지 않는 컴포넌트로서, 값이 변경되더라도 리렌더링이 발생하지 않는다. 값에 대..

var, let, const의 차이점을 호이스팅의 관점에서 설명해주세요.var의 경우, 호이스팅에 의해 선언이 스코프 최상단으로 끌어올려지기 때문에 변수가 선언되기 이전에도 undefined 값으로 접근 가능하다.let과 const의 경우, var와 동일하게 호이스팅이 발생하지만 TDZ로 인해 변수가 선언되지 전에 접근하려고 하면 에러가 발생하며, const는 선언과 동시에 초기화가 필요하다.  개발 과정에서 사용자 경험을 개선한 경험이 있다면 설명해주세요.나는 직접 개발을 진행한 당사자이므로 이 버튼을 누르면 어떤 동작을 하고 어디로 이동하는지 등의 로직을 이미 알고 있기 때문에, 로직을 모르는 팀원이나 지인들에게 사용을 부탁하고 피드백을 받아서 코드를 개선하였다. => 좀 더 구체적인 예시나 경험을 ..

감기로 인한 머리 아픔 이슈로... 까먹지 않게 포스팅만 해놓고 주말에 작성해야 할 것 같다...

서비스 컨셉사용자의 취향에 따라 전통주를 추천하고, 음식과의 페어링, 전통주 관련 경험과 문화를 함께 제공  주요 기능설문조사사용자의 전통주 취향 조사설문 항목 : 단맛/쓴맛, 도수 선호, 음용 상황(혼술/파티/식사), 지역별 선호도 등맞춤형 전통주 추천사용자의 취향에 따라 전통주를 추천음식과의 페어링해당 전통주에 맞는 음식 및 안주 추천전통 안주(전, 육전, 한식)와 현대적 페어링(치즈, 파스타 등) 모두 포함음식에 따른 전통주 추천전통주 검색 및 필터링다양한 필터 옵션 제공지역 : 전라도, 경상도, 강원도 등주종 : 탁주, 약주, 소주, 과실주 등도수 : 저도수~고도수가격대, 리뷰 순, 좋아요 순전통주 리뷰 및 평가전통주를 평가하고 리뷰를 남길 수 있는 기능리뷰를 기반으로 별점, 좋아요 순위를 정렬리..

서비스 컨셉사용자의 취향에 따른 와인 추천 및 음식과의 페어링, 와인 관련 경험을 함께 제공  주요 기능설문조사사용자의 취향조사맞춤형 와인 추천사용자의 취향에 따라 와인을 추천음식과의 페어링해당 와인에 맞는 음식 및 안주를 추천와인 검색 및 필터링다양한 필터 옵션 제공인터랙티브한 검색으로 와인에 대한 상세 정보 제공와인 리뷰 및 평가와인을 평가하고 리뷰를 남길 수 있는 기능좋아요 수 기반으로 추천좋아요좋아하는 와인을 저장할 수 있는 기능회원가입 / 로그인프로필 수정, 회원탈퇴 페이지 구성홈 페이지취향 파악 설문 (첫 방문 시 팝업띄우기)AI 기반 맞춤 추천인기 추천 (좋아요 데이터 기반)검색 기능 제공회원가입 페이지회원가입로그인 페이지로그인마이 페이지프로필 수정 및 회원 탈퇴좋아요한 와인 목록내가 쓴 리..

Next.js와 TypeScript를 본격적으로 사용해본 심화 프로젝트가 끝이 났다. 오늘은 프로젝트 회고로 TIL을 대신 하고자 한다. 역할 분배 잘하기그동안의 프로젝트에서 그랬던 것처럼 이번에도 페이지 단위로 역할 분배를 하였는데, 막상 진행을 하고보니 다른 팀원들에 비해 내가 담당한 페이지가 너무나도 단순하고 쉬운 페이지라는 생각이 들었다. 로그인 여부에 상관없이 접근이 가능하고 단순히 API를 호출한 결과를 화면에 보여주는 것이 전부였기 때문에 Next.js와 TypeScript를 사용해서 팀 프로젝트를 진행해 봤다고 말할 수 있을까라는 생각이 들었고, 각 페이지별 구현 난이도를 고려하지 않고 단순히 페이지 단위로 업무를 분배했던 것이 아쉬움으로 남게 되었다. 상대적으로 시간이 여유로웠기 때문에 ..