전체 글

전체 글

    vscode extension 설치해야하는 것들

    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

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

    업무를 하면서 개발자에게 중요한것이 소통인데 그만큼 쉽지 않더라고요. 그래서 개발 커뮤니티에 관한 책을 읽어보았습니다. 데브렐이라는 단어를 이 책을 통해 처음 들었는데 디벨로퍼 릴레이션으로 개발자 커뮤니티를 통해 관계를 맺는다는 것이었습니다. 그래서 전반적인 내용이 기술 커뮤니티에 대해 알려주며 필요한 이유와 각 역할들에 대한 설명을 해줍니다. 크게 회사, 팀, 개인 이렇게 나누어서 이야기를 해주기에 내가 속한 위치에서 데브렐 팀 구성, 건강한 커뮤니티 만들기, 커뮤니티를 키워나가면서 겪게 되는 상황에 대해 어떻게 하면 좋을지 알려줍니다. 개인적으로 좋았던 부분은 저는 리더의 위치가 아니라 이제 막 시작했기에 내가 어떻게하면 더 도움이 될 수 있고 좋은 대화를 할 수 있고 나를 관리하는 법에 대해 사소한..

    [리뷰] 데이터스토리

    [리뷰] 데이터스토리

    데이터 책이라면 어떻게 분석하고 활용할 수 있는지 방법위주가 많았다면 이 책은 이름대로 스토리텔링이기에 더 잘 읽혔습니다. 꼭 데이터가 아니더라도 설득력 있는 이야기로 바꾸는 방법이라는 점이 마음에 들었습니다. 내용도 약 200페이지 정도로 읽기 편했고, 총 4개의 파트로 나뉘어져 있으며 예제 그림이나 내용 정리가 잘 되어있습니다. 소개글에 굉장히 공감했던게 단순히 데이터만 다루는 책이 아니라 데이터를 통해 결과를 만들어내고 상대에게 효율적으로 이야기를 전달할 수 있는 법을 파악할 수 있었습니다. 개인적으로 쉽게 읽을 수 있도록 구성한다는 부분이 가장 마음에 들었습니다. 전달하는 입장에서는 생각하지 못하고 놓칠 수 있는 부분을 받는 입장에서 고려하여 알려주고 예제 그림까지 있어서 그대로만 만들어도 완벽한..

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

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

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

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

    힌트: 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 ..

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

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

    이번에 읽어본 책은 '헤드퍼스트 디자인패턴' 입니다. 디자인패턴에 관한 책을 읽게 된 이유는 코드를 짜다보면 '재사용 할 수 있는 코드를 짜고싶은데 왜 나는 그게 안될까 무작정 짜는 것 보다 계획적으로 짜보고싶다!'는 생각이 많이 들었습니다. 그래서 디자인패턴과 객체지향에 대해 이해를 잘 알고싶었고 자바 기반이지만 입문서이니 크게 어려운 난이도는 아닐거라고 생각하여 읽어보았습니다. 전략패턴, 옵저버 패턴, 데코레이터 패턴, 팩토리 패턴, 싱글턴 패턴, 커맨트 패턴, 어댑터 패턴, 퍼사드 패턴, 템플릿 메소드 패턴, 반복자 패턴, 컴포지트 패턴, 상태 패턴, 프록시 패턴, 복합 패턴 14가지 패턴들을 소개해줍니다. 디자인패턴에 객체지향을 다루기에 내용이 상당하여 굉장히 두꺼운편이긴 합니다. 그래도 딱 펼쳤..

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

    문제 상황 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의 차이는 ..

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

    git clone url : 원격 브랜치를 로컬에 받는다. git branch -a : 원격, 로컬의 모든 브랜치를 보여준다. git branch -r : 원격 브랜치만 표시한다. git checkout -t : 원격저장소의 해당 브랜치를 로컬에도 생성한 뒤 해당 브랜치로 이동한다. remotes/origin/브랜치명~~ 여기서 remotes라고 나오는것까지 전부해주어야한다 git checkout -t remotes/origin/feature/login_action

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

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

    이번에 읽어본 책은 '고객을 끌어오는 구글 애널리틱스4' 입니다. 개발을 시작하기 이전에도 데이터 관련된 얘기 들을 정도로 중요하기도 하고 관련 직업들도 참 많더라고요. 애널리틱스 빅데이터를 분석하는 기술 전반 애널리틱스라는 단어가 생소하고 낯선데 이 책의 장점은 초급자를 위한 책이라는 점입니다. 한빛미디어에서 책을 볼 때 좋은점은 이렇게 책의 난이도를 알려주어서 읽으려는 독자 수준에 맞는 책인지 한 번 체크를 할 수 있다는 점인것 같아요! 책의 처음 설명해주는 것과 같이 따라 하면서 배우는 식으로 구성되어있습니다. 실습위주로 되어있기때문에 이론을 어느정도 알고있거나 이론보다는 먼저 만들어보고싶은분들에게 좋을 것 같습니다. 직접 따라 하며 해볼 수 있도록 실습 웹/앱을 제공해 주는데요. 데모용 쇼핑몰 예..

    [CSS] 중앙정렬 하는법

    [CSS] 중앙정렬 하는법

    1. position: absolute 이용하기 부모요소에 relative를 주고 height을 뷰포트 기준으로 잡아준다. position: relative; height: 100vh; 중앙정렬을 할 요소에 absolute를 주고 transform으로 요소 사이즈만큼 반대로 이동시킨다. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);