코린이공부목록 (73) 썸네일형 리스트형 useNavigate 로 인한 렌더링 문제 [여행역할] 이라는 사이드 프로젝트를 진행하며 겪은 오류 현재 나는 React 를 사용하며 사이드프로젝트 프론트쪽을 맡아서 하고 있는데, 서버에서 데이터를 요청해 계속해서 여행 계획에 대한 데이터들을 보여줘야하는 상황이였다. 여행계획을 세우는 방으로 입장을 했을 때, useNavigate를 사용해서 라우터 이동을 했는데 axios 요청보다 더 빠르게 페이지가 이동되어서 렌더링에 문제가 생기게 되었다. 그래서 페이지가 이동하기 전에, 여행 계획 데이터를 먼저 받고 페이지가 이동될 수 있도록 코드를 구현했더니 렌더링에 문제 없이 잘 작동하는 걸 확인할 수 있었다. 하지만 이게 좋은 코드인가? 라고 생각해보면 좋아보이지 않는다.. const handleInRoom = useCallback(() => { dis.. Postman으로 Rest API 문서화하기 API 를 왜 문서화할까? 고객이 API 를 사용할 때 API를 이해하고, 사용할 수 있도록 API 를 문서화작업을 해주어야한다. postman을 사용해서 API 를 문서화하기 ( 기본 ) 1. Postman에서 Collections 로 들어간다. 2. New를 클릭해서, API 이름을 작성해준다. 3. 만든 API 의 오른쪽 마우스를 클릭해, New Request 를 만들어준다. 어떤 호출인지 작성하는 용도인듯 4. 어떤 호출인지 이름을 작성해주고, API 주소를 입력해서 Save 해준다. 5. 사용하는 사람이 예제를 볼 수 있도록 Save as example 을 클릭해준다. path value가 들어가야할 경우 1. API에 :id를 추가하면, 아래에 Path Variables 에 id 가 추가된다... 랜덤명언 REST API 만들어보기 개발 환경 셋팅 package.json 만들기 yarn init npm init node.js 는 아직 자바스크립트의 es6 문법이 적용되지 않는다. es6 문법을 이용하려면 , index.js 처럼 모듈로 만들어놓으면 된다. express 설치 - Node.js 를 위한 빠르고 개방적인 간결한 웹 프레임워크 - node.js를 사용하여 서버를 개발하고자 하는 개발자들을 위하여 서버를 쉽게 구성할 수 있게 만든 프레임워크 정리 : express 란 NodeJs를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체 yarn add express npm i express 서버 기본 셋팅 express require const express = require("express") // = .. Sass (Syntactically Awesome Style Sheets) Sass - CSS pre-processor 로써, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게 해줌. Sass / Scss 의 문법 차이 sass $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } 보통은 scss 문법이 더 많이 사용됨. Sass 사용하기 리액트 프로젝트 만들기 $.. debounce 과 throttle 쓰로틀 (Throttle) 과 디바운스 (Debounce) - DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 이벤트를 제어(제한)하는 방법 디바운스 (Debounce) 배경지식 - 전자에서는 기계적인 접점을 가지는 스위치는 접점이 붙거나 떨어지는 순간에 바운싱 현상이 있다. 이 바운싱 현상은 접점이 붙거나 떨어지는 그 짧은 순간에 접점이 고속으로 여러번 on/off 되는 현상 이런 바운싱 현상을 방지하기 위한 것이 디바운싱 기법 - 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술 (즉, 순차적 호출을 하나의 그룹으로 "그룹화" 할 수 있음) 연이어 호출되는 함수들 중 마지막 함수 (또는 제일 처음)만 호출하도록 하는 것 디바운스 (Debounce) .. React forwardRef forwardRef - 부모 컴포넌트에서 자식 컴포넌트의 ref 를 다루고 싶을 때 사용함 자식 컴포넌트의 값을 부모로 올리는 것이 어려우므로 ref 를 부모 컴포넌트에서 만들어서 자식에게 내려보내주어야 함. forwardRef 사용 방법 import React, { forwardRef } from "react"; const Component = forwardRef((props, ref) => { return ( ); }); export default Component; import React, { forwardRef } from "react"; const Component = (props, ref) => { return ( ); }; export default forwardRef(Component); .. React의 가상돔 (Virtual DOM) DOM (Document Object Model) - HTML 파일 내용을 토대로 만들어지고, javascript 와 같은 스크립팅 언어로 수정할 수 있도록 만들어진 웹 페이지의 객체 지향 표현 - 브라우저가 화면을 그리기 위해서 필요한 정보가 트리 형태로 저장된 데이터입니다. - DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. - DOM 은 DOM이 제공하는 API(getElementById, querySelector) 를 사용해 , 원하는 엘리먼트에 스타일, 구조 등을 조작할 수 있다. - 웹 페이지는 일종의 문서(document) 로 이루어져있다. 이 문서는 웹 브라우저를 통해 문서가 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 가상 돔 (.. React.Fragment React.Fragment 란 - 리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환한다. return ( hello World ) - 리액트를 사용하기 위한 문법인 JSX 를 쓸 때, return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다. - 리액트가 하나의 컴포넌트 만을 리턴 할 수 있기 때문이다. React.Fragment 기본 사용법 function App() { return ( Hello, World ); } function App() { return ( Hello, World ); } 빈 태그를 사용해도 되지만, 상황에 따라서 React.Fragment 를 넣어줘야하는 경우도 있다. 예제를 확인해봅시다 React.Fragment 예제 Style 을 지정할 때 App.js fu.. 이전 1 2 3 4 ··· 10 다음
