전체 글

[Jest] Jest를 사용한 비동기 코드 검사

아래의 내용은 CRA 환경에서 작성되었습니다. 자바스크립트에서 코드가 비동기적으로 실행되는 것은 흔하다. Jest는 테스트 중인 코드가 언제 완료가 되는지 알아야 비동기 코드를 검사할 수 있다. callbacks 가장 일반적인 비동기 패턴은 콜백이다. 아래의 코드는 비동기 패턴을 위해 작성한 코드이며, API 콜을 통해 데이터를 받아오는 데신 setTimeout()을 사용하여 콜백함수를 호출하였다. 보기에는 의도대로 테스트 통과하는 거처럼 보이지만 의도한대로 동작하지 않는 코드다. test 코드에 toBe('123456')으로 검사하여도 이 코드는 테스트에 통과한다. 그이유는 무엇일까 ? By default, Jest tests complete once they reach the end of their ..

React localhost실행 변수주기

간단하게 시작해보자. yarn add serve "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "prod": "npm run-script build && serve build" }, yarn start 할때 localhost:3000으로 들어가고 yarn prod 배포 할때 localhost:5000으로 줄것이다. import logo from './logo.svg'; import './App.css'; function App() { return ( 현재 개발 모드 : {process.env.NODE_EN..

React 상태관리를 위한 필수 라이브러리 - Redux2

Redux React에 Redux를 입혀서 상태관리하는 법을 다루어 보았f다. 들어가기 앞서 살짝 정리해보면 src/actions/ - action 객체를 리턴하는 함수들의 집합 src/reducers/ - state 를 관리하는 reducer 생성 src/index.js - createStore() 로 저장소 생성, Provider로 전달 src/App.js - userSelector , useDispatch 를 이용해 state 사용 dispatch()의 인자로 액션 생성 함수를 넣었고, 액션 객체가 리듀서 안으로 들어가 상태를 관리하는 형태 thunk 비동기 로직을 state에 넣기 위해서 우리는 미들웨어인 thunk를 사용했다. 클로저 형태로 되어있는 이 친구는 액션 생성 함수 내에서 dispat..

React 상태관리를 위한 필수 라이브러리 - Redux

React + Redux 이번 시간에는 React Redux를 통해서 카운터와 로그인 기능을 리덕스로 간단하게 구성해보자. actions actions 폴더에 있는 파일들은 dispatch의 인자로 줄 action 객체를 생성 바닐라 JS + Redux 같이, action 객체엔 type이란 키가 필요한데 이 type은 reducer 내부에서 switch-case 구문이 조건이 된다. 먼저 counterActions.js를 보자. src/actioins/counterActions.js const increment = () => { return { type: "INCREMENT" }; }; const decrement = () => { return { type: "DECREMENT" }; }; export..

API.1 - React에서 사용하는 많이쓰는 Http 통신라이브러리 - use-http

이번 시간에는 React에서 사용하는 사람들이 많이사용하는 HTTP 통신라이브러리 use-http를 알아보겠습니다. 사실 사람들이 많이쓰는 통신라이브러리는 axios 가 대표적인데요 axios는 GET POST 같은 method를 주로 사용합니다. 이번에는 사람들이 많이 사용한 2번째 Http 통신라이브러리 use-http 라이브러리에 대해 알아보겠습니다. use-http 라이브러리 도 axios 같이 언어는 동일하지만 쓰는 방식은 다릅니다. useFetch (use-http) 🐶 React hook for making isomorphic http requests use-http.com 저는 이곳에 있는 use-http 사이트를 참조해서 만들어 보겠습니다. npx create-react-app use-h..

React-testing-library 를 사용해서 TDD개발 흐름과 test로 null값 체크 해보기

- Jest란 무엇인가? Jest는 대규모 웹 응용 프로그램에 대한 단순성과 지원에 중점을두고 Christoph Nakazawa가 설계 및 구축 한 Facebook, Inc.에서 유지 관리하는 JavaScript 테스트 프레임 워크입니다. 즉 Jest는 JS 테스트 프레임워크입니다. Babel, TS, Node,React,Angular,Vue 등을 사용하는 프로젝트에서 사용할 수 있다. 즉, 프로젝트에서 코드 테스트를 하기 위해 사용하는 프레임워크이다. Create React App 에서의 Jest Create React App uses Jest as its test runner. 출처 : https://create-react-app.dev/docs/running-tests/ CRA 환경에서는 Test ..

웹개념_HTTP통신

0. 웹 통신 1) 웹 통신 & Protocol 인터넷 상에서의 통신을 말함 많은 정보들이 주고 받기에 인터넷에 엄격한 규약이 존재함. 이것을 Protocol 이라 말함 2) 웹 Protocol 종류 일반적인 프로토콜 Http: Hyper Text Transer Protocol Https: secure Hyper Text Transer Protocol TCP/IP 프로토콜을 가지고 서버와 클라이언트 사이의 파일 전송을 하기 위한 프로토콜 FTP: File Transfer Protocol 파일 전송 프로토콜 Talnet : Terminal Network SSH: Secure Shell 보안된 소켓 통신을 위한 프로토콜 SMTP: Simple Mail Transfer Protocol 기타 TCP/UDP : ..

React 개발 환경 세팅

리액트 개발환경 세팅하는 방법을 알아보자 간단하게만 설명할수 있으니 얼마 안걸릴것이다. 우선 리액트를 생성하고 기본적인 세팅을 마친다. 리액트에서 App.js에 들어가서 내가 만들 env에 대한 세팅을 해주어야 한다 우선 기본적으로 개발환경과 배포 환경에 따라 세팅을 해주어야하기 때문에 npm install env-cmd 환경변수에 따라 실행을 지원하는 env-cmd 를 설치해준다. "env-cmd": "^10.1.0", package.json에 추가 env-cmd가 추가되었다면 다음과 같이 package.json에 선언해주어야한다. "scripts": { "start:staging": "env-cmd -e development react-scripts start", "start:prod": "env-c..

[Node.js] Express Restful Api 서버 만들기

이번 시간에는 Node.js express 를 만든 예제를 활용해서 서버를 만들어보자 Restful api 라는 말은 무엇일까?? 간단하게 설명하자면 "클라이언트 서버 간에 데이터를 주고 받는 방식을 정의한다" 라고 생각하면 된다. HTTP URL(Uniform Resource Identifier)를 통해 데이터(자원)을 명시하고 Method(GET,POST,PUT,DELETE)를 통해 해당 데이터를 CRUD(Create,Read,Update,Delete)한다고 생각하면 된다. - REST Method GET : 조회 POST: 생성 PUT : 전체 수정 DELTE : 삭제 PATCH : 수정 HTTP 통신을 주고 받을때는 위와 같은 매서드를 사용해서 통신을 주고 받는다. 지난 시간 소스코드에 추가를 하..

[Node.js] Express 서버 구축

이번시간에는 Node.js웹 애플리케이션 프레임워크인 Express를 활용해서 Restful Api서버를 구축하는 법을 알아보도록 하자 기본적으로 Node.js를 설치해야 구동이 가능하니 아래 링크를 참조해서 Node.js를 깔아준다. https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치를 완료했다면 콘솔화면에 직접들어가준다. 생성할 폴더에 들어가서 npm init 명령어로 pakage.json 을 만들어준다. 특별히 입력할 부분 없이 스킵.. 그리고 터미널에 express 라이브러리를 설치해준다. npm install ..

1.HTML이란?

참고사이트:위키백과. HTML은 (HyperText Markup Language HTML,)의 줄임말로 웹 페이지의 기본을 담당하는 언어이다.HTML은 제목,단락,목록 같은 본문을 위한 구조적 의미를 나타내는 것 뿐만 아니라 링크,인용과 그 밖의 항목으로 구조적 문서 를 만들 수있는 방법을 제공한다. 그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다. HTML은 웹 페이지 콘텐츠 안의 꺽쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다. 1.HTML의 역사 HTML은 1980년, 유럽 입자 물리 연구소(CERN)의 계약직이였던 물리학자 팀 버너스리가 HTML을 처음 개발하였고 HTML의 원형인 인콰이어를 제안하였다.1989년 팀 버너스리는 인터넷 기반 Hype..