프로그래밍/React5 [React] 2. GitHub 저장소 만들고 프로젝트 푸시하기 GitHub 원격 저장소(remote repository) 만들기 1. GitHub에 로그인 -> 왼쪽 Recent Repositories에 New 버튼 클릭 2. Repository name에 저장소 이름을 쓰고, 필요하면 Description에 저장소에 대한 설명을 쓴다.(써본 적은 없음..) 공개 옵션(Public/Private)을 선택하고, README나 .gitignore 파일을 추가할 것인지 선택 후 'Create repository'를 클릭하면 저장소가 만들어진다. 프로젝트 푸시하기 이제 로컬에 만들어둔 프로젝트를 이 저장소에 푸시해보자. 3. 방금 2번에서 GitHub repository를 생성하고 나면 이런 화면이 뜨는데, 복사 버튼(빨간색 동그라미 쳐둔 부분)을 클릭해서 주소를 복사한다.. 2022. 9. 7. [React] SPA vs MPA SPA (Single Page Application) 한 개의 Single Page로 구성된 Application으로, 한 번 Resource(HTML, CSS, JavaScript)를 로딩하고 이후 데이터를 받아올 때만 서버와 통신한다. SPA는 Web application에 필요한 all static resource를 최초 한 번에 다운로드하고, 새 페이지 요청이 있을 때 페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신한다. → CSR (Client Side Rendering) 방식으로 렌더링한다고 함 CSR 방식 사용하는 경우 초기 화면 렌더링에 시간이 걸릴 수 있음 장점 깜빡임 없이 자연스러운 UX 필요한 리소스만 부분적으로 로딩(성능상 유리) 서버의 템플릿 연산을 클라이언트로 분산 컴포넌트.. 2022. 6. 5. [React] React에서 Axios 사용해 API 호출하기 Axios란? 서버와 데이터를 주고받기 위해서는 HTTP 통신을 해야 하는데, React에는 HTTP Client(HTTP 상에서 커뮤니케이션을 하는 자바 기반 컴포넌트) 내장 클래스가 존재하지 않는다. 따라서 React에서 *AJAX(Asynchronous Javascript And XML)를 구현하려면 JavaScript 내장객체인 XMLRequest를 사용하거나, 다른 HTTP Client를 사용해야 한다. * AJAX : 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것으로, JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 비동기로 주고받을 수 있다. HTTP Client 라이브러리에는 Fetch API, Axios가 있는데, 사용하는 형태에 약간.. 2022. 6. 5. [React] 1. React 프로젝트 생성하기(create-react-app) 1. Node.js 설치하기 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 짝수 버전이 LTS, 홀수 버전이 Current인데 홀수 버전인 Current가 6개월마다 배포된 후 수정되면서 안정성이 확보되면 짝수 버전 LTS를 배포한다. 즉 LTS는 안정적인 버전이고 Current는 가장 최신 버전이다. LTS는 30개월동안 지원되고, 프로덕션 애플리케이션은 LTS를 사용해야 한다고 한다. (버전에 대한 자세한 정보는 아래 링크를 참고하면 된다.) https://nodejs.org/en/about/releases/ Node.js 홈페이지에 들어가서 .. 2022. 3. 20. [React] Intersection Observer API 사용한 Infinite Scroll 만들기(without React Hook) 한번에 데이터를 모두 불러오는 것이 아닌, 화면을 스크롤할 때마다 데이터를 추가로 불러오는 Intinite Scroll을 구현해 보았다. Infinite Scroll 구현 방법 scroll event: 스크롤이 끝까지 내려가는 경우 데이터 추가로 불러오도록 구현하는 방법 throttle 등을 추가로 구현해 최적화 할 필요가 있음 Intersection Observer API 사용 찾아보니 Intersection Observer API를 활용한 예제가 많고 편리한 듯 하여 Intersection Observer를 사용하기로 했다. 일부 브라우저에서는 Intersection Observer 지원이 안 된다고 하지만, Explorer 외에는 거의 지원이 되는 것 같다. Explorer는 MS에서도 지원을 종료.. 2021. 4. 8. 이전 1 다음
