JH 개발 블로그

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..

const typeDefs = gql` type Query { // 쿼리 루트 타입이라고 한다 teams: [Team] } type Team { // 여긴 그냥 타입 id: Int manager: String office: String extension_number: String mascot: String cleaning_duty: String project: String } ` const resolvers = { Query: { teams: () => database.teams } } 이 쿼리 루트 타입에서는 어떤 형식으로 들어오고 어떤 형식으로 반환될 지가 정의되어있다. teams 이라는 쿼리가 오면은 Team 이라는 데이터가 여러개 복수로 반환된다는 의미이다. 그니까 teams 라는 쿼리를 날리면 ..

이 포스트에서는 ORM 의 기본적인 개념과 장단점을 설명하고 Prisma 의 장단점에 대한 내용을 다룹니다. ORM 프리즈마를 알기 전에 ORM 에 대해서 먼저 알아보자. ORM (Object-relational mapping) 은 DB 데이터(스키마)를 객체로 매핑해주는 역할 모델링된 객체와 관계를 바탕으로 SQL 을 자동으로 생성해주는 도구 ORM 이란? 다시 말해서,,, ORM (object-relational mapping) 이란 객체(클래스)와 관계(관계형 데이터베이스) 와의 설정을 의미한다. 객체 지향 프로그래밍은 클래스를 사용하고 관계형 데이터베이스는 테이블을 사용한다. 여기서 객체 모델과 관계형 모델 간에 불일치가 존재하는데 이 객체간의 관계를 바탕으로 SQL 을 자동 생성하여 불일치를 해..

let age:number = 3; let isAdult:boolean = true; let a:number[] = [1,2,3]; let a2:Array = [1,2,3]; let week1:string[] = ['mon', 'tue', 'wed']; let week2:Array = ['mon', 'tue', 'wed']; let mrgintCtsfd:string | undefined = undefined; let nullableNumber:number | null = null; let color:'red' | 'orange' = 'red'; color = 'orange'; color = 'green'; // 에러 // yarn run tsc 시 오류된 부분 나옴 funtion sum( x:number..

페이지네이션 정의 페이지네이션은 전체 데이터를 보여주는 것이 아니라 그 버튼에 맞는 일부의 데이터를 보여주는 것... 과 같은 것 이전/다음 페이지 백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용됩니다. 모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달해야할 겁니다. 흔히 게시판의 "이전/다음 페이지"를 끊어 보여주는 기능으로 익숙할 텐데요. 많은 웹사이트에서 널리 사용되고 있는 개념이기에 친숙하게 느끼실 듯 합니다. 프론트엔드에서 현재의 위치(Offset)과 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달합니다. 백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현하게 됩니다. 구현 방식 프론트엔드..

git rebase -i main 맨 상단만 pick 하고 나머지 커밋은 s 로 남겨둔다. 그 다음 에디터가 떴을 때, 남기고 싶은 커밋 메시지만 남긴 후 나머지 커밋 메시지는 지워준다. 보통 마지막 커밋 메시지를 남김 (커밋을 깔끔하게 하나로 관리하기 위한 행위를 하고 있는 중인 것이다.) 그리고 보통 git rebase 를 하기 전에 main 브랜치에서 git pull 해주는 것은 필수이다. 또한 현재 작업하고 있는 브랜치로 가서 "git rebase -i master" 명령어로 git merge 와 같은 역할을 해줘야 브랜치가 최신 상태로 업그레이드 된다.

[ HINES ] 프로젝트 소개 우리 팀은 오늘의 집 서비스를 클론코딩 하기로 결정했고, 오늘의 집에서 뻗어나가 ‘몇십년 후의 집’ 이라고 초기 컨셉을 잡게 되었다. 몇십년 후의 집을 영어로 해서 House in decades, 줄여서 '하인즈'로 프로젝트 이름을 정하게 되었다! 우리 팀은 몇십년 후의 집은 어떤 모습일지 고민하다가 우주 컨셉이 떠올라서 우주 컨셉의 인테리어 가구나 이동도구, 우주복 등 스토어쪽으로 구현해보는 것으로 목표를 잡았다. ( 오늘의 집의 커뮤니티 기능은 프로젝트 기간상 시간이 부족할 것 같아 제외하게 되었다. ) [ 프로젝트 목표 ] - 그동안 학습했던 지식들을 2주 간의 팀 프로젝트에 활용 - 스타일컴포넌트를 이용한 초기 세팅부터 전부 실제 사용할 수 있는 서비스 수준으로 기..

이번 주 할일 페이지네이션 실습 영상 보기 - (월)까지 이력서 - (월)까지 소셜 로그인 통신 - (월)까지 상세페이지 라우팅 장바구니 담기 기능 구현 (상품 id, 수량) 리뷰 달기 기능 구현 (페이지네이션) 이번 주는 금요일에 git rebase 를 안보고 명령어를 쳐봤다가 대형 사고가 일어나서 git reset 을 10번 사용했고 이마저도 정상적으로 작동이 안되는 것 같아서 멘붕이 되었다. 주말에 천천히 기능 구현이나 해볼까 했더니 git rebase 와 몇시간 동안 씨름했다.... 결국엔 모든걸 바탕화면에 백업하고 완전 초초초초초초기 상태로 돌아갔다.... 그리고 branch 를 삭제해버리고 강제로 push... (아 이거 강제로 push 해도 될란지 모르겠다.) => 원래 하는거였다! 암튼 이..