Dochi's Story

오늘 링크드인에서 메시지가 왔다.아무한테나 보내는 메시지 같지만 읽어보니 데이터 라벨링 알바 같다.그냥 넘길까 하다가 한번 알아봤더니 장단점이 많은 것 같다. 단점으로는 영어를 잘하지 못하면 삽질할 수 있어서 시간 낭비라는 점이 제일 큰 것 같아예전 같으면 바로 패스했겠지만, 갑자기 영어도 배울 겸 도전해 보면 어떨까 하는 생각이 들어무턱대로 수락 버튼을 눌렀다. 블로그에 글을 쓰며 한번 할 수 있는 데까지 도전해보려고 한다.이렇게 하면 뭔가 동기가 생기고 꾸준히 하게 될 것 같아서 앞으로 글로 후기를 남겨보려 한다.

Apollo에 대한 카테고리를 따로 만들까 하다가 일단은 GraphQL 카테고리에 넣기로 하였다. (어차피 Apollo와 GraphQL은 같이 쓰기 때문에..) 먼저 내가 이 글을 쓰는 이유는, 내가 진행하고 있는 프로젝트에 apollo-boost를 쓰려고 하다가 어떤 글을 봤기 때문이다. difference between @apollo/client , apollo-client and apollo boost I am implementing using @apollo/client, but i do not see any complete example of @apollo/client with react. If i search i get example with apollo-client and apollo boos..

몇날 몇일동안 대체 왜 sequlize의 create, update, delete, findOne, findAll이 안먹나 머리싸매고 끙끙 앓았었다. 기존에 sequlize가 잘 먹힌 commit로 돌아가서 branch만들고 다시 테스트해서 정상작동 확인한 후 main으로 merge하면 또 안되고.. 아니 콘솔에서는 sequlize가 success되었다고 로그도 뜨는데 왜 main branch만 오면 sequlize 함수가 동작을 안하고 graphql 서버에서는 계속 null이나 반환할까 고민하던 중에, 생각해보니까 const path = require("path"); const { makeExecutableSchema } = require("graphql-tools"); const { fileLoade..

📜 GraphQL? GraphQL은 페이스북에서 만든 쿼리 언어이며, 타입 시스템을 사용하여 쿼리를 실행하는 서버사이드 런타임이다. GraphQL은 데이터베이스 기술과 혼동될 수 있는데, 데이터베이스가 아니라 API를 위한 쿼리 언어이다. 🔥 장점 A query language for your API GraphQL은 API를 위한 쿼리 언어이며 이미 존재하는 데이터로 쿼리를 수행하기 위한 런타임이다. 클라이언트가 필요한 데이터를 정확하게 요청할 수 있는 기능을 제공하며, 사용하기 쉽다. GraphQL은 특정 언어에 제한된 것이 아니다. 공식 문서를 보면 많은 언어를 지원하는 것을 볼 수 있다. C#/.NET, Clojure, Elixir, Erlang, Go, Groovy, Java, JavaScript..

next-env.d.ts npm run dev 명령을 실행하게 되면 프로젝트 루트에 next-env.d.ts 파일이 생성된다. 이 파일은 TypeScript 컴파일러가 Next.js 유형을 선택하도록 한다. 이 파일은 언제든지 변경될 수 있으므로 제거하거나 편집할 수 없다. (실행하면 다시 생성된다는 의미인 것 같다.) TypeScript Strict 모드 TypeScript Strict모드는 기본적으로 꺼져있다. 엄격한 룰을 적용하는 모드이므로 익숙해지기 전까지는 tsconfig.json에서 false로 꺼두는 편이 좋을 것 같다. Additional.d.ts 파일 next-env.d.ts 파일을 편집하여 추가 유형을 포함하는 것이 아닌 새 파일을 추가하여 추가적인 유형을 포함하도록 할 수 있다. 원하..

TypeScript를 적용하여 프로젝트를 만들어보면서 배우고 정리한 내용을 기록해본다. 🚀 Next.js Install 먼저 원하는 디렉터리에 Next.js를 설치한다. npx create-next-app 을 이용해서 설치한다. npx craete-next-app myproject npx create-next-app . 인터넷에서 알아보니 두가지 방법이 있는 것 같다. 원하는 폴더를 적어서 그 폴더 안에 설치하는 방법, 현재 폴더에 설치하는 방법( . 이용) 이 있다. npm run dev 명령을 입력하여 정상 작동하는지 확인해본다. 처음부터 TypeScript를 적용한 상태로 프로젝트를 만드는 방법도 있다. 애초에 TypeScript를 사용하려고 한다면 프로젝트를 만들 때 npx create-next-..

Next.js에서 Favicon을 넣는 방법을 기록하고자 글을 써본다. 먼저 front라는 폴더 밑에 pages가 있다. 그러면 pages와 동일한 위치에 public이라는 폴더를 만들어둔다. 그 아래에 favicon.ico 파일을 놓는다. localhost:port/favicon.ico 를 주소창에 입력해보자. 브라우저에서 이미지가 뜬다면 정상적으로 긁어온다는 의미인 것이다. 이제 _app.js에 가서 Head를 import하고 Head태그 안에 link 태그를 넣는다. 예시는 다음과 같다. import Head from 'next/head'; const MainPage = () => ( ); 이렇게 하면 될 것이다.

프로젝트의 디자인을 수정하려고 보는데 가로 스크롤이 보였다. 인터넷 뒤지고 컴포넌트 하나하나 뜯어고치면서 삽질을 엄청나게 했는데, 모든 col태그 밑의 내용 다 지우고 antd의 row랑 col만 남겨서 inline style로 border 색깔별로 col 태그에 적용했다. 그리고 계속 개발자 도구로 확인하다가 한 가지 이상한 점을 발견했다. ant-row가 왜그런지는 모르겠지만 margin left right가 있어서 그런 것 같다는 직감이 들었다. 그래서 코드에서 바로 margin을 0으로 주니 사라졌다!!!!! 거의 4일만에 해결...

HTML 태그와 같은 페이지의 메타데이터를 수정하고 싶은 경우가 있다. 아마 그냥 Next.js 앱을 실행시키면 위에 title이 localhost:포트번호 이런 식으로 뜰 것이다. 이것을 수정하려면 어떻게 해야할까? 📰 메타데이터(Metadata) title 태그는 head 태그의 일부분이다. 따라서 title 태그를 변경하고 싶다면 Next.js의 head태그를 수정해야 한다. link 태그를 이용하여 favicon도 넣을 수 있다. Next.js에서는 head 태그가 우리가 알고 있는 HTML의 head태그와는 조금 다르다. 소문자 head가 아니라 Head가 사용되는데, 이것은 Next.js에 저장된 React컴포넌트이기 때문이다. Head 태그를 이용해서 해당 페이지의 head를 수정할 수 있다..

💡 Callback(콜백) 함수란? Callback(이하 콜백) 함수는 다른 함수에 매개변수로 전달된 함수이며, 다른(또는 외부) 함수 내부에서 호출되어 작업을 실행하는 함수이다. 자바스크립트는 싱글 스레드(single-Thread)로 동작한다. 그래서 여러 작업들을 처리할 때 동기적으로 작업하게 되면 매우 비 효율적이게 된다. 그런데 자바스크립트는 싱글 스레드로 동작하면서도 여러 작업을을 비동기 작업으로 빠르게 실행한다. 이 비동기 작업을 처리하기 위해 콜백 함수가 이용된다. 콜백 함수에는 두가지 사용법이 있다. 1. 동기적(synchronous) 함수 2. 비동기적(asynchronous) 함수 동기적 콜백 함수의 예를 보자 function greeting(name){ console.log('Hell..