Posts by Tag

• Javascript 69
• Algorithm 67
• javascript 40
• React 15
• Vue 8
• aws 6
• nodejs 6
• Raspberry-pi 6
• nextjs 5
• docs 5
• git 4
• DevOps 4
• Backend 4
• CSS 4
• centos 4
• ubuntu 4
• Nodejs 4
• Google-Analytics 3
• Database 3
• Next.js 3
• REST api 3
• json-server 3
• database 2
• etc 2
• Blog 1
• styled-components 1
• md 1
• Redux 1
• HTML 1
• Etc 1
• Docker 1
• i18n 1
• json 1
• Next 1
• React Hooks 1
• cron 1
• Book 1
• orm 1
• docker 1
• docker-compose 1
• html 1
• npm 1
• webpack 1
• express 1
• pug 1
• package.json 1
• package-lock.json 1
• 배포 1
• json-server-auth 1
• env 1
• nfs 1
• linux 1

Javascript

console.log에 스타일 입히기

less than 1 minute read

console.log에 스타일을 입혀서 예쁘게 만들어 보자.

문제 68 : 버스 시간표

less than 1 minute read

버스 시간표와 현재 시간이 주어졌을 때 버스 도착 시간이 얼마나 남았는지 알려주는 프로그램을 만들어라.

문제 67 : 민규의 악수

less than 1 minute read

탑이 순서에 맞게 쌓여져 있는지 확인하세요.

문제 66 : 블럭탑 쌓기

1 minute read

탑이 순서에 맞게 쌓여져 있는지 확인하세요.

문제 65 : 변형된 리스트

1 minute read

리스트가 주어질 때 변형해서 출력하라.

문제 64 : 이상한 엘레베이터

less than 1 minute read

무게가 주어질 때 가장 적게 옮길 수 있는 횟수를 출력하라.

문제 63 : 친해지고 싶어

less than 1 minute read

입력이 주어지면 앞글자만 출력하라

문제 62 : 20190923 출력하기

less than 1 minute read

20190923을 출력하라.

data-* 활용해서 html 데이터 가지고 오기

1 minute read

html 태그를 통해서 data를 가지고 오자.

문제 61 : 문자열 압축하기

less than 1 minute read

문자열을 입력받고 문자열을 압축해서 표현하라

문제 60 : 번호 매기기

less than 1 minute read

학생들을 이름순대로 번호를 매겨라

문제 59 : 빈칸 채우기

less than 1 minute read

총 문자열의 길이가 50일때 문자열을 가운데 정렬하고 나머지는 =로 채워라

문제 58 : 콤마 찍기

less than 1 minute read

숫자를 입력받고 천 단위로 콤마(,)를 찍어라.

문제 57 : 1의 개수

less than 1 minute read

0부터 1000까지 1의 개수를 세어라.

문제 56 : 객체의 함수 응용

1 minute read

객체가 주어졌을 때 한국의 면적과 가장 비슷한 국가와 그 차이를 출력하세요.

문제 55 : 하노이의 탑

less than 1 minute read

하노이의 탑을 실행하는 코드를 완성하고 최소 원반 이동 횟수를 계산하라.

문제 54 : 연속되는 수

less than 1 minute read

입력되는 숫자가 연속수인 지 아닌 지를 파악하라

문제 53 : 괄호 문자열

less than 1 minute read

주어진 괄호 문자열이 바른 문자열인지 판단해보자.

문제 52 : quick sort

less than 1 minute read

퀵정렬을 완성하라.

문제 51 : merge sort를 만들어보자

1 minute read

자바스크립트로 merge sort를 만들어 보자.

문제 49 : 최대값 구하기

less than 1 minute read

주어진 숫자들 중에서 최댓값을 반환하라

문제 50 : 버블정렬 구현하기

less than 1 minute read

버블정렬을 구현해보자.

문제 48 : 대소문자 바꿔서 출력하기

less than 1 minute read

대소문자를 바꿔서 출력하는 프로그램을 만들자

문제 47 : set 자료형의 응용

less than 1 minute read

중복된 데이터를 제거하자

문제 46 : 각 자리수의 합 2

less than 1 minute read

모든 자릿수의 총 합을 구하자.

문제 45 : getTime() 함수 사용하기

less than 1 minute read

getTime 함수를 사용해보자.

문제 44 : 각 자리수의 합

less than 1 minute read

사용자가 입력한 양의 정수의 각 자리수의 합을 구해보자.

문제 43 : 10진수를 2진수로

less than 1 minute read

사용자에게 숫자를 입력받고 이를 2진수로 바꿔서 출력해보자.

문제 42 : 2020년

less than 1 minute read

a와 b를 입력받아 a월 b일이 무슨 요일인지 반환해보자.

문제 41 : 소수판별

less than 1 minute read

입력받은 숫자가 소수인지 아닌지 판별해보자.

문제 39 : 오타 수정하기

less than 1 minute read

입력받은 문자를 다른 문자로 바꿔보자.

문제 40 : 놀이동산에 가자

less than 1 minute read

놀이기구에 몇명이 탑승할 수 있는지 프로그램을 작성하자.

문제 38 : 호준이의 아르바이트

less than 1 minute read

입력받은 점수를 통해서 1~3위 학생에게 사탕을 주자.

문제 37 : 반장 선거

less than 1 minute read

입력받은 학생의 이름을 더해보자

문제 35 : Factory 함수 사용하기

less than 1 minute read

제곱을 할 수 있는 fatory 함수를 만들어보자.

문제 36 : 구구단 출력하기

less than 1 minute read

구구단 결과를 한줄에 출력해보자.

문제 32 : 문자열 만들기

less than 1 minute read

문자열을 입력받으면 split을 통해서 나눠보자

문제 33 : 거꾸로 출력하기

less than 1 minute read

여러개의 숫자가 입력되면, 역순으로 하나씩 출력하는 프로그램을 만들자

문제 34 : sort 구현하기

less than 1 minute read

입력받은 숫자들을 정렬시키는 sort를 구현해보자

문제 31 : 자바스크립트 자료형의 복잡도

1 minute read

빅 오를 통해서 복잡도를 확인해보자.

문자열 속 문자 찾기

less than 1 minute read

문자가 시작하는 인덱스를 반환해보자.

문제27 : 객체 만들기

less than 1 minute read

입력받은 값으로 객체를 만들어보자.

대문자 확인하기

less than 1 minute read

입력된 문자열이 대문자인지 아닌지를 확인해보자.

2-gram 문제 해결하기

less than 1 minute read

문자열에서 2개의 연속된 요소를 출력해보자

반지름을 받아서 원의 넓이 구하기

less than 1 minute read

자바스크립트 함수를 통해서 반지름을 매개변수로 받아서 원의 넓이를 구하자

문제 26

less than 1 minute read

행성의 한글 이름을 입력하면 영어이름을 반환해보자.

자바스크립트에서 대문자 소문자로 바꾸기

less than 1 minute read

자바스크립트에서 나누기를 해보자

자바스크립트에서 나누기

less than 1 minute read

자바스크립트에서 나누기를 해보자

자바스크립트에서 배수인지 확인하기

less than 1 minute read

자바스크립트에서 배수인지 확인하는 방법을 알아보자.

자바스크립트에서 Set 활용하기

1 minute read

자바스크립트에서 Set을 활용해보자.

자바스크립트에서 몫과 나머지 구하기

less than 1 minute read

숫자를 입력받아서 몫과 나머지를 구해보자.

자바스크립트에서 제곱(power)을 하는 방법

less than 1 minute read

키를 입력받아서 제곱을 해보자.

입력 받은 문자열을 조건문을 통해서 답해보자.

less than 1 minute read

키를 입력받아서 기준치가 넘으면 YES를 틀리면 NO를 출력하는 프로그램을 작성해보자.

reduce 메소드 활용해보기

1 minute read

reduce 메소드를 활용해서 평균값을 구해보자.

문자열 거꾸로 만들기

less than 1 minute read

입력받은 문자열을 거꾸로 만들어서 반환해보자.

문제 15: 자기소개

less than 1 minute read

입력받은 문자열에 문자열을 더해서 반환해보자.

문제 13: 몇 번째 행성인가요?

less than 1 minute read

숫자를 입력받아서 해당 숫자에 맞는 행성을 출력해보자.

문제 14: 3의 배수인지 파악하기

less than 1 minute read

숫자를 입력받아서 해당 숫자가 3의 배수라면 짝, 아니라면 숫자를 그대로 출력해보자.

반복문을 통해 별을 찍어보자.

less than 1 minute read

입력을 받아서 별을 찍어보자.

반복문을 통해 별을 찍어보자.

less than 1 minute read

입력을 받아서 별을 찍어보자.

자바스크립트의 클래스를 이용해보자

less than 1 minute read

자바스크립트의 클래스를 통해서 출력값이 같도록 만들어보자.

자바스크립트 문자열 합치기

less than 1 minute read

자바스크립트에서 주어진 문자열을 합쳐보자.

자바스크립트 변수명으로 사용하지 못하는 것 알아보기

less than 1 minute read

자바스크립트에서 변수명으로 사용하지 못하는 것을 알아보자.

객체의 키 이름이 중복될 때

less than 1 minute read

객체의 키 이름이 중복된다면 자바스크립트는 어떤 값을 보여줄까 확인해보기

자바스크립트의 for문에 대해서 알아보자.

1 minute read

for문의 예제를 통해서 반복문을 알아보자.

자바스크립트에서 거짓으로 판단되는 값

less than 1 minute read

자바스크립트에서 거짓으로 판단되는 값인 falsy들을 알아보자.

typeof로 자바스크립트 타입 체크하기

less than 1 minute read

typeof 메소드를 통해서 자바스크립트의 타입을 확인해보고 나올 수 있는 값을 확인해보자.

자바스크립트의 slice와 splice 비교

less than 1 minute read

자바스크립트의 slice 메소드와 splice 메소드를 비교해보자.

자바스크립트에서 배열의 아이템을 추가하거나 삭제해보자.

1 minute read

자바스크립트의 push, unshift, pop, shift를 활용해보자.

Back to top ↑

Algorithm

문제 68 : 버스 시간표

less than 1 minute read

버스 시간표와 현재 시간이 주어졌을 때 버스 도착 시간이 얼마나 남았는지 알려주는 프로그램을 만들어라.

문제 67 : 민규의 악수

less than 1 minute read

탑이 순서에 맞게 쌓여져 있는지 확인하세요.

문제 66 : 블럭탑 쌓기

1 minute read

탑이 순서에 맞게 쌓여져 있는지 확인하세요.

문제 65 : 변형된 리스트

1 minute read

리스트가 주어질 때 변형해서 출력하라.

문제 64 : 이상한 엘레베이터

less than 1 minute read

무게가 주어질 때 가장 적게 옮길 수 있는 횟수를 출력하라.

문제 63 : 친해지고 싶어

less than 1 minute read

입력이 주어지면 앞글자만 출력하라

문제 62 : 20190923 출력하기

less than 1 minute read

20190923을 출력하라.

문제 61 : 문자열 압축하기

less than 1 minute read

문자열을 입력받고 문자열을 압축해서 표현하라

문제 60 : 번호 매기기

less than 1 minute read

학생들을 이름순대로 번호를 매겨라

문제 59 : 빈칸 채우기

less than 1 minute read

총 문자열의 길이가 50일때 문자열을 가운데 정렬하고 나머지는 =로 채워라

문제 58 : 콤마 찍기

less than 1 minute read

숫자를 입력받고 천 단위로 콤마(,)를 찍어라.

문제 57 : 1의 개수

less than 1 minute read

0부터 1000까지 1의 개수를 세어라.

문제 56 : 객체의 함수 응용

1 minute read

객체가 주어졌을 때 한국의 면적과 가장 비슷한 국가와 그 차이를 출력하세요.

문제 55 : 하노이의 탑

less than 1 minute read

하노이의 탑을 실행하는 코드를 완성하고 최소 원반 이동 횟수를 계산하라.

문제 54 : 연속되는 수

less than 1 minute read

입력되는 숫자가 연속수인 지 아닌 지를 파악하라

문제 53 : 괄호 문자열

less than 1 minute read

주어진 괄호 문자열이 바른 문자열인지 판단해보자.

문제 52 : quick sort

less than 1 minute read

퀵정렬을 완성하라.

문제 51 : merge sort를 만들어보자

1 minute read

자바스크립트로 merge sort를 만들어 보자.

문제 49 : 최대값 구하기

less than 1 minute read

주어진 숫자들 중에서 최댓값을 반환하라

문제 50 : 버블정렬 구현하기

less than 1 minute read

버블정렬을 구현해보자.

문제 48 : 대소문자 바꿔서 출력하기

less than 1 minute read

대소문자를 바꿔서 출력하는 프로그램을 만들자

문제 47 : set 자료형의 응용

less than 1 minute read

중복된 데이터를 제거하자

문제 46 : 각 자리수의 합 2

less than 1 minute read

모든 자릿수의 총 합을 구하자.

문제 45 : getTime() 함수 사용하기

less than 1 minute read

getTime 함수를 사용해보자.

문제 44 : 각 자리수의 합

less than 1 minute read

사용자가 입력한 양의 정수의 각 자리수의 합을 구해보자.

문제 43 : 10진수를 2진수로

less than 1 minute read

사용자에게 숫자를 입력받고 이를 2진수로 바꿔서 출력해보자.

문제 42 : 2020년

less than 1 minute read

a와 b를 입력받아 a월 b일이 무슨 요일인지 반환해보자.

문제 41 : 소수판별

less than 1 minute read

입력받은 숫자가 소수인지 아닌지 판별해보자.

문제 39 : 오타 수정하기

less than 1 minute read

입력받은 문자를 다른 문자로 바꿔보자.

문제 40 : 놀이동산에 가자

less than 1 minute read

놀이기구에 몇명이 탑승할 수 있는지 프로그램을 작성하자.

문제 38 : 호준이의 아르바이트

less than 1 minute read

입력받은 점수를 통해서 1~3위 학생에게 사탕을 주자.

문제 37 : 반장 선거

less than 1 minute read

입력받은 학생의 이름을 더해보자

문제 35 : Factory 함수 사용하기

less than 1 minute read

제곱을 할 수 있는 fatory 함수를 만들어보자.

문제 36 : 구구단 출력하기

less than 1 minute read

구구단 결과를 한줄에 출력해보자.

문제 32 : 문자열 만들기

less than 1 minute read

문자열을 입력받으면 split을 통해서 나눠보자

문제 33 : 거꾸로 출력하기

less than 1 minute read

여러개의 숫자가 입력되면, 역순으로 하나씩 출력하는 프로그램을 만들자

문제 34 : sort 구현하기

less than 1 minute read

입력받은 숫자들을 정렬시키는 sort를 구현해보자

문제 31 : 자바스크립트 자료형의 복잡도

1 minute read

빅 오를 통해서 복잡도를 확인해보자.

문자열 속 문자 찾기

less than 1 minute read

문자가 시작하는 인덱스를 반환해보자.

문제27 : 객체 만들기

less than 1 minute read

입력받은 값으로 객체를 만들어보자.

대문자 확인하기

less than 1 minute read

입력된 문자열이 대문자인지 아닌지를 확인해보자.

2-gram 문제 해결하기

less than 1 minute read

문자열에서 2개의 연속된 요소를 출력해보자

반지름을 받아서 원의 넓이 구하기

less than 1 minute read

자바스크립트 함수를 통해서 반지름을 매개변수로 받아서 원의 넓이를 구하자

문제 26

less than 1 minute read

행성의 한글 이름을 입력하면 영어이름을 반환해보자.

자바스크립트에서 대문자 소문자로 바꾸기

less than 1 minute read

자바스크립트에서 나누기를 해보자

자바스크립트에서 나누기

less than 1 minute read

자바스크립트에서 나누기를 해보자

자바스크립트에서 배수인지 확인하기

less than 1 minute read

자바스크립트에서 배수인지 확인하는 방법을 알아보자.

자바스크립트에서 Set 활용하기

1 minute read

자바스크립트에서 Set을 활용해보자.

자바스크립트에서 몫과 나머지 구하기

less than 1 minute read

숫자를 입력받아서 몫과 나머지를 구해보자.

자바스크립트에서 제곱(power)을 하는 방법

less than 1 minute read

키를 입력받아서 제곱을 해보자.

입력 받은 문자열을 조건문을 통해서 답해보자.

less than 1 minute read

키를 입력받아서 기준치가 넘으면 YES를 틀리면 NO를 출력하는 프로그램을 작성해보자.

reduce 메소드 활용해보기

1 minute read

reduce 메소드를 활용해서 평균값을 구해보자.

문자열 거꾸로 만들기

less than 1 minute read

입력받은 문자열을 거꾸로 만들어서 반환해보자.

문제 15: 자기소개

less than 1 minute read

입력받은 문자열에 문자열을 더해서 반환해보자.

문제 13: 몇 번째 행성인가요?

less than 1 minute read

숫자를 입력받아서 해당 숫자에 맞는 행성을 출력해보자.

문제 14: 3의 배수인지 파악하기

less than 1 minute read

숫자를 입력받아서 해당 숫자가 3의 배수라면 짝, 아니라면 숫자를 그대로 출력해보자.

반복문을 통해 별을 찍어보자.

less than 1 minute read

입력을 받아서 별을 찍어보자.

반복문을 통해 별을 찍어보자.

less than 1 minute read

입력을 받아서 별을 찍어보자.

자바스크립트의 클래스를 이용해보자

less than 1 minute read

자바스크립트의 클래스를 통해서 출력값이 같도록 만들어보자.

자바스크립트 문자열 합치기

less than 1 minute read

자바스크립트에서 주어진 문자열을 합쳐보자.

자바스크립트 변수명으로 사용하지 못하는 것 알아보기

less than 1 minute read

자바스크립트에서 변수명으로 사용하지 못하는 것을 알아보자.

객체의 키 이름이 중복될 때

less than 1 minute read

객체의 키 이름이 중복된다면 자바스크립트는 어떤 값을 보여줄까 확인해보기

자바스크립트의 for문에 대해서 알아보자.

1 minute read

for문의 예제를 통해서 반복문을 알아보자.

자바스크립트에서 거짓으로 판단되는 값

less than 1 minute read

자바스크립트에서 거짓으로 판단되는 값인 falsy들을 알아보자.

typeof로 자바스크립트 타입 체크하기

less than 1 minute read

typeof 메소드를 통해서 자바스크립트의 타입을 확인해보고 나올 수 있는 값을 확인해보자.

자바스크립트의 slice와 splice 비교

less than 1 minute read

자바스크립트의 slice 메소드와 splice 메소드를 비교해보자.

자바스크립트에서 배열의 아이템을 추가하거나 삭제해보자.

1 minute read

자바스크립트의 push, unshift, pop, shift를 활용해보자.

Back to top ↑

javascript

npm 모듈 만들기 - npm 가입 후 배포해보기

1 minute read

npm 모듈을 만들기 위해 npm에 가입해보고 배포를 경험해보자.

프론트엔드에서 타임존(timezone) 다루기

1 minute read

타임존에 대해서 알아보고 프론트엔드에서 어떻게 타임존을 다룰 지 알아보자

Blob에 대해서 이해하고 엑셀 파일 갖고 오기

1 minute read

Blob에 대해서 알아보고 axios를 통해서 엑셀 파일을 갖고 오기

로그인 시간 연장 기능 추가

1 minute read

Vue 프로젝트에서 로그인 시간 연장 기능 추가하기

자바스크립트에서 객체의 속성을 확인하는 in과 hasOwnProperty를 알아보자

1 minute read

자바스크립트에서 객체의 속성을 확인할 수 있는 in 연산자와 객체의 hasOwnProperty 메소드를 알아보고 활용해보자

Dynamic import 사용하기

1 minute read

dynamic import를 왜 사용하는 지 어떻게 사용하는 지 알아보자

Vue에서 v-slot 활용하기

3 minute read

Vue에서 v-slot을 활용해보자

for loop에 라벨 붙이기

less than 1 minute read

for loop에 라벨을 붙여서 중첩 반복문을 조절 해보자.

vue 페이지에 타이틀 변경

less than 1 minute read

vue router에서 meta 속성을 활용해 페이지의 타이틀을 변경해보자.

권한에 따른 vue router 접근 제한 걸기

1 minute read

vue router에서 제공하는 가드를 활용해서 어드민, 클라이언트가 접근할 수 있는 페이지를 구분해보자.

input 값을 검증해보자.

1 minute read

vue router에서 제공하는 가드를 활용해보자.

vue에서 전역 가드, 라우터 가드, 컴포넌트 가드를 사용해보자.

2 minute read

vue router에서 제공하는 가드를 활용해보자.

vue에서 mixin을 통해 중복된 코드를 없애보자

1 minute read

vue-i18n 플러그인을 적용해 다국어 적용을 해보자.

vue로 다국어 적용(국제화) 하기

2 minute read

vue-i18n 플러그인을 적용해 다국어 적용을 해보자.

React의 HoC 정리하기

1 minute read

리액트의 Higher order Component를 정리해보자.

자바스크립트의 커링을 알아보자.

1 minute read

함수를 재활용할 수 있는 자바스크립트의 커링을 알아보자.

React의 component와 pure component를 알아보자.

1 minute read

리액트 클래스 컴포넌트의 두 종류인 component와 pure component를 알아보자.

React의 라이프 사이클을 알아보자.

1 minute read

리액트의 라이프 사이클이 실행해보자.

http 프로토콜을 https 프로토콜로 리다이렉트 시키기

less than 1 minute read

http 프로토콜을 https로 리다이렉트 시켜보자.

아임포트 사용하기

2 minute read

아임포트를 이용하여 결제 기능 구현하기

express에서 사용자의 ip 주소 받기

less than 1 minute read

사용자의 ip주소를 받아보자.

자바스크립트의 optional chaining

less than 1 minute read

자바스크립트의 optional chaining을 알아보자.

Redux Toolkit 흝어보기

3 minute read

Redux Toolkit을 흝어보자.

데이터를 가지고 리다이렉트 하기

1 minute read

프론트엔드와 백엔드에서 각각 데이터를 가지고 리다이렉트 하는 방법을 알아보자.

express에서 쿠키로 값 저장하기

less than 1 minute read

익스프레스에서 쿠키를 통해서 정보를 저장해보자

자바스크립트의 getter와 setter

less than 1 minute read

자바스크립트에서 getter와 setter를 적용하는 방법을 알아보자.

프로토타입 기반의 언어 자바스크립트의 상속

1 minute read

프토로타입 기반의 언어 자바스크립트의 상속하는 방법과 class도 알아보자

자바스크립트의 깊은 복사와 얕은 복사

1 minute read

깊은복사와 얕은 복사의 차이점을 알아보자

자바스크립트의 불변성과 불변객체

1 minute read

리액트에서 강조하는 불변성이란 도대체 무엇인가

react-router-dom을 활용해 SPA를 만들어보자.

2 minute read

싱글 페이지 애플리케션을 만들 수 있게 react-router-dom의 사용방법을 알아봅시다.

리액트 프로젝트에 sass와 css module 적용하기

1 minute read

리액트 프로젝트에 sass와 css module을 적용시켜 보자.

리액트 프로젝트에서 componentDidCatch를 통해 에러를 처리해보자

1 minute read

componentDidCatch를 통해서 에러가 발생했을 때 빈 화면이 아니라 에러 컴포넌트를 보여주자.

리액트의 setState 함수를 알아보자

1 minute read

클래스 컴포넌트에서 state 값을 바꾸는 setState 함수를 알아보자.

useReducer를 알아보자

2 minute read

hooks의 useReducer를 알아보고 사용해보자.

styled-components를 사용해보자

2 minute read

실전에서 사용할 수 있도록 styled-components의 주요 사용법들을 정리해봅시다.

useContext를 알아보자

less than 1 minute read

hooks의 useContext를 알아보고 사용해보자.

리액트의 hooks 살펴보기

1 minute read

hooks를 통해 함수 컴포넌트에서 state를 사용해보자.

자바스크립트의 래퍼객체를 활용해보자

less than 1 minute read

래퍼객체를 활용해보고 값도 바꿔보자

자바스크립트에서 참으로 판단되는 값(truthy)과 거짓으로 판단되는 값(falsy)을 알아보자.

1 minute read

자바스크립트에서 모든 값들은 참과 거짓으로 판단될 수 있다. 이번 포스팅에서 truthy와 falsy를 알아보자.

자바스크립트의 sort 함수를 살펴보자.

less than 1 minute read

자바스크립트의 정렬함수 sort를 살펴보자

Back to top ↑

React

useReducer와 useContext를 사용해서 전역 상태 관리를 해보자.

1 minute read

next app에 useReducer와 useContext를 사용해서 전역으로 상태 관리를 해보자

json에서 개행문자 사용하고 리액트에 삽입하기

less than 1 minute read

json에서 개행문자를 사용해보고, 리액트에서 개행문자를 그대로 갖고와서 사용해보자.

Next app의 기본 구조

1 minute read

next app의 기본 구조를 보면서 커스터마이징을 해보자.

Next app에 다국어 적용하기

2 minute read

next-i18next 모듈을 사용해서 next app에 다국어를 적용해보자.

React의 HoC 정리하기

1 minute read

리액트의 Higher order Component를 정리해보자.

React의 component와 pure component를 알아보자.

1 minute read

리액트 클래스 컴포넌트의 두 종류인 component와 pure component를 알아보자.

React의 라이프 사이클을 알아보자.

1 minute read

리액트의 라이프 사이클이 실행해보자.

react-router-dom을 활용해 SPA를 만들어보자.

2 minute read

싱글 페이지 애플리케션을 만들 수 있게 react-router-dom의 사용방법을 알아봅시다.

리액트 프로젝트에 sass와 css module 적용하기

1 minute read

리액트 프로젝트에 sass와 css module을 적용시켜 보자.

리액트 프로젝트에서 componentDidCatch를 통해 에러를 처리해보자

1 minute read

componentDidCatch를 통해서 에러가 발생했을 때 빈 화면이 아니라 에러 컴포넌트를 보여주자.

리액트의 setState 함수를 알아보자

1 minute read

클래스 컴포넌트에서 state 값을 바꾸는 setState 함수를 알아보자.

useReducer를 알아보자

2 minute read

hooks의 useReducer를 알아보고 사용해보자.

styled-components를 사용해보자

2 minute read

실전에서 사용할 수 있도록 styled-components의 주요 사용법들을 정리해봅시다.

useContext를 알아보자

less than 1 minute read

hooks의 useContext를 알아보고 사용해보자.

리액트의 hooks 살펴보기

1 minute read

hooks를 통해 함수 컴포넌트에서 state를 사용해보자.

Back to top ↑

Vue

로그인 시간 연장 기능 추가

1 minute read

Vue 프로젝트에서 로그인 시간 연장 기능 추가하기

Vue에서 v-slot 활용하기

3 minute read

Vue에서 v-slot을 활용해보자

vue 페이지에 타이틀 변경

less than 1 minute read

vue router에서 meta 속성을 활용해 페이지의 타이틀을 변경해보자.

권한에 따른 vue router 접근 제한 걸기

1 minute read

vue router에서 제공하는 가드를 활용해서 어드민, 클라이언트가 접근할 수 있는 페이지를 구분해보자.

input 값을 검증해보자.

1 minute read

vue router에서 제공하는 가드를 활용해보자.

vue에서 전역 가드, 라우터 가드, 컴포넌트 가드를 사용해보자.

2 minute read

vue router에서 제공하는 가드를 활용해보자.

vue에서 mixin을 통해 중복된 코드를 없애보자

1 minute read

vue-i18n 플러그인을 적용해 다국어 적용을 해보자.

vue로 다국어 적용(국제화) 하기

2 minute read

vue-i18n 플러그인을 적용해 다국어 적용을 해보자.

Back to top ↑

aws

express로 만든 앱에 https 적용하기

2 minute read

ec2로 만든 인스턴스에 express 앱을 배포했었습니다. 이제는 이 앱에 https를 적용시켜 보겠습니다.

ec2의 인스턴스에 express로 만든 앱을 deploy하기

1 minute read

express로 만든 앱을 ec2의 인스턴스에 배포해보도록 하겠습니다.

aws의 lightsail에서 ec2 인스턴스로 mongodb를 옮겨보자.

2 minute read

lightsail에서 mongodb 데이터를 ec2의 인스턴스로 옮겨보는 작업을 정리한 것입니다.

ec2로 만든 인스턴스에 mongodb를 설치해보자.

1 minute read

ec2로 만든 인스턴스에 mongodb 설치하는 것을 따라해봅시다.

ec2로 만든 인스턴스를 putty를 통해 접속해보자.

less than 1 minute read

putty를 통해서 우리가 만든 인스턴스에 접속해보도록 하겠습니다.

ec2를 이용해서 리눅스 인스턴스를 만들어보자.

1 minute read

aws의 대표적 기능인 ec2를 이용해서 인스턴스를 생성해보자.

Back to top ↑

nodejs

node-schedule 간단한 정리

1 minute read

node-schedule 설치와 실행 및 취소를 간단히 정리해보자.

nodejs 및 Next.js에서 간편하게 메일 기능 넣기

1 minute read

nodemailer를 통해서 node app에서 간편하게 메일기능을 구현해보자.

아임포트 사용하기

2 minute read

아임포트를 이용하여 결제 기능 구현하기

express에 robots.txt 삽입하기

less than 1 minute read

express 앱에 robots.txt를 삽입해보자.

express로 만든 앱에 https 적용하기

2 minute read

ec2로 만든 인스턴스에 express 앱을 배포했었습니다. 이제는 이 앱에 https를 적용시켜 보겠습니다.

ec2의 인스턴스에 express로 만든 앱을 deploy하기

1 minute read

express로 만든 앱을 ec2의 인스턴스에 배포해보도록 하겠습니다.

Back to top ↑

Raspberry-pi

우분투 로그인 시 커스텀 배너를 보여주자

less than 1 minute read

우분투 로그인에 성공했을 때 커스텀한 배너를 보여주자.

외부에서 라즈베리파이 접속하기(포트포워딩)

1 minute read

포트포워딩을 설정해서 외외부부에에서 라즈베리파이를 접속해보자

라즈베리파이에서 사용할 우분투 이미지 다운로드

1 minute read

우분투 공식 홈페이지에서 라즈베리파이에서 사용할 우분분투 이미지를 다운로드 해보자

라즈베리파이4에 파티션 확장

less than 1 minute read

라즈베리파이4에 파티션을 확장해보자

라즈베리파이4에 도커 설치하기

1 minute read

라즈베리파이4에 도커를 설치해보자

라즈베리파이4에 centos 설치하기

1 minute read

라즈베리파이4에 centos8 설치해서 개인 서버를 만들어 보자

Back to top ↑

nextjs

Next.js Data Fetching - getServerSideProps

2 minute read

Next.js의 공식문서에 Basic Features의 ‘Data Fetching’의 getServerSideProps 부분을 번역한 글입니다.

Next.js Data Fetching

less than 1 minute read

Next.js의 공식문서에 Basic Features의 ‘Data Fetching’ 부분을 번역한 글입니다.

Next.js Pages

6 minute read

Next.js의 공식문서에 Basic Features의 ‘Pages’ 부분을 번역한 글입니다.

Next.js Layout RFC

5 minute read

Next.js 블로그에 올라와있는 Layouts RFC에 대한 번역글입니다.

Getting Started

1 minute read

Next.js의 공식문서에 ‘Getting Started’ 부분을 번역한 글입니다.

Back to top ↑

docs

Next.js Data Fetching - getServerSideProps

2 minute read

Next.js의 공식문서에 Basic Features의 ‘Data Fetching’의 getServerSideProps 부분을 번역한 글입니다.

Next.js Data Fetching

less than 1 minute read

Next.js의 공식문서에 Basic Features의 ‘Data Fetching’ 부분을 번역한 글입니다.

Next.js Pages

6 minute read

Next.js의 공식문서에 Basic Features의 ‘Pages’ 부분을 번역한 글입니다.

Next.js Layout RFC

5 minute read

Next.js 블로그에 올라와있는 Layouts RFC에 대한 번역글입니다.

Getting Started

1 minute read

Next.js의 공식문서에 ‘Getting Started’ 부분을 번역한 글입니다.

Back to top ↑

git

깃의 브랜치 관련 명령어 알아보기

1 minute read

깃을 이용하는데 필요한 브랜치 관련 명령어를 알아보자.

깃의 기본 명령어 알아보기

1 minute read

깃을 이용하는데 필요한 기본 명령어를 알아보자.

마크다운의 문법을 사용해보자.

1 minute read

md 파일에서 자주 사용하는 마크다운의 문법을 알아보자.

원격 저장소 삭제하기

less than 1 minute read

원격 저장소를 삭제하고 새로운 원격저장소를 입력해보자.

Back to top ↑

DevOps

express로 만든 앱에 https 적용하기

2 minute read

ec2로 만든 인스턴스에 express 앱을 배포했었습니다. 이제는 이 앱에 https를 적용시켜 보겠습니다.

ec2의 인스턴스에 express로 만든 앱을 deploy하기

1 minute read

express로 만든 앱을 ec2의 인스턴스에 배포해보도록 하겠습니다.

ec2로 만든 인스턴스를 putty를 통해 접속해보자.

less than 1 minute read

putty를 통해서 우리가 만든 인스턴스에 접속해보도록 하겠습니다.

ec2를 이용해서 리눅스 인스턴스를 만들어보자.

1 minute read

aws의 대표적 기능인 ec2를 이용해서 인스턴스를 생성해보자.

Back to top ↑

Backend

http 프로토콜을 https 프로토콜로 리다이렉트 시키기

less than 1 minute read

http 프로토콜을 https로 리다이렉트 시켜보자.

express에서 사용자의 ip 주소 받기

less than 1 minute read

사용자의 ip주소를 받아보자.

데이터를 가지고 리다이렉트 하기

1 minute read

프론트엔드와 백엔드에서 각각 데이터를 가지고 리다이렉트 하는 방법을 알아보자.

express에서 쿠키로 값 저장하기

less than 1 minute read

익스프레스에서 쿠키를 통해서 정보를 저장해보자

Back to top ↑

CSS

div 태그, img 태그 이미지 비율 맞추기

less than 1 minute read

div태그와 img태그에 이미지를 비율에 맞게 넣어보자.

data-* 활용해서 html 데이터 가지고 오기

1 minute read

html 태그를 통해서 data를 가지고 오자.

open-color에서 색을 사용해보자.

less than 1 minute read

open-color 라이브러리에서 색을 추출해서 사용해보자.

css로 반응형 정사각형 만들기

less than 1 minute read

css로 반응형에도 계속 정사각형이 유지되도록 만들어보자.

Back to top ↑

centos

Linux에 NFS 설치하기

2 minute read

리눅스 서버에 NFS 설치하기

라즈베리파이4에 파티션 확장

less than 1 minute read

라즈베리파이4에 파티션을 확장해보자

라즈베리파이4에 도커 설치하기

1 minute read

라즈베리파이4에 도커를 설치해보자

라즈베리파이4에 centos 설치하기

1 minute read

라즈베리파이4에 centos8 설치해서 개인 서버를 만들어 보자

Back to top ↑

ubuntu

우분투 로그인 시 커스텀 배너를 보여주자

1 minute read

우분투 로그인에 성공했을 때 커스텀한 배너를 보여주자.

우분투 로그인 시 커스텀 배너를 보여주자

less than 1 minute read

우분투 로그인에 성공했을 때 커스텀한 배너를 보여주자.

외부에서 라즈베리파이 접속하기(포트포워딩)

1 minute read

포트포워딩을 설정해서 외외부부에에서 라즈베리파이를 접속해보자

라즈베리파이에서 사용할 우분투 이미지 다운로드

1 minute read

우분투 공식 홈페이지에서 라즈베리파이에서 사용할 우분분투 이미지를 다운로드 해보자

Back to top ↑

Nodejs

json-server로 1분만에 rest api 서버만들기 3

2 minute read

json-server-auth로 회원가입, 로그인 기능까지 완성해보자.

json-server로 1분만에 rest api 서버만들기 2

2 minute read

json-server로 투두 리스트의 rest api를 만들어보자.

json-server로 1분만에 rest api 서버만들기 1

1 minute read

파일을 정리하고 json-server 모듈을 다운로드 해보자.

express에 pug 템플릿 사용하기

2 minute read

express에 pug를 연결해보고 사용법을 알아보자

Back to top ↑

Google-Analytics

구글 애널리틱스의 획득 보고서 주요 단어를 정리해보자

1 minute read

사용자가 어디서 어떻게 들어왔는 지 알려주는 구글 애널리틱스의 획득 보고서에 나오는 주요 단어들을 정리해보자

구글 애널리틱스에 필터 적용시키기

2 minute read

구글 애널리틱스 내부에 필터를 적용시켜보자

구글 애널리틱스 시작하기

less than 1 minute read

구글 애널리틱스를 설치해보자

Back to top ↑

Database

mongoose에서 model의 name이 지어지는 법

less than 1 minute read

mongoose에서 model의 name이 어떻게 형성되는 지 알아보자.

mongoose에서 메서드 생성하기

less than 1 minute read

mongoose에서 메서드를 만들어서 이용해보자.

mongoose에서 objectId 체크하기

less than 1 minute read

mongoose의 objectId가 유효한 지 유효하지 않은 지를 확인해보자.

Back to top ↑

Next.js

nodejs 및 Next.js에서 간편하게 메일 기능 넣기

1 minute read

nodemailer를 통해서 node app에서 간편하게 메일기능을 구현해보자.

Next app의 기본 구조

1 minute read

next app의 기본 구조를 보면서 커스터마이징을 해보자.

Next app에 다국어 적용하기

2 minute read

next-i18next 모듈을 사용해서 next app에 다국어를 적용해보자.

Back to top ↑

REST api

json-server로 1분만에 rest api 서버만들기 3

2 minute read

json-server-auth로 회원가입, 로그인 기능까지 완성해보자.

json-server로 1분만에 rest api 서버만들기 2

2 minute read

json-server로 투두 리스트의 rest api를 만들어보자.

json-server로 1분만에 rest api 서버만들기 1

1 minute read

파일을 정리하고 json-server 모듈을 다운로드 해보자.

Back to top ↑

json-server

json-server로 1분만에 rest api 서버만들기 3

2 minute read

json-server-auth로 회원가입, 로그인 기능까지 완성해보자.

json-server로 1분만에 rest api 서버만들기 2

2 minute read

json-server로 투두 리스트의 rest api를 만들어보자.

json-server로 1분만에 rest api 서버만들기 1

1 minute read

파일을 정리하고 json-server 모듈을 다운로드 해보자.

Back to top ↑

database

ORM이란?

1 minute read

orm이 무엇인지, 왜 사용하는지를 알아보자

aws의 lightsail에서 ec2 인스턴스로 mongodb를 옮겨보자.

2 minute read

lightsail에서 mongodb 데이터를 ec2의 인스턴스로 옮겨보는 작업을 정리한 것입니다.

Back to top ↑

etc

base64 인코딩을 사용하는 이유

1 minute read

base64는 무엇인 지 base64 인코딩을 사용하는 이유는 무엇인 지 알아본다.

공유기 관리자 페이지 접속하기

less than 1 minute read

iptime 등 공유기 관리자 페이지 접속해보기

Back to top ↑

Blog

블로그를 시작합니다.

less than 1 minute read

공부한 것들과 공부하는 것들을 남기는 개발 블로그를 다시 시작합니다.

Back to top ↑

styled-components

styled-components를 사용해보자

2 minute read

실전에서 사용할 수 있도록 styled-components의 주요 사용법들을 정리해봅시다.

Back to top ↑

md

마크다운의 문법을 사용해보자.

1 minute read

md 파일에서 자주 사용하는 마크다운의 문법을 알아보자.

Back to top ↑

Redux

Redux Toolkit 흝어보기

3 minute read

Redux Toolkit을 흝어보자.

Back to top ↑

HTML

data-* 활용해서 html 데이터 가지고 오기

1 minute read

html 태그를 통해서 data를 가지고 오자.

Back to top ↑

Etc

아임포트 사용하기

2 minute read

아임포트를 이용하여 결제 기능 구현하기

Back to top ↑

Docker

라즈베리파이4에 도커 설치하기

1 minute read

라즈베리파이4에 도커를 설치해보자

Back to top ↑

i18n

Next app에 다국어 적용하기

2 minute read

next-i18next 모듈을 사용해서 next app에 다국어를 적용해보자.

Back to top ↑

json

json에서 개행문자 사용하고 리액트에 삽입하기

less than 1 minute read

json에서 개행문자를 사용해보고, 리액트에서 개행문자를 그대로 갖고와서 사용해보자.

Back to top ↑

Next

useReducer와 useContext를 사용해서 전역 상태 관리를 해보자.

1 minute read

next app에 useReducer와 useContext를 사용해서 전역으로 상태 관리를 해보자

Back to top ↑

React Hooks

useReducer와 useContext를 사용해서 전역 상태 관리를 해보자.

1 minute read

next app에 useReducer와 useContext를 사용해서 전역으로 상태 관리를 해보자

Back to top ↑

cron

node-schedule 간단한 정리

1 minute read

node-schedule 설치와 실행 및 취소를 간단히 정리해보자.

Back to top ↑

Book

UX/UI의 10가지 심리학 법칙

1 minute read

UX/UI를 만들 때에 생각해야할 심리학 법칙에 대해서 알아보자.

Back to top ↑

orm

ORM이란?

1 minute read

orm이 무엇인지, 왜 사용하는지를 알아보자

Back to top ↑

docker

우분투 로그인 시 커스텀 배너를 보여주자

1 minute read

우분투 로그인에 성공했을 때 커스텀한 배너를 보여주자.

Back to top ↑

docker-compose

우분투 로그인 시 커스텀 배너를 보여주자

1 minute read

우분투 로그인에 성공했을 때 커스텀한 배너를 보여주자.

Back to top ↑

html

ifram으로 form 응답값 받기

less than 1 minute read

form의 action이 post일 때 페이지를 이동하지 말고, iframe에서 응답을 받아보자.

Back to top ↑

npm

npm 모듈 만들기 - npm 가입 후 배포해보기

1 minute read

npm 모듈을 만들기 위해 npm에 가입해보고 배포를 경험해보자.

Back to top ↑

webpack

웹팩 개요

1 minute read

웹팩이 무엇인 지 어떻게 사용하는 지 간략하게 알아보자.

Back to top ↑

express

express에 pug 템플릿 사용하기

2 minute read

express에 pug를 연결해보고 사용법을 알아보자

Back to top ↑

pug

express에 pug 템플릿 사용하기

2 minute read

express에 pug를 연결해보고 사용법을 알아보자

Back to top ↑

package.json

package.json과 package-lock.json

2 minute read

package-lock.json을 꼭 커밋하세요 배포시에도 꼭 필요합니다.

Back to top ↑

package-lock.json

package.json과 package-lock.json

2 minute read

package-lock.json을 꼭 커밋하세요 배포시에도 꼭 필요합니다.

Back to top ↑

배포

package.json과 package-lock.json

2 minute read

package-lock.json을 꼭 커밋하세요 배포시에도 꼭 필요합니다.

Back to top ↑

json-server-auth

json-server로 1분만에 rest api 서버만들기 3

2 minute read

json-server-auth로 회원가입, 로그인 기능까지 완성해보자.

Back to top ↑

env

env-cmd로 빌드 시 환경변수 분기 나누기

less than 1 minute read

빌드 시에 환경변수 분기를 왜 나눠야 하는 지 어떻게 나눌 수 있는 지 알아보자.

Back to top ↑

nfs

Linux에 NFS 설치하기

2 minute read

리눅스 서버에 NFS 설치하기

Back to top ↑

linux

Linux에 NFS 설치하기

2 minute read

리눅스 서버에 NFS 설치하기

Back to top ↑