👩🏻‍💻 TIL 55

npm 과 npx 차이

npm 을 통해서 모듈을 설치할 때, 한 가지 옵션을 주게 되면 매 프로젝트마다 모듈을 설치해 줄 필요가 없고 그저 내 컴퓨터 안에 글로벌한 공간에 모듈을 설치해 프로젝트마다 같은 모듈을 공유해서 사용할 수 있습니다. 바로 -g 옵션인데요, 사용 방법도 꽤 간단합니다. npm install 모듈이름 -g 그러나 이는 좋은 방법이 아닙니다. 개발자 입장에서는 귀찮게 여러 번 설치할 필요도 없고 한 번 설치면 끝나는데 왜 좋은 방법이 아닐까 라고 생각하시는 분들이 있을지도 모르겠습니다. 그 이유에는 대표적으로 3가지가 있습니다. 모듈이 업데이트 되었는지 안되었는지 확인이 불가능 합니다. 모든 프로젝트마다 모듈을 재설치 하는것이 아닌, 한 번 설치한 모듈을 그대로 사용하기 때문에 프로그래머가 의식해서 글로벌 ..

👩🏻‍💻 TIL 2022.05.14

graphQL 예외처리

프론트의 예외 처리 백엔드에서 프론트로 데이터를 받아올 시 그 데이터가 null 이거나 undefined 일 수 있으므로, 프론트단에서는 이를 예외처리 시켜주어야 한다. 다음과 같이 brand 의 데이터 타입이 정의되어 있다. brand 중에 name 과 brandGroup 의 name 을 뽑아서 사용할 건데 이를 각각 brandName, brandGroupName 이라고 정의하겠다. 내가 사용하는 코드는 코드가 너무 길기 때문에 가독성을 위해 brandTree 라는 함수를 만들어서 따로 예외처리를 해주겠다. const { brandName, brandGroupName } = brandTree(brand); brandTree 함수 const brandTree = ( brand: | { __typename..

👩🏻‍💻 TIL 2022.05.08

Code first, dbContext 개념

typesafe 프로그래밍 언어의 장점에 대해 많은 글이 작성되었습니다. 하지만 Typesafe 방식으로 GraphQL 스키마를 구축한다는 것은 무엇을 의미합니까? GraphQL 스키마의 코드 우선 구현(code first implementation)은 어떤 모습입니까? 우리는 GraphQL과 같은 기술을 사용하여 React 웹 애플리케이션과 백엔드 서비스를 연결합니다. 우리는 Nexus 라는 라이브러리와 함께 코드 우선 접근 방식을 사용하여 GraphQL 스키마를 개발합니다. Nexus 문서에서는 type safe 방식으로 GraphQL 스키마를 개발하는 방법에 대해 설명하고 있으며 오늘은 이것이 개발 측면에서 의미하는 바를 보여줍니다. 여기서 code first 라는 것이 무엇일까요? 일단 위에랑 직..

👩🏻‍💻 TIL 2022.04.22

git merge (fast-faward, 3-way Merge)

브랜치와 Merge 의 기초 실제 개발과정에서 겪을 만한 예제를 하나 살펴보자. 브랜치와 Merge는 보통 이런 식으로 진행한다. 웹사이트가 있고 뭔가 작업을 진행하고 있다. 새로운 이슈를 처리할 새 Branch를 하나 생성한다. 새로 만든 Branch에서 작업을 진행한다. 이때 중요한 문제가 생겨서 그것을 해결하는 Hotfix를 먼저 만들어야 한다. 그러면 아래와 같이 할 수 있다. 새로운 이슈를 처리하기 이전의 운영(Production) 브랜치로 이동한다. Hotfix 브랜치를 새로 하나 생성한다. 수정한 Hotfix 테스트를 마치고 운영 브랜치로 Merge 한다. 다시 작업하던 브랜치로 옮겨가서 하던 일 진행한다. 먼저 지금 작업하는 프로젝트에서 이전에 master 브랜치에 커밋을 몇 번 했다고 가..

👩🏻‍💻 TIL 2022.03.20

Git 기초부터 브랜치까지

이 게시물에서 포스팅할 주제는 개발자라면 알아두어야 할 Git 이다. 필자는 부트캠프에서 Git 에 대해서 배우긴 하였지만 단기간 안에 배워야 했기 때문에 개념을 제대로 배우지 않고 넘어갔다. 그래서 회사에서 Git 쓰다보면 헷갈릴 때가 많았다. (에러는 무조건 구글링 하는 인생을 살았다..) 그래서 주말을 이용해 아예 git 공식문서를 통해 정리를 해보려고 한다. Git CVS, Subversion, Perforce, Bazaar 등의 시스템은 각 파일의 변화를 시간순으로 관리하면서 파일들의 집합을 관리한다 (보통 델타 기반 버전관리 시스템이라 함). Git은 이런 식으로 데이터를 저장하지도 취급하지도 않는다. 대신 Git은 데이터를 파일 시스템 스냅샷의 연속으로 취급하고 크기가 아주 작다. Git은 ..

👩🏻‍💻 TIL 2022.03.20

Express / middleware / router

미들웨어 미들웨어라는 것은 세가지 파라미터를 받는 함수를 말한다. next 인자는 통과시킬 때 사용한다. 미들웨어 함수는 요청 오브젝트(req), 응답 오브젝트 (res), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수 대한 액세스 권한을 갖는 함수입니다. 그 다음의 미들웨어 함수는 일반적으로 next라는 이름의 변수로 표시됩니다. 현재의 미들웨어 함수가 요청-응답 주기를 종료하지 않는 경우에는 next()를 호출하여 그 다음 미들웨어 함수에 제어를 전달해야 합니다. 그렇지 않으면 해당 요청은 정지된 채로 방치됩니다. 인증이 되었는지 안되었는지, 어떤 특정한 request 가 왔다 하면 검증이라던지, Controller 무조건 response 를..

👩🏻‍💻 TIL 2022.03.17

JavaScript / TypeScript fundamental

class 는 객체를 만들어준다. class Person { } let kim = new Person(); console.log(kim); 실행결과 Prototype 이 객체임을 보여준다. Class 초기값 설정해주기 Constructor(생성자)를 이용하면 class 객체의 초기 값을 설정해 줄 수 있다. new 있으면 construtor 실행 (생성자 실행) 이거는 타입스크립트 문법이 혼용됨 class Danbibase { name= ""; contructor(name: string){ this.name = name; } } const jihyun = new Danbibase("이지현"); class Person { constructor (name,age, city) { this.name = name..

👩🏻‍💻 TIL 2022.03.16

프리즈마, 그래프큐엘의 yarn codegen

model Profile { id Int @id @default(autoincrement()) bio String user User @relation(fields: [userId], references: [id]) ◀️ profile에 연결된 user입니다. userId Int 외래키 ◀️(userId)입니다. } @relation Database상 FOREIGN KEY/REFERENCES에 매칭되는 속성입니다. model상 외래키로 설정 할 필드와, 다른 모델의 PRIMARY KEY를 인수로 가집니다 @relation 의 예시 https://www.prisma.io/docs/concepts/components/prisma-schema/relations 사진 참고 relation 는 프리즈마 스키마에서 ..

👩🏻‍💻 TIL 2022.02.21

2022_02_09_TIL

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

👩🏻‍💻 TIL 2022.02.10