내가 프론트엔드 개발자를 준비하면서 가장 많이 사용한 라이브러리는 단연코 'React' 이다.React는 2013년 페이스북에서 개발한 자바스크립트 라이브러리인데, 당시 웹 개발 방식을 개선하기 위해 개발했다.지금은 너무도 익숙해져버렸지만, 문득 React라는 것이 왜 개발되어서 내가 사용하고 있는가에 대해서 궁금해졌다.그래서 React에 대해서 알아보는 시간을 가져보려고 한다. React는 왜 등장했을까?1. 복잡한 UI와 불일치 상태2010년대 초반에 대부분의 프론트엔드 개발은 jQuery를 기반으로 UI를 조작하고 이벤트를 처리하는 방식이었다.하지만 핵심문제가 몇가지가 존재했는데,UI는 상태에 따라 바뀌어야 하는데 그 상태를 기반으로 UI를 직접 조작해야 했다. 버튼을 클릭하면 DOM을 직접 찾아..

1. Vue.js2일차 수업에는 Vue.js를 이용해 MVC(Model, View, Controller) 패턴의 기본 구조를 경험하는 시간을 가졌다.기본적인 Vue 코드의 구조는 이렇게 된다. Vue.createApp({ data: { // 상태 데이터 }, methods: { // 기능 구현 }}).mount('#calc-app'); 실습으로 간단한 덧셈 계산기를 만들어 보았는데, 예제를 통해 HTML과 Vue.js를 결합하여 실습을 진행했다. 아래는 간단한 예제이다./* HTML 코드 */ 덧셈 계산기 계산기 입력폼 x: y: = 0 /* Vue의 MVC ..

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..