Posts by Category -

모던웹(NEMV) 제작 하기 보너스편 시작합니다. [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide ...

모던웹(NEMV) 혼자 제작 하기 3기 - 89 활용편 정리

3 분 소요

모던웹(NEMV) 제작 하기 활용편 정리합니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 88 게시물에 댓글 추가하기

8 분 소요

게시물에 댓글을 추가해봅니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 87 위지웍 에디터 사용하기(toast ui editor)

2 분 소요

위지웍 에디터를 사용해서 글을 작성해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 86 사용자 정보 표시하기

1 분 소요

간단하게 사용자 정보를 화면에 표시해봅니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 85 이미지 컴포넌트로 업로드하기(filepond)

2 분 소요

업로드 콤포넌트를 이용해서 이미지를 업로드해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 84 이미지 변환하기(base64, sharp)

5 분 소요

이미지 업로드 후 디비 저장까지 하려면 무엇이 필요한지 알아봅니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 83 파일 업로드 하기(multer)

2 분 소요

파일 업로드 미들웨어인 멀터(multer)를 이용해 서버에 파일을 전송해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 82 대시보드 꾸며보기

6 분 소요

대시보드에 적절한 위젯들을 배치하고 꾸며봅니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 81 대시보드 게시판 다르게 표현하기

2 분 소요

게시판 데이터를 활용해서 다른 표현을 해보도록 하겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 80 구글 애널리틱스로 사이트 접속 현황 파악하기

1 분 소요

구글 애널리틱스로 사이트 분석을 해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 79 보안연결(ssl) 적용하기

4 분 소요

보안연결을 구성하여 https로 접속 해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 78 고급편 정리

2 분 소요

지금까지 했던 것들을 복습 겸 정리해봅니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 77 구글 리캡챠로 로봇 막아보기(recaptcha)

4 분 소요

구글에서 제공하는 리캡챠(recaptcha)를 이용하여 로봇을 막아보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 76 반응형 게시판 만들기

최대 1 분 소요

모바일, 태블릿, 데스크탑등의 다양한 장에서 적절하게 표현되게 변경해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 75 HTTP 예외처리 제대로 하기

4 분 소요

공식 HTTP 에러코드에 맞는 결과를 전송해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 74 공용 알림 메세지 만들기(vuex)

1 분 소요

모든 페이지에 있는 알림 메세지 처리를 한 곳에서 해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 73 게시판 재활용하기(뷰라우터)

3 분 소요

만들어진 게시판 하나로 여러개를 운영해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 72 게시판 페이징과 정렬 처리하기

6 분 소요

게시판 페이징과 정렬 처리를 해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 71 게시판 내용 수정과 삭제

2 분 소요

선택된 게시물의 수정과 삭제를 구현해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 70 게시판 내용 읽기

2 분 소요

게시판 목록과 내용을 분리해서 읽어보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 69 게시판 뷰티파이 테이블 사용하기

2 분 소요

뷰티파이의 데이터테이블(v-datatable)을 이용해서 화면에 표시해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 68 게시판 게시물 쓰고 읽기

1 분 소요

게시물(article) API CRUD중 게시판 정보가 필요한 CR(Create Read)를 프론트에서 확인해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 67 게시판 게시물 API 만들기

3 분 소요

게시물 CRUD를 할 수 있게 API를 만들어 보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 66 게시판 정보 읽기

3 분 소요

게시물들을 가져오기 위해 먼저 게시판 정보를 가져와보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 65 게시판을 위한 메뉴 구성

2 분 소요

편의를 위해 메뉴를 구성해서 게시판 진입하도록 하겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 64 게시판 모델 만들기(populate)

1 분 소요

게시물들은 누가 썼는지, 어느 게시판인지가 제일 중요합니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 63 게시판 관리 만들기

5 분 소요

일반적으로 운영할 게시판을 만드려면 무엇이 필요한지 생각해봅니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 62 로그인 시간 제한하기(토큰 갱신)

7 분 소요

토큰 생성시 만료시간 없이 만들 었기 때문에 브라우저 로컬스토리지에 토큰이 남아있다면 100년이 지나도 로그인이 가능합니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 61 시간 계산하기(moment)

1 분 소요

시간 2월28일 23:50:55 에서 1시간이 더해지면 어떤 시간일까요?

모던웹(NEMV) 혼자 제작 하기 3기 - 60 뷰 컴포넌트 사용하기

5 분 소요

뷰의 특장점중 하나인 콤포넌트에 대해 알아보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 59 비밀번호 암호화하기

7 분 소요

비밀번호를 평문이 아닌 암호화된 문자로 저장해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 58 사용자편 정리

2 분 소요

응용편: 사용자를 마칩니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 57 회원가입 완성하기

최대 1 분 소요

백엔드를 만들어서 만들어둔 프론트와 연동시켜보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 56 회원가입 프론트 적용하기

2 분 소요

뷰티파이 예제로 만들고 있는 모델에 맞게 수정해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 55 회원가입 유효성 판단

2 분 소요

뷰티파이 폼을 이용해 회원가입을 간단하게 만들어보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 54 한 소스로 사이트 다르게 사용하기

4 분 소요

현재 소스를 가지고 다른 사람이 사용하려면 코드 수정이 필요합니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 53 새로고침 없이 로그인 하기(by 인터셉터)

1 분 소요

매번 요청시 코드 신경쓰지 않으면서 토큰을 매번 날리도록 만들어보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 52 모든 요청 토큰 설정으로 접근 막기

1 분 소요

매번 액시오스로 api 요청을 할 때마다 헤더에 토큰을 넣어야 작동하는 부분을 사전 정의해서 생략해봅니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 51 백엔드로 페이지 권한 얻기

3 분 소요

토큰 유무만 가지고 화면 보안 접근을 하는 것은 역시 위험합니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 50 사용자 및 페이지 관리하기

8 분 소요

사용자를 자동으로 만들어 주긴 하지만 권한등을 코드에서 제어하기 불편합니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 49 뷰저장소(vuex) 이정도만 쓰자

2 분 소요

토큰 유무에 따라 로그인/아웃 상태를 전체 페이지에서 판단할 수 있는 뷰저장소에 대해 알아봅니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 48 로그인 해야 들어갈 수 있는 페이지 만들기(네비게이션 가드)

2 분 소요

로그인 해야만 진입할 수 있는 페이지를 만들어보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 47 토큰 인증하기

1 분 소요

프론트에 토큰을 저장해서 매번 토큰과 함께 요청을 해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 46 실제 데이터로 로그인하기

1 분 소요

이제 실제 데이터로 로그인을 해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 45 사용자 모델 정리하기

1 분 소요

기존에는 name, age 로만 테스트 했으니 로그인이 가능할 모델로 변경합니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 44 로그인 간단히 만들어보기

1 분 소요

간단하게 로그인 프론트와 백엔드가 잘 통신하는 지 확인해봅니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 43 사이트 저장소 다루기

1 분 소요

서버로 부터 토큰을 받아서 저장해놔야 다음에 로그인 없이 api요청이 가능합니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 42 HTTP 헤더 알아보기

1 분 소요

토큰을 보낼 때는 HTTP 헤더(header)를 통해 전송하는 것이 일반적입니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 41 프라미스(promise) 어씽크(async) 이정도만 하자!

6 분 소요

비동기식 언어인 자바스크립트의 불편함을 해소해주는 프라미스(promise), 어씽크(async)에 대해 설명합니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 40 토큰(JWT)이란?

2 분 소요

토큰(JWT)에 대해 간단히 알아봅니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 39 API 미들웨어란?

1 분 소요

API 미들웨어에 대해 간단히 알아봅니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 38 깃헙에서 안보이는 설정파일 만들기

1 분 소요

설정파일을 사용하는 방법에 대해 알아보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 37 몽고 클라우드(ATLAS) 가입 및 테스트

1 분 소요

몽고디비 클라우드 서비스인 아틀라스를 가입 후 테스트 까지 해봅니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 36 서버 오토스케일 정리

4 분 소요

지난강좌의 싱글서버로 개발은 충분합니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 35 pm2로 실제 서버에 배포하기

2 분 소요

개발피씨에서 pm2는 사실 켜둘 필요가 없습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 34 pm2로 안정적인 서버 만들기

2 분 소요

npm start, yarn dev, node ./bin/www 등으로 실행하였고 끌 때는 ctrl+c로 종료했습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 33 배포를 위한 개발환경 설정

3 분 소요

지금까지 3000포트를 사용하여 테스트를 했습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 32 클라우드 서버 디비 설치 및 테스트

2 분 소요

서버가 개발했을 때와 같이 동작하게 하려면 얀, 몽고디비를 설치해야합니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 31 클라우드 서버 깃 설치 및 테스트

1 분 소요

깃 설치하고 ssh방식으로 소스를 다운로드 받는 방법입니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 30 클라우드 서버 노드 설치

최대 1 분 소요

리눅스 서버에 모던웹을 서비스할 수 있도록 요소들을 설치해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 29 클라우드 서버 리눅스 다루기

1 분 소요

서버 구성을 위해 필요한 최소한의 리눅스 지식을 정리해봤습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 28 클라우드 서버 만들기

1 분 소요

클라우드 서버(인스턴스)를 만들고 접속하는 방법을 설명합니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 27 클라우드 서버 가입하기

1 분 소요

이제부터 3부 응용편 시작합니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 응용 서버편 시작

1 분 소요

모던웹 응용 서버편 시작합니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 26 기본편 정리

1 분 소요

기초편에 이어 14~26까지 기본편 한번 달려봤습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 25 API와 프론트 통신 정리

4 분 소요

지난 강좌에 이어서 CRUD 중 UD 즉 수정, 삭제를 해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 24 api와 몽구스 연결

1 분 소요

이제 디비를 조작할 수 있으니 api에서 실제 디비데이터로 몽구스(mongoose)를 사용해서 CRUD 중 CR 즉 쓰고 읽기를 해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 23 몽구스 설치 및 확인

2 분 소요

노드에서 몽고디비를 사용하는 방법은 여러가지 입니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 22 몽고디비 설치 확인

최대 1 분 소요

몽고디비 셸로 설치 확인하기

모던웹(NEMV) 혼자 제작 하기 3기 - 21 몽고디비 설치

최대 1 분 소요

몽고디비 로컬에 설치해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 20 RESTful한 api 만들기

2 분 소요

REST(Representational State Transfer)는 구글링해보면 잘 나와 있지만 대체 뭔소린지 알아먹기가 힘드실 겁니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 19 axios 사용하기

1 분 소요

프론트에서 api를 통해 데이터를 받아서 화면을 변경해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 18 api 설정하기

최대 1 분 소요

깃헙에 올린 새 프로젝트에서 api 설정하는 것을 다시 정리해봅니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 17 SPA란

1 분 소요

웹사이트를 처음 만드시는 분들도 있기 때문에 SPA에 대해 간략하게 설명해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 16 깃 사용하기

1 분 소요

지금까지 프로젝트를 깃을 사용해 다시 만들어 보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 15 뷰티파이 레이아웃

2 분 소요

모던웹, 즉 현대적인 웹에서 가장 큰 부분을 담당하는 반응형에 대한 이야기입니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 14 자바스크립트 기본

8 분 소요

이제부터 기본편 시작합니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 13 자바스크립트 언어 사용 시작에 대해

4 분 소요

현재 진행중인 모던웹 NEMV, 즉 노드, 익스프레스, 몽고디비, 뷰 모두 자바스크립트를 기반으로 합니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 12 뷰티파이 콤포넌트 사용해보기

2 분 소요

뷰티파이의 콤포넌트(버튼, 칩)를 사용해서 화면 처리를 위한 연습을 해봅니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 11 익스프레스와 뷰라우터

1 분 소요

뷰 라우터의 히스토리모드 이해와 백엔드 라우터의 연결에 대해 알아보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 10 뷰티파이 메뉴 추가

최대 1 분 소요

뷰티파이 기본 설치된 상태에서 페이지 추가해서 브라우저로 확인해보도록 하겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 9 뷰티파이 수정

최대 1 분 소요

뷰티파이 기본 설치된 파일을 수정해서 브라우저로 확인해보기

모던웹(NEMV) 혼자 제작 하기 3기 - 8 익스프레스와 뷰티파이 연동

1 분 소요

전 강좌에서 yarn serve로 실행한 http://localhost:8080은 뷰 개발모드입니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 7 뷰티파이 설치

2 분 소요

뷰티파이 설치에 대해 알아보기

모던웹(NEMV) 혼자 제작 하기 3기 - 6 뷰티파이란

최대 1 분 소요

뷰티파이라는 CSS프레임워크에 대해 간략히 소개합니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 5 익스프레스 라우터

1 분 소요

생성된 익스프레스 소스에 라우터, 페이지를 추가해봅니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 4 익스프레스 수정

1 분 소요

생성된 익스프레스 소스를 수정해서 웹서버 동작 확인해보겠습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 3 익스프레스 설정

최대 1 분 소요

익스프레스 설치 및 약간의 설명입니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 2 노드 설치

최대 1 분 소요

node.js 설치 및 약간의 설명입니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 1 에디터 설치

최대 1 분 소요

너무 쉬운 에디터(Atom) 설치이지만, 처음 부터 하는 느낌으로 만들어봤습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 영상화

2 분 소요

NEMV(Node.js, Express.js, MongoDB, Vue.js)를 이용해 웹사이트를 한번에 제작하는 강좌를 만들어왔었는데요..

NEMV 5 - vue.js 설치

2 분 소요

이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌

NEMV 4 - node.js & express & mongoDB 설치

2 분 소요

이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌

NEMV 3 - git 등록

2 분 소요

이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌

NEMV 2 - API 설계

최대 1 분 소요

이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌

NEMV 1 - 소개

1 분 소요

이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌

NEMVV 5 계정 api

3 분 소요

이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌

NEMVV 4 계정 모델링

1 분 소요

이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌

NEMVV 3 웹서버 구동

3 분 소요

이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌

NEMVV 2 전역파일

최대 1 분 소요

이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌

NEMVV 1 설정파일

1 분 소요

이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌

NEMVV 0 vuetify로의 전환

2 분 소요

이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌

NPM에 모듈 등록해보기

4 분 소요

NPM 에 모듈을 만들어 등록해보겠습니다.

npm unorm

1 분 소요

맥의 기묘한 외국어 저장 방식으로 인해 한글 깨짐 현상을 극복해본다.

npm del

1 분 소요

파일 처리를 많이 하다보니 디렉토리를 몽땅 날려야하는 상황이 종종 있다.

npm geoip

최대 1 분 소요

현재 웹사이트를 미국에서도 쓰고.. 프랑스에서도 쓰고 독일에서도 쓸 때 개발자라면 어떻해야할까?

npm pug

최대 1 분 소요

html 해본 사람이라면 코딩할 때 정말 짜증나는 것이 있다면

npm intro

최대 1 분 소요

이제부터 npm으로 패키지를 사용할 때 마다 리뷰를 해보기로 했다..

NUXT로 혼자 웹사이트 만들기 15 파이어베이스(firebase) 리캡챠(recaptcha v3) 사용하기

3 분 소요

넉스트(nuxt) 와 파이어베이스 펑션스 (firebase functions)로 리캡챠(recaptcha v3)를 사용해봅니다.

NUXT로 혼자 웹사이트 만들기 14 파이어베이스(firebase) 인증 기능 라우팅해보기

1 분 소요

파이어베이스 인증 상태에 따라 페이지 전환을 해보겠습니다.

NUXT로 혼자 웹사이트 만들기 13 파이어베이스(firebase) 인증 기능 화면 표시하기

1 분 소요

파이어베이스 인증 기능을 넉스트 저장소(vuex)를 이용해 표현해봅니다.

NUXT로 혼자 웹사이트 만들기 12 파이어베이스(firebase) 인증 기능 토큰 알아보기

2 분 소요

파이어베이스 인증 기능중 토큰에 대해 알아봅니다.

NUXT로 혼자 웹사이트 만들기 11 파이어베이스(firebase) 인증 기능(email&password) 사용하기

1 분 소요

파이어베이스 인증기능중 이메일+비밀번호를 사용해서 로그인해봅니다.

NUXT로 혼자 웹사이트 만들기 10 파이어베이스(firebase) 파이어스토어(firestore) 페이징(paging)처리하기

1 분 소요

파이어스토어를 이용해서 페이징처리를 해봅니다.

NUXT로 혼자 웹사이트 만들기 9 파이어베이스(firebase) 파이어스토어(firestore) CRUD 해보기

2 분 소요

파이어스토어를 이용해서 CRUD 를 시험해보겠습니다.

NUXT로 혼자 웹사이트 만들기 8 파이어베이스(firebase) 펑션스(functions) 시작하기

4 분 소요

파이어베이스 펑션스를 이용해서 API를 간단히 구현해봅니다.

NUXT로 혼자 웹사이트 만들기 7 닷엔브(dotenv)로 파이어베이스 프로젝트 정리하기

4 분 소요

넉스트 프로젝트에서 닷엔브로 파이어베이스를 사용하기 위한 설정을 해보겠습니다.

NUXT로 혼자 웹사이트 만들기 6 firebase로 데이터베이스(firestore) 사용하기

1 분 소요

파이어베이스의 noSQL 데이터베이스인 firestore를 파이어베이스 호스팅 환경에서 사용해봅니다.

NUXT로 혼자 웹사이트 만들기 5 firebase로 hosting해보기

3 분 소요

넉스트(nuxt) 소스를 파이어베이스 호스팅(google firebase hosting)을 이용해서 배포(deploy)해봅니다.

NUXT로 혼자 웹사이트 만들기 4 플러그인 설치

2 분 소요

전역으로 사용할 플러그인 설치에 대해 알아봅니다.

NUXT로 혼자 웹사이트 만들기 3 라우팅

2 분 소요

서버사이드 렌더링도 중요하지만, 기존에 하던 동적 화면 전환이 잘 되는 것이 더 중요합니다.

NUXT로 혼자 웹사이트 만들기 2 설치

3 분 소요

NUXT를 설치하고 간단히 구조를 알아봅니다.

NUXT로 혼자 웹사이트 만들기 1 소개

1 분 소요

항상 고민하던 부분이 있습니다.

데이터베이스 사용 및 팁

7 분 소요

저는 전산쪽과 1%도 상관이 없는 사람인데 어떠한 계기로 데이터베이스를 쓰게 되었습니다.

mariaDB(mySQL) Server 설치

3 분 소요

간만에 mysql 쓸 일이 있어서 기억을 저장해봅니다.

Server log

최대 1 분 소요

서버를 구성하여 러닝 시키는 것은 간단하지만 운영과 유지보수가 어려운데, 그 이유중 하나가 보안이다.

Monitoring System

2 분 소요

서버를 구성할 때 가장 유의해야할 것은 유지보수라고 할 수 있다.

SSL server setting

1 분 소요

https로 구현된 사이트는 최근에는 중요한 가치를 가진다.

Vue와 Firebase로 모던웹사이트 만들기 소개

6 분 소요

Vue & Firebase에 대해 간단히 소개합니다.

Vue와 Firebase로 모던웹사이트 만들기 강좌 시작

1 분 소요

넉스트(nuxt) 사용 후기

2 분 소요

넉스트를 사용하면서 강좌를 하고 있는 이유는 실무에 실제 반영해보고, 좀 더 빠른 개발의 길로 이끌어 보고 싶은 마음에서 였습니다.

일렉트론 앱 제작 후기

2 분 소요

최근에 데스크탑 앱을 하나 만들어서 배포했습니다.

Electron native module 사용하기

최대 1 분 소요

electron-vue(vue-cli2)로 제작되었던 앱을 vue-cli3플러긴 일렉트론 버전(vue add electron-builder)으로 마이그레이션을 하다보니 생각보다 괴로운 부분이 많았습니다..

최근 개발 흐름 따라가보기

8 분 소요

최근 일이 좀 바빠져서 강좌를 쉬고 있습니다.

Vuetify(뷰티파이) cli 변경 문제

2 분 소요

뷰티파이가 1.3.2 에서 갑자기 설치되는 기본 홈 모양을 바꿨습니다…

Vuetify(뷰티파이) 1.3 릴리즈 소식

1 분 소요

기다리던 뷰티파이가 드디어 1.3 릴리즈가 오늘 떴습니다.

모던웹(NEMV) 혼자 제작 하기 3기 - 신기능 소개

7 분 소요

회사에서 새로운 프로젝트를 시작하게 되었습니다.

잠시 지나가며 끄적

최대 1 분 소요

최근에 일이 좀 생겨서 강좌 진도가 너무 안나갔네요..

NEMBV 새로운 솔루션 공개 예고

2 분 소요

이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌

Weapons(개발무기들)

3 분 소요

대부분의 시간을 모니터, 키보드, 마우스와 함께 하는 개발자는 하드웨어와 소프트웨어가 중요하다.

일일일(잡담)

3 분 소요

지난 한달간 정말 미친듯이 일에 달려들었다..

DBA

2 분 소요

DBA는 위키에 아래와 같이 나와있다.

database 안정성

1 분 소요

noSQL mongoDB를 사용하며 사람들로 부터 가장 많이 들은 부분은 안정성이었다.

variable(변수) 사용

2 분 소요

프로그래밍이 어려운 이유중 가장 큰 것은 변수라고들 한다.

bootstrap의 대안

최대 1 분 소요

한동안 vue.js 파느라 즐거웠다.

full-stack

1 분 소요

풀스택 개발자란 말을 요새 종종 듣는 데…

GTD(시간 관리)

5 분 소요

GTD란 데이비드 앨런(David Aallan)의 책, 할 일 관리(Getting Things Done, GTD)라는 것이다. 개인이 효율적으로 시간을 관리하여 자신이 하고자 하는 일을 깔끔하게 해결하는 방법을 정리했다. 2001년에 처음 출판된 이후, IT 개발자들에게 열...

Again posting

1 분 소요

간만에 다시 기록해본다.

가산 GSM Test 후기

최대 1 분 소요

해외에 디바이스를 팔려면 팔 곳에 가서 만들고 테스트하면 되지만..

New language

3 분 소요

나는 어쩌다 보니 몇가지 언어를 쓰고 있게 되었다..

Hello world

최대 1 분 소요

오늘부터 다시! 개발일지를 작성하려한다..

Firebase functions에서 mongodb atlas에 접속하기

5 분 소요

Firebase functions에서 mongodb atlas에 접속하는 방법을 다룹니다.

Vue와 Firebase로 모던웹사이트 만들기 52 firebase storage 사용해보기

최대 1 분 소요

firebase storage 기능을 사용해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 51 사용자 권한 변경하기

최대 1 분 소요

사용자 권한 변경은 단순하지만 종합 선물세트 지식이 필요합니다. firebase(functions, auth, store), vue(component), vuetify(v-select), axios, RESTful API등.. 찬찬히 지금 것들을 되짚어 봅니다~

Vue와 Firebase로 모던웹사이트 만들기 50 회원관리 모양 내보기

최대 1 분 소요

vuetify의 v-data-iterator를 사용해서 기존 테이블 방식을 변경해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 49 검색어 필터 만들어보기

최대 1 분 소요

vuetify의 v-autocomplete로 검색어 필터를 사용해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 48 파이어스토어 검색해보기

최대 1 분 소요

firestore의 where와 vuetify의 v-combobox를 이용해 email검색을 해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 47 파이어스토어 정렬해보기

최대 1 분 소요

firestore 의 orderBy와 vuetify v-data-table을 이용해 정렬을 해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 46 파이어스토어 페이징해보기

최대 1 분 소요

firestore의 offset, limit를 사용해서 vuetify의 v-data-table로 페이징을 구현해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 45 파이어스토어 컬렉션의 전체 개수 구하기

최대 1 분 소요

firestore와 functions의 조합으로 컬렉션의 전체 개수 정보를 저장해둡니다.

Vue와 Firebase로 모던웹사이트 만들기 44 파이어베이스 함수에서 파이어스토어 사용하기

최대 1 분 소요

파이어베이스 함수(functions)에서 기본 인증으로는 firebase serve –only functions로는 위험하기 때문에 파이어스토어 데이터에 접근할 수 없습니다. 해당 키를 가져와서 프론트에서 데이터를 받아봅니다.

Vue와 Firebase로 모던웹사이트 만들기 43 파이어베이스 함수에서 권한 확인하기

최대 1 분 소요

파이어베이스 함수(functions)에서 토큰을 확인하고 풀어헤친 토큰정보(claims)로 권한에 따른 결과를 보냅니다.

Vue와 Firebase로 모던웹사이트 만들기 42 뷰라우터로 권한별 페이지 접근하기

최대 1 분 소요

firebase의 토큰 권한 정보(claims.level)로 사용자의 접근을 차단해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 41 파이어베이스 인증 라우터 지연시키기

최대 1 분 소요

firebase auth onAuthStateChanged 에서 페이지 이동을 시키는 방법은 잘못되었습니다. 파이어베이스 인증 상태 후의 행동이 중요하므로 다른 방법으로 지연시켜봤습니다.

Vue와 Firebase로 모던웹사이트 만들기 40 firestore에 사용자 정보 추가 삭제하기

최대 1 분 소요

firebase auth로 추가/삭제된 이벤트를 firebase functions에서 받아서 firestore에 추가/삭제합니다.

Vue와 Firebase로 모던웹사이트 만들기 39 권한으로 페이지 강제 이동시키기

최대 1 분 소요

vue-router로 권한에 따라 페이지를 이동시킵니다.

Vue와 Firebase로 모던웹사이트 만들기 38 firebase token 풀어보기

최대 1 분 소요

사용자별 화면 표시를 위해 사용자 데이터를 넣은 토큰을 풀어봅니다~

Vue와 Firebase로 모던웹사이트 만들기 37 firebase functions 맞춤 사용자 설정하기

최대 1 분 소요

firebase auth 정보에 사용자 레벨을 추가합니다.

Vue와 Firebase로 모던웹사이트 만들기 36 firebase functions 환경변수 사용하기

최대 1 분 소요

관리자 계정 생성을 위해 firebase functions 환경변수를 이용해서 관리자 계정을 지정해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 35 vuetify2로 업그레이드하기

최대 1 분 소요

vuetify V1 to V2로 업그레이드 해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 34 이메일로 가입과 로그인해보기

최대 1 분 소요

파이어베이스 인증(firebase authentication)을 기능중 이메일로 가입과 로그인을 해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 33 v-form으로 유효성 검사하기

최대 1 분 소요

vuetify의 v-form으로 유효성 판단을 해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 32 회원가입 모양 내보기

최대 1 분 소요

vue componet 통신을 이용해 회원가입과 로그인 화면을 토글시켜봅니다.

Vue와 Firebase로 모던웹사이트 만들기 31 로그인 상태 만들어보기

최대 1 분 소요

vuetify의 v-menu, v-avatar등을 이용해서 로그인 상태 정보를 표현해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 30 로딩 상태 표시하기

최대 1 분 소요

vue-progressbar를 이용해서 로딩 상태를 표시해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 29 뷰라우터 네비게이션 가드 사용하기

최대 1 분 소요

뷰라우터(vue-router)를 이용해서 로그인 상태에 따라 페이지 접근을 막거나(navigation guard) 이동시킵니다.

Vue와 Firebase로 모던웹사이트 만들기 28 로그인 화면 모양 내보기

최대 1 분 소요

뷰티파이(vuetify)를 이용해서 로그인 화면을 만들어 보는 시간을 가져봅니다. 미세한 UI 조절에 고통받는 모습은 아마 누구나 마찬가지 일듯..

Vue와 Firebase로 모던웹사이트 만들기 27 firebase 인증(auth)정보를 vuex 로 저장

최대 1 분 소요

인증정보인 user 와 token 을 vuex 저장소에 저장해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 26 뷰엑스(vuex)로 전역 제어하기

최대 1 분 소요

vuex를 사용해서 전역 변수를 제어해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 25 뷰(vue) 컴포넌트(component) 알아보기

최대 1 분 소요

vue component 사용법을 간단히 알아봅니다.

Vue와 Firebase로 모던웹사이트 만들기 24 인증을 위한 미들웨어와 액시오스 설정하기

최대 1 분 소요

파이어베이스 함수(functions)를 사용할 때 가장 주의해야할 것은 보안입니다. 인증된 요청만 받아들이기 위한 미들웨어와 액시오스 설정에 대해 알아봅니다.

Vue와 Firebase로 모던웹사이트 만들기 23 firebase functions 공용 에러 처리

최대 1 분 소요

백엔드(firebase functions)에서 에러처리를 해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 22 vue 공용 error 처리하기

최대 1 분 소요

추후 비동기 함수(async)를 편하게 사용하기위해 공용 에러 처리를 해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 21 firebase functions vue에서 axios로 접근하기

최대 1 분 소요

파이어베이스 함수(functions)에 등록한 express api에 front(vue + axios)로 접근해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 20 firebase functions RESTful api 만들기

최대 1 분 소요

파이어베이스 펑션스를 이용해서 REST API를 구현해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 19 firebase functions 알아보기

최대 1 분 소요

파이어베이스의 서버리스 백엔드 역할을 해주는 firebase functions에 대해 알아보고 설치해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 18 firebase 인증(auth) 로그인 해보기

최대 1 분 소요

파이어베이스 인증을 이용해서 구글과 이메일 로그인을 해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 17 firestore crud 해보기

최대 1 분 소요

firestore로 데이터베이스의 기본행위인 CRUD를 해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 16 firestore 설정하기

최대 1 분 소요

프론트에서 firestore 사용할 수 있도록 설정해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 15 vuetify로 노트 만들기

최대 1 분 소요

데이터베이스(firestore)를 다루기 위해 프론트를 구성해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 14 promise 알아보기

최대 1 분 소요

데이터베이스 처리하기에 앞서 프라미스 사용법에 대해 간단히 알아보고 넘어갑니다.

Vue와 Firebase로 모던웹사이트 만들기 13 vuetify 반응형웹 구현하기

최대 1 분 소요

v-container, layout, flex 3종세트로 반응형웹을 구현해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 12 vuetify로 카드 만들기

최대 1 분 소요

화면 구성의 기본인 v-card를 사용해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 11 vuetify로 하위 메뉴 구성하기

최대 1 분 소요

vuetify list-group 을 사용해 하위 메뉴를 구성해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 10 vuetify로 네비게이션 드라워만들기

최대 1 분 소요

툴바 메뉴 클릭시 v-navigation-drawer를 표시해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 9 vuetify로 리스트 만들기

최대 1 분 소요

vuetify/vList를 사용해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 8 vuetify로 툴바 만들기

최대 1 분 소요

vuetify를 이용해서 상단 툴바를 만들어봅니다.

Vue와 Firebase로 모던웹사이트 만들기 7 vue 맛보기

최대 1 분 소요

vue가 무엇인지 이해하고 넘어갑니다.

Vue와 Firebase로 모던웹사이트 만들기 6 git 다운로드 받기

최대 1 분 소요

강좌 소스 활용을 위해 git clone 과 checkout에 대해 알아봅니다.

Vue와 Firebase로 모던웹사이트 만들기 5 SPA 알아보기

최대 1 분 소요

SPA가 무엇인지 알아보고 vue-router로 구현해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 4 git 사용하기

최대 1 분 소요

git에 대해 알아보고 필요한 만큼만 사용해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 3 사이트 배포하기

최대 1 분 소요

firebase hosting을 이용해서 사이트를 배포해봅니다.

Vue와 Firebase로 모던웹사이트 만들기 2 에디터 설정하기

최대 1 분 소요

뷰(vue)에 최적화된 에디터(vscode) 설정을 합니다.

Vue와 Firebase로 모던웹사이트 만들기 1 개발환경 구축하기

1 분 소요

개발에 필요한 요소들을 설치합니다.

Vue와 Firebase로 모던웹사이트 만들기 소스코드 사용 방법

최대 1 분 소요

진행되는 강좌는 세월의 흐름에 따라 동작이 다를 수 있습니다.

memi

Posts by Category

book

communication

design

electron

ff

flutter

github

javascript

linux

mobile

mongoDB

nembv

nemv