작심삼일

웹서비스 - 네트워크 상에서 서로 다른 종류의 컴퓨터들 간에 상호작용하기 위한 소프트웨어 시스템 웹 어플리케이션 - 웹메일, 온라인 쇼핑몰, 커뮤티니 등 - 사용자는 웹 브라우저를 사용해서 웹어플리케이션을 사용한다. SOAP vs RESTful API SOAP (Simple Object Access Protocol) RESTful API (REpresentational State Transfer) - SOAP 보다 개발하기 수월함 - Resource의 Representation에 의한 상태 전달 - HTTP Method를 통해서 Resource를 처리하기 위한 아키텍처 RESTful - HTTP Method : 프로토콜을 통해서 클라이언트가 서버에 목적을 알려줄수 있다. - HTTP Status Code..

1xx (Informational) : 요청이 수신되어 처리중 2xx (Successful) : 요청 정상 처리 - 200 OK : 결과를 정상적으로 처리 했을 때, 가장많이 보는 케이스 - 201 Created : 신규 자원으로 등록해달라고 요청하면(POST) 서버에서 자원이 생성 완료 했다는 의미 - 202 Accepted : 배치 처리 같은 곳에서 사용, 요청을 받아들이긴 했지만 바로 실행하지 않을 때 사용됨 - 204 No Content : 서버가 요청을 성공적으로 수행했지만, 응답 페이로드 본문에 보낼 데이터가 없음 3xx (Redirection) : 요청을 완료하려면 유저 에이전트의 추가 행동이 필요 리다이렉션 : 웹 브라우저는 3xx 응답의 결과에 Location 헤더가 있으면, Locati..

1. 문서(document) - 단일 개념(파일 하나, 객체 인스턴스, 데이터베이스 row) - 예) /members/100, /files/star.jpg 2. 컬렉션(collection) - 서버가 관리하는 리소스 디렉터리 - 서버가 리소스의 URI를 생성하고 관리 - 예) / members 3. 스토어(store) - 클라이언트가 관리하는 자원 저장소 - 클라이언트가 리소스의 URI를 알고 관리 - 예) /files 4. 컨트롤러(controller), 컨트롤 URI - 문서, 컬렉션, 스토어로 해결하기 어려운 추가 프로세스 실행 - 동사를 직접 사용 - 예) /memebers/{id}/delete

클라이언트에서 서버로 데이터를 전송하는 방식에는 4가지 정도로 분류할 수 있다. 정적 데이터 조회, 동적 데이터 조회, HTML Form 데이터 전송, HTTP API 데이터 전송 4가지 방식에 대한 특징을 알아 보도록 하자. 1. 정적 데이터 조회 - 이미지, 정적 데이터 문서 - 쿼리 파라미터 미사용 - 조회는 GET 사용 - 정적 데이터는 일반적으로 쿼리 파라미터 없이 리소스 경로로 단순하게 조회 가능 2. 동적 데이터 조회 - 주로 검색, 게싶판 목록에서 정렬 필터(검색어) - 쿼리 파라미터를 기반으로 정렬 필터해서 결과를 동적으로 생성 (ex. ?q=hello&hl=ko) - 조회는 GET 사용 - GET은 쿼리 파라미터를 사용해서 데이터를 전달 3. HTML Form을 통한 데이터 전송 - 회..

creat-react-app 을 사용하려고 하는데, You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.1). 이라는 에러가 발생했다. 정확하게는 아래와 같은 에러였다. 에러 문구 You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.1). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-..

Ctrl + S 를 눌렀을 때 소스코드가 자동 정렬되는 방법을 알려드립니다. 적용 안되는 경우 3,4번 항목을 체크해보세요. 1. VSCode에 Extensions 창(Ctrl + Shift + x)에서 Prettier를 다운받아준다. 2. File - Preferences - Settings 에 들어간다. (Ctrl +,) 3. 'Format on Save' 검색 후 아래 캡처와 같이 설정 4. 'Default Formatter' 검색 후 아래 캡처와 같이 설정

Redis - Remote Dictionary Server - 외부 Hashmap 서버 - Database, Cache, Message broker - In-memory Data Structure Store - Supports rich data structure - Single Thread (시간 복잡도 고려 해서 사용 필요) - Atomic Critical Section에 대한 동기화 제공 Cache - 결과를 미리 저장했다가 빠르게 사용하는 것 Memory hierarchy - CPU Register - CPU Cache - Main Memory (DRAM) : 휘발성, 빠름 - Storage (SSD, HDD) : 비휘발성, 비교적 느림 Database를 보통 Storage에 저장하는데, 더 빠르게..

Promise를 사용하는 이유 및 방법에 대해서 알아보기 위해 아래 예제를 따라 하면 된다. promise를 사용하지 않았을 때를 먼저 확인해보고 필요성을 알아가 보자. 1. Promise 사용하지 않는 방법 소스 코드 function isPositive(number, resolve, reject) { setTimeout(() => { if (typeof number === "number") { //성공 resolve resolve(number >= 0 ? "양수" : "음수"); } else { //실패 reject reject("주어진 값이 숫자형 값이 아닙니다."); } }, 2000); } isPositive( "10", (res) => { console.log("성공적으로 수행됨 : ", res..

동기적으로 작업을 하면 하나의 task가 오랬동안 시간이 소요되면, 다른 작업들이 진행 못하고 대기하게 된다. 모든 작업들을 동시에 작업하기 위해서는 멀티 스레드로 작업하면 소요 시간을 줄일 수 있지만 자바스크립트에서는 쓰레들가 단일 쓰레드 이다. 그래서 비동기 작업이 필요하다. 동기 방식은 다른 task를 진행하지 못하게 블로킹하고 있기 때문에 비동기 작업을 하면 하나의 작업을 할때 다른 작업을 블로킹 하지 않는다. 1. 동기 방식 지금까지 소스코드를 짜던 방식은 동기 방식으로 작성했었다. 소스 코드 function taskA() { console.log("A 작업 끝"); } taskA(); console.log("코드 끝"); 결과 A 작업 끝 코드 끝 "A 작업 끝"로그가 찍히고 난 뒤에 "코드 ..

1. 객체에서 Spread 연산자 사용 소스 코드 const cookie = { base: "cookie", madeIn: "Korea" }; const chocoCookie = { ...cookie, toping: "choco" }; console.log(chocoCookie); 결과 객체를 생성할 때 자주 반복되는 프로퍼티를 직접 입력하지 않고, ...객체명 을 사용해서 손쉽게 복제?할 수 있다. 2. 배열에서 Spread 연산자 사용 소스 코드 const arrA = ["가", "나"]; const arrB = ["다", "라"]; const arrC = [...arrA, ...arrB]; console.log(arrC); 결과 배열에서도 배열명 앞에 ...을 입력해서 사용할 수 있다.