JavaScript/React JS
-
ReactJS | Test 개요 및 Component Test 기초JavaScript/React JS 2020. 5. 18. 12:29
TEST 테스트 테스트는 어떤 가설을 검증해 나가는 과정이며 고품질의 소프트웨어를 개발하기 위해선 꼭 필요한 기본 중의 기본 테스트의 종류 피라미드 테스트에서의 테스트 단위 단위(Unit): 단위 테스트는 기능의 개별적인 단위를 테스트, 리팩토링에 도움이 되며 모듈화를 증진 서비스: 서비스 테스트는 기능의 집합에 집중, 범위의 규모나 테스트 수행 대상에 관한 집중도 수준이 매우 다양 통합(Integration): 애플리케이션의 여러 부분을 통합해서 테스트하는 높은 수준의 테스트에 집중, 이 테스트는 인터페이스 자체를 이용해서 테스를 진행 테스팅 트로피 Kent C. Dodds에 의해 잘 알려진 테스팅 트로피는 프론트엔드 테스트에서 두각을 보이는 방법 통합 테스트가 투자 대비 얻는 것이 가장 많기 때문에 ..
-
ReactJS | Json-Server & ConcurrentlyJavaScript/React JS 2020. 4. 21. 09:28
json-server 가상의 데이터 서버를 구성할 수 있도록 도와주는 라이브러리 설치 yarn glodbal add json-server 데이터 입력 루트 폴더에 mock 폴더를 만들고 db.json이라는 파일을 만들어 가상의 데이터 입력 { "data": [ { "id": 1, "name": "pathas", "age": 1000, }, { "id": 2, "name": "pathasHH", "age": 1000, } ] } json-server 구동 package.json에 json-server를 실행하는 "mockserver" 명령어 추가 ... "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "..
-
ReactJS | Firebase로 React 프로젝트 DB 연동 및 배포JavaScript/React JS 2020. 4. 10. 17:37
Firebase 데이터 베이스를 포함한 여러가지 서비스를 제공하는 Google의 모바일 플랫폼 ※ 주의사항__요금제를 Spark로 사용해야 무료로 이용 가능!! ※ 그 외의 서비스나 다른 클라우드 플랫폼도 마찬가지로 서비스에 따라, 서비스 사용량에 따라 과금이 발생하는 경우가 있기 때문에 무료로 이용을 원하는 경우에는 항상 요금을 확인하고 서비스를 이용해야 불필요한 과금이 발생하지 않음 Firebase 주요 서비스 Firebase Cloud Function: 클라우드 서비스들을 빌드하고 연결할 수 있는 serverless 실행 환경 Google Cloud Function과 유사한 부분이 많음 Auth: 주요 SNS를 통해서 로그인을 쉽게 구현할 수 있도록 도와 주는 서비스 Hosting: 서버 없이 웹 ..
-
ReactJS | ProxyJavaScript/React JS 2020. 3. 30. 11:40
Proxy 사전적 의미 proxy: 대리 Proxy를 설정한 서버를 Proxy Server라고 함 원래 서버의 대리 역할을 수행하는 서버가 됨 서버가 2개 일 때 발생하는 문제들 데이터 서버: php, Django, JSP etc. 클라이언트 서버: React Dev Server 클라이언트는 특별히 서버가 필요 없지만 create-react-app이 개발 서버를 제공 → 두 서버에 각각의 PORT 번호를 설정함으로써 각 서버를 식별할 수 있도록 함 → 여러 가지 문제 발생 개발 시에는 fetch API 등으로 ('http://localhost:8000/api_path')와 같은 경로로 서버에 데이터를 요청하지만 배포 시에는 '/api_path' 이외의 주소가 있다면 에러 발생 CORS(Cross-Or..
-
ReactJS | Component StylingJavaScript/React JS 2020. 2. 28. 11:06
Component Styling CSS Styling 컴포넌트.js 파일에서 컴포넌트.css 파일을 import 하는 형식 중복되는 클래스명이 있으면 안 됨 여러 개의 컴포넌트들은 웹팩을 통해 하나로 합쳐지는데 중복되는 클래스명이 있으면 둘 중 하나가 덮어 쓰여짐 SMACSS, BEM 과 같은 CSS 방법론을 적용할 수도 있고 CSS Selector를 활요하는 방법도 있음 CSS Selector CSS에서 스타일링을 원하는 html 요소(element, tag)를 선택하는 패턴 Selector 설명 .class class="class"인 요소를 전부 선택 .class1.class2 class1과 class2의 요소를 전부 선택 .class1 .class2 class1 내부의 class2 요소 전부 선택 ..
-
ReactJS | Component 개요JavaScript/React JS 2020. 2. 28. 10:53
Component 리액트의 기본 동작 단위라고 할 수 있음 컴포넌트는 재사용 가능하게 작성되어야 함 부모 컴포넌트로부터 Props를 입력받아서 리액트 요소(React Element)를 반환하는 형태로 동작 컴포넌트를 작성하기 위해서는 컴포넌트.js 파일 상단에 import React from "react"; 를 작성해야 함 컴포넌트는 주로 기능별로 나누어서 작성 es) 메인 컨테이너, 헤더, 메인 컨텐츠, 컨텐츠 아이템 Component hierachy 클래스형 Component HTML JSX // React.Component를 상속하는 HelloReact 클래스형 컴포넌트 작성 class HelloReact extends React.Component{ render(){ /* render: 그림을 그리..
-
ReactJS | 개요 및 JSX 문법JavaScript/React JS 2020. 2. 28. 10:39
REACT JS UI를 효과적으로 구축하기 위해 사용하는 JavaScript기반 오픈 소스 라이브러리 React 특징 선언적(Declaretive): 대화형 UI 작성에 유리, 데이터가 변경되었을 때 효율적으로 렌더링 수행 컨포넌트 기반(Component-Based): 캡슐화된 컴포넌트가 상태를 관리하고 UI를 효과적으로 구성 한 번 배워서 어디에서나 사용하기(Learn Once, Write Anywhere): 기존의 소스코드를 불필요하게 작성하지 않고 새로운 기능 개발 가능, 재사용성이 높음 프론트엔드를 객체 지향적으로 개발할 수 있도록 하는 라이브러리 클라이언트 렌더링뿐만 아니라 서버 사이드 렌더링도 지원 클라이언트 렌더링 : 필요한 데이터를 그때 그때 받아오는 것 서버 사이드 렌더링: 데이터를 서버..