1. 진행상황주말까지 마무리 하려고 했던 Figma 작업을 어느정도 끝냈습니다.조금의 페이지들이 남아 있긴 하지만 우선적으로 개발할 페이지들을 먼저 작업해봤습니다.메인 페이지 입니다.1. 우측상단의 LOGIN 을 클릭하여 로그인 페이지로 이동할 수 있습니다.2. WORD BOOK을 누르게 되면, 모든 단어 목록이 나오게 됩니다.3. 시작하기 버튼 위로 마우스를 올리면 좌우로 늘어나면서 검색창으로 바뀝니다. 각각 로그인과 회원가입 페이지 입니다. 내 단어장 페이지 입니다. 로그인 후 북마크된 단어들을 한눈에 볼 수 있습니다. Word Book 페이지 입니다. MZ 사전에 존재하는 모든 단어들을 확인할 수 있습니다.단어 상세 페이지 입니다. 검색한 단어의 상세 정보를 확인할 수 있고, 단어에 대한 댓글들로..
1. 프로젝트소개MZ 사전은 MZ 세대(Millennial & Generation Z)가 사용하는 독특한 언어와 표현을 수집하고 설명하며 세대 간 소통을 돕기 위한 프로젝트 입니다. 디지털 환경에서 주로 사용되는 약어, 유행어, 비속어 등을 정리하고 정의와 실제 사용 사례를 제공합니다.2. 기술 스택 및 환경사용할 기술 :ReactFigmaNotion개발 환경 :VSCode3. 프로젝트 기능 설명핵심 기능 :용어 검색사용 예시 제공단어장4. Structural Design5. 일정
1. 프로젝트 소개프로젝트 소개: 포켓몬 목록을 불러와 화면에 무한 스크롤로 표시하는 애플리케이션입니다. React와 React Query, Ant Design, Styled-components를 사용해 데이터를 비동기적으로 가져오고, 화면을 스크롤할 때마다 포켓몬 목록을 추가로 로드합니다.목표: Poke API에서 데이터를 가져와 무한 스크롤 기능을 구현하고, React Query를 통해 효율적인 데이터 fetching을 학습합니다.2. 기술 스택 및 환경사용한 기술:React: UI 구성 및 상태 관리React Query: API 요청과 상태 관리Styled-components: 스타일링Ant Design: UI 구성 요소useInView: 화면에 들어온 요소만 렌더링하여 성능 최적화개발 환경:VSC..
※ youtube의 코딩알려주는 누나 영상을 참고하였습니다 ! ※ 1. 프로젝트 소개간단하게 무한스크롤(Infinity-Scroll) 구현을 해보았습니다. 유튜브의 코딩알려주는누나의 영상을 참고하여 만들어 보았습니다.영화 데이터를 기반으로 한 무한 스크롤 영화 리스트를 구현한 프로젝트입니다. React와 React Query를 활용하여 데이터를 불러오고, 사용자가 스크롤할 때마다 새로운 페이지를 불러오는 기능을 구현했습니다. 특히, useInfiniteQuery를 사용하여 페이지네이션을 처리하고, react-intersection-observer로 화면에 영화 목록이 보일 때마다 데이터를 추가로 불러오도록 했습니다.2. 기술 스택 및 환경사용한 기술: React, styled-components, Rea..
1. 프로젝트 소개간단한 To-Do List 앱을 React와 JavaScript로 구현한 프로젝트입니다. 이 프로젝트에서는 특히 props를 제대로 이해하고 사용하려는 목표를 가지고 진행하였습니다.2. 기술 스택 및 환경사용한 기술: React, styled-components개발 환경: VSCode3. 프로젝트 기능 설명핵심 기능: 할 일을 추가하고, 완료한 일정은 삭제할 수 있도록 할 수 있습니다.UI/UX:사용자는 할 일을 입력하고, 등록 버튼을 누르면 해당 항목이 목록에 추가됩니다.완료된 일정을 삭제 버튼을 통해 제거할 수 있습니다.4. 코드 설명App.js: useState로 상태를 관리하여 할 일 목록을 저장하고, 사용자가 입력한 값을 처리합니다. AddItem 함수로 할 일을 추가하고, R..
웹에서 브라우저와 서버가 서로 통신하기 위해 사용하는 다양한 규칙들이 있습니다.이 중 HTTP Method는 클라이언트(사용자)가 서버에게 어떤 작업을 요청하는지를 정의하는 중요한 역할을 합니다.예를 들어, 사용자가 웹 페이지에서 어떠한 정보를 조회하거나 새로운 데이터를 전송할 때,그리고 그 데이터를 수정하거나 삭제할 때 이 모든 작업들은 HTTP Method를 통해 이루어집니다.각 Method는 특정한 목적과 기능을 가지고 있고, 서버와의 상호작용을 효율적으로 처리하는데 중요한 역할을 합니다.HTTP Method 종류HTTP Method에는 여러가지 종류가 있고, 어떠한 것들이 있는지 먼저 알아보려고 합니다.GETPOSTPUTDELETEPATCHHEADOPTIONSCONNECTTRACE이와 같이 여러가..
나는 최근 프론트엔드 개발자로서 면접 준비와 개념 정리를 위해 지인에게 추천받은 책을 구매했다. 지인은 이 책이 면접 준비는 물론, 개발 개념을 확실히 잡는 데 큰 도움이 될 것이라고 자신 있게 추천해주었다. 기계적인 코딩 연습에만 몰두하다 보니, 개념적인 부분이 부족했던 제 모습을 돌아보며 이 책이 절실하다고 느꼈다. 그래서 바로 구매를 결심하게 되었고, 구매해버렸다 ! 앞으로 이 책을 읽으면서 배운 내용을 티스토리의 개념 정리 카테고리에 하나씩 정리해 올릴 계획이다. 이 과정을 통해 제 지식을 체계적으로 정리하고, 한층 성장할 수 있는 기회가 되기를 기대하고 있다. 보는 사람이 있을지 모르겠지만, 보는 사람들이 생긴다면 함께 이 책의 유용한 내용과 제 성장 과정을 나누며 프론트엔드 개발자로서 더 나은..