Alliswell

최신 글

• 

  트러블슈팅 '소금 약간'은 몇 개일까? - 레시피 단위 변환 로직 구현 문제의 시작혼자 자취를 하다 보면 유튜브에서 간단한 요리 영상을 보고 따라 하게 되는데요, 문제는 한 끼를 위한 재료가 아니다 보니 냉장고에 식재료가 점점 쌓이게 되었습니다. 유통기한은 다가오고, 이걸로 무엇을 해먹을지 매번 검색하는 게 번거로웠습니다.그러던 중 '냉장고 속 재료를 알아서 관리해 주고, 그 재료로 만들 수 있는 레시피를 추천해 주는 서비스가 있으면 좋겠다'는 생각이 들었고, 청년취업사관학교 마지막 프로젝트로 팀원과 함께 '오늘의 냉장고'라는 웹 사이트를 개발하게 되었습니다.저는 이 프로젝트에서 레시피 추천 기능과 로그인 기능을 담당했는데, 개발 중 예상치 못한 큰 난관을 만났습니다. 바로 레시피 데이터의 단위와 냉장고 관리 단위가 완전히 달랐던 것입니다. 문제 발견시중에 냉장고 관리 앱은..

• 

  후기 길벗) 개발자 리뷰어 - 개발자를 위한 생성형 AI 활용 가이드 프로젝트에서 배운 AI의 진짜 사용법청년취업사관학교 마지막 프로젝트에서 냉장고 재료 기반 레시피 추천 기능을 만들면서 AI를 처음 활용해보려 했습니다.하지만 AI는 '삼겹살 요거트 무화과 볶음' 같은 사람이 먹을 수 없을 것 같은 창작 요리들을 추천하며 당황스럽게 만들었습니다. 프로젝트 마감까지 시간은 촉박한데 AI는 계속 이상한 결과만 내놓았습니다. 그때 'AI는 맛을 모르니 사람이 실제로 먹을 수 있는 요리인지도 판단하지 못하겠구나. 그저 인터넷에서 각각의 재료가 사용되는 레시피를 본 대로 조합해서 알려줄 뿐이겠구나'라는 생각이 들게 되었습니다. 급하게 프롬프트 작성법을 찾아보고, 결국 Claude에게 '프롬프트를 위한 프롬프트'를 요청해서 겨우 프로젝트를 마무리할 수 있었습니다. 왜 이 책을 읽게 ..

• 

  후기 설레고 행복했던 FEConf2025 스태프 후기 어느 날 친구로부터 FEConf2025 스태프를 뽑는다고 당장 지원하라고 연락을 받게 되었습니다.국내 최대 프론트엔드 개발 컨퍼런스인 FEConf라니!! 스태프라니!! 컨퍼런스를 유튜브로만 접했기에 한 번도 직접 가본 적이 없는데 스태프에 지원해서 뽑힐까..?라는 생각과닷넷 개발 경험은 있지만 프론트엔드 개발 경험은 전혀 없다는 생각에두려웠지만 해보면 재미있을 것 같다는 생각이 더 강해져 지원하게 되었습니다. 자기소개, 지원 계기, 행사 운영 경험 등 여러 작성해야 할 부분들을 진심으로 스태프가 되고 싶다는 말을 담아내며프론트엔드 개발 경험은 없지만 그래도 대학생 때 학교 홍보대사 4년, 한국장학재단 장학앰배서더, 4년간의 무역 사무직 경험 등 여러 이야기를 풀어놓으며 진정성을 나타내려고 노력했고 시간이..

• 

  개념 정리 React Router: children vs Outlet 프론트엔드 개발을 하다 보면 React Router에서 레이아웃을 구성할 때 두 가지 방법을 만나게 됩니다. 바로 `children`과 `Outlet`입니다. 언뜻 비슷해 보이지만 실제로는 꽤 다른 특징을 가지고 있습니다. 이런 고민을 하게 된 이유이번에 가챠샵 커뮤니티 프로젝트를 만들면서 처음에는 아래와 같은 children 방식으로 코드를 작성했습니다.// App.tsx - 기존 코드 (children 방식)function App() { return ( } /> } /> } /> } /> );}export default App;// Layout.tsx - 기존 코드con..

• 

  트러블슈팅 "당신의 서비스가 갑자기 멈출 수 있습니다": 면접에서 깨달은 API 쿼타의 함정 🎯 면접에서 받은 깨달음어느 날 면접을 보러 갔는데 감사하게도 제 프로젝트, 포트폴리오, 블로그 글을 모두 살펴봐주신 면접관님을 만나게 되었습니다.그때 받은 질문 하나가 아래와 같습니다.🧑🏻‍💻면접관: 제가 프로젝트를 다 살펴보았는데요. 날씨 앱에 아주 치명적인 문제가 있습니다. API는 많이 호출하면 호출할수록 서버 부하가 올 수 있기 때문에 정해진 쿼타가 있습니다. 그 쿼타의 존재를 알고 있었나요?👩🏻 : ...몰랐습니다. 🧑🏻‍💻면접관: 쿼타가 있기 때문에 많은 트래픽이 발생한다면 서비스가 멈출 수 있는 아주 위험한 상황이 올 수 있어요. 그 문제점을 이제라도 알게 되었으니 어떻게 수정할 생각인가요? 이미 답을 알고 있을 테니 한 번 생각해 보고 말해주세요.👩🏻 : 로컬스토리지나..

• 

  개념 정리 매일메일) 45, 46, 47 문제 요약 오늘의 문제 1.자바스크립트에서 어떻게 호이스팅이 가능한지에 대해서 설명해주세요. 키워드) 컴파일 단계, 실행 단계더보기자바스크립트 엔진이 코드를 실행하기까지 컴파일 단계와 실행 단계 두 단계를 거치기 때문입니다. 컴파일 단계에서 함수와 변수 선언이 메모리에 먼저 할당되고, 실행 단계에서 실제 코드가 실행됩니다. 여기에서 변수가 할당된 값을 가지게 되고, 함수가 호출되면 그 안의 코드가 수행됩니다. 이를 통해 코드 내에서 선언 위치와 상관없이 변수를 사용할 수 있는 호이스팅이 가능한 것입니다.오늘의 문제 2.useEffect와 useLayoutEffect의 차이점에 대해서 설명해주세요. 키워드) 실행 타이밍, 비동기 vs 동기, DOM 업데이트 시점더보기`useEffect`와 `useLayoutEffec..

• 

  개념 정리 매일메일) 40, 41, 42 문제 요약 오늘의 문제 1.웹 애플리케이션의 성능을 최적화할 수 있는 방법들에 대해서 아는대로 설명해주세요. - 코드 스플리팅, 레이지 로딩, 캐싱, 비동기 로딩, 지연 로딩더보기웹 성능 최적화 방법으로는 먼저 코드 스플리팅을 통해 필요한 JavaScript만 먼저 로드할 수 있습니다. 레이지 로딩으로 보이는 영역의 이미지나 비디오 같은 무거운 리소스만 불러오는 방법도 있습니다. 이미지 최적화를 통해 WebP 포맷 사용과 크기 조정을 할 수 있고, 캐싱으로 한 번 로드한 리소스를 재사용할 수 있습니다. 마지막으로 JavaScript 비동기/지연 로딩으로 DOM 차단을 방지하여 전체적인 로딩 속도를 개선할 수 있습니다.오늘의 문제 2.디바운스(debounce) 와 쓰로틀(throttle)에 대해서 각각 설명해주세요...

• 

  개념 정리 매일메일) 37, 38, 39 문제 요약 오늘의 문제 1.script 태그에서 async와 defer의 차이점에 대해서 설명해주세요. - `async`: 즉시 실행(다운로드되면 바로)- `defer`: 나중에 실행(HTML 끝나고)더보기`async`와 `defer`는 모두 스크립트를 비동기로 다운로드하지만, 실행 시점이 다릅니다. `async`는 다운로드 완료 즉시 실행되어 HTML 파싱을 중단시키고 실행 순서가 보장되지 않습니다. `defer`는 HTML 파싱 완료 후 DOMContentLoaded 이벤트 전에 순서대로 실행됩니다. 따라서 독립적인 스크립트(ex. Google Analytics)는 `async`, 순서가 중요한 메인 로직은 `defer`를 사용합니다.오늘의 문제 2.CommonJS와 ES Module의 차이점에 대해서 설명해주..