devops

TEST - 1 function hello(){ return 'hello'; } async function helloAsync(){ return 'hello Async'; } console.log(hello()); helloAsync().then((res)=>{ console.log(res); }) async를 선언한 함수의 리턴값은 resolve의 결과값이 된다. TEST - 2 function delay(ms){ return new Promise((resolve)=>{ setTimeout(resolve, ms) }) } // 3초 기다린뒤 hello Async 반환하는 것 async function helloAsync(){ return delay(3000).then(()=>{ return "hello..

비동기 작업이 가질 수 있는 상태 pending : 대기상태, 비동기 작업이 진행 중 fulfilled : 비동기 작업이 의도한대로 작업 완료된 상태 rejected : 비동기 작업이 실패한 상태 비동기 처리는 이 세가지 상태를 갖는다. 한 번 성공 및 실패하면 거기서 끝난다. fulfilled로 가는 과정을 해결(Resolve)라고 하며, rejected로 가면 거부(Reject)되었다고 한다. TEST - 1 function isPositive(number, resolve, reject){ setTimeout(() => { if(typeof number === "number"){ //성공 -> resolve resolve(number >=0? "양수":"음수") } else { //실패 -> reje..

JSON.parse JSON 문자열을 파싱한다. 파싱은 문장을 문법적 부분으로 나누고, 나누어진 부분을 식별하는 것이다. 쉽게 말해서, JSON을 : 관계로 식별한다. client-server 통신에서 server가 client에게 전달하는 데이터는 문자열이다. JSON.parse()를 사용하면 데이터를 파싱해서 Javascript 객체로 변환해준다. const jsonStr = '{"Age": "30", "Name": "Kang"}'; const obj = JSON.parse(jsonStr) // JOSN.parse사용 console.log(obj) 파싱 전의 데이터는 단순 문자열이기 때문에 parse를 해야말 데이터에 접근할 수 있는 Javascript Object가 된다. 파싱이되어야 원하는 key..

프롭스는 컴포넌트에 데이터를 전달하는 방법이다. 프롭스는 리액트를 대표하는 개념 중 하나이다.

상태라는 것으로 React를 설명할 수 있다고 해도 과언이 아니다. State란? 배고픔에 대한 상태가 적당함, 배고픔, 배부름을 인간의 허기 상태의 종류다. 이와같이 상태란 계속해서 변화하는 특정 상태며, 상태에 따라 다른 행동을 하게된다. React에 빗대어 설명하자면, 어떤 컴포넌트가 '상태'를 관리하게 된다. State 사용 실습 // Counter.js 코드 import React, {useState} from 'react'; const Counter = () => { //0에서 출발, 1씩 증가, 1씩 감소하는 Counter 상태 const [count, setCount] = useState(0); //setCount는 count상태를 변화시키는 역할, 0은 초기값 console.log("co..

JSX는 리액트에 컴포넌트를 만드는데 사용되는 문법이다. 스타일 설정하기 스타일 설정하기 (객체 사용)2 렌더하는 방법 1 랜더하는 방법2

ReactApp은 nodejs 기반의 웹서버 위에서 동작한다. 이미 세팅이 완료된 패키지를 Boiler Plate라고 한다. 쉽게 말해서, 서비스를 개발할 수 있는 빵 틀의 역할을 하는 패키지를 의미한다. npm install -g npx npx create-react-app [이름] * 위 명령어 실행 전에 npx, npm, nodejs가 설치되어 있는지 확인해야한다. 설치된 package.json 파일을 살펴보자. { "name": "reactexam1", "version": "0.1.0", "private": true, "dependencies": { //7개의 패키지가 설치됨. "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "..

저장할 때 (Ctrl+ S) 코드가 자동으로 정렬되면 굉장히 편하다. Prettier 확장 프로그램을 설치해서 설정하는 방법까지 정리하겠다. vscode 화면에서 왼쪽 아래에 확장프로그램 버튼을 클릭하고 검색창에 'prettier'를 검색한다. 그리고 intall 버튼을 누르고 설치를 진행한다. 설치가 완료되면 ctrl + shift + P를 눌러서 'Open Setting (UI)'를 검색해서 설정을 들어간다. Settings에서 검색창에 'format on save'를 검색하면 위와같은 창이 뜨게된다. 여기서 'Editor: Format On Save'를 체크하면 끝!