개발 지식, 스크립트/React

axios 를 활용하여 spring 의 데이터를 가져와야 하는 과제가 있었다. axios는 fetch 함수와 다르게 json 파일로 바꿀 함수가 필요 없다. 자동으로 바꿔준다 !! 프론트(React) import React, { useEffect, useState } from 'react'; // useEffect를 import 해야 합니다. import DesktopCardDetail from '../components/card/detail/SelectDetail/DesktopCardDetail'; import MobileCardDetail from '../components/card/detail/SelectDetail/MobileCardDetail'; import CardList from '../co..

1. Babel Babel이란 JavaScript 컴파일러로 표현되지만, 바이트 코드로 컴파일을 진행한다기 보다는 최신 버전의 JavaScript 코드를 지원하지 않는 이전 브라우저에서도 코드가 동작하도록 하위 버전 호환성을 지원하기 위한 트랜스파일러(Transpiler)라고 볼 수 있다. *Transpiler : 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 행위 2. Babel의 기능 JSX 문법 변환 JSX는 개발자의 편의성을 위해 제공된 확장 기능으로 볼 수 있기 때문에 React를 거쳐서 브라우저에서 동작하도록 하기 위해서는 브라우저가 이해할 수 있는 순수한 JavaScript 코드로 변환(Transpiling) 되어야 한다.

Context API 기본적으로 React에서 데이터를 전달하기 위해서는 Props를 통해 상위 컴포넌트에서 하위 컴포넌트로 전달하는 방식을 사용한다. 컴포넌트가 중첩된 정도가 2~3개 정도면 Props를 활용할 수도 있지만, 4~5개 이상 중첩된 구조일 경우에는 관리가 복잡해질 수 있다. 이처럼 컴포넌트가 4~5개 이상 중첩되어 Props를 전달하는 방식을 마치 드릴을 파고 내려가는 것 같다고 하여 Props Drilling 패턴이라고한다. 사용 방식 1. 우선 createContext()를 가져온다. import { createContext } from "react"; export const TodoContext = createContext(); // Todos 데이터 제공 용도의 Context ex..

JSX란 JSX는 자바스크립트의 확장 문법이다. XML과 매우 비슷하게 생겼으며, 이런 형식으로 작성한 코드는 브라우저에서 실행되기전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 즉, JS코드 내에서 HTML 코드를 편리하게 작성하기 위한 편의성 제공 문법이기 때문에 HTML in JS라고도 한다. SPA의 기본적인 동작 방식은 JS 코드를 통해 HTML 엘리먼트를 조작하는 것이기 때문에 JS의 역할이 그만큼 높아질 수밖에 없고, 이러한 이슈로 인해 HTML, CSS, JS를 별도의 파일로 관리하던 방식에서 HMTL, CSS, JS를 하나의 파일에서 작성하고 관리할 수 있도록 하는 방식도 생겨나게 되었다. ex ) const Component = props =>..

1. 컴포넌트 생성 JS 코드를 작성할 수 있는 HTML 파일 or JS 파일 생성 내가 생각하는 의미있는 단위로 구성될 HTML Element, CSS, JS 코드 작성 작성한 코드들을 하나의 컴포넌트로 그룹화시켜줄 컴포넌트 생성 문법 사용 컴포넌트 사용(or 컴포넌트를 외부에서 사용할 수 있도록 export) 2. 컴포넌트 네이밍 규칙 일반적으로 커포넌트는 대문자로 시작해야 한다. 소문자로 사용할 경우 HTML에서 제공하는 표준 태그와 이름이 충돌하 수 있다. 3. 로그인 입력 폼 구현(ex) 구성요소 Username과 Password를 입력받을 수 있는 입력 폼 로그인 버튼 비밀번호 찾기 링크 --> 공통되는 부분은 별도의 컴포넌트로 추출하여 구현해보기

특정 기준에 의해 요소 추출 요소를 추출하는 일반적인 기준 하나로 묶어서 관리하기 용이해보이는 영역을 하나의 구성요소로 추출 or 그룹화 공통적이거나 반복되는 요소를 하나의 구성요소로 추출 추출한 단위를 기준으로 컴포넌트 구성 컴포넌트를 구성하는 가장 기본적인 요소 HTML Element or Tag 1번 HTML Element에 적용된 CSS 1번 HTML Element을 조작하는 JS -> 이러한 HTML, CSS, JS 코드를 모아 그룹화하여 나만의 의미있는 별도의 '컴포넌트'를 작성하고 사용할 수 있다. 이런 방법으로 개발을 하였을 때 얻을 수 있는 대표적인 이점은 코드의 재사용성(Reusability)을 통한 코드 중복 최소화, 관리의 용이하다. 따라서, 이러한 컴포넌트 기반 개발 방식에서 주요..

1. React SPA 방식으로 UI(User interface)를 구현할 수 있도록 지원하는 기술 SPA를 구현할 수 있는 다른 기술들과 다르게 React에서는 자신들의 기술을 Framework가 아닌 Library라고 명시하고 있다. Library vs Framework => 프로그램 실행 주체가 누구인지? 나인지 프레임워크인지 프레임워크 - 개발을 쉽게, 뼈대 제공 라이브러리 - 필요할 때 설치ㅐ서 가져다 쓸 수 있게 프레임워크 - 강제성이 있지만 빠른 시간 내에 비슷한 형태를 만들 수 있다. 즉, 경험이 적은 사람도 비슷한 것을 만들 수 있다. 라이브러리 -> 자유도가 높다. 그만큼 학습을 해야한다. 프레임워크 -> 밀키트 라이브러리 -> 재료 2. React 역할 데이터가 변함에 따라 UI를 실..

SPA란 최초 요청 시 서버에서 첫 페이지를 처리, 이후 라우팅은 클라이언트에서 처리하는 웹 어플리케이션을 의미한다. 따라서 서버는 단일 html, js, css 파일만 응답하는 방식 MPA : 전통적인 웹 어플리케이션 SPA : 현재 많이 사용하는 싱글 페이지 어플리케이션 * 각각 장단점이 존재하기 때문에 혼용해서 사용하고 있다. 전통적인 애플리케이션은 서버에서 페이지 별로 각각의 html 파일을 가지고 있었기 때문에 화면을 전환할 때마다 새롭게 HTTP 요청, 응답이 수행되면서 화면 전체가 다시 렌더링되고 깜빡이는 현상이 필연적이다. SPA의 장단점 장점: 1. 페이지 로딩속도가 빠르다. - 클라이언트가 최초 요청에 서버로부터 모든 재료(html, css, js)를 가져오기 때문에 사용자의 요청에 대..