sy의 코딩 개발일지

describe("Discover", function() { let expect = chai.expect; // 함수가 없는 테스트는 "pending"이라는 표시가 뜨며 실행되지 않습니다. // 아래 테스트를 작성하고 테스트가 통과하도록 만드십시오. it("has a prefix of 6011 and a length of 16", function(){ expect(detectNetwork("6011123456789012")).to.equal("Discover"); }); it("has a prefix of 6011 and a length of 19", function(){ expect(detectNetwork("6011123456789012345")).to.equal("Discover"); }); it(..

TDD란? 코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론 작은 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성하는 과정을 반복하는 것을 의미 TDD의 개발 주기 Write Failing Test: 실패하는 테스트 코드를 먼저 작성 Make Test Pass: 테스트 코드를 성공시키기 위한 실제 코드를 작성 Refactor: 중복 코드 제거, 일반화 등의 리팩토링을 수행 TDD를 사용하는 이유 예상하지 못했던 버그를 줄여 소요 시간을 줄일 수 있기 때문 테스트 코드를 작성 describe, it, assert, expect 프레임 워크에서 제공하는 테스트 작성을 위한 도구 ex) mocha라는 테스트 프레임워크와 chai라는 라이브러리를 사용 React 환경에서 테스트 React에..

Rest API vs GraphQL API Rest API 캐시가 지원 HTTP 캐싱을 사용하여 응답을 저장,캐시를 지울땐 수동적으로 해야한다. 이미 정보가 정해져 있어서 추가적으로 정보가 필요하면 서버쪽에서 만들어줘야한다. GraphQL 캐시 지원 X ,아폴로와 같은 라이브러리를 사용 클라이언트단에서 추가적으로 정보 수정을 하면 된다. github에서 토큰을 받아오기 보안을 위해서 env를 전역파일로 저장한다. REACT_APP_GITHUB_TOKEN = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx App.js import "./App.css"; import { graphql } from "@octokit/graphql"; import { useEffect, useState } from..

GraphQL(Graph + Query Language) Facebook에서 처음으로 개발했고, 오픈 소스로 제공된 쿼리 언어 API를 위한 쿼리 언어 GraphQL은 클라이언트 요청에 따라 유연하게 트리 구조의 JSON 데이터를 응답으로 전송 클라이언트 요청에 따라 유연하게 자원을 가져올 수 있다는 점 그래프에서 트리 추출하는 방법 쿼리 실행 이방식으로 서버에 요청을 보낸다. query { 책(ISBN이 "9780674430006") { 책 이름 저자 { 이름 } } } 요청 해결 후 돌아온 쿼리 { 책 : { 책 이름 : "GraphQL", 저자 : [ { 이름 : "김코딩"}, { 이름 : "박해커"}, ] } } GraphQL은 HTTP를 통해 API 서버로 요청을 보내고 응답을 받는다. 응답을 ..

컴퓨터 구조 SW(하드웨어 위에서 제어 , 작업을 수행하는 프로그램)+HW(전자회로 및 기계장치로 입출력 장치 , 중앙처리장치(CPU) , 기억장치 입력 장치 컴퓨터가 처리할 수 있는 형태로 데이터와 명령을 받아들이는 물리적인 장치 출력장치 처리된 데이터를 사람이 이해할 수 있는 형태로 출력하는 물리적인 장치를 의미 중앙처리장치 CPU의 내부 구성은 크게 산술/논리 연산 장치(ALU)와 제어 장치, 레지스터(데이터를 일시적으로 저장하는 장소)로 구성 저장 장치 데이터나 프로그램을 보관하기 위한 일차 기억 장치인 주 기억 장치(Memory)와 주 기억 장치를 보조하기 위한 디스크와 씨디 같은 보조 기억 장치가 존재 주 기억장치(RAM , ROM) 레지스터 용량이 작아 주로 정보를 저장해두었다가 읽어들이는 ..

custom hook을 이용하여 useEffect 로직 분리하기 hook.js import { useEffect, useState } from "react"; const useFetchData = (fetchUrl) => { const [data, setData] = useState(); useEffect(() => { fetch(fetchUrl, { headers: { "Content-Type": "application/json", Accept: "application/json" } }) .then((response) => { return response.json(); }) .then((myJson) => { setData(myJson); }) .catch((error) => { console.log(..

React에는 Virtual DOM이라고 하는 가상의 DOM 객체가 있다. Real DOM의 가벼운 사본과 같다. Real DOM (DOM) DOM은 Document Object Model의 약자 DOM은 브라우저가 HTML 문서를 조작할 수 있도록 트리 구조화한 객체 모델 querySelector, addEventListener와 같은 DOM API를 통해 문서의 요소들을 조작 브라우저 렌더링 과정에서 브라우저는 렌더링 과정에서 DOM 트리와 CSSOM 트리를 토대로 Render 트리를 생성하고 각 요소가 배치될 공간을 계산(Layout)한 뒤 이를 화면에 그려낸다. 이때 DOM이 변경되면 DOM트리를 재건축하게 되는데 레이아웃 재연산을 수행하는 리플로우, 그리고 이를 화면에 그려내는 Repaint 과..

function orderOfPresentation(N, K) { // 조의 개수 N, 발표 순서 K const factorial = (n) => { if (n el === false).length; // 사용하지 않은 수의 경우의 수를 카운트한다. const formerCnt = validCnt * factorial(N - i - 1); // order에 추가 order = order + formerCnt; } return order; 인덱스 0에는 아무 데이터나 넣어놓고, 실제 조의 번호를 사용할 때는 인덱스 1부터 사용하는 방법을 사용하고, 인덱스 0은 더미 데이터로 사용 ex ) 3, [2,3,1] IsUsed [ false , false , false ,false] candidate = [ fa..