개발자 박가나

제어 컴포넌트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를 사용해서 팀 프로젝트를 진행해 봤다고 말할 수 있을까라는 생각이 들었고, 각 페이지별 구현 난이도를 고려하지 않고 단순히 페이지 단위로 업무를 분배했던 것이 아쉬움으로 남게 되었다. 상대적으로 시간이 여유로웠기 때문에 ..

PWA (Progressive Web Applications)앱 설치 부담을 줄이고 웹의 보편성을 활용하려는 취지로 시작되었다. 사용자들이 앱 설치를 꺼리는 문제를 해결하기 위해서 등장한 기술로, 기존 모바일 웹과 네이티브 앱의 단점을 극복하기 위한 솔루션이다. 쉽게 말해서 웹 사이트와 네이티브 모바일 앱의 장점을 결합한 것으로, 웹 앱이지만 마치 모바일 앱처럼 동작한다. 모든 브라우저에서 동작하고, 설치가 필요없는 웹 앱처럼 동작하며, 네이티브 앱의 경험을 제공한다. 사용되는 상황모바일 웹사이트의 사용자 경험을 개선하고 싶을 때별도의 앱 설치 없이도 앱과 같은 기능을 제공해야 할 때네트워크 상태가 불안정한 환경에서 동작해야 할 때앱스토어에 앱을 등록하지 않고 빠르게 서비스를 제공하고 싶을 때 핵심 기술..

패키지 매니저는 JavaScript 프로젝트에서 필요한 외부 라이브러리나 모듈(패키지)을 관리하고 설치하는 도구이다. 개발자는 require나 import 구문을 통해서 외부 패키지를 손쉽게 사용할 수 있는데 설치, 업데이트, 제거, 버전 관리 등의 작업을 직접 구현하기에는 너무 복잡하고 오류가 발생하기 쉽다. 패키지 매니저는 이러한 과정을 자동화해줌으로써 개발 효율성을 높이고 코드의 일관성을 유지할 수 있다.  npm (node package manager)2010년에 등장한 최초의 JavaScript 패키지 매니저로, Node.js와 함께 배포된다. 패키지 관리에 필요한 기본 개념과 구조를 정립하였고, JavaScript 생태계의 급속한 성장에 기여하였다.package.json 파일을 통한 패키지 메..

오늘 챌린지반 수업에서 발표하는 것을 마지막으로 그동안 시간 날 때마다 틈틈이 진행했던 '야구 캘린더' 프로젝트를 마무리 하게 되었다. https://kbo-calendar.vercel.app/ KBO Calendar kbo-calendar.vercel.app 아무래도 캠프에서 진행되는 강의와 과제를 병행하면서 남는 시간에 틈틈이 진행한 프로젝트였기 때문에, 로그인이나 CRUD 등 서비스 이용을 위해 필요한 최소한의 기능들을 문제없이 구현해 낸 것만으로도 성공적인 프로젝트였지 않았나 싶다. 또한 실제로 사용할 생각으로 만들었기 때문에, 앞으로도 계속해서 서비스를 발전시켜나갈 생각이다. 회사 다닐 때도 그렇고 캠프에서 프로젝트를 진행할 때도 그렇고 지금까지는 내가 하고 싶은 개발보다는 '이거 만들어 주세요..

라이브러리 (Library)특정 기능을 수행하기 위해서 미리 작성된 코드의 집합으로, 필요할 때마다 개발자에 의해서 호출된다. 특징애플리케이션 제어에 대한 권한이 개발자에게 있음전체적인 구조 및 흐름을 강제하지 않음특정 작업을 수행하는데 필요한 도구 및 API 제공프로젝트 구조에 대한 제약이 적기 때문에 개발자의 필요에 따라 원하는 방식으로 통합 및 사용 가능ReactUI를 구축하기 위한 JavaScript 라이브러리단순히 UI를 구성하는데 필요한 도구를 제공라우팅, 상태 관리 등을 구현하기 위해서는 별도의 라이브러리 설치 필요  프레임워크 (Framework)애플리케이션의 전반적인 구조와 흐름을 정의하는 코드의 뼈대로, 특정한 방식으로 코드를 작성하도록 강제한다. 특징애플리케이션 제어에 대한 권한이 프..