디비의 DB

vscode extension 설치해야하는 것들

Deeb — Tue, 7 Feb 2023 10:38:07 +0900

vscode-styled-components

Prettier - Code formatter

Material Theme Icons

GitLens — Git supercharged

Error Lens

Code Spell Checker

ESLint

Font Awesome Auto-complete & Preview

Auto Rename Tag

Bracket Pair Colorization Toggler

Auto Import

Auto Close Tag

Import Cost

Local History

Live Share

[리뷰] 기업의 성공을 이끄는 Developer Relations

Deeb — Sun, 27 Nov 2022 23:41:16 +0900

업무를 하면서 개발자에게 중요한것이 소통인데 그만큼 쉽지 않더라고요. 그래서 개발 커뮤니티에 관한 책을 읽어보았습니다. 데브렐이라는 단어를 이 책을 통해 처음 들었는데 디벨로퍼 릴레이션으로 개발자 커뮤니티를 통해 관계를 맺는다는 것이었습니다. 그래서 전반적인 내용이 기술 커뮤니티에 대해 알려주며 필요한 이유와 각 역할들에 대한 설명을 해줍니다.

크게 회사, 팀, 개인 이렇게 나누어서 이야기를 해주기에 내가 속한 위치에서 데브렐 팀 구성, 건강한 커뮤니티 만들기, 커뮤니티를 키워나가면서 겪게 되는 상황에 대해 어떻게 하면 좋을지 알려줍니다.

개인적으로 좋았던 부분은 저는 리더의 위치가 아니라 이제 막 시작했기에 내가 어떻게하면 더 도움이 될 수 있고 좋은 대화를 할 수 있고 나를 관리하는 법에 대해 사소한 부분까지 알려주어 좋았습니다.
개발자는 단순히 코드만 짜는 것 이상으로 계속 소통을 해야하는 직업이기에 커뮤니티에 대한 관심이 있으시다면 좋은 팁을 얻어갈 수 있는 책인 것 같습니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

[리뷰] 데이터스토리

Deeb — Sun, 30 Oct 2022 21:40:05 +0900

데이터 책이라면 어떻게 분석하고 활용할 수 있는지 방법위주가 많았다면 이 책은 이름대로 스토리텔링이기에 더 잘 읽혔습니다. 꼭 데이터가 아니더라도 설득력 있는 이야기로 바꾸는 방법이라는 점이 마음에 들었습니다.

내용도 약 200페이지 정도로 읽기 편했고, 총 4개의 파트로 나뉘어져 있으며 예제 그림이나 내용 정리가 잘 되어있습니다.

소개글에 굉장히 공감했던게 단순히 데이터만 다루는 책이 아니라 데이터를 통해 결과를 만들어내고 상대에게 효율적으로 이야기를 전달할 수 있는 법을 파악할 수 있었습니다.

개인적으로 쉽게 읽을 수 있도록 구성한다는 부분이 가장 마음에 들었습니다. 전달하는 입장에서는 생각하지 못하고 놓칠 수 있는 부분을 받는 입장에서 고려하여 알려주고 예제 그림까지 있어서 그대로만 만들어도 완벽한 구성이지 않을까 싶었습니다. 데이터 공부를 처음 접해보는 초보자나 보고서를 만들어야하는 분들에게 딱 알맞은 책인것 같습니다. 데이터를 전문적으로 하지 않더라도 스토리텔링이 막막한 분들에게 추천합니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

[React, next-auth] DefaultSession - session에 넣을 정보 변경하기

Deeb — Fri, 14 Oct 2022 13:45:11 +0900

next-auth를 사용해서 useSsession으로 session에 올라간 정보를 받아오는 과정에서

token에는 다른 정보들이 다 저장되어있는데 defaultsession이라는 만들지도 않은 게 지정되어있었다

아무리 파일내에서 찾아도 안 나왔다... 그래서 이름처럼 기본적으로 설정된거라고 짐작해서

공식문서를 찾아보았고 역시 공식문서가 최고다

https://next-auth.js.org/getting-started/typescript#module-augmentation

TypeScript | NextAuth.js

NextAuth.js has its own type definitions to use in your TypeScript projects safely. Even if you don't use TypeScript, IDEs like VSCode will pick this up to provide you with a better developer experience. While you are typing, you will get suggestions about

next-auth.js.org

next-auth에서 친절하게

/types 폴더안에

next-auth.d.ts 라는 파일명으로 만들고 해당 내용을 넣기만 하면 끝난다.

추후에 백엔드가 수정되기로해서 일단은 deafultsession은 추가한 형태로 만들어두었다.

import NextAuth, { DefaultSession }  from "next-auth"

declare module "next-auth" {
  /**
   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
   */
  interface Session {
    user: {
      // token에서 내가 불러올 값과 지정할 자료형
    } & DefaultSession["user"]
  }
}

git pull 에러 # merge # rebase # fast-forward only

Deeb — Tue, 4 Oct 2022 16:00:11 +0900

힌트: You have divergent branches and need to specify how to reconcile them.
힌트: You can do so by running one of the following commands sometime before
힌트: your next pull:
힌트:
힌트: git config pull.rebase false # merge (the default strategy)
힌트: git config pull.rebase true # rebase
힌트: git config pull.ff only # fast-forward only
힌트:
힌트: You can replace "git config" with "git config --global" to set a default
힌트: preference for all repositories. You can also pass --rebase, --no-rebase,
힌트: or --ff-only on the command line to override the configured default per
힌트: invocation.

팀 github에서 git pull 을 했는데 위와같은 경고 문구가 떴다.

일단 먼저 체크해본 것 내가 해당 레포지토리의 권한이 있는가? -> yes. 이전에 push를 했던 적이 있기에 권한 문제는 아님

위의 에러를 보고 내가 해결한 방법은

git config pull.rebase false

다른 팀원들과 작업한 파일들 중 겹치는 파일은 없었기에 merge로 진행했고 그 뒤에 git pull origin <브랜치명>을 했지만

기존에 pull을 받지 않는동안 commit된 파일들까지 다 내 브랜치로 들어와서 거의 수십개의 파일들이 update되었다고 떴다.

애초에 근본적인 해결법

git fetch를 하고서 git pull을 진행했어야했다

참고자료

스택오버플로우

https://stackoverflow.com/questions/62653114/how-can-i-deal-with-this-git-warning-pulling-without-specifying-how-to-reconci

참고한 블로그

https://velog.io/@yunu/git-pull-%ED%95%A0-%EB%95%8C-fatal-Need-to-specify-how-to-reconcile-divergent-branches.-%EC%98%A4%EB%A5%98

git pull 할 때 fatal: Need to specify how to reconcile divergent branches. 오류

현재 내 깃 버전은 다음과 같다. 어떤 버전에서부터인진 모르겠지만 이전 버전에서는 git pull을 할 때 자동으로 merge 전략을 사용한 것 같지만 최신 버전에서는 어떤 전략을 사용할지 따로 지정되

velog.io

[리뷰] 헤드퍼스트 디자인패턴

Deeb — Sun, 2 Oct 2022 22:06:10 +0900

이번에 읽어본 책은 '헤드퍼스트 디자인패턴' 입니다.

디자인패턴에 관한 책을 읽게 된 이유는 코드를 짜다보면 '재사용 할 수 있는 코드를 짜고싶은데 왜 나는 그게 안될까 무작정 짜는 것 보다 계획적으로 짜보고싶다!'는 생각이 많이 들었습니다. 그래서 디자인패턴과 객체지향에 대해 이해를 잘 알고싶었고 자바 기반이지만 입문서이니 크게 어려운 난이도는 아닐거라고 생각하여 읽어보았습니다.

전략패턴, 옵저버 패턴, 데코레이터 패턴, 팩토리 패턴, 싱글턴 패턴, 커맨트 패턴, 어댑터 패턴, 퍼사드 패턴, 템플릿 메소드 패턴, 반복자 패턴, 컴포지트 패턴, 상태 패턴, 프록시 패턴, 복합 패턴 14가지 패턴들을 소개해줍니다. 디자인패턴에 객체지향을 다루기에 내용이 상당하여 굉장히 두꺼운편이긴 합니다.

그래도 딱 펼쳤을 때 받았던 잘 정리된 필기노트를 같다는 느낌을 받았을 정도로 내용 정리가 잘 되어있었습니다. 그림 설명도 많고, 낱말 퀴즈같이 독자들이 쉽게 이해할 수 있게 하려고 노력을 한게 많이 티가 났습니다.

디자인 패턴을 적용해보고싶어 읽어보고 싶었는데 책에서 딱 초보자가 무리하게 디자인 패턴을 사용하려고하면 프로그램의 복잡도만 높이는 실수만 저지를 수 있다는 조언도 해줍니다. 단순하게 설명만 나열하여 객체지향에 대한 설명들과 해당 패턴이 좋은 이유에 대한 설명을 해주고 패턴들마다의 장점과 단점을 비교해서 알려줍니다. 방구석 토크라고 패턴들끼리 얘기하는 식으로 비교를 해주는데 it책에서는 처음보는 방식이어서 어려운 내용들이어도 읽는데 부담스럽지는 않았었습니다.

테스트 코드가 자바를 몰라도 시작할 수 있다고 되어있지만 정말 자바 공부를 안한지 n개월 된 사람이 봤을 때는 자바를 몰라도 객체지향에 대한 이해가 있는 개발자 또는 자바를 어느정도 아는 초보자가 읽어야 하는 책인 것 같습니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

오늘의 에러 - next-auth, Module not found: Can't resolve 'next-auth/react'

Deeb — Mon, 26 Sep 2022 14:58:40 +0900

문제 상황

Module not found: Can't resolve 'next-auth/react'

1차 해결법

npm i 를 해도 설치가 진행되지 않고 에러가 발생했고 아래와 같이 문구가 떴다.

Found: next@12.2.0

next@"12.2.0" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

라고 친절하게 해결 방법을 알려주었다.

여기서 궁금해진것은 --force와 --legacy-peer-deps의 차이는 무엇일까?

--force를 사용하여 충돌을 우회하거나
--legacy-peer-deps 명령을 사용하여 피어 종속성을 완전히 무시할 수 있는 옵션이 있다(이 동작은 버전 4-6과 유사함)

--force 는 충돌하는 peerDependencies가 루트 프로젝트에 설치하고
--legacy-peer-deps 는 peerDependencies가 자동으로 설치 되는 기능을 무시한다.
블로그 글을 보면 대부분 --legacy-peer-deps를 사용하는 것 같은데, --force가 더 낫다는 의견이 많다고 한다.

나의 해결 방법

npm i --force 로 설치하여 버전 충돌을 해결하였다.

참고 내용

https://jane-aeiou.tistory.com/79

[Node.js] npm install --force 와 --lagacy-peer-deps 차이

npm install --force 와 npm install --lagacy-peer-deps 차이 npm install 에러 github actions 로 자동배포를 설정해뒀는데, 배포가 되지않아 확인해봤더니 npm install 에서 unable to resolve dependency t..

jane-aeiou.tistory.com

git , 브랜치 명령어 clone, checkout, 원격 저장소

Deeb — Mon, 26 Sep 2022 14:32:00 +0900

git clone url : 원격 브랜치를 로컬에 받는다.

git branch -a : 원격, 로컬의 모든 브랜치를 보여준다.

git branch -r : 원격 브랜치만 표시한다.

git checkout -t <원격저장소이름/브랜치이름> : 원격저장소의 해당 브랜치를 로컬에도 생성한 뒤 해당 브랜치로 이동한다.

remotes/origin/브랜치명~~

여기서 remotes라고 나오는것까지 전부해주어야한다

git checkout -t remotes/origin/feature/login_action

[리뷰] 고객을 끌어오는 구글 애널리틱스4

Deeb — Sun, 28 Aug 2022 21:04:16 +0900

이번에 읽어본 책은 '고객을 끌어오는 구글 애널리틱스4' 입니다.

개발을 시작하기 이전에도 데이터 관련된 얘기 들을 정도로 중요하기도 하고 관련 직업들도 참 많더라고요.

애널리틱스
빅데이터를 분석하는 기술 전반

애널리틱스라는 단어가 생소하고 낯선데 이 책의 장점은 초급자를 위한 책이라는 점입니다.

출처: 한빛미디어

한빛미디어에서 책을 볼 때 좋은점은 이렇게 책의 난이도를 알려주어서

읽으려는 독자 수준에 맞는 책인지 한 번 체크를 할 수 있다는 점인것 같아요!

책의 처음 설명해주는 것과 같이

따라 하면서 배우는 식으로 구성되어있습니다.

실습위주로 되어있기때문에 이론을 어느정도 알고있거나

이론보다는 먼저 만들어보고싶은분들에게 좋을 것 같습니다.

직접 따라 하며 해볼 수 있도록 실습 웹/앱을 제공해 주는데요.
데모용 쇼핑몰 예제 사이트와 앱, 그리고 데이터를 함께 줍니다.

확실히 실습페이지를 제공해주어서 혼자서 따라하는데
크게 어려움은 없더라고요.

저는 최근에 배워서 익숙한 파이어베이스 실습을 해봤는데

그 부분이 가장 흥미롭고 재미있었습니다.

웹이나 앱 둘 다 제공되니 본인이 편한걸로 해볼 수 있고 쉽게 설명해주기에

둘 다 해보는 것도 좋을 것 같습니다.

기획자, 마케터, UX/UI 디자이너가 타켓층인 책인 책이어서

저는 개발자로서 그분들에게 이게 왜 중요한지 그 포커스로 읽어보았던 책이었습니다.

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

[CSS] 중앙정렬 하는법

Deeb — Sun, 21 Aug 2022 11:11:40 +0900

1. position: absolute 이용하기

부모요소에 relative를 주고 height을 뷰포트 기준으로 잡아준다.

position: relative;
height: 100vh;

중앙정렬을 할 요소에 absolute를 주고 transform으로 요소 사이즈만큼 반대로 이동시킨다.

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);