JH 개발 블로그

인터페이스는 타입들의 이름을 짓는 역할을 하고 코드 안의 계약을 정의하는 것 뿐만 아니라 프로젝트 외부에서 사용하는 코드의 계약을 정의하는 강력한 방법이다. function printLabel(labeledObj: {label: string}){ console.log(labeledObj.label); } let myObj = {size: 10, label: "Size 10 Object"}; printLabel(myObj); 타입 검사는 printLabel 호출을 확인합니다. printLabel 함수는 string 타입 label을 갖는 객체를 하나의 매개변수로 가집니다. 이 객체가 실제로는 더 많은 프로퍼티를 갖고 있지만, 컴파일러는 최소한 필요한 프로퍼티가 있는지와 타입이 잘 맞는지만 검사합니다. Ty..

1. Graphql api 강의를 마저 듣는다 (수) 2. 11시 출근 예정, 펌웨어팀과 점심을 먹는다. 그리고 보고서를 오후 내내 쓴다 + 지결 작성 + 그래프큐엘 api 코드 연구 & 팀장님이나 선배개발자분에게 참고 코드 하나만 추천해달라고 해본다 (목) -> 목요일은 보고서랑 지결 위주로 진행하고 나머지 시간에 코드를 연구하는 것이 좋겠다 3. 아침에 node.js 강의를 듣는다. 11시 반 출근 예정, wifi팀과 점심을 먹는다. 오후에는 보고서 제출 + 회사코드 분석이나 도커 블로그글 읽기 (금) -> 블로그 글로 먼저 이해한 후에 세션 영상을 보는게 좋을 것 같다. 4. 주말을 이용해 node.js 강의 + 리액트 graphql 강의를 듣는다. 이번주 목표 : 그래프큐엘은 이해하고 싶다. 노드..

// db.js let movies = [ { id: 0, name: "Star Wars", score: 1, }, { id: 1, name: "Avengers", score: 8, }, { id: 2, name: "Logan", score: 2, }, { id: 3, name: "The Godfather I", score: 99, }, ]; export const getMovies = () => movies; export const getById = (id) => { const filteredMovies = movies.filter((movie) => movie.id === id); return filteredMovies[0]; }; export const deleteMovie = (id) => { c..

type Query { name: Int! } Int 로 리턴하기를 요청했지만 const resolvers = { Query: { name: () => "jihyun", }, }; export default resolvers; resolvers 에는 위와 같이 정의했기 때문에...... 실제로 리턴하는 것은 String 이 된다. 보다시피 이런 식으로 type(데이터 유형) 을 적는 건 매우 안전하다. 오류를 잡을 수 있으니까! 위와 같이 localhost4000 에 접속하면 playground 라고 할 수 있는데 내 데이터베이스를 테스트하게 해준다. 이것은 Postman 과 같은 것이라고 보면 된다...? (난 아직 모르겠다) 이건 데이터베이스를 위한거다. 네트워크탭을 확인해보면 post 방식으로 데이..

1. 비동기 방식이란 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. 요청과 응답의 순서가 보장되지 않는다. 물론 동기적으로 작업하게 되면 코드 파악이 쉬워지고 유지보수나 디버깅도 쉬워진다. 하지만 싱글스레드 방식의 자바스크립트에서는 동기적 방식을 사용하면 문제가 많아진다. 때문에 자바스크립트에서는 비동기방식으로 작업이 진행되게 된다. JavaScript에서 클라이언트와 서버 간 데이터를 주고받기 위해 비동기 HTTP 통신을 사용한다. 그 예로 Ajax, Axios, fetch 가 있다. 2. AJAX (Asynchronous Javascript And XML) ajax 는 어떤 언어나 기술이 아니라, 비..

yarn global add nodemon nodemon 은 내가 파일을 수정할 때마다 서버를 재시작하게 해줄 것이다. package.json 에 "scripts" 에 "start": "nodemon" 을 추가하도록 한다. 이제 nodemon 이 index.js 파일을 주시할 것이다. index.js 파일에 console.log('dddd') 를 쓰고 yarn start 명령을 쳐보자. dddd -> ddfd 로 수정하면 서버가 위와 같이 다시 실행된다...! yarn add babel-node --dev yarn global add babel-cli 위의 이것도 설치한다. Babel , 바벨 이라고 불리우는 이 녀석은 뭐하는 애일까? 일단 이 친구를 알기 전에 ES6,7 과 ES5 간의 차이를 알아야 ..

graphql-yoga 는 create-react-app 명령어랑 비슷한데 GraphQL 프로젝트를 빠르게 시작할 수 있다. graphql-yoga Fully-featured GraphQL Server with focus on easy setup, performance & great developer experience 해석하면 -> 쉽게 설치하는데 중점을 둔 완전한 기능을 갖춘 GraphQL 서버 설치 명령 # yarn add graphql-yoga 내가 한 순서 1. github에 repo 생성 2. 빈 폴더 생성후 git init . 3. git remote add origin (repo addr) 4. git pull origin main 5. yarn add graphql-yoga graphQL..

Original 변경 사항을 Fork 리파지토리에 반영하기 Fork 리파지토리의 변경은 pull request를 통해 Original에 반영할 수 있지만, 역으로 Original에서 변경된 사항을 내 Fork 리파지토리에 반영해야 할 필요가 있는 경우도 있을 것이다. Fork 리파지토리 입장에서 바라본 Original 리파지토리는 upstream이라고 부르는데, 로컬에서 자신의 원격을 origin으로 인식하듯, Original 참조시에는 upstream을 사용하면 된다. upstream을 인식할 수 있도록 다음과 같이 등록하자. (Original의 GitHub URL 주소를 등록) $ git remote ## remote로 등록되어 있는 저장소 주소를 보여줌 origin $ git remote add u..

GraphQL 서버는 스키마를 사용하여 사용가능한 데이터의 형태를 설명한다. 이 스키마의 계층 구조 정의 type 과 field 는 백엔드 데이터 저장소로부터 채워진다. 스키마는 또한 클라이언트가 실행할 수 있는 query와 mutation 을 정확히 지정한다. 이 포스트는 스키마의 기본 구성 요소와 GraphQL 서버용 구성 요소를 만드는 방법에 대해 설명한다. GraphQL 사양은 인간이 읽을 수 있는 스키마 정의 언어인 SDL 을 정의한다. 이는 너가 너의 스키마를 정의하고 그것을 string 으로써 저장하는 것을 의미한다. type Book { title: String author: Author } type Author { name: String books: [Book] } 이런 형식.. # Th..

동기식 (Synchronous) / 비동기식 (Asynchronous) 동기식 먼저 시작된 하나의 작업이 끝날 때까지 다른 작업을 시작하지 않고 기다렸다가 다 끝나면 새로운 작업을 시작하는 방식 비동기식 동기식 방식과는 다르게 먼저 시작된 작업의 완료 여부와는 상관없이 새로운 작업을 시작하는 방식 작업의 순서가 확실하지 않아서 나중에 시작된 작업이 먼저 끝나는 경우도 발생 자바스크립트는 기본적으로 비동기적으로 동작을 한다. 개발하다 보면 비동기식으로 동작하는 부분이 동기적으로 동작해야 하는 경우가 생긴다. 이럴 때 비동기식 동작이 동기식으로 동작하도록 해주는 걸 비동기 처리라고 한다. 1. 콜백함수 사용 2. promise 3. promise 를 활용한 asyne/awai..