musukie 님의 블로그

모의 면접에서 내가 준비한 답변들에 대해 작성해보겠다. 1분 자기소개 안녕하세요, 저는 이번 최종 프로젝트에서 부리더를 맡은 긍정적인 마음으로 도전하는 윤수진입니다. 저는 최근 AI 기반의 학습용 챗봇 프로젝트인 ReadRiddle을 개발하며 다양한 기술을 사용하고, 실제 서비스 아키텍처를 설계하는 경험을 쌓았습니다. 성실함과 책임감을 바탕으로 주어진 과제를 완수하며, 새로운 기술에 도전하는 데 두려움이 없다는 점이 제 강점입니다. 이번 프로젝트에서는 React라는 새로운 기술을 배우고 실무에 적용하는 과정에서 많은 성장을 이루었습니다. 빠른 시간 내에 기술을 익히고 사용해야 한다는 부담감이 있었지만, 이를 통해 단시간에 문제를 해결하는 능력을 키울 수 있었습니다. 또한, 언제나 열린 마음으로 소통하고 ..

발표 많은 내용을 최종 프로젝트 발표에 담고 싶었지만, 시간 관계 상 담지 못한 내용이 있다. 그 내용은 아래와 같다. 발표 스크립트: 향후 계획 및 발전 방향안녕하세요. 앞으로 이 프로젝트를 더 발전시킬 기회가 있다면, 다음과 같은 방향으로 개선해 나갈 수 있을 것입니다. 오늘은 이러한 발전 가능성과 계획에 대해 말씀드리겠습니다.1. 기능 확장먼저, 기능 확장에 대한 계획입니다. 현재 제공하는 기능을 더욱 강화하기 위해 새로운 카테고리를 추가할 예정입니다. 이를 통해 더 많은 사용자들이 다양한 주제에 대해 학습하고 활용할 수 있도록 할 것입니다. 또한, 사용자 입력 자료를 기반으로 대화가 가능한 챗봇 기능을 개발하여, 보다 개인화된 학습 경험을 제공할 계획입니다. 사용자가 직접 자료를 입력하면 챗봇이 ..

무한 스크롤과 페이징 구현오늘은 React 애플리케이션에서 무한 스크롤과 페이징을 구현하는 방법에 대해 찾아보았다. 사용자가 스크롤을 아래로 내릴 때 데이터를 동적으로 로드하여 "더 보기" 버튼 없이도 부드러운 사용자 경험을 제공하는 방법을 알아보았다. 핵심 개념페이징과 API 요청서버에서 데이터를 일정 단위(page, page_size)로 받아오기 위해 쿼리 파라미터를 사용한다.기존 데이터를 덮어쓰지 않고 새로운 데이터를 기존 상태(state)에 추가한다.스크롤 이벤트 처리사용자가 컨테이너의 하단에 도달했는지를 scroll 이벤트로 감지한다.하단에 도달했을 때 다음 페이지 데이터를 가져오는 함수(fetchSessions)를 호출한다.React 상태 관리여러 상태를 관리해야 한다.sessions : 로드..

유저 피드백을 바탕으로 수정한 부분과 추가로 구현하려고 했던 기능을 개발한 후, 홍보하기 위한 글을 작성했다.[ReadRiddle] - POP QUIZ 랭킹 시스템 업데이트!안녕하세요, AI 8기 3조 삼삼오오입니다! 🎉여러분과 함께할 첫 번째 프로젝트를 성공적으로 배포한 후, 여러분의 소중한 피드백을 반영하여 더 멋진 기능으로 돌아왔습니다! 📝 문제 형식 업그레이드!기존 5지선다 문제에서 코딩 테스트 위주의 단답형 문제로 바꾸어 더 흥미롭고 도전적인 퀴즈를 제공합니다! 🏆 점수제와 실시간 랭킹 도입!문제를 풀 때마다 점수를 쌓아 나만의 기록을 만들어보세요! 새롭게 추가된 실시간 랭킹 시스템을 통해 다른 참가자들과 흥미로운 경쟁을 경험할 수 있습니다. Pop Quiz 페이지에서 자신의 점수와 랭킹을..

오늘은 동기와 비동기에 대해 알아보았다. 동기와 비동기는 프로그램에서 작업을 처리하는 방식에 따라 나뉘며, 각각 장단점이 있다.1. 동기(Synchronous)동기 방식은 하나의 작업이 끝난 후에야 다음 작업이 시작되는 방식이다. 작업이 순차적으로 진행되기 때문에 결과를 예측하기 쉽지만, 시간이 오래 걸리는 작업이 있으면 전체 처리가 느려질 수 있다. 예를 들면, 동네 우체국에서 사람들이 순서대로 업무를 처리하는 방식이다. 첫 번째 사람이 끝나기 전에는 두 번째 사람이 기다려야 한다. 특징은 작업이 순차적으로 실행되고, 한 작업이 끝나기 전에는 다음 작업이 대기하며, 구현이 간단하지만 효율성은 떨어질 수 있다는 것이다.2. 비동기(Asynchronous)비동기 방식은 작업이 서로 독립적으로 처리되며, 하..

React에서 Favicon 및 탭 이미지 설정하기1. Favicon 설정 방법React 프로젝트에서 Favicon을 설정하려면 public/index.html 파일에 태그를 추가해야 합니다.%PUBLIC_URL%의 의미 : React의 public 폴더 경로를 참조하기 위한 placeholder로, 빌드 후 정적 파일 경로를 자동으로 설정합니다.rel="apple-touch-icon" : iOS 기기에서 홈 화면에 아이콘으로 추가할 때 사용됩니다.2. 발생한 문제탭 아이콘이 변경되지 않았습니다.아이콘 경로가 올바르게 설정되지 않았습니다.브라우저 캐시로 인해 이전 아이콘이 계속 표시됐습니다.3. 문제 해결 방법경로 확인public 폴더에 book.png 파일이 올바르게 위치했는지 확인했습니다.브라우저에..

오늘은 React를 사용해 퀴즈 애플리케이션의 여러 기능을 구현하는 방법을 배웠습니다. 특히, 동적 상태 관리와 API 통신을 통해 사용자의 인터랙션을 처리하는 방법에 대해 배웠습니다.1. 상태 관리와 동적 UI 구현React의 useState와 useLocation 훅을 사용하여 여러 상태를 관리하고, 페이지의 동적 요소를 업데이트할 수 있었습니다. 예를 들어, 퀴즈 세션 정보(session_no, selectedCategory, quizCount 등)와 사용자 선택에 따라 변경되는 상태를 관리하고, 이를 기반으로 UI를 업데이트할 수 있었습니다.const [session_no, setSessionNo] = useState(location.state?.session_no || null);const [s..