DW Kim, 26,
Web Developer.

thumbnail

디디톡을 만들면서

살면서 처음으로 사이드 다운 사이드 프로젝트를 만들었고, 사람들에게 홍보를 해봤는데 예상외로 좋은 평들이 많아 뿌듯함을 많이 느꼈습니다. 이런 글을 써보는 것도 처음이지만 어떤 식으로 만들게 되었는지 정리를 해봅니다. 디디톡 기획 기술 스택 정하기. 회사에서 리

Typescript Utility Types

타입스크립트 타이핑 시 유용하게 쓰이는 기능들을 모아봤습니다. 익혀두면 실제로 써먹을 데가 많습니다. 다음 글은 공식 문서를 번역한 글이기도 합니다. > 링크 : https://www.typescriptlang.org/docs/handbook/utility-types

thumbnail

개인적으로 사용하는 React Hooks들

제가 직접 커스텀해서 사용하는 유용한 Hooks들을 몇 개 소개해 봅니다. 전부 타입스크립트 코드입니다. useObject 객체 형식의 State를 다룰 때 유용합니다. 아주 강추하는 훅스입니다. 👍 엄청 많이 쓰입니다. import { useState, use

thumbnail

React & Typescript Code Snippet

제가 리액트 타입스크립트를 쓸 때 개인적으로 사용하는 코드 스니펫입니다. 1. tsx 기본적인 리액트 컴포넌트를 만들 때 사용합니다. Code Snippet "typescript react component": { "prefix": "tsx", "body

thumbnail

React를 비롯한 나의 코딩 컨벤션

회사 프로젝트와 사이드 프로젝트로 리액트를 사용하면서 여러 가지로 시행착오를 겪은 저만의 코딩 컨벤션을 소개합니다. 프로젝트 예시는 디디톡으로 들겠습니다. > 코딩 컨벤션이란, 읽고, 관리하기 쉬운 코드를 작성하기 위한 일종의 코딩 스타일 약속이라고 보시면 됩니다.

thumbnail

결국은 뷰가 아니라 리액트였나

18년에 React로 시작하고 대략 6개월. 19년 초에 Vue로 갈아타고 가을 쯤에 회사에서 다시 React를 시작하게 됐는데, 9개월 정도 지난 지금 React가 아니라 Vue가 답이라고 생각했던 자신에 대해 다시금 생각해봐야 할 때가 아닌가 싶네요. 타입스크립트

thumbnail

💬 개발자 채팅방을 만들어 봤습니다.

웹사이트 링크 : 디디톡 프로젝트 소개에 앞서 제 소개를 간단히 하자면, 저는 이제 막 경력 1년을 넘긴 프론트 개발자 어린이(?)입니다. ❓ 이게 뭐에요?? > 한마디로 개발자들끼리 코드 혹은 기술에 대해 실시간으로 질문과 답변을 주고 받을 수 있는 채팅방 플랫

thumbnail

Carousel UI 간단하게 구현하기

Carousel을 구현하기 위해 여러 라이브러리를 찾아보았지만 마땅한게 없었고, 여러 사이트들을 참고하기 위해 둘러 보던 중 Airbnb의 메인 화면에서 괜찮은 레퍼런스를 찾을 수 있었습니다. PC로 볼 때는 이미지가 나란히 펼쳐져 있지만, 모바일로 볼 때는 저렇게

Prettier Snippet

"prettier snippet": { "prefix": "ps", "body": [ "{", " \"singleQuote\": true,", " \"semi\": false,", " \"useTabs\": false,", " \"tabWi

thumbnail

Nest.js로 완벽한 API 서버 구축하기 (1)

작성 중입니다...

이메일 인증으로 로그인하기

최근 몇 달전부터 여러 프로젝트 및 서비스를 진행하면서, 프로젝트마다 반복적으로 구축해야하는 인증 서비스 구현에 대해 크게 질색한 적이 있었습니다. 여러분들은 이런 적이 있었던가요? 로그인 기능, 회원가입 기능, 비밀번호 찾기, 초기화 및 변경 기능 아이디 찾기

thumbnail

Jenkinsfile 선언형 파이프라인 구문

젠킨스 블루 오션을 통해 시각적으로 파이프라인 코드를 작성하는 것도 좋지만, 그 전에 jenkinsfile에서 사용하는 선언형 파이프라인 구문에 어느 정도는 알아야 할 필요를 느꼈습니다. 젠킨스가 넘 어렵지만 CI/CD를 마스터하려면 어떻게든 붙잡고 늘어져야죠...

thumbnail

TypeORM Snippets

Entity 실행 명령어: entity "TypeORM Entity": { "prefix": "entity", "body": [ "import { Entity, PrimaryGeneratedColumn, BaseEntity } from 'typeorm

MySQL 설치 및 실행

Mac brew update brew install mysql mysql.server start mysql --version `

Jenkins Blue Ocean 시작하기 (3) - Nginx 연동

jenkins 이미지가 없는 경우 다운부터 docker pull jenkinsci/blueocean 볼륨 생성 docker volume create jenkins_home 젠킨스 컨테이너 실행 docker run -d --name jenkins -v jenki

thumbnail

웹사이트의 가장 이상적인 max-width

프론트 개발을 처음 시작할 때, 컴포넌트를 구성하기 전에 먼저 해야 하는 것이 바로 페이지의 전체적인 틀을 잡는 것인데요, 그 중 하나가 바로 페이지의 max-width를 잡는 것입니다. 기본적으로 우리가 아는 모든 웹사이트는, 기본적으로 컨텐츠가 화면 전체를 전부

thumbnail

조회수를 검증하는 방법

우리가 넷상에서 서핑을 하다보면, 일부 커뮤니티에서 이런 기능들을 볼 수 있는데요. (오른쪽에 눈동자) (사진 출처는 okky입니다.) 해당 글을 몇 명이 조회했는지에 대한 데이터로서 커뮤니티에서는 있으면 나름 쏠쏠한 재미가 있지만 없어도 상관은 없는 녀석이죠.

thumbnail

웹팩(Webpack)의 옵션에 대해 알아보자.

이 페이지에서는 웹팩의 속성들이 어떤 것들이 있는지, 각각의 속성들이 어떤 역할들을 하는지 하나하나 전부 천천히 정리해나갈 생각입니다. 여기서 정리한 글을 앞으로도 제가 웹팩을 다루면서 계속 참고하고 수정해 나갈 것이기 때문에, 글이 완성되기 까지는 아주 오래 걸릴 겁

thumbnail

React Native 세팅 (3) - Navigation

이번 장에서 다룰 내용은 꽤 복잡하고 내용이 깁니다. 그 이유는 Navigation 시스템 자체가 상당히 많은 기능을 가지고 있고, 우리가 평소 사용하는 거의 모든 앱에서 다 쓰이는 기능들이기 때문에, 실제 어플을 생각하고 글을 보시면 이게 복잡하고 내용이 많을 수 밖

thumbnail

React Native 세팅 (2) - 기본 프로젝트 설정

바로 프로젝트를 만들어 봅시다. 리액트 네이티브 버전이 달라 따라서 하는 때에는 호환이 제대로 안될 수도 있습니다. react-native init initialRN 1. Typescript 설정 Typescript용 라이브러리들을 설치합니다. npm i -D

thumbnail

React Native 세팅 (1) - 설치

리액트 네이티브 프로젝트 만들때마다 세팅 방법이 헷갈려 여기다가 정리합니다. Typescript 및 상대경로 설정도 포함시켜 보겠습니다. > 리액트 네이티브는 크로스 플랫폼 기술이니 만큼 맥(Mac) 기준으로만 쓰겠습니다. homebrew 버전을 확인하고, 없다면

thumbnail

Jenkins Blue Ocean 시작하기 (2) - Github 연동

블루 오션을 Github와 연동하기 이전에 해야할 작업이 있습니다. 우리가 설치한 기본 플러그인 중 Github API Plugin의 최신 버전이 블루 오션에서 제대로 호환이 되지 않는 이슈가 생겨서, 버전을 낮춘 뒤 연동을 해야 합니다. 먼저, 아래 사이트에 가셔서

thumbnail

Jenkins Blue Ocean 시작하기 (1) - Jenkins 설치

일단 되는대로 막 작성하겠습니다. 다 작성 후 정리해볼 예정입니다. 아래와 같이 Jenkins 이미지를 받고 Jenkins를 실행합니다. docker pull jenkins/jenkins docker run -p 8080:8080 -d jenkins:latest

in 연산자

in 연산자는 해당 객체에 다음 속성이 있는지 여부를 출력해 줍니다. Object.prototype.hasOwnProperty()와 같은 기능을 한다고 볼 수 있습니다. console.log("PI" in Math) // true console.log("QI" in

thumbnail

Typescript와 Jest 호환 문제

Typescript와 TDD를 섞어 사용하다 보면, 타입스크립트가 TDD 코드를 읽지 못하는 상황이 간혹 생깁니다. 나는 분명이 해당 모듈을 설치했는데, 타입스크립트가 읽지 못하는 상황입니다. 나는 분명히 @types/jest를 설치했는데, 왜 describe를 읽지

thumbnail

TypeORM 시작하기 (5) - Express

Express, MySQL과 함께 시작할 수 있는 Typeorm CLI가 있으니 그걸로 바로 시작해 봅시다. 프로젝트 이름과 데이터베이스 이름은 임시로 skyblue라고 해보겠습니다. npx typeorm init skyblue --database mysql --ex

thumbnail

TypeORM 시작하기 (4) - 관계

OneToOne > 유저 아이디와 암호 등은 자주 사용하지만 상세 프로필은 자주 사용하지 않는 경우, 프로필 앤티티를 별도로 구분합니다. 하나의 유저는 하나의 프로필을 가집니다. src/entity/Profile.ts 를 만들고 다음과 같이 입력합니다. impor

thumbnail

TypeORM 시작하기 (3) - 트랜잭션

트랜잭션(Transaction)은 하나의 작업 단위라고 생각하면 이해가 쉽습니다. 예를 들어, 회원 탈퇴를 할 시 모든 작성글과 댓글을 삭제한다고 했을 때, 회원의 모든 글과 댓글을 다 삭제한 뒤 탈퇴 작업을 진행해야 하는데 실수로 인해 회원의 글과 댓글들만 삭제되

thumbnail

TypeORM 시작하기 (2) - 쿼리

이전 장에서 이어서 설명하는 글입니다. 이전 글 이번 장에서는 typeorm의 쿼리 메소드를 알아봅니다. > BaseEntity를 확장받은 클래스를 기준으로 설명합니다. find User.find() getManager().find(User) gerReposit

thumbnail

Docker Compose 기본 개념

Docker Compose는 먼저 docker run을 스크립트로 풀어 작성한 파일입니다. 이 파일을 이용해 여러 개의 컨테이너를 띄울 수 있습니다. 예를 들어 mysql과 redis 2개의 컨테이너가 필요하다면 docker-compose.yml 파일 하나만으로 필요한

thumbnail

DockerFile 기본 문법

Docker 명령어를 아는 것도 좋지만, 실제로 프로젝트 상에서 Docker를 다루는 데에 있어서는 주로 파일로서 관리를 하는 게 대부분입니다. 따라서 DockerFile 및 Docker-compose.yml을 다루는 방법 역시 익숙해지는 것이 좋습니다. DockerF

thumbnail

Docker 기본 명령어 정리

오랜만입니다. 요근래 인프라 구축과 데브옵스의 필요성을 크게 느껴, 주위에 안쓰는 사람이 없다는 Docker를 반드시 배워야 겠다는 생각을 했습니다. 기본적인 명령어들은 암기를 해야 할 것 같아서 정리를 해봅니다. 이미지 관련 docker search [image]

thumbnail

TypeORM 시작하기 (1) - 기본

타입스크립트에 빠지고 나니 또 한번 새로운 세계에 눈을 뜨게 됬는데, 그게 TypeORM이었습니다. 제가 처음 데이터베이스를 배웠을 때는 확장성이 용이하다며 MongoDB가 뜬다길래 MongoDB로 먼저 배우고, 나중가서는 '아, 사람들이 결국은 관계형 DB를 쓰게 되

Scss Snippet

"scss-with-open-color": { "prefix": "scss", "body": [ "@import '../../node_modules/open-color/open-color.scss';", "",

thumbnail

Nuxt로 Typescript 시작하기

Nuxt는 React나 Next.js와 다르게 CLI Typescript가 따로 없으므로 공식문서를 보고 직접 구성해야 합니다. 하지만 문서대로 하면 오류가 나고, 안하자니 강타입이 너무 매력적이고 하니 직접 부딪혀 가며 시행착오를 거친 끝에 Nuxt에 Typescri

Nuxt & Typescript with Code Snippets

Snippet Generator에 들어갑시다. 여러분이 만들고 싶은 스니펫을 Your snippet에 넣고, 원하는 명령어를 Tab trigger에 넣으면 오른쪽 창에서 자동적으로 Snippet을 생성합니다. 예시로 Nuxt에서 Typescript로 하나의 .vue

thumbnail

Typescript 여정 (3) : Generic

제네릭이 생긴 게 무서워서 그렇지, 실제로는 개념이 정말 단순한 타입입니다. 제네릭은 타입 변수, 다시 말해 타입을 변수로 받겠다는 의미로 사용할 때 쓰는 겁니다.

thumbnail

Typescript 여정 (2) : Interface

인터페이스는 어렵게 생각할 게 딱히 없습니다. (1)의 기본 타입에서 객체는 다루지 않았는데, 바로 이 인터페이스가 객체를 다루는 타입이기 때문입니다. 기본적으로

thumbnail

내가 React를 때려치고 Vue를 선택한 이유

React와 Vue를 둘 다 실무에서 4개월 정도 해본 결과, 저는 Vue가 거의 모든 면에서 React보다 낫다는 결론을 냈습니다. (4개월이면 명함도 못 내미는거 저도 압니다.) 둘 중 먼저 배운 것은 React였지만 아무리 생각해 봐도 React는 여전히 불편한

thumbnail

Typescript 여정 (1): 기본 타입

타입스크립트는 자바스크립트 개발자에게 있어 점점 더 무조건 배워야 하는 언어가 되어 가고 있습니다. 자바스크립트와 es6를 모른다면 먼저 그것을 배우시고, 그 이후에 타입스크립트를 배우시는 것을 권장합니다. 한번 타입스크립트에 빠진 사람은 다시는 자바스크립트로 돌아가지

thumbnail

자바스크립트 개발자가 2020년에 받는 연봉

이 글은 Medium의 What to Pay JavaScript Developers in 2020 글을 번역한 글입니다. 채용 매니저로서, 우리는 수많은 어려운 선택들을 해야 합니다. 하지만 대부분의 채용 매니저들이 저지르는 실수 중 하나는 개발자에 대한 보상(com

thumbnail

글을 잘 쓰고 싶다.

자고 자면 출근인데 새벽에 이런 글을 쓰고 있네요. 글을 잘 쓰고 싶네요. 오로지 개발만을 향해 달려왔던 저로서는 안정적인 취업을 하고 나니 점차 다른 곳이 눈이 가기 시작했는데요. 그 중 하나가 바로 글쓰기였습니다. 블로그 v2를 내놓으면서 이쁘고 간결하게 새롭

thumbnail

새해 다짐

자세 허리 꼿꼿이 펴기 다리 꼬지 않기 꼭 올해 안에 배울 기술 Typescript CI/CD Circle CI or Travis CI 둘 중 하나 Github Actions Tensorflow AI는 충분히 미래가치가 있다고 봅니다. 사실 파이썬을 하는

thumbnail

Sequelize (시퀄라이즈) 관계 정의

본 장에서는 users, user_infos, posts, hashtags 테이블을 예시로 설명해 보겠습니다. 1. hasMany ex) 1명의 user가 여러 개의 posts를 가진다. Users has many posts. user.associate = func

thumbnail

Sequelize (시퀄라이즈) 모델 정의

Billion Recipe를 작업하는 도중, Sequelize를 처음 프로젝트에 도입하게 되었는데, 모델을 정의하는 로직이 자주 쓰일 것 같고 정리해 두면 두고두고 찾아 볼 것 같아서 정리할 필요성을 느꼈습니다. User 테이블을 정의한다고 가정해봅니다. modul

thumbnail

블로그를 새롭게 개편했습니다.

성탄절이 다가오기도 전에 이 글을 쓰게 되네요. 시간이 벌써 내년을 바라보고 있습니다. 올 한해는 나 자신의 성장을 위해 소중한 시간들을 보낸 것 같습니다. 작년 18년 4월 처음 개발에 뛰어들고 나서 1년 전인 18년 12월과 비교하면 정말 많은 스택을 쌓았다는 걸