FE/React14 [React Official Document] #1 Quick Start 리액트의 공식문서는 꽤나 잘 구성되어 있다. 오죽하면 '공식문서로 공부해라' 라는 의견이 있을 정도일까. 이 문서는 리액트의 작동 원리에 대해 자세하게 이해할 수 있도록 잘 작성되어있다고 한다. 리액트를 공부하는 학생으로써 공식문서를 읽어보지 않을 수 없다. 당연하게도 영어로 작성되었지만, 굳이 번역기를 쓰지는 않았다. 개발을 공부하는 이상 앞으로 리액트 뿐 아니라 다양한 공식문서들을 읽을 것이다. 출시된지 얼마 지나지 않은 최신 기술, 내가 꼭 써야하지만 사용자가 적어 공식문서 외에는 정보를 얻기 힘든 기술들을 마주할 것이다. 그럴 때 마다 다른것이 아닌 영어가 내 발목을 잡는다면... 분명히 좋은 꼴은 못 볼 것이다. 모르는 단어가 나오거나 한글로 바로 떠올리지 못하는 문장들은 chatGPT를 통해 .. 2023. 9. 25. React를 사용하여 TodoList 만들기 백엔드에서 API가 주어졌고, 나는 React로 TodoList를 만드는 미니 프로젝트를 진행하였다. 요구사항은 다음과 같다. 구현 내용 Data APIs를 제공해주는 React Router 활용하여 아래의 페이지들을 제작합니다 페이지 설명 /: 홈페이지 /todos: todoList 정보를 확인할 수 있는 페이지 페이지에 존재하는 기능 / todo list 제목 작성 todo list 페이지로 이동하는 버튼 제작 /todos CRUD 기능을 하는 버튼 4개 제작 (TodoList에 대한 로컬 상태관리) Firebase Api 명세서를 참고하여 Firebase 연동 및 기능을 구현합니다 뒤로가기 버튼 →/으로 이동합니다 (pop) GET : 데이터 읽기 curl 'https://[SERVER_URL]/t.. 2023. 9. 23. 6. 외부 API 연동하여 뉴스 뷰어 만들기 6.1 비동기 작업의 이해 우리가 만든 웹 앱은 결국 백엔드에서 만들어준 외부 API를 사용해 데이터를 불러옵니다. 이때, API를 호출하면 응답받을 때 까지 시간이 걸리겠죠. Ajax를 사용하여 요청을 보내고, 기다렸다가, 응답을 받으면 데이터를 처리합니다. 이 과정은 비동기적으로 일어납니다. 쉽게 설명해볼게요. 동기적이란 말은, 작업이 끝나면 다른 작업을 하는 것을 말합니다. 비동기적이란 말은, 작업이 동시에 병렬적으로 이루어진다는 것을 말합니다. 동기적(Synchronous)이란 것은 위의 그림처럼 순서대로 작업이 이루어지고요. 비동기적(Asynchronous)이란 것은 위의 그림처럼 동시에 작업이 이루어집니다. 우리의 웹 앱을 동기적으로 처리한다면, 요청에 대한 응답을 받을 때 까지 아무것도 못해.. 2023. 8. 1. 5. React router로 SPA(Single Page Application) 개발하기 5. 1 라우팅이란? 먼저 라우팅이란, 사용자가 요청한 url에 따라 다른 페이지를 보여주는 것을 말합니다. 웹 페이지를 만들때는 단일 페이지로 구성할 수도, 여러 페이지로 구성할 수도 있습니다. 여러 페이지로 구성된 웹 페이지를 만들 때, 페이지별로 컴포넌트를 분리해서 프로젝트를 관리하기 위해 필요한 것이 라우팅 시스템입니다. 라우팅 시스템을 위해 많이 사용하는 두 개의 선택지를 소개할게요. React-Router 컴포넌트 기반의 라우팅 시스템을 설정할 수 있습니다. 가장 오래됐고, 가장 많이 씁니다. Next.js 리액트 프로젝트의 프레임워크입니다. 파일 경로 기반의 시스템을 설정할 수 있습니다. 라우팅, 최적화, 다국어지원, SSR(Server-Side-Rendering) 등의 다양한 기능을 지원합.. 2023. 8. 1. 이전 1 2 3 4 다음
