1. 기본적으로 모든 대부분의 프로그래밍의 언어들은 동기적 방식이다 하지만 외부 api를 요청하는 기능들은 비동기 대부분 기본적으로 비동기로 작동한다 2. api를 요청하는 것 자체가 시간이 걸리는 작업들이기 때문에 디폴트 값으로 비동기이다 3. 비동기를 동기로 바꿔주는 명령어 await : 데이터 받아올때까지 기다리고 있어 라는 의미 async : awiat를 쓰는 함수 앞에 필수 명시해야한다 await를 쓰기위해선 async를 같이 써야한다 4. 함수의 중복을 피하기 위해 화살표 함수나 함수 표현식으로 사용하는것이 좋다 5. 화살표 함수에서 async의 사용법 const fetchSync = async () => { let rs = await axios.get("https://koreanjson.co..

관련사이트 https://www.npmjs.com/package/@apollo/server#apolloserver @apollo/server Core engine for Apollo GraphQL server. Latest version: 4.10.0, last published: a month ago. Start using @apollo/server in your project by running `npm i @apollo/server`. There are 268 other projects in the npm registry using @apollo/server. www.npmjs.com 준비 해당 폴더에서 yarn init 다운로드 yarn add grahql yarn add @apollo/serve..

fontend와 backend연결 지난번 만들었던 휴대폰 인증번호 생성 API를 가지고 연결하는 것을 진행해보자 HTML body 휴대폰번호 : 인증하기 인증상태 회원가입하기 처리로직 만들기 휴대폰 번호를 Input 에 입력한다 인증하기 버튼을 클릭한다 javascript에서 입력된 번호를 api 호출 시 인자로 전달한다 api는 랜덤하게 생성한 인증번호를 서버단에 출력하고, 정상 처리시 htm문서에 인증상태 글자를 지우고 결과를 바뀌게 한다 html -> javascript -> api -> javascript > html api로 휴대폰번호를 전달시 고려사항 html에 입력된 휴대폰 번호를 어떻게 가져올 것 인지 api를 어떻게 호출할 것 인지 전달을 한 뒤 결과값을 어떻게 전달 받을 것 인지 API..

API-Docs 사용하는 이유 프론트엔드 사람들에게 어떤 기능이고 어떻게 사용하는 것 인지를 명시해줘야 된다 api만 만드는 것이 아닌 항상 docs를 같이 만들어야 한다 보통 API 위에다 정의하기도 하지만 그렇게 할 경우 소스코드가 너무 길어지기 때문에 별도의 파일이나 폴더를 생성하여 구분해 관리하기도 한다 별도의 파일로 관리 시 Import필요 라이브러리 swagger-ui-express npm i swagger-ui-express yarn add swagger-ui-express swagger-jsdoc yarn add swagger-jsdoc 기본 템플릿 /* @openapi / : get : descriptionb : Welcome to swagger-jsdoc responses : 200 :..

RestAPI실습 express 자체에선 JSON 데이터를 읽을 능력이 없다 읽게 해줄려면 .use()메서드를 이용한다 💡 주의점 윗쪽에서 부터 읽어오기 때문에 app.use는 최상단에 배치하는 게 좋다 import Javascript 파일간에 Import하는 방법은 여러가지가 있다 연결할때엔 상단에 import구문이 필요하며 자원을 주는 쪽에 파일엔 export 키워드가 앞단에 있어야 가져올 수 있다 전체적으로 불러올 수 있고, 부분만 가져올 수 있다 그리고 default 메서드로 지정하여 따로 자원을 명시하지 않고 import할 경우 해당 메서드가 자동으로 세팅되게 할 수 있다 기본 문법 import 자원이름 from './파일경로' // 요즘 방식 이며 가장 기본방식 import { 자원1, 자원2..

CORS sop(same origin policy) : 같은 출발지 정책 브라우저에선 보안적 이슈로 cross-origin http 요청을 제한한다 그래서 cross-origin 요청을 하려면 서버의 동의가 필요하다 만약 서버가 동의한다면 브라우저에서는 요청을 허락하고 동의하지 않는다면 브라우저 에서 막는다(거절) 이러한 동의하는 로직을 HTTP-header를 이용한다 이를 cors(Cross-origin Resource Sharing)이라 부른다 Cross-origin이란? 프로토콜이 다르다 : http와 https는 프로토콜이 다르다 도메인 : domain.com과 other-domain.com은 다르다 포트 번호 : 8080 포트와 3000포트는 다르다 CORS가 필요한 이유 CORS가 없이 모든 ..

express 사용법 // js 파일 상단에 Import를 먼저 해야함 import express from 'express' // 해당 js파일이 있는 경로로 터미널을 실행한다 yarn init // packag.json 파일이 생성됨 "type" : "module" // 패키지 파일에 해당 내용을 추가하고 저장한다 // yarn을 통해 express 설치 // json파일의 "dependencies" 내용에 설치한 Express 목록이 추가되어야 한다 dependencies란? 설치했던 파일 목록이고 개발 환경의 히스토리이다 만일 nodemoules 파일 삭제시 재설치를 해야하며 재 설치시 yarn install 만 입력하면 처리됨 [주의점] 모든 명령어는 package.json 파일이 있는 폴더에서 ..

주요 프로토콜 FTP : 파일 프로토콜 SMP : 메일 프로토콜 HTTP : 하이퍼텍스트 프로토콜 HPPS : 하이퍼 텍스트 시큐리티 프로토콜 (보안) HTTP 요청(requrst) 과 응답(response)으로 통신한다 전달 데이터 형식 : 헤더와 바디로 구분된다 Requst 요청 헤더 : 브라우저의 정보, 전달하는 객체의 형태 요청 바디 : 내용 [ 내용은 객체에 담아서 전송한다 ] Response 응답헤더 : 보내는 곳의 정보 , 보내는 내용의 객체 형태 응답바디 : 내용 [ Key : Value ] 형태로 전달된다 요청 헤더와 응답 헤더는 다른 것 이다 [!상태코드] 응답 헤더에는 상태코드(100,200,400,…)가 포함되어 있다 상태코드가 별도로 있는 이유는 컴퓨터가 인식할 수 있도록 하는 ..

CRUD create / read / update / delete C : 생성 post메서드(axios rest-API) mutation(apollo-client/graphql-API) R : 조회 get메서드(axios rest-API) query(apollo-client/graphql-API) U : 수정 put메서드(axios rest-API) mutation(apollo-client/graphql-API) D : 삭제 delete(axios rest-API) mutation(apollo-client/graphql-API) Mutation과 Query차이 데이터베이스 안에서 무언가 조작하여 데이터 변형이 있는 경우 위험한 작업임을 알 수 있도록 메서드 명이 mutation 이다 몇번을 조회하더라도 ..

API를 꼭 써야하는지 ? 백앤드 API를 꼭 거쳐야 하나요 ? 브라우저에서 바로 DB로 저장하면 안돼나요 ? 안됩니다 . 데이터를 꼭 검사해야합니다. 백엔드에서 하는 역할은 '검증,보안,안전’입니다 보안이 중요하다보니 해커가 데이터를 이상하게 보내게되어 DB에 문제가 생길 수 있는 부분이 발생될 수 있다. 브라우저에서는 자바스크립트 코드가 노출되어있기 때문에 보안이 취약하다 그래서 보안에 취약한 로직들이나 함수 등등 이런 부분들을 백엔드에서 처리한다 모듈화 프로그램 모든 프로그래밍에 기법은 모듈화가 일반적이다. 개발자가 모든 기능을 다 개발할 수 없기 때문에 다른 사람들이 올린 기능들을 가져다 쓸 수 있는 장점이 있다. java -> Maven(예전에 자주쓴 라이브러리) / Grandle (요즘 쓰는 ..