판교너굴맨의 개발노트

2022.08.24 - [Backend] - [oAuth2] React와 node.js로 google oAuth2 사용하기[1. 설정] 1. Google oAuth 인증 순서 이전 글에서 oAuth를 사용하기 위한 설정을 했다면 이번 시간에는 Google Server에 토큰을 요청해서 Access Token과 Refresh Token (갱신 토큰)을 받아보려 한다. 코드를 구현하기에 앞서 Google oAuth의 인증 순서를 먼저 알아보자. 아래 이미지는 웹서버 어플리케이션의 인증 순서이다. 클라이언트 측 인증 플로우도 있지만 클라이언트에서 다 구현하게 될 경우 Access Token만 사용할 수 있다. Refresh Token을 사용하기 위해서는 중요한 정보인 CLIENT SECRET 키가 필요하기 때..

원인 vuetify 라이브러리에서 를 사용할 때 item list의 스타일을 변경해야 했다. 하지만 combobox을 클릭해서 item list를 열게 되면 아이템 목록은 combobox의 하위가 아닌 곳에 생성되게 된다. 그렇다고 scss로 v-menu-content 클래스의 스타일을 변경하게 되면 내가 원치 않은 곳에 스타일이 변경 되게 된다.... 해결 과정 일단 item list를 개발자도구로 확인했다. item list는 vuetify의 v-menu로 이루어진 것을 확인할 수 있었다. 그럼 라이브러리에서 v-combobox에서 menu로 속성이나 style을 변경할 수 있게 만들지 않았을까?? v-combobox의 API 문서를 확인해보면 menu-prop이라는 옵션을 확인할 수 있다. Pass..

2022.09.14 - [Backend] - [oAuth2] Node Express로 google oAuth2 사용하기[2. 코드 작성] 1. oAuth란? oAuth (Open Authorization) 는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다. 위키 백과: https://ko.wikipedia.org/wiki/OAuth 위의 설명을 조금 더 쉽게 설명하면 구글이나 네이버 카카오와 같은 타 플랫폼에서 등록한 정보를 통해 사용하고자 하는 어플리케이션의 접근 권한을 얻는 것이다. 2. Google oAuth 설정 step1 - Google Co..

사내 Vue 프로젝트는 buefy라는 UI라이브러리를 사용하고 있다. 프로젝트를 진행하면서 buefy에서 제공하는 요소의 스타일을 변경하고 싶은데 일부는 변경되고 일부는 변경되지 않는 문제가 있었다. Scoped vue의 style 태그에는 scoped 속성을 사용할 수 있다. scoped는 특정 컴포넌트의 스타일이 해당 컴포넌트에만 적용되도록 강제하는 역할을 한다. Foo1.vue scoped를 사용하면 돔 속성에 랜덤한 이름이 생성된다. 개발자도구로 Foo1 컴포넌트를 확인하면 돔 속성에 랜덤한 이름 (data-v-544b6424)이 생성된 것을 확인할 수 있다. scoped를 사용했을 때 실제 동작되는 코드를 풀어서 작성하면 아래와 같다. scoped 속성을 사용할 때 UI라이브러리의 요소가 일부는..

yarn은 npm과 다르게 global 옵션을 사용하려면 환경 변수나 저장 위치 등의 추가적인 설정을 해주어야 한다. 1. yarn global default 설치 위치 global로 패키지를 설치하게 되면 기본적으로 해당 위치에 패키지를 설치하게 된다. /home//.yarn/bin/ 2. yarn global 설치 위치 변경 만약 설치 위치를 바꾸고 싶다면 해당 명령어를 사용하도록 하자. # yarn global add 명령어 실행시, package가 저장될 위치 설정 yarn config set prefix # 예시 yarn config set prefix ~/.yarn-global # 설정한 저장 위치 확인 yarn config get prefix 위와 같이 설정하고 테스트로 typescript를..

객체지향 프로그래밍이란? (Object Oriented Programming) 객체 간의 상호작용을 통해 프로그래밍하는 것 객체: 서로 연관된 변수와 함수를 그룹핑하고 이름을 붙인 것 클래스: 객체를 생성하기 위해 변수와 메서드를 정의하는 설계도, 틀 constructor: 인스턴스 객체를 생성하고, 초기화하는 메서드 인스턴스: 클래스로부터 만들어진 객체 객체지향 프로그래밍의 장점 코드 재사용성 - 상속을 통해 코드의 재사용성을 높일 수 있다. 유지보수가 쉬워진다 - 코드 수정 시, 캡슐화를 통해 주변에 미치는 영향을 최소화할 수 있다. 대형 프로젝트에 적합 - 클래스 단위로 모듈화 시켜서 개발할 수 있어서 업무 분담을 효율적으로 할 수 있다. 객체지향 프로그래밍의 단점 개발 속도가 느려진다. - 설계 ..

CRA (Create React App)으로 프로젝트를 시작하면 우리가 사용하지 않을 파일도 같이 생성된다. 이번에 새 프로젝트를 시작하면서 하나씩 정리해보려고 한다. 1. CRA로 프로젝트 생성 // yarn yarn create react-app debrains-ui // npm npx create-react-app debrains-ui CRA로 프로젝트를 생성하고 나면 아래와 같은 구조를 가지게 된다. 2. 파일 제거 1. public - favicon.ico: 추후 변경될 때까지 유지 - logo192.png, logo512.png: react 기본 이미지므로 제거 - manifest: 웹앱에 대한 정보를 담고 있는 파일이다. - index.html: 사용하고 있는 logo192.png, mani..

1. 코딩 컨벤션 (Coding Convention) 이란? 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 규약이다. 여러 개발자들이 협업하는 과정에서 각각의 개발자들은 서로 다른 코딩 스타일을 가지고 있다. 조건문과 함수를 통해 예를 들어보겠다. // if문 if (true) return true; if (true) { return true; } // 화살표 함수 const foo = () => "Hello World"; const foo = () => { return "Hello World"; } 위의 코드처럼 다양한 방식으로 코드를 작성할 수 있다. 특히 자바스크립트는 언어 특성상 다른 언어에 비해 유연한 구조를 가지고 있기 때문에 (자유도가 높음) 개발자간 코드의 의도를 파악하기 ..

0. 개요 회사 프로젝트와 개인 프로젝트를 진행하는데 개인프로젝트는 node 16.15 버전이고, 회사 프로젝트는 node 14.15 버전이었다. node의 버전이 다르니까 호환되지 않는 라이브러리가 생겨서 다른 프로젝트를 할 때마다 node 버전을 변경해줘야 하는 번거로움이 생겼다. 혹시 각 프로젝트마다 node를 관리할 수 있을까 하고 검색하게 되었고, nvm을 사용하면 프로젝트별로 node version관리를 할 수 있다는 사실을 알게 되었다. 1. nvm 설치 2021.12.31 - [node.js] - [node.js] node 최신 버전 업그레이드 (nvm, n) [node.js] node 최신 버전 업그레이드 (nvm, n) Windows React native 프로젝트를 진행하는데 node..

1. 웹팩이란? 웹팩은 웹 애플리케이션에서 사용하는 수많은 리소스를 하나의 파일로 병합 및 압축 해주는 모듈 번들러이다. 1-1. 자바스크립트에서의 모듈 자바스크립트에서의 모듈이란 특정 기능을 가진 코드들을 하나의 파일로 관리하는 것을 말한다. date.js export const getIosStringDate() => new Date().toISOString(); export const getNumberDate() => new Date().valueOf(); 예를들어 위 date.js는 날짜를 parsing 하는 기능들을 가진 모듈이라고 할 수 있다. 1-2. 웹팩에서의 모듈 웹팩에서의 모듈은 자바스크립트 모듈뿐만이 아니라 HTML, CSS, Javascript, Images, Font 등 웹 애플리케..