Flutter Tip - 유용한 vscode extension
Flutter 코딩시 유용한 툴들을 정리해봅니다.
Posts by Tags
Awesome Flutter Snippets
WYSIWYG
모던웹(NEMV) 혼자 제작 하기 3기 - 89 활용편 정리
모던웹(NEMV) 제작 하기 활용편 정리합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 88 게시물에 댓글 추가하기
게시물에 댓글을 추가해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 87 위지웍 에디터 사용하기(toast ui editor)
위지웍 에디터를 사용해서 글을 작성해보겠습니다.
analytics
모던웹(NEMV) 혼자 제작 하기 3기 - 80 구글 애널리틱스로 사이트 접속 현황 파악하기
구글 애널리틱스로 사이트 분석을 해보겠습니다.
android
앱(iOS Android) 둘 다 만들기 - 하이브리드 vs 네이티브 앱 선택
앱을 시작해야되는 상황이 왔습니다.
api
모던웹(NEMV) 혼자 제작 하기 3기 - 62 로그인 시간 제한하기(토큰 갱신)
토큰 생성시 만료시간 없이 만들 었기 때문에 브라우저 로컬스토리지에 토큰이 남아있다면 100년이 지나도 로그인이 가능합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 61 시간 계산하기(moment)
시간 2월28일 23:50:55 에서 1시간이 더해지면 어떤 시간일까요?
모던웹(NEMV) 혼자 제작 하기 3기 - 39 API 미들웨어란?
API 미들웨어에 대해 간단히 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 20 RESTful한 api 만들기
REST(Representational State Transfer)는 구글링해보면 잘 나와 있지만 대체 뭔소린지 알아먹기가 힘드실 겁니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 19 axios 사용하기
프론트에서 api를 통해 데이터를 받아서 화면을 변경해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 18 api 설정하기
깃헙에 올린 새 프로젝트에서 api 설정하는 것을 다시 정리해봅니다.
NEMVV 5 계정 api
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 20 jwt를 이용한 인증
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 19 인증 시스템 준비
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 18 부드러운 게시판
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 17 다른 게시판 운영
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 16 게시판 댓글 만들기
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 15 게시판 만들기
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 13 Back-end api paging
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 11 Back-end and Front-end api test
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 10 Front-end api test
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 9 Back-end api test
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 5 Back-end api route
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
async
모던웹(NEMV) 혼자 제작 하기 3기 - 41 프라미스(promise) 어씽크(async) 이정도만 하자!
비동기식 언어인 자바스크립트의 불편함을 해소해주는 프라미스(promise), 어씽크(async)에 대해 설명합니다.
atlas
Firebase functions에서 mongodb atlas에 접속하기
Firebase functions에서 mongodb atlas에 접속하는 방법을 다룹니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 38 깃헙에서 안보이는 설정파일 만들기
설정파일을 사용하는 방법에 대해 알아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 37 몽고 클라우드(ATLAS) 가입 및 테스트
몽고디비 클라우드 서비스인 아틀라스를 가입 후 테스트 까지 해봅니다.
데이터베이스 사용 및 팁
저는 전산쪽과 1%도 상관이 없는 사람인데 어떠한 계기로 데이터베이스를 쓰게 되었습니다.
NEMBV 6 Database setting
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
atom
모던웹(NEMV) 혼자 제작 하기 3기 - 1 에디터 설치
너무 쉬운 에디터(Atom) 설치이지만, 처음 부터 하는 느낌으로 만들어봤습니다.
authorization
NUXT로 혼자 웹사이트 만들기 15 파이어베이스(firebase) 리캡챠(recaptcha v3) 사용하기
넉스트(nuxt) 와 파이어베이스 펑션스 (firebase functions)로 리캡챠(recaptcha v3)를 사용해봅니다.
NUXT로 혼자 웹사이트 만들기 14 파이어베이스(firebase) 인증 기능 라우팅해보기
파이어베이스 인증 상태에 따라 페이지 전환을 해보겠습니다.
NUXT로 혼자 웹사이트 만들기 13 파이어베이스(firebase) 인증 기능 화면 표시하기
파이어베이스 인증 기능을 넉스트 저장소(vuex)를 이용해 표현해봅니다.
NUXT로 혼자 웹사이트 만들기 12 파이어베이스(firebase) 인증 기능 토큰 알아보기
파이어베이스 인증 기능중 토큰에 대해 알아봅니다.
NUXT로 혼자 웹사이트 만들기 11 파이어베이스(firebase) 인증 기능(email&password) 사용하기
파이어베이스 인증기능중 이메일+비밀번호를 사용해서 로그인해봅니다.
axios
모던웹(NEMV) 혼자 제작 하기 3기 - 58 사용자편 정리
응용편: 사용자를 마칩니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 57 회원가입 완성하기
백엔드를 만들어서 만들어둔 프론트와 연동시켜보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 56 회원가입 프론트 적용하기
뷰티파이 예제로 만들고 있는 모델에 맞게 수정해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 55 회원가입 유효성 판단
뷰티파이 폼을 이용해 회원가입을 간단하게 만들어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 54 한 소스로 사이트 다르게 사용하기
현재 소스를 가지고 다른 사람이 사용하려면 코드 수정이 필요합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 53 새로고침 없이 로그인 하기(by 인터셉터)
매번 요청시 코드 신경쓰지 않으면서 토큰을 매번 날리도록 만들어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 20 RESTful한 api 만들기
REST(Representational State Transfer)는 구글링해보면 잘 나와 있지만 대체 뭔소린지 알아먹기가 힘드실 겁니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 19 axios 사용하기
프론트에서 api를 통해 데이터를 받아서 화면을 변경해보겠습니다.
axios0.
모던웹(NEMV) 혼자 제작 하기 3기 - 52 모든 요청 토큰 설정으로 접근 막기
매번 액시오스로 api 요청을 할 때마다 헤더에 토큰을 넣어야 작동하는 부분을 사전 정의해서 생략해봅니다.
base64
모던웹(NEMV) 혼자 제작 하기 3기 - 84 이미지 변환하기(base64, sharp)
이미지 업로드 후 디비 저장까지 하려면 무엇이 필요한지 알아봅니다.
board
모던웹(NEMV) 혼자 제작 하기 3기 - 78 고급편 정리
지금까지 했던 것들을 복습 겸 정리해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 77 구글 리캡챠로 로봇 막아보기(recaptcha)
구글에서 제공하는 리캡챠(recaptcha)를 이용하여 로봇을 막아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 76 반응형 게시판 만들기
모바일, 태블릿, 데스크탑등의 다양한 장에서 적절하게 표현되게 변경해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 75 HTTP 예외처리 제대로 하기
공식 HTTP 에러코드에 맞는 결과를 전송해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 74 공용 알림 메세지 만들기(vuex)
모든 페이지에 있는 알림 메세지 처리를 한 곳에서 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 73 게시판 재활용하기(뷰라우터)
만들어진 게시판 하나로 여러개를 운영해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 72 게시판 페이징과 정렬 처리하기
게시판 페이징과 정렬 처리를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 71 게시판 내용 수정과 삭제
선택된 게시물의 수정과 삭제를 구현해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 70 게시판 내용 읽기
게시판 목록과 내용을 분리해서 읽어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 69 게시판 뷰티파이 테이블 사용하기
뷰티파이의 데이터테이블(v-datatable)을 이용해서 화면에 표시해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 68 게시판 게시물 쓰고 읽기
게시물(article) API CRUD중 게시판 정보가 필요한 CR(Create Read)를 프론트에서 확인해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 67 게시판 게시물 API 만들기
게시물 CRUD를 할 수 있게 API를 만들어 보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 66 게시판 정보 읽기
게시물들을 가져오기 위해 먼저 게시판 정보를 가져와보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 65 게시판을 위한 메뉴 구성
편의를 위해 메뉴를 구성해서 게시판 진입하도록 하겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 64 게시판 모델 만들기(populate)
게시물들은 누가 썼는지, 어느 게시판인지가 제일 중요합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 63 게시판 관리 만들기
일반적으로 운영할 게시판을 만드려면 무엇이 필요한지 생각해봅니다.
book
책 리뷰 - 소개글
책을 이유 없이 싫어했던 사람이 있습니다.
bootstrap
NEMBV 20 jwt를 이용한 인증
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 19 인증 시스템 준비
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 18 부드러운 게시판
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 17 다른 게시판 운영
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 16 게시판 댓글 만들기
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 15 게시판 만들기
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 14 Front-end finished
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 12 Front-end bootstrap layout
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 11 Back-end and Front-end api test
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 10 Front-end api test
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 2 Front-end Setup
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
bootstrap-vue
NEMBV 20 jwt를 이용한 인증
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 19 인증 시스템 준비
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 18 부드러운 게시판
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 17 다른 게시판 운영
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 16 게시판 댓글 만들기
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 15 게시판 만들기
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 14 Front-end finished
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
c
모던웹(NEMV) 혼자 제작 하기 3기 - 13 자바스크립트 언어 사용 시작에 대해
현재 진행중인 모던웹 NEMV, 즉 노드, 익스프레스, 몽고디비, 뷰 모두 자바스크립트를 기반으로 합니다.
cloud
모던웹(NEMV) 혼자 제작 하기 3기 - 38 깃헙에서 안보이는 설정파일 만들기
설정파일을 사용하는 방법에 대해 알아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 37 몽고 클라우드(ATLAS) 가입 및 테스트
몽고디비 클라우드 서비스인 아틀라스를 가입 후 테스트 까지 해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 36 서버 오토스케일 정리
지난강좌의 싱글서버로 개발은 충분합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 35 pm2로 실제 서버에 배포하기
개발피씨에서 pm2는 사실 켜둘 필요가 없습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 34 pm2로 안정적인 서버 만들기
npm start, yarn dev, node ./bin/www 등으로 실행하였고 끌 때는 ctrl+c로 종료했습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 32 클라우드 서버 디비 설치 및 테스트
서버가 개발했을 때와 같이 동작하게 하려면 얀, 몽고디비를 설치해야합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 31 클라우드 서버 깃 설치 및 테스트
깃 설치하고 ssh방식으로 소스를 다운로드 받는 방법입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 30 클라우드 서버 노드 설치
리눅스 서버에 모던웹을 서비스할 수 있도록 요소들을 설치해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 29 클라우드 서버 리눅스 다루기
서버 구성을 위해 필요한 최소한의 리눅스 지식을 정리해봤습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 28 클라우드 서버 만들기
클라우드 서버(인스턴스)를 만들고 접속하는 방법을 설명합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 27 클라우드 서버 가입하기
이제부터 3부 응용편 시작합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 응용 서버편 시작
모던웹 응용 서버편 시작합니다.
communication
Communication(통신) 5. 구현-수신
이제 바이트 단위로 파악하여 원하는 데이터를 꺼내보도록 하겠다..
Communication(통신) 4. 구현-송신
바이트로 들어오는 데이터를 이제 명확하게 확인 할 수 있는 준비가 되었으니 실제 프로토콜을 이용해 송/수신 을 구현해보겠다.
Communication(통신) 3. 구현-기본
간단하게 프로토콜을 만들어보았다. 이제 정의된 프로토콜 대로 구현해보도록 하겠다..
Communication(통신) 2. Protocol
가상의 바이너리 프로토콜을 만들어 232 혹은 소켓등에서 어떤 방법으로 데이터를 취득해야 하는지 알아보도록 하겠다..
Communication(통신) 1. 개념
한동안 펌웨어쪽 일을 하면서 모뎀을 통해 서버쪽에 데이터를 전송하는 인터페이스를 많이 하게 되었는데.. 대부분 백엔드서버 엔지니어들이 바이너리 통신을 통해 수신받아서 처리(파스)하는 부분에 상당히 무지한 것을 알았다..
component
모던웹(NEMV) 혼자 제작 하기 3기 - 60 뷰 컴포넌트 사용하기
뷰의 특장점중 하나인 콤포넌트에 대해 알아보겠습니다.
config
NEMVV 1 설정파일
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
cors
NEMBV 10 Front-end api test
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
crud
모던웹(NEMV) 혼자 제작 하기 3기 - 23 몽구스 설치 및 확인
노드에서 몽고디비를 사용하는 방법은 여러가지 입니다.
crypto
모던웹(NEMV) 혼자 제작 하기 3기 - 59 비밀번호 암호화하기
비밀번호를 평문이 아닌 암호화된 문자로 저장해보겠습니다.
NEMVV 2 전역파일
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
database
데이터베이스 사용 및 팁
저는 전산쪽과 1%도 상관이 없는 사람인데 어떠한 계기로 데이터베이스를 쓰게 되었습니다.
mariaDB(mySQL) Server 설치
간만에 mysql 쓸 일이 있어서 기억을 저장해봅니다.
database 안정성
noSQL mongoDB를 사용하며 사람들로 부터 가장 많이 들은 부분은 안정성이었다.
Mongo dump & restore
Mongodb는 분명히 좋은 백업 솔루션이 있겠지만..
Mongo Sharding 3 - 서버 확장
configsvr 권장 3세트와 shardsvr를 더 추가해서 수평확장(scale-out)이 잘 이루어지는지 확인
Mongo Sharding 2 - config,router 구성
원리는 만들어 놓았던 shardsvr들에 연결하기 위해 router를 통해야하는데 그 config meta 정보를 configsvr에 담는 것이다. 대략 이런 구성이라고 보면 된다 client -> router -> configsvr -> shards[?]
Mongo Sharding 1 - shard 구성
데이터량이 증가하고 접속자 수가 많아질 때 관리자는 시스템 업그레이드를 고려한다.
db
DBA
DBA는 위키에 아래와 같이 나와있다.
dba
DBA
DBA는 위키에 아래와 같이 나와있다.
del
npm del
파일 처리를 많이 하다보니 디렉토리를 몽땅 날려야하는 상황이 종종 있다.
deploy
모던웹(NEMV) 혼자 제작 하기 3기 - 33 배포를 위한 개발환경 설정
지금까지 3000포트를 사용하여 테스트를 했습니다.
design
렌더포레스트로 멋진 홍보동영상 만들어보기
최근 개발에서 디자인 부분은 머터리얼, 부트스트랩등으로 많은 것을 대체할 수 있습니다.
dotenv
NUXT로 혼자 웹사이트 만들기 7 닷엔브(dotenv)로 파이어베이스 프로젝트 정리하기
넉스트 프로젝트에서 닷엔브로 파이어베이스를 사용하기 위한 설정을 해보겠습니다.
editor
모던웹(NEMV) 혼자 제작 하기 3기 - 89 활용편 정리
모던웹(NEMV) 제작 하기 활용편 정리합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 88 게시물에 댓글 추가하기
게시물에 댓글을 추가해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 87 위지웍 에디터 사용하기(toast ui editor)
위지웍 에디터를 사용해서 글을 작성해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 1 에디터 설치
너무 쉬운 에디터(Atom) 설치이지만, 처음 부터 하는 느낌으로 만들어봤습니다.
electron
일렉트론 앱 제작 후기
최근에 데스크탑 앱을 하나 만들어서 배포했습니다.
Electron native module 사용하기
electron-vue(vue-cli2)로 제작되었던 앱을 vue-cli3플러긴 일렉트론 버전(vue add electron-builder)으로 마이그레이션을 하다보니 생각보다 괴로운 부분이 많았습니다..
Electron 5 일렉트론뷰로 우아한 데스크탑 앱 만들기 업데이트(vue-cli3)
vue-cli3가 업데이트 되어서 기존 설치법(vue-cli2)이 아예 막혀버렸습니다.
Electron 4 일렉트론뷰로 우아한 데스크탑 앱 만들기 vue-cli3 업그레이드
한동안 일렉트론으로 뭔가 만들지 않았습니다.
Electron 3 일렉트론뷰로 우아한 데스크탑 앱 만들기 ToDo
과정이 지겨우니 뭔가 만들면서 재미를 찾는 것이 훨씬 개발에 득이 된다고 생각합니다..
Electron 2 일렉트론뷰로 우아한 데스크탑 앱 만들기 UI
최근 유행하는 UI 흐름에 대해 간단히 설명드립니다.
Electron 1 일렉트론뷰로 우아한 데스크탑 앱 만들기 데이터 다루기
이번에는 데스크탑 앱으로 데이터를 다뤄보겠습니다.
Electron 0 일렉트론뷰로 우아한 데스크탑 앱 만들기 기초
설치 관련 업데이트(중요)
env
모던웹(NEMV) 혼자 제작 하기 3기 - 33 배포를 위한 개발환경 설정
지금까지 3000포트를 사용하여 테스트를 했습니다.
express
Vue와 Firebase로 모던웹사이트 만들기 52 firebase storage 사용해보기
firebase storage 기능을 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 51 사용자 권한 변경하기
사용자 권한 변경은 단순하지만 종합 선물세트 지식이 필요합니다. firebase(functions, auth, store), vue(component), vuetify(v-select), axios, RESTful API등.. 찬찬히 지금 것들을 되짚어 봅니다~
Vue와 Firebase로 모던웹사이트 만들기 50 회원관리 모양 내보기
vuetify의 v-data-iterator를 사용해서 기존 테이블 방식을 변경해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 49 검색어 필터 만들어보기
vuetify의 v-autocomplete로 검색어 필터를 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 48 파이어스토어 검색해보기
firestore의 where와 vuetify의 v-combobox를 이용해 email검색을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 47 파이어스토어 정렬해보기
firestore 의 orderBy와 vuetify v-data-table을 이용해 정렬을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 46 파이어스토어 페이징해보기
firestore의 offset, limit를 사용해서 vuetify의 v-data-table로 페이징을 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 45 파이어스토어 컬렉션의 전체 개수 구하기
firestore와 functions의 조합으로 컬렉션의 전체 개수 정보를 저장해둡니다.
Vue와 Firebase로 모던웹사이트 만들기 44 파이어베이스 함수에서 파이어스토어 사용하기
파이어베이스 함수(functions)에서 기본 인증으로는 firebase serve –only functions로는 위험하기 때문에 파이어스토어 데이터에 접근할 수 없습니다. 해당 키를 가져와서 프론트에서 데이터를 받아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 43 파이어베이스 함수에서 권한 확인하기
파이어베이스 함수(functions)에서 토큰을 확인하고 풀어헤친 토큰정보(claims)로 권한에 따른 결과를 보냅니다.
Vue와 Firebase로 모던웹사이트 만들기 42 뷰라우터로 권한별 페이지 접근하기
firebase의 토큰 권한 정보(claims.level)로 사용자의 접근을 차단해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 41 파이어베이스 인증 라우터 지연시키기
firebase auth onAuthStateChanged 에서 페이지 이동을 시키는 방법은 잘못되었습니다. 파이어베이스 인증 상태 후의 행동이 중요하므로 다른 방법으로 지연시켜봤습니다.
Vue와 Firebase로 모던웹사이트 만들기 40 firestore에 사용자 정보 추가 삭제하기
firebase auth로 추가/삭제된 이벤트를 firebase functions에서 받아서 firestore에 추가/삭제합니다.
Vue와 Firebase로 모던웹사이트 만들기 39 권한으로 페이지 강제 이동시키기
vue-router로 권한에 따라 페이지를 이동시킵니다.
Vue와 Firebase로 모던웹사이트 만들기 38 firebase token 풀어보기
사용자별 화면 표시를 위해 사용자 데이터를 넣은 토큰을 풀어봅니다~
Vue와 Firebase로 모던웹사이트 만들기 37 firebase functions 맞춤 사용자 설정하기
firebase auth 정보에 사용자 레벨을 추가합니다.
Vue와 Firebase로 모던웹사이트 만들기 36 firebase functions 환경변수 사용하기
관리자 계정 생성을 위해 firebase functions 환경변수를 이용해서 관리자 계정을 지정해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 35 vuetify2로 업그레이드하기
vuetify V1 to V2로 업그레이드 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 34 이메일로 가입과 로그인해보기
파이어베이스 인증(firebase authentication)을 기능중 이메일로 가입과 로그인을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 33 v-form으로 유효성 검사하기
vuetify의 v-form으로 유효성 판단을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 32 회원가입 모양 내보기
vue componet 통신을 이용해 회원가입과 로그인 화면을 토글시켜봅니다.
Vue와 Firebase로 모던웹사이트 만들기 31 로그인 상태 만들어보기
vuetify의 v-menu, v-avatar등을 이용해서 로그인 상태 정보를 표현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 30 로딩 상태 표시하기
vue-progressbar를 이용해서 로딩 상태를 표시해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 29 뷰라우터 네비게이션 가드 사용하기
뷰라우터(vue-router)를 이용해서 로그인 상태에 따라 페이지 접근을 막거나(navigation guard) 이동시킵니다.
Vue와 Firebase로 모던웹사이트 만들기 28 로그인 화면 모양 내보기
뷰티파이(vuetify)를 이용해서 로그인 화면을 만들어 보는 시간을 가져봅니다. 미세한 UI 조절에 고통받는 모습은 아마 누구나 마찬가지 일듯..
Vue와 Firebase로 모던웹사이트 만들기 27 firebase 인증(auth)정보를 vuex 로 저장
인증정보인 user 와 token 을 vuex 저장소에 저장해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 26 뷰엑스(vuex)로 전역 제어하기
vuex를 사용해서 전역 변수를 제어해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 25 뷰(vue) 컴포넌트(component) 알아보기
vue component 사용법을 간단히 알아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 24 인증을 위한 미들웨어와 액시오스 설정하기
파이어베이스 함수(functions)를 사용할 때 가장 주의해야할 것은 보안입니다. 인증된 요청만 받아들이기 위한 미들웨어와 액시오스 설정에 대해 알아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 23 firebase functions 공용 에러 처리
백엔드(firebase functions)에서 에러처리를 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 22 vue 공용 error 처리하기
추후 비동기 함수(async)를 편하게 사용하기위해 공용 에러 처리를 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 21 firebase functions vue에서 axios로 접근하기
파이어베이스 함수(functions)에 등록한 express api에 front(vue + axios)로 접근해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 20 firebase functions RESTful api 만들기
파이어베이스 펑션스를 이용해서 REST API를 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 19 firebase functions 알아보기
파이어베이스의 서버리스 백엔드 역할을 해주는 firebase functions에 대해 알아보고 설치해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 18 firebase 인증(auth) 로그인 해보기
파이어베이스 인증을 이용해서 구글과 이메일 로그인을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 17 firestore crud 해보기
firestore로 데이터베이스의 기본행위인 CRUD를 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 16 firestore 설정하기
프론트에서 firestore 사용할 수 있도록 설정해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 15 vuetify로 노트 만들기
데이터베이스(firestore)를 다루기 위해 프론트를 구성해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 14 promise 알아보기
데이터베이스 처리하기에 앞서 프라미스 사용법에 대해 간단히 알아보고 넘어갑니다.
Vue와 Firebase로 모던웹사이트 만들기 13 vuetify 반응형웹 구현하기
v-container, layout, flex 3종세트로 반응형웹을 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 12 vuetify로 카드 만들기
화면 구성의 기본인 v-card를 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 11 vuetify로 하위 메뉴 구성하기
vuetify list-group 을 사용해 하위 메뉴를 구성해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 10 vuetify로 네비게이션 드라워만들기
툴바 메뉴 클릭시 v-navigation-drawer를 표시해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 9 vuetify로 리스트 만들기
vuetify/vList를 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 8 vuetify로 툴바 만들기
vuetify를 이용해서 상단 툴바를 만들어봅니다.
Vue와 Firebase로 모던웹사이트 만들기 7 vue 맛보기
vue가 무엇인지 이해하고 넘어갑니다.
Vue와 Firebase로 모던웹사이트 만들기 6 git 다운로드 받기
강좌 소스 활용을 위해 git clone 과 checkout에 대해 알아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 5 SPA 알아보기
SPA가 무엇인지 알아보고 vue-router로 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 4 git 사용하기
git에 대해 알아보고 필요한 만큼만 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 3 사이트 배포하기
firebase hosting을 이용해서 사이트를 배포해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 2 에디터 설정하기
뷰(vue)에 최적화된 에디터(vscode) 설정을 합니다.
Vue와 Firebase로 모던웹사이트 만들기 1 개발환경 구축하기
개발에 필요한 요소들을 설치합니다.
Vue와 Firebase로 모던웹사이트 만들기 소개
Vue & Firebase에 대해 간단히 소개합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 89 활용편 정리
모던웹(NEMV) 제작 하기 활용편 정리합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 88 게시물에 댓글 추가하기
게시물에 댓글을 추가해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 87 위지웍 에디터 사용하기(toast ui editor)
위지웍 에디터를 사용해서 글을 작성해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 86 사용자 정보 표시하기
간단하게 사용자 정보를 화면에 표시해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 85 이미지 컴포넌트로 업로드하기(filepond)
업로드 콤포넌트를 이용해서 이미지를 업로드해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 84 이미지 변환하기(base64, sharp)
이미지 업로드 후 디비 저장까지 하려면 무엇이 필요한지 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 83 파일 업로드 하기(multer)
파일 업로드 미들웨어인 멀터(multer)를 이용해 서버에 파일을 전송해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 82 대시보드 꾸며보기
대시보드에 적절한 위젯들을 배치하고 꾸며봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 81 대시보드 게시판 다르게 표현하기
게시판 데이터를 활용해서 다른 표현을 해보도록 하겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 80 구글 애널리틱스로 사이트 접속 현황 파악하기
구글 애널리틱스로 사이트 분석을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 79 보안연결(ssl) 적용하기
보안연결을 구성하여 https로 접속 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 78 고급편 정리
지금까지 했던 것들을 복습 겸 정리해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 77 구글 리캡챠로 로봇 막아보기(recaptcha)
구글에서 제공하는 리캡챠(recaptcha)를 이용하여 로봇을 막아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 76 반응형 게시판 만들기
모바일, 태블릿, 데스크탑등의 다양한 장에서 적절하게 표현되게 변경해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 75 HTTP 예외처리 제대로 하기
공식 HTTP 에러코드에 맞는 결과를 전송해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 74 공용 알림 메세지 만들기(vuex)
모든 페이지에 있는 알림 메세지 처리를 한 곳에서 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 73 게시판 재활용하기(뷰라우터)
만들어진 게시판 하나로 여러개를 운영해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 72 게시판 페이징과 정렬 처리하기
게시판 페이징과 정렬 처리를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 71 게시판 내용 수정과 삭제
선택된 게시물의 수정과 삭제를 구현해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 70 게시판 내용 읽기
게시판 목록과 내용을 분리해서 읽어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 69 게시판 뷰티파이 테이블 사용하기
뷰티파이의 데이터테이블(v-datatable)을 이용해서 화면에 표시해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 68 게시판 게시물 쓰고 읽기
게시물(article) API CRUD중 게시판 정보가 필요한 CR(Create Read)를 프론트에서 확인해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 67 게시판 게시물 API 만들기
게시물 CRUD를 할 수 있게 API를 만들어 보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 66 게시판 정보 읽기
게시물들을 가져오기 위해 먼저 게시판 정보를 가져와보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 65 게시판을 위한 메뉴 구성
편의를 위해 메뉴를 구성해서 게시판 진입하도록 하겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 64 게시판 모델 만들기(populate)
게시물들은 누가 썼는지, 어느 게시판인지가 제일 중요합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 63 게시판 관리 만들기
일반적으로 운영할 게시판을 만드려면 무엇이 필요한지 생각해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 54 한 소스로 사이트 다르게 사용하기
현재 소스를 가지고 다른 사람이 사용하려면 코드 수정이 필요합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 52 모든 요청 토큰 설정으로 접근 막기
매번 액시오스로 api 요청을 할 때마다 헤더에 토큰을 넣어야 작동하는 부분을 사전 정의해서 생략해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 51 백엔드로 페이지 권한 얻기
토큰 유무만 가지고 화면 보안 접근을 하는 것은 역시 위험합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 50 사용자 및 페이지 관리하기
사용자를 자동으로 만들어 주긴 하지만 권한등을 코드에서 제어하기 불편합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 49 뷰저장소(vuex) 이정도만 쓰자
토큰 유무에 따라 로그인/아웃 상태를 전체 페이지에서 판단할 수 있는 뷰저장소에 대해 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 48 로그인 해야 들어갈 수 있는 페이지 만들기(네비게이션 가드)
로그인 해야만 진입할 수 있는 페이지를 만들어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 47 토큰 인증하기
프론트에 토큰을 저장해서 매번 토큰과 함께 요청을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 46 실제 데이터로 로그인하기
이제 실제 데이터로 로그인을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 45 사용자 모델 정리하기
기존에는 name, age 로만 테스트 했으니 로그인이 가능할 모델로 변경합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 44 로그인 간단히 만들어보기
간단하게 로그인 프론트와 백엔드가 잘 통신하는 지 확인해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 43 사이트 저장소 다루기
서버로 부터 토큰을 받아서 저장해놔야 다음에 로그인 없이 api요청이 가능합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 42 HTTP 헤더 알아보기
토큰을 보낼 때는 HTTP 헤더(header)를 통해 전송하는 것이 일반적입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 40 토큰(JWT)이란?
토큰(JWT)에 대해 간단히 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 39 API 미들웨어란?
API 미들웨어에 대해 간단히 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 26 기본편 정리
기초편에 이어 14~26까지 기본편 한번 달려봤습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 25 API와 프론트 통신 정리
지난 강좌에 이어서 CRUD 중 UD 즉 수정, 삭제를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 24 api와 몽구스 연결
이제 디비를 조작할 수 있으니 api에서 실제 디비데이터로 몽구스(mongoose)를 사용해서 CRUD 중 CR 즉 쓰고 읽기를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 20 RESTful한 api 만들기
REST(Representational State Transfer)는 구글링해보면 잘 나와 있지만 대체 뭔소린지 알아먹기가 힘드실 겁니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 19 axios 사용하기
프론트에서 api를 통해 데이터를 받아서 화면을 변경해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 18 api 설정하기
깃헙에 올린 새 프로젝트에서 api 설정하는 것을 다시 정리해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 16 깃 사용하기
지금까지 프로젝트를 깃을 사용해 다시 만들어 보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 11 익스프레스와 뷰라우터
뷰 라우터의 히스토리모드 이해와 백엔드 라우터의 연결에 대해 알아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 10 뷰티파이 메뉴 추가
뷰티파이 기본 설치된 상태에서 페이지 추가해서 브라우저로 확인해보도록 하겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 9 뷰티파이 수정
뷰티파이 기본 설치된 파일을 수정해서 브라우저로 확인해보기
모던웹(NEMV) 혼자 제작 하기 3기 - 8 익스프레스와 뷰티파이 연동
전 강좌에서 yarn serve로 실행한 http://localhost:8080은 뷰 개발모드입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 5 익스프레스 라우터
생성된 익스프레스 소스에 라우터, 페이지를 추가해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 4 익스프레스 수정
생성된 익스프레스 소스를 수정해서 웹서버 동작 확인해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 3 익스프레스 설정
익스프레스 설치 및 약간의 설명입니다.
NEMVV 3 웹서버 구동
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 13 Back-end api paging
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 9 Back-end api test
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 5 Back-end api route
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 4 Back-end route setup
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 3 Back-end route 이해
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 1 Back-end Setup
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMV 5 - vue.js 설치
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMV 4 - node.js & express & mongoDB 설치
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMV 3 - git 등록
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMV 2 - API 설계
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMV 1 - 소개
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
filepond
모던웹(NEMV) 혼자 제작 하기 3기 - 85 이미지 컴포넌트로 업로드하기(filepond)
업로드 콤포넌트를 이용해서 이미지를 업로드해보겠습니다.
firebase
Flutter와 Firebase로 Android iOS 둘 다 만들기 11 JSON 데이터 처리하기
플러터로 JSON 데이터를 처리하는 방법을 다룹니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 10 REST API 사용해보기
플러터로 REST API를 시험해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 9 파이어스토어 화면에서 읽고 쓰기
플러터에서 파이어스토어 데이터를 쓰고 화면에 표시해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 8 파이어스토어 사용해보기
플러터에서 파이어스토어를 사용해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 7 구글&파이어베이스로 사용자 인증하기 2
iOS & Android 시뮬레이터로 구동해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 6 구글&파이어베이스로 사용자 인증하기 1
Fire auth(Firebase authentication)를 이용해 Google 및 이메일 인증을 해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 5 화면 전환 해보기
Stateful widget을 사용해서 상태값에 따라 다른 화면을 렌더링해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 4 움직이는 화면 만들기
Stateful widget을 사용한 움직이는 화면에 대해 알아봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 3 리스트 출력하기
앱에서 자주 쓰이는 리스트 출력을 알아봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 2 기본 레이아웃 정렬해보기
플러터 레이아웃의 핵심인 Container, Row, Column에 대해 알아봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 1 기본 레이아웃 살펴보기
새로운 프로젝트를 만들고 MaterialApp에 대해 조금씩 알아봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 0 개요
플러터로 안드로이드 아이오에스에서 구동되는 파이어베이스 기반 앱을 만들어 보겠습니다.
Flutter로 크로스플랫폼 앱 만들어보기
모바일 개발 플랫폼인 플러터(flutter)를 선택하게된 계기와 설치 후기를 남겨봅니다.
Vue와 Firebase로 모던웹사이트 만들기 52 firebase storage 사용해보기
firebase storage 기능을 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 51 사용자 권한 변경하기
사용자 권한 변경은 단순하지만 종합 선물세트 지식이 필요합니다. firebase(functions, auth, store), vue(component), vuetify(v-select), axios, RESTful API등.. 찬찬히 지금 것들을 되짚어 봅니다~
Vue와 Firebase로 모던웹사이트 만들기 50 회원관리 모양 내보기
vuetify의 v-data-iterator를 사용해서 기존 테이블 방식을 변경해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 49 검색어 필터 만들어보기
vuetify의 v-autocomplete로 검색어 필터를 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 48 파이어스토어 검색해보기
firestore의 where와 vuetify의 v-combobox를 이용해 email검색을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 47 파이어스토어 정렬해보기
firestore 의 orderBy와 vuetify v-data-table을 이용해 정렬을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 46 파이어스토어 페이징해보기
firestore의 offset, limit를 사용해서 vuetify의 v-data-table로 페이징을 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 45 파이어스토어 컬렉션의 전체 개수 구하기
firestore와 functions의 조합으로 컬렉션의 전체 개수 정보를 저장해둡니다.
Vue와 Firebase로 모던웹사이트 만들기 44 파이어베이스 함수에서 파이어스토어 사용하기
파이어베이스 함수(functions)에서 기본 인증으로는 firebase serve –only functions로는 위험하기 때문에 파이어스토어 데이터에 접근할 수 없습니다. 해당 키를 가져와서 프론트에서 데이터를 받아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 43 파이어베이스 함수에서 권한 확인하기
파이어베이스 함수(functions)에서 토큰을 확인하고 풀어헤친 토큰정보(claims)로 권한에 따른 결과를 보냅니다.
Vue와 Firebase로 모던웹사이트 만들기 42 뷰라우터로 권한별 페이지 접근하기
firebase의 토큰 권한 정보(claims.level)로 사용자의 접근을 차단해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 41 파이어베이스 인증 라우터 지연시키기
firebase auth onAuthStateChanged 에서 페이지 이동을 시키는 방법은 잘못되었습니다. 파이어베이스 인증 상태 후의 행동이 중요하므로 다른 방법으로 지연시켜봤습니다.
Vue와 Firebase로 모던웹사이트 만들기 40 firestore에 사용자 정보 추가 삭제하기
firebase auth로 추가/삭제된 이벤트를 firebase functions에서 받아서 firestore에 추가/삭제합니다.
Vue와 Firebase로 모던웹사이트 만들기 39 권한으로 페이지 강제 이동시키기
vue-router로 권한에 따라 페이지를 이동시킵니다.
Vue와 Firebase로 모던웹사이트 만들기 38 firebase token 풀어보기
사용자별 화면 표시를 위해 사용자 데이터를 넣은 토큰을 풀어봅니다~
Vue와 Firebase로 모던웹사이트 만들기 37 firebase functions 맞춤 사용자 설정하기
firebase auth 정보에 사용자 레벨을 추가합니다.
Vue와 Firebase로 모던웹사이트 만들기 36 firebase functions 환경변수 사용하기
관리자 계정 생성을 위해 firebase functions 환경변수를 이용해서 관리자 계정을 지정해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 35 vuetify2로 업그레이드하기
vuetify V1 to V2로 업그레이드 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 34 이메일로 가입과 로그인해보기
파이어베이스 인증(firebase authentication)을 기능중 이메일로 가입과 로그인을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 33 v-form으로 유효성 검사하기
vuetify의 v-form으로 유효성 판단을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 32 회원가입 모양 내보기
vue componet 통신을 이용해 회원가입과 로그인 화면을 토글시켜봅니다.
Vue와 Firebase로 모던웹사이트 만들기 31 로그인 상태 만들어보기
vuetify의 v-menu, v-avatar등을 이용해서 로그인 상태 정보를 표현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 30 로딩 상태 표시하기
vue-progressbar를 이용해서 로딩 상태를 표시해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 29 뷰라우터 네비게이션 가드 사용하기
뷰라우터(vue-router)를 이용해서 로그인 상태에 따라 페이지 접근을 막거나(navigation guard) 이동시킵니다.
Vue와 Firebase로 모던웹사이트 만들기 28 로그인 화면 모양 내보기
뷰티파이(vuetify)를 이용해서 로그인 화면을 만들어 보는 시간을 가져봅니다. 미세한 UI 조절에 고통받는 모습은 아마 누구나 마찬가지 일듯..
Vue와 Firebase로 모던웹사이트 만들기 27 firebase 인증(auth)정보를 vuex 로 저장
인증정보인 user 와 token 을 vuex 저장소에 저장해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 26 뷰엑스(vuex)로 전역 제어하기
vuex를 사용해서 전역 변수를 제어해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 25 뷰(vue) 컴포넌트(component) 알아보기
vue component 사용법을 간단히 알아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 24 인증을 위한 미들웨어와 액시오스 설정하기
파이어베이스 함수(functions)를 사용할 때 가장 주의해야할 것은 보안입니다. 인증된 요청만 받아들이기 위한 미들웨어와 액시오스 설정에 대해 알아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 23 firebase functions 공용 에러 처리
백엔드(firebase functions)에서 에러처리를 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 22 vue 공용 error 처리하기
추후 비동기 함수(async)를 편하게 사용하기위해 공용 에러 처리를 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 21 firebase functions vue에서 axios로 접근하기
파이어베이스 함수(functions)에 등록한 express api에 front(vue + axios)로 접근해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 20 firebase functions RESTful api 만들기
파이어베이스 펑션스를 이용해서 REST API를 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 19 firebase functions 알아보기
파이어베이스의 서버리스 백엔드 역할을 해주는 firebase functions에 대해 알아보고 설치해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 18 firebase 인증(auth) 로그인 해보기
파이어베이스 인증을 이용해서 구글과 이메일 로그인을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 17 firestore crud 해보기
firestore로 데이터베이스의 기본행위인 CRUD를 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 16 firestore 설정하기
프론트에서 firestore 사용할 수 있도록 설정해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 15 vuetify로 노트 만들기
데이터베이스(firestore)를 다루기 위해 프론트를 구성해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 14 promise 알아보기
데이터베이스 처리하기에 앞서 프라미스 사용법에 대해 간단히 알아보고 넘어갑니다.
Vue와 Firebase로 모던웹사이트 만들기 13 vuetify 반응형웹 구현하기
v-container, layout, flex 3종세트로 반응형웹을 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 12 vuetify로 카드 만들기
화면 구성의 기본인 v-card를 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 11 vuetify로 하위 메뉴 구성하기
vuetify list-group 을 사용해 하위 메뉴를 구성해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 10 vuetify로 네비게이션 드라워만들기
툴바 메뉴 클릭시 v-navigation-drawer를 표시해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 9 vuetify로 리스트 만들기
vuetify/vList를 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 8 vuetify로 툴바 만들기
vuetify를 이용해서 상단 툴바를 만들어봅니다.
Vue와 Firebase로 모던웹사이트 만들기 7 vue 맛보기
vue가 무엇인지 이해하고 넘어갑니다.
Vue와 Firebase로 모던웹사이트 만들기 6 git 다운로드 받기
강좌 소스 활용을 위해 git clone 과 checkout에 대해 알아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 5 SPA 알아보기
SPA가 무엇인지 알아보고 vue-router로 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 4 git 사용하기
git에 대해 알아보고 필요한 만큼만 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 3 사이트 배포하기
firebase hosting을 이용해서 사이트를 배포해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 2 에디터 설정하기
뷰(vue)에 최적화된 에디터(vscode) 설정을 합니다.
Vue와 Firebase로 모던웹사이트 만들기 1 개발환경 구축하기
개발에 필요한 요소들을 설치합니다.
Vue와 Firebase로 모던웹사이트 만들기 소개
Vue & Firebase에 대해 간단히 소개합니다.
Firebase functions에서 mongodb atlas에 접속하기
Firebase functions에서 mongodb atlas에 접속하는 방법을 다룹니다.
넉스트(nuxt) 사용 후기
넉스트를 사용하면서 강좌를 하고 있는 이유는 실무에 실제 반영해보고, 좀 더 빠른 개발의 길로 이끌어 보고 싶은 마음에서 였습니다.
NUXT로 혼자 웹사이트 만들기 15 파이어베이스(firebase) 리캡챠(recaptcha v3) 사용하기
넉스트(nuxt) 와 파이어베이스 펑션스 (firebase functions)로 리캡챠(recaptcha v3)를 사용해봅니다.
NUXT로 혼자 웹사이트 만들기 14 파이어베이스(firebase) 인증 기능 라우팅해보기
파이어베이스 인증 상태에 따라 페이지 전환을 해보겠습니다.
NUXT로 혼자 웹사이트 만들기 13 파이어베이스(firebase) 인증 기능 화면 표시하기
파이어베이스 인증 기능을 넉스트 저장소(vuex)를 이용해 표현해봅니다.
NUXT로 혼자 웹사이트 만들기 12 파이어베이스(firebase) 인증 기능 토큰 알아보기
파이어베이스 인증 기능중 토큰에 대해 알아봅니다.
NUXT로 혼자 웹사이트 만들기 11 파이어베이스(firebase) 인증 기능(email&password) 사용하기
파이어베이스 인증기능중 이메일+비밀번호를 사용해서 로그인해봅니다.
NUXT로 혼자 웹사이트 만들기 10 파이어베이스(firebase) 파이어스토어(firestore) 페이징(paging)처리하기
파이어스토어를 이용해서 페이징처리를 해봅니다.
NUXT로 혼자 웹사이트 만들기 9 파이어베이스(firebase) 파이어스토어(firestore) CRUD 해보기
파이어스토어를 이용해서 CRUD 를 시험해보겠습니다.
NUXT로 혼자 웹사이트 만들기 8 파이어베이스(firebase) 펑션스(functions) 시작하기
파이어베이스 펑션스를 이용해서 API를 간단히 구현해봅니다.
NUXT로 혼자 웹사이트 만들기 7 닷엔브(dotenv)로 파이어베이스 프로젝트 정리하기
넉스트 프로젝트에서 닷엔브로 파이어베이스를 사용하기 위한 설정을 해보겠습니다.
NUXT로 혼자 웹사이트 만들기 6 firebase로 데이터베이스(firestore) 사용하기
파이어베이스의 noSQL 데이터베이스인 firestore를 파이어베이스 호스팅 환경에서 사용해봅니다.
NUXT로 혼자 웹사이트 만들기 5 firebase로 hosting해보기
넉스트(nuxt) 소스를 파이어베이스 호스팅(google firebase hosting)을 이용해서 배포(deploy)해봅니다.
firestore
Flutter와 Firebase로 Android iOS 둘 다 만들기 11 JSON 데이터 처리하기
플러터로 JSON 데이터를 처리하는 방법을 다룹니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 10 REST API 사용해보기
플러터로 REST API를 시험해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 9 파이어스토어 화면에서 읽고 쓰기
플러터에서 파이어스토어 데이터를 쓰고 화면에 표시해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 8 파이어스토어 사용해보기
플러터에서 파이어스토어를 사용해봅니다.
NUXT로 혼자 웹사이트 만들기 10 파이어베이스(firebase) 파이어스토어(firestore) 페이징(paging)처리하기
파이어스토어를 이용해서 페이징처리를 해봅니다.
NUXT로 혼자 웹사이트 만들기 9 파이어베이스(firebase) 파이어스토어(firestore) CRUD 해보기
파이어스토어를 이용해서 CRUD 를 시험해보겠습니다.
NUXT로 혼자 웹사이트 만들기 7 닷엔브(dotenv)로 파이어베이스 프로젝트 정리하기
넉스트 프로젝트에서 닷엔브로 파이어베이스를 사용하기 위한 설정을 해보겠습니다.
NUXT로 혼자 웹사이트 만들기 6 firebase로 데이터베이스(firestore) 사용하기
파이어베이스의 noSQL 데이터베이스인 firestore를 파이어베이스 호스팅 환경에서 사용해봅니다.
flutter
Flutter와 Firebase로 Android iOS 둘 다 만들기 25 사용자 권한 처리하기
사용자 권한 별로 다른 화면을 표시합니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 24 fire storage에 저장하기
파이어베이스 스토리지에 저장하고 링크를 받아 프로필을 표시해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 23 사진 가져오고 압축하기
플러터 image_picker 모듈을 사용해서 카메라의 사진 혹은 내장 앨범의 사진을 가져오고 압축해서 표시해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 22 프로필 페이지 꾸미기
플러터 레이아웃을 이용해 프로필 페이지를 간단히 꾸며봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 21 페이지에 데이터 넘기기
새 페이지로 라우팅할 때 데이터를 넘겨봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 20 회원가입 적용하기
회원가입 페이지를 만들고 이메일로 회원가입을 해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 19 예외 처리하기
간단하게 예외처리에 대해 알아보고 플러터의 스낵바로 표현 해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 18 로그인 화면 꾸미기
이메일로그인을 구현하기 전에 모양을 간단히 꾸며봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 17 router 실제 페이지에 적용하기
지금까지 얻은 지식을 토대로 실제 만들어야할 대상을 라우터를 통해서 전환해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 16 form 작성해보기
TextFormInputField를 사용해서 입력부를 구현해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 15 named router 사용하기
Material class의 route를 이용해서 페이지 전환해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 14 런쳐 꾸미기
앱 아이콘과 스플래쉬 페이지를 만들어봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 13 Stream 사용해보기
dart의 Stream에 대해 알아봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 12 JSON 데이터 예외 처리하기
플러터로 일반적이지 않은 JSON 데이터를 처리해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 11 JSON 데이터 처리하기
플러터로 JSON 데이터를 처리하는 방법을 다룹니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 10 REST API 사용해보기
플러터로 REST API를 시험해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 9 파이어스토어 화면에서 읽고 쓰기
플러터에서 파이어스토어 데이터를 쓰고 화면에 표시해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 8 파이어스토어 사용해보기
플러터에서 파이어스토어를 사용해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 7 구글&파이어베이스로 사용자 인증하기 2
iOS & Android 시뮬레이터로 구동해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 6 구글&파이어베이스로 사용자 인증하기 1
Fire auth(Firebase authentication)를 이용해 Google 및 이메일 인증을 해봅니다.
Flutter Tip - 유용한 vscode extension
Flutter 코딩시 유용한 툴들을 정리해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 5 화면 전환 해보기
Stateful widget을 사용해서 상태값에 따라 다른 화면을 렌더링해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 4 움직이는 화면 만들기
Stateful widget을 사용한 움직이는 화면에 대해 알아봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 3 리스트 출력하기
앱에서 자주 쓰이는 리스트 출력을 알아봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 2 기본 레이아웃 정렬해보기
플러터 레이아웃의 핵심인 Container, Row, Column에 대해 알아봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 1 기본 레이아웃 살펴보기
새로운 프로젝트를 만들고 MaterialApp에 대해 조금씩 알아봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 0 개요
플러터로 안드로이드 아이오에스에서 구동되는 파이어베이스 기반 앱을 만들어 보겠습니다.
Flutter로 크로스플랫폼 앱 만들어보기
모바일 개발 플랫폼인 플러터(flutter)를 선택하게된 계기와 설치 후기를 남겨봅니다.
form
Flutter와 Firebase로 Android iOS 둘 다 만들기 16 form 작성해보기
TextFormInputField를 사용해서 입력부를 구현해봅니다.
jquery validate
유효성 판단을 하면서 페이지 갱신이 없는 입력폼을 정리해보겠다.
functions
Flutter와 Firebase로 Android iOS 둘 다 만들기 25 사용자 권한 처리하기
사용자 권한 별로 다른 화면을 표시합니다.
Firebase functions에서 mongodb atlas에 접속하기
Firebase functions에서 mongodb atlas에 접속하는 방법을 다룹니다.
NUXT로 혼자 웹사이트 만들기 8 파이어베이스(firebase) 펑션스(functions) 시작하기
파이어베이스 펑션스를 이용해서 API를 간단히 구현해봅니다.
git
Vue와 Firebase로 모던웹사이트 만들기 소스코드 사용 방법
진행되는 강좌는 세월의 흐름에 따라 동작이 다를 수 있습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 16 깃 사용하기
지금까지 프로젝트를 깃을 사용해 다시 만들어 보겠습니다.
NEMBV 1 Back-end Setup
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
github
Vue와 Firebase로 모던웹사이트 만들기 소스코드 사용 방법
진행되는 강좌는 세월의 흐름에 따라 동작이 다를 수 있습니다.
Renewal github page 2
전면 스플래쉬 페이지를 만들어 봤다.
Renewal github page
기존 jekyll-now 기본테마가 너무 흉해서 변경중
github page domain 설정
기본적으로 jekyll github page 를 이용할 경우 id.github.io 라는 도메인명으로 접속하게 되는데
Markdown
markdown은 인터넷 검색하면 뭐에 쓰는지 알수 있다
github hosting
github를 이용해 무료로 블로그를 운영할 수 있다는 소식을 듣고 찾아보았다.
global
NEMVV 2 전역파일
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
Flutter와 Firebase로 Android iOS 둘 다 만들기 7 구글&파이어베이스로 사용자 인증하기 2
iOS & Android 시뮬레이터로 구동해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 6 구글&파이어베이스로 사용자 인증하기 1
Fire auth(Firebase authentication)를 이용해 Google 및 이메일 인증을 해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 80 구글 애널리틱스로 사이트 접속 현황 파악하기
구글 애널리틱스로 사이트 분석을 해보겠습니다.
googlemap
NEMBV 14 Front-end finished
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
gsm
가산 GSM Test 후기
해외에 디바이스를 팔려면 팔 곳에 가서 만들고 테스트하면 되지만..
gtd
GTD(시간 관리)
GTD란 데이비드 앨런(David Aallan)의 책, 할 일 관리(Getting Things Done, GTD)라는 것이다. 개인이 효율적으로 시간을 관리하여 자신이 하고자 하는 일을 깔끔하게 해결하는 방법을 정리했다. 2001년에 처음 출판된 이후, IT 개발자들에게 열...
hosting
NUXT로 혼자 웹사이트 만들기 5 firebase로 hosting해보기
넉스트(nuxt) 소스를 파이어베이스 호스팅(google firebase hosting)을 이용해서 배포(deploy)해봅니다.
https
모던웹(NEMV) 혼자 제작 하기 3기 - 79 보안연결(ssl) 적용하기
보안연결을 구성하여 https로 접속 해보겠습니다.
iOS
iOS 개발 - 개발환경 세팅
갑자기 뜬금 없이 아이폰 앱이 만들고 싶어서 한번 시작해봅니다..
iPhone
iOS 개발 - 개발환경 세팅
갑자기 뜬금 없이 아이폰 앱이 만들고 싶어서 한번 시작해봅니다..
icon
Flutter와 Firebase로 Android iOS 둘 다 만들기 14 런쳐 꾸미기
앱 아이콘과 스플래쉬 페이지를 만들어봅니다.
iconv-lite
Electron native module 사용하기
electron-vue(vue-cli2)로 제작되었던 앱을 vue-cli3플러긴 일렉트론 버전(vue add electron-builder)으로 마이그레이션을 하다보니 생각보다 괴로운 부분이 많았습니다..
idea
Vue와 Firebase로 모던웹사이트 만들기 소개
Vue & Firebase에 대해 간단히 소개합니다.
Firebase functions에서 mongodb atlas에 접속하기
Firebase functions에서 mongodb atlas에 접속하는 방법을 다룹니다.
넉스트(nuxt) 사용 후기
넉스트를 사용하면서 강좌를 하고 있는 이유는 실무에 실제 반영해보고, 좀 더 빠른 개발의 길로 이끌어 보고 싶은 마음에서 였습니다.
일렉트론 앱 제작 후기
최근에 데스크탑 앱을 하나 만들어서 배포했습니다.
Electron native module 사용하기
electron-vue(vue-cli2)로 제작되었던 앱을 vue-cli3플러긴 일렉트론 버전(vue add electron-builder)으로 마이그레이션을 하다보니 생각보다 괴로운 부분이 많았습니다..
최근 개발 흐름 따라가보기
최근 일이 좀 바빠져서 강좌를 쉬고 있습니다.
모바일앱(iOS Android) 둘 다 만들기 - 3 iOS 스위프트 이정도만 하고 넘어가자
기본적인 앱을 개발하기위해 스위프트를 최소한만 알아보겠습니다.
모바일앱(iOS Android) 둘 다 만들기 - 1 iOS UI 기초
간단히 버튼을 올리고 UI가 동작하는 지 테스트 해봅니다.
앱(iOS Android) 둘 다 만들기 - iOS 준비하기
모바일앱을 개발한다고 하면 대부분은 안드로이드와 iOS 둘 다 원합니다.
앱(iOS Android) 둘 다 만들기 - 하이브리드 vs 네이티브 앱 선택
앱을 시작해야되는 상황이 왔습니다.
Electron 5 일렉트론뷰로 우아한 데스크탑 앱 만들기 업데이트(vue-cli3)
vue-cli3가 업데이트 되어서 기존 설치법(vue-cli2)이 아예 막혀버렸습니다.
Vuetify(뷰티파이) cli 변경 문제
뷰티파이가 1.3.2 에서 갑자기 설치되는 기본 홈 모양을 바꿨습니다…
Vuetify(뷰티파이) 1.3 릴리즈 소식
기다리던 뷰티파이가 드디어 1.3 릴리즈가 오늘 떴습니다.
Electron 4 일렉트론뷰로 우아한 데스크탑 앱 만들기 vue-cli3 업그레이드
한동안 일렉트론으로 뭔가 만들지 않았습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 신기능 소개
회사에서 새로운 프로젝트를 시작하게 되었습니다.
잠시 지나가며 끄적
최근에 일이 좀 생겨서 강좌 진도가 너무 안나갔네요..
Electron 3 일렉트론뷰로 우아한 데스크탑 앱 만들기 ToDo
과정이 지겨우니 뭔가 만들면서 재미를 찾는 것이 훨씬 개발에 득이 된다고 생각합니다..
Electron 2 일렉트론뷰로 우아한 데스크탑 앱 만들기 UI
최근 유행하는 UI 흐름에 대해 간단히 설명드립니다.
Electron 1 일렉트론뷰로 우아한 데스크탑 앱 만들기 데이터 다루기
이번에는 데스크탑 앱으로 데이터를 다뤄보겠습니다.
Electron 0 일렉트론뷰로 우아한 데스크탑 앱 만들기 기초
설치 관련 업데이트(중요)
NEMVV 0 vuetify로의 전환
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 0 모던 웹 제작 소개
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 새로운 솔루션 공개 예고
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
Weapons(개발무기들)
대부분의 시간을 모니터, 키보드, 마우스와 함께 하는 개발자는 하드웨어와 소프트웨어가 중요하다.
일일일(잡담)
지난 한달간 정말 미친듯이 일에 달려들었다..
DBA
DBA는 위키에 아래와 같이 나와있다.
database 안정성
noSQL mongoDB를 사용하며 사람들로 부터 가장 많이 들은 부분은 안정성이었다.
variable(변수) 사용
프로그래밍이 어려운 이유중 가장 큰 것은 변수라고들 한다.
GTD(시간 관리)
GTD란 데이비드 앨런(David Aallan)의 책, 할 일 관리(Getting Things Done, GTD)라는 것이다. 개인이 효율적으로 시간을 관리하여 자신이 하고자 하는 일을 깔끔하게 해결하는 방법을 정리했다. 2001년에 처음 출판된 이후, IT 개발자들에게 열...
image_picker
Flutter와 Firebase로 Android iOS 둘 다 만들기 24 fire storage에 저장하기
파이어베이스 스토리지에 저장하고 링크를 받아 프로필을 표시해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 23 사진 가져오고 압축하기
플러터 image_picker 모듈을 사용해서 카메라의 사진 혹은 내장 앨범의 사진을 가져오고 압축해서 표시해봅니다.
ios
Flutter와 Firebase로 Android iOS 둘 다 만들기 7 구글&파이어베이스로 사용자 인증하기 2
iOS & Android 시뮬레이터로 구동해봅니다.
모바일앱(iOS Android) 둘 다 만들기 - 3 iOS 스위프트 이정도만 하고 넘어가자
기본적인 앱을 개발하기위해 스위프트를 최소한만 알아보겠습니다.
모바일앱(iOS Android) 둘 다 만들기 - 2 iOS UI 네비게이션 콘트롤러
스토리보드로 네비게이션 콘트롤러를 구현해봅니다.
모바일앱(iOS Android) 둘 다 만들기 - 1 iOS UI 기초
간단히 버튼을 올리고 UI가 동작하는 지 테스트 해봅니다.
앱(iOS Android) 둘 다 만들기 - iOS 준비하기
모바일앱을 개발한다고 하면 대부분은 안드로이드와 iOS 둘 다 원합니다.
앱(iOS Android) 둘 다 만들기 - 하이브리드 vs 네이티브 앱 선택
앱을 시작해야되는 상황이 왔습니다.
javascript
모던웹(NEMV) 혼자 제작 하기 3기 - 41 프라미스(promise) 어씽크(async) 이정도만 하자!
비동기식 언어인 자바스크립트의 불편함을 해소해주는 프라미스(promise), 어씽크(async)에 대해 설명합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 14 자바스크립트 기본
이제부터 기본편 시작합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 13 자바스크립트 언어 사용 시작에 대해
현재 진행중인 모던웹 NEMV, 즉 노드, 익스프레스, 몽고디비, 뷰 모두 자바스크립트를 기반으로 합니다.
recaptcha
회원 가입 같은 폼에서 문제는 늘 보안인데.. 사람이 아닌 로봇이 무한 가입을 하기 때문이다.
jquery validate
유효성 판단을 하면서 페이지 갱신이 없는 입력폼을 정리해보겠다.
jquery
jquery validate
유효성 판단을 하면서 페이지 갱신이 없는 입력폼을 정리해보겠다.
json
Flutter와 Firebase로 Android iOS 둘 다 만들기 12 JSON 데이터 예외 처리하기
플러터로 일반적이지 않은 JSON 데이터를 처리해봅니다.
jwt
모던웹(NEMV) 혼자 제작 하기 3기 - 40 토큰(JWT)이란?
토큰(JWT)에 대해 간단히 알아봅니다.
NEMBV 20 jwt를 이용한 인증
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
launcher
Flutter와 Firebase로 Android iOS 둘 다 만들기 14 런쳐 꾸미기
앱 아이콘과 스플래쉬 페이지를 만들어봅니다.
lda
일렉트론 앱 제작 후기
최근에 데스크탑 앱을 하나 만들어서 배포했습니다.
linux
linux nfs server
서버를 운영할 때 file server와 같은 물리적인 데이터를 담아놓을 공간은 항상 필요하다
logo
렌더포레스트로 멋진 홍보동영상 만들어보기
최근 개발에서 디자인 부분은 머터리얼, 부트스트랩등으로 많은 것을 대체할 수 있습니다.
mariadb
mariaDB(mySQL) Server 설치
간만에 mysql 쓸 일이 있어서 기억을 저장해봅니다.
markdown
Markdown
markdown은 인터넷 검색하면 뭐에 쓰는지 알수 있다
mctc
가산 GSM Test 후기
해외에 디바이스를 팔려면 팔 곳에 가서 만들고 테스트하면 되지만..
mobile
Flutter와 Firebase로 Android iOS 둘 다 만들기 25 사용자 권한 처리하기
사용자 권한 별로 다른 화면을 표시합니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 24 fire storage에 저장하기
파이어베이스 스토리지에 저장하고 링크를 받아 프로필을 표시해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 23 사진 가져오고 압축하기
플러터 image_picker 모듈을 사용해서 카메라의 사진 혹은 내장 앨범의 사진을 가져오고 압축해서 표시해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 22 프로필 페이지 꾸미기
플러터 레이아웃을 이용해 프로필 페이지를 간단히 꾸며봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 21 페이지에 데이터 넘기기
새 페이지로 라우팅할 때 데이터를 넘겨봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 20 회원가입 적용하기
회원가입 페이지를 만들고 이메일로 회원가입을 해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 19 예외 처리하기
간단하게 예외처리에 대해 알아보고 플러터의 스낵바로 표현 해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 18 로그인 화면 꾸미기
이메일로그인을 구현하기 전에 모양을 간단히 꾸며봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 17 router 실제 페이지에 적용하기
지금까지 얻은 지식을 토대로 실제 만들어야할 대상을 라우터를 통해서 전환해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 16 form 작성해보기
TextFormInputField를 사용해서 입력부를 구현해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 15 named router 사용하기
Material class의 route를 이용해서 페이지 전환해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 14 런쳐 꾸미기
앱 아이콘과 스플래쉬 페이지를 만들어봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 13 Stream 사용해보기
dart의 Stream에 대해 알아봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 12 JSON 데이터 예외 처리하기
플러터로 일반적이지 않은 JSON 데이터를 처리해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 11 JSON 데이터 처리하기
플러터로 JSON 데이터를 처리하는 방법을 다룹니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 10 REST API 사용해보기
플러터로 REST API를 시험해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 9 파이어스토어 화면에서 읽고 쓰기
플러터에서 파이어스토어 데이터를 쓰고 화면에 표시해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 8 파이어스토어 사용해보기
플러터에서 파이어스토어를 사용해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 7 구글&파이어베이스로 사용자 인증하기 2
iOS & Android 시뮬레이터로 구동해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 6 구글&파이어베이스로 사용자 인증하기 1
Fire auth(Firebase authentication)를 이용해 Google 및 이메일 인증을 해봅니다.
Flutter Tip - 유용한 vscode extension
Flutter 코딩시 유용한 툴들을 정리해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 5 화면 전환 해보기
Stateful widget을 사용해서 상태값에 따라 다른 화면을 렌더링해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 4 움직이는 화면 만들기
Stateful widget을 사용한 움직이는 화면에 대해 알아봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 3 리스트 출력하기
앱에서 자주 쓰이는 리스트 출력을 알아봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 2 기본 레이아웃 정렬해보기
플러터 레이아웃의 핵심인 Container, Row, Column에 대해 알아봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 1 기본 레이아웃 살펴보기
새로운 프로젝트를 만들고 MaterialApp에 대해 조금씩 알아봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 0 개요
플러터로 안드로이드 아이오에스에서 구동되는 파이어베이스 기반 앱을 만들어 보겠습니다.
Flutter로 크로스플랫폼 앱 만들어보기
모바일 개발 플랫폼인 플러터(flutter)를 선택하게된 계기와 설치 후기를 남겨봅니다.
최근 개발 흐름 따라가보기
최근 일이 좀 바빠져서 강좌를 쉬고 있습니다.
모바일앱(iOS Android) 둘 다 만들기 - 3 iOS 스위프트 이정도만 하고 넘어가자
기본적인 앱을 개발하기위해 스위프트를 최소한만 알아보겠습니다.
모바일앱(iOS Android) 둘 다 만들기 - 2 iOS UI 네비게이션 콘트롤러
스토리보드로 네비게이션 콘트롤러를 구현해봅니다.
모바일앱(iOS Android) 둘 다 만들기 - 1 iOS UI 기초
간단히 버튼을 올리고 UI가 동작하는 지 테스트 해봅니다.
앱(iOS Android) 둘 다 만들기 - iOS 준비하기
모바일앱을 개발한다고 하면 대부분은 안드로이드와 iOS 둘 다 원합니다.
앱(iOS Android) 둘 다 만들기 - 하이브리드 vs 네이티브 앱 선택
앱을 시작해야되는 상황이 왔습니다.
iOS 개발 - 개발환경 세팅
갑자기 뜬금 없이 아이폰 앱이 만들고 싶어서 한번 시작해봅니다..
model
NEMVV 4 계정 모델링
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 8 Back-end mongoose model
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
module
NPM에 모듈 등록해보기
NPM 에 모듈을 만들어 등록해보겠습니다.
moment
모던웹(NEMV) 혼자 제작 하기 3기 - 61 시간 계산하기(moment)
시간 2월28일 23:50:55 에서 1시간이 더해지면 어떤 시간일까요?
mongo
모던웹(NEMV) 혼자 제작 하기 3기 - 89 활용편 정리
모던웹(NEMV) 제작 하기 활용편 정리합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 88 게시물에 댓글 추가하기
게시물에 댓글을 추가해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 87 위지웍 에디터 사용하기(toast ui editor)
위지웍 에디터를 사용해서 글을 작성해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 86 사용자 정보 표시하기
간단하게 사용자 정보를 화면에 표시해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 85 이미지 컴포넌트로 업로드하기(filepond)
업로드 콤포넌트를 이용해서 이미지를 업로드해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 84 이미지 변환하기(base64, sharp)
이미지 업로드 후 디비 저장까지 하려면 무엇이 필요한지 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 83 파일 업로드 하기(multer)
파일 업로드 미들웨어인 멀터(multer)를 이용해 서버에 파일을 전송해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 82 대시보드 꾸며보기
대시보드에 적절한 위젯들을 배치하고 꾸며봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 81 대시보드 게시판 다르게 표현하기
게시판 데이터를 활용해서 다른 표현을 해보도록 하겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 48 로그인 해야 들어갈 수 있는 페이지 만들기(네비게이션 가드)
로그인 해야만 진입할 수 있는 페이지를 만들어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 47 토큰 인증하기
프론트에 토큰을 저장해서 매번 토큰과 함께 요청을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 46 실제 데이터로 로그인하기
이제 실제 데이터로 로그인을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 45 사용자 모델 정리하기
기존에는 name, age 로만 테스트 했으니 로그인이 가능할 모델로 변경합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 44 로그인 간단히 만들어보기
간단하게 로그인 프론트와 백엔드가 잘 통신하는 지 확인해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 43 사이트 저장소 다루기
서버로 부터 토큰을 받아서 저장해놔야 다음에 로그인 없이 api요청이 가능합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 42 HTTP 헤더 알아보기
토큰을 보낼 때는 HTTP 헤더(header)를 통해 전송하는 것이 일반적입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 26 기본편 정리
기초편에 이어 14~26까지 기본편 한번 달려봤습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 25 API와 프론트 통신 정리
지난 강좌에 이어서 CRUD 중 UD 즉 수정, 삭제를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 24 api와 몽구스 연결
이제 디비를 조작할 수 있으니 api에서 실제 디비데이터로 몽구스(mongoose)를 사용해서 CRUD 중 CR 즉 쓰고 읽기를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 23 몽구스 설치 및 확인
노드에서 몽고디비를 사용하는 방법은 여러가지 입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 22 몽고디비 설치 확인
몽고디비 셸로 설치 확인하기
모던웹(NEMV) 혼자 제작 하기 3기 - 21 몽고디비 설치
몽고디비 로컬에 설치해보겠습니다.
NEMV 5 - vue.js 설치
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMV 4 - node.js & express & mongoDB 설치
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMV 3 - git 등록
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMV 2 - API 설계
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMV 1 - 소개
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
Monitoring System
서버를 구성할 때 가장 유의해야할 것은 유지보수라고 할 수 있다.
Mongo dump & restore
Mongodb는 분명히 좋은 백업 솔루션이 있겠지만..
Mongo Sharding 3 - 서버 확장
configsvr 권장 3세트와 shardsvr를 더 추가해서 수평확장(scale-out)이 잘 이루어지는지 확인
Mongo Sharding 2 - config,router 구성
원리는 만들어 놓았던 shardsvr들에 연결하기 위해 router를 통해야하는데 그 config meta 정보를 configsvr에 담는 것이다. 대략 이런 구성이라고 보면 된다 client -> router -> configsvr -> shards[?]
Mongo Sharding 1 - shard 구성
데이터량이 증가하고 접속자 수가 많아질 때 관리자는 시스템 업그레이드를 고려한다.
mongodb
Firebase functions에서 mongodb atlas에 접속하기
Firebase functions에서 mongodb atlas에 접속하는 방법을 다룹니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 41 프라미스(promise) 어씽크(async) 이정도만 하자!
비동기식 언어인 자바스크립트의 불편함을 해소해주는 프라미스(promise), 어씽크(async)에 대해 설명합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 38 깃헙에서 안보이는 설정파일 만들기
설정파일을 사용하는 방법에 대해 알아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 37 몽고 클라우드(ATLAS) 가입 및 테스트
몽고디비 클라우드 서비스인 아틀라스를 가입 후 테스트 까지 해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 26 기본편 정리
기초편에 이어 14~26까지 기본편 한번 달려봤습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 25 API와 프론트 통신 정리
지난 강좌에 이어서 CRUD 중 UD 즉 수정, 삭제를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 24 api와 몽구스 연결
이제 디비를 조작할 수 있으니 api에서 실제 디비데이터로 몽구스(mongoose)를 사용해서 CRUD 중 CR 즉 쓰고 읽기를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 23 몽구스 설치 및 확인
노드에서 몽고디비를 사용하는 방법은 여러가지 입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 22 몽고디비 설치 확인
몽고디비 셸로 설치 확인하기
모던웹(NEMV) 혼자 제작 하기 3기 - 21 몽고디비 설치
몽고디비 로컬에 설치해보겠습니다.
데이터베이스 사용 및 팁
저는 전산쪽과 1%도 상관이 없는 사람인데 어떠한 계기로 데이터베이스를 쓰게 되었습니다.
NEMBV 8 Back-end mongoose model
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 7 Back-end mongoose setup
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 6 Database setting
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
mongoose
모던웹(NEMV) 혼자 제작 하기 3기 - 80 구글 애널리틱스로 사이트 접속 현황 파악하기
구글 애널리틱스로 사이트 분석을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 79 보안연결(ssl) 적용하기
보안연결을 구성하여 https로 접속 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 78 고급편 정리
지금까지 했던 것들을 복습 겸 정리해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 77 구글 리캡챠로 로봇 막아보기(recaptcha)
구글에서 제공하는 리캡챠(recaptcha)를 이용하여 로봇을 막아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 76 반응형 게시판 만들기
모바일, 태블릿, 데스크탑등의 다양한 장에서 적절하게 표현되게 변경해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 75 HTTP 예외처리 제대로 하기
공식 HTTP 에러코드에 맞는 결과를 전송해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 74 공용 알림 메세지 만들기(vuex)
모든 페이지에 있는 알림 메세지 처리를 한 곳에서 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 73 게시판 재활용하기(뷰라우터)
만들어진 게시판 하나로 여러개를 운영해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 72 게시판 페이징과 정렬 처리하기
게시판 페이징과 정렬 처리를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 71 게시판 내용 수정과 삭제
선택된 게시물의 수정과 삭제를 구현해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 70 게시판 내용 읽기
게시판 목록과 내용을 분리해서 읽어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 69 게시판 뷰티파이 테이블 사용하기
뷰티파이의 데이터테이블(v-datatable)을 이용해서 화면에 표시해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 68 게시판 게시물 쓰고 읽기
게시물(article) API CRUD중 게시판 정보가 필요한 CR(Create Read)를 프론트에서 확인해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 67 게시판 게시물 API 만들기
게시물 CRUD를 할 수 있게 API를 만들어 보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 66 게시판 정보 읽기
게시물들을 가져오기 위해 먼저 게시판 정보를 가져와보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 65 게시판을 위한 메뉴 구성
편의를 위해 메뉴를 구성해서 게시판 진입하도록 하겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 64 게시판 모델 만들기(populate)
게시물들은 누가 썼는지, 어느 게시판인지가 제일 중요합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 63 게시판 관리 만들기
일반적으로 운영할 게시판을 만드려면 무엇이 필요한지 생각해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 52 모든 요청 토큰 설정으로 접근 막기
매번 액시오스로 api 요청을 할 때마다 헤더에 토큰을 넣어야 작동하는 부분을 사전 정의해서 생략해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 51 백엔드로 페이지 권한 얻기
토큰 유무만 가지고 화면 보안 접근을 하는 것은 역시 위험합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 50 사용자 및 페이지 관리하기
사용자를 자동으로 만들어 주긴 하지만 권한등을 코드에서 제어하기 불편합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 48 로그인 해야 들어갈 수 있는 페이지 만들기(네비게이션 가드)
로그인 해야만 진입할 수 있는 페이지를 만들어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 47 토큰 인증하기
프론트에 토큰을 저장해서 매번 토큰과 함께 요청을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 46 실제 데이터로 로그인하기
이제 실제 데이터로 로그인을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 45 사용자 모델 정리하기
기존에는 name, age 로만 테스트 했으니 로그인이 가능할 모델로 변경합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 44 로그인 간단히 만들어보기
간단하게 로그인 프론트와 백엔드가 잘 통신하는 지 확인해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 43 사이트 저장소 다루기
서버로 부터 토큰을 받아서 저장해놔야 다음에 로그인 없이 api요청이 가능합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 42 HTTP 헤더 알아보기
토큰을 보낼 때는 HTTP 헤더(header)를 통해 전송하는 것이 일반적입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 41 프라미스(promise) 어씽크(async) 이정도만 하자!
비동기식 언어인 자바스크립트의 불편함을 해소해주는 프라미스(promise), 어씽크(async)에 대해 설명합니다.
NEMVV 4 계정 모델링
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 20 jwt를 이용한 인증
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 19 인증 시스템 준비
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 18 부드러운 게시판
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 17 다른 게시판 운영
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 16 게시판 댓글 만들기
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 15 게시판 만들기
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 13 Back-end api paging
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 8 Back-end mongoose model
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 7 Back-end mongoose setup
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
movie
렌더포레스트로 멋진 홍보동영상 만들어보기
최근 개발에서 디자인 부분은 머터리얼, 부트스트랩등으로 많은 것을 대체할 수 있습니다.
multer
모던웹(NEMV) 혼자 제작 하기 3기 - 83 파일 업로드 하기(multer)
파일 업로드 미들웨어인 멀터(multer)를 이용해 서버에 파일을 전송해보겠습니다.
navigation
모바일앱(iOS Android) 둘 다 만들기 - 2 iOS UI 네비게이션 콘트롤러
스토리보드로 네비게이션 콘트롤러를 구현해봅니다.
navigator
Flutter와 Firebase로 Android iOS 둘 다 만들기 22 프로필 페이지 꾸미기
플러터 레이아웃을 이용해 프로필 페이지를 간단히 꾸며봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 21 페이지에 데이터 넘기기
새 페이지로 라우팅할 때 데이터를 넘겨봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 20 회원가입 적용하기
회원가입 페이지를 만들고 이메일로 회원가입을 해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 19 예외 처리하기
간단하게 예외처리에 대해 알아보고 플러터의 스낵바로 표현 해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 18 로그인 화면 꾸미기
이메일로그인을 구현하기 전에 모양을 간단히 꾸며봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 17 router 실제 페이지에 적용하기
지금까지 얻은 지식을 토대로 실제 만들어야할 대상을 라우터를 통해서 전환해봅니다.
Flutter와 Firebase로 Android iOS 둘 다 만들기 15 named router 사용하기
Material class의 route를 이용해서 페이지 전환해봅니다.
nembv
NEMBV 21 운영과 배포 방법
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 20 jwt를 이용한 인증
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 19 인증 시스템 준비
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 18 부드러운 게시판
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 17 다른 게시판 운영
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 16 게시판 댓글 만들기
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 15 게시판 만들기
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 14 Front-end finished
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 13 Back-end api paging
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 12 Front-end bootstrap layout
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 11 Back-end and Front-end api test
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 10 Front-end api test
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 9 Back-end api test
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 8 Back-end mongoose model
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 7 Back-end mongoose setup
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 6 Database setting
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 5 Back-end api route
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 4 Back-end route setup
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 3 Back-end route 이해
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 2 Front-end Setup
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 1 Back-end Setup
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 0 모던 웹 제작 소개
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 새로운 솔루션 공개 예고
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
nemv
모던웹(NEMV) 혼자 제작 하기 3기 - 91 국제화 쉽게 구현하기(vue-i18n)
모던 개발자라면 앱이던 웹이던 항상 다국어 지원이 가능할 통로를 열어두어야한다고 생각합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 90 알림창 쉽게 구현하기(vuetify-dialog)
모던웹(NEMV) 제작 하기 보너스편 시작합니다. [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide ...
모던웹(NEMV) 혼자 제작 하기 3기 - 89 활용편 정리
모던웹(NEMV) 제작 하기 활용편 정리합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 88 게시물에 댓글 추가하기
게시물에 댓글을 추가해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 87 위지웍 에디터 사용하기(toast ui editor)
위지웍 에디터를 사용해서 글을 작성해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 86 사용자 정보 표시하기
간단하게 사용자 정보를 화면에 표시해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 85 이미지 컴포넌트로 업로드하기(filepond)
업로드 콤포넌트를 이용해서 이미지를 업로드해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 84 이미지 변환하기(base64, sharp)
이미지 업로드 후 디비 저장까지 하려면 무엇이 필요한지 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 83 파일 업로드 하기(multer)
파일 업로드 미들웨어인 멀터(multer)를 이용해 서버에 파일을 전송해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 82 대시보드 꾸며보기
대시보드에 적절한 위젯들을 배치하고 꾸며봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 81 대시보드 게시판 다르게 표현하기
게시판 데이터를 활용해서 다른 표현을 해보도록 하겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 80 구글 애널리틱스로 사이트 접속 현황 파악하기
구글 애널리틱스로 사이트 분석을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 79 보안연결(ssl) 적용하기
보안연결을 구성하여 https로 접속 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 78 고급편 정리
지금까지 했던 것들을 복습 겸 정리해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 77 구글 리캡챠로 로봇 막아보기(recaptcha)
구글에서 제공하는 리캡챠(recaptcha)를 이용하여 로봇을 막아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 76 반응형 게시판 만들기
모바일, 태블릿, 데스크탑등의 다양한 장에서 적절하게 표현되게 변경해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 75 HTTP 예외처리 제대로 하기
공식 HTTP 에러코드에 맞는 결과를 전송해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 74 공용 알림 메세지 만들기(vuex)
모든 페이지에 있는 알림 메세지 처리를 한 곳에서 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 73 게시판 재활용하기(뷰라우터)
만들어진 게시판 하나로 여러개를 운영해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 72 게시판 페이징과 정렬 처리하기
게시판 페이징과 정렬 처리를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 71 게시판 내용 수정과 삭제
선택된 게시물의 수정과 삭제를 구현해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 70 게시판 내용 읽기
게시판 목록과 내용을 분리해서 읽어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 69 게시판 뷰티파이 테이블 사용하기
뷰티파이의 데이터테이블(v-datatable)을 이용해서 화면에 표시해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 68 게시판 게시물 쓰고 읽기
게시물(article) API CRUD중 게시판 정보가 필요한 CR(Create Read)를 프론트에서 확인해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 67 게시판 게시물 API 만들기
게시물 CRUD를 할 수 있게 API를 만들어 보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 66 게시판 정보 읽기
게시물들을 가져오기 위해 먼저 게시판 정보를 가져와보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 65 게시판을 위한 메뉴 구성
편의를 위해 메뉴를 구성해서 게시판 진입하도록 하겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 64 게시판 모델 만들기(populate)
게시물들은 누가 썼는지, 어느 게시판인지가 제일 중요합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 63 게시판 관리 만들기
일반적으로 운영할 게시판을 만드려면 무엇이 필요한지 생각해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 62 로그인 시간 제한하기(토큰 갱신)
토큰 생성시 만료시간 없이 만들 었기 때문에 브라우저 로컬스토리지에 토큰이 남아있다면 100년이 지나도 로그인이 가능합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 61 시간 계산하기(moment)
시간 2월28일 23:50:55 에서 1시간이 더해지면 어떤 시간일까요?
모던웹(NEMV) 혼자 제작 하기 3기 - 60 뷰 컴포넌트 사용하기
뷰의 특장점중 하나인 콤포넌트에 대해 알아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 59 비밀번호 암호화하기
비밀번호를 평문이 아닌 암호화된 문자로 저장해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 58 사용자편 정리
응용편: 사용자를 마칩니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 57 회원가입 완성하기
백엔드를 만들어서 만들어둔 프론트와 연동시켜보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 56 회원가입 프론트 적용하기
뷰티파이 예제로 만들고 있는 모델에 맞게 수정해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 55 회원가입 유효성 판단
뷰티파이 폼을 이용해 회원가입을 간단하게 만들어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 54 한 소스로 사이트 다르게 사용하기
현재 소스를 가지고 다른 사람이 사용하려면 코드 수정이 필요합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 53 새로고침 없이 로그인 하기(by 인터셉터)
매번 요청시 코드 신경쓰지 않으면서 토큰을 매번 날리도록 만들어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 52 모든 요청 토큰 설정으로 접근 막기
매번 액시오스로 api 요청을 할 때마다 헤더에 토큰을 넣어야 작동하는 부분을 사전 정의해서 생략해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 51 백엔드로 페이지 권한 얻기
토큰 유무만 가지고 화면 보안 접근을 하는 것은 역시 위험합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 50 사용자 및 페이지 관리하기
사용자를 자동으로 만들어 주긴 하지만 권한등을 코드에서 제어하기 불편합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 49 뷰저장소(vuex) 이정도만 쓰자
토큰 유무에 따라 로그인/아웃 상태를 전체 페이지에서 판단할 수 있는 뷰저장소에 대해 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 48 로그인 해야 들어갈 수 있는 페이지 만들기(네비게이션 가드)
로그인 해야만 진입할 수 있는 페이지를 만들어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 47 토큰 인증하기
프론트에 토큰을 저장해서 매번 토큰과 함께 요청을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 46 실제 데이터로 로그인하기
이제 실제 데이터로 로그인을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 45 사용자 모델 정리하기
기존에는 name, age 로만 테스트 했으니 로그인이 가능할 모델로 변경합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 44 로그인 간단히 만들어보기
간단하게 로그인 프론트와 백엔드가 잘 통신하는 지 확인해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 43 사이트 저장소 다루기
서버로 부터 토큰을 받아서 저장해놔야 다음에 로그인 없이 api요청이 가능합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 42 HTTP 헤더 알아보기
토큰을 보낼 때는 HTTP 헤더(header)를 통해 전송하는 것이 일반적입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 41 프라미스(promise) 어씽크(async) 이정도만 하자!
비동기식 언어인 자바스크립트의 불편함을 해소해주는 프라미스(promise), 어씽크(async)에 대해 설명합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 40 토큰(JWT)이란?
토큰(JWT)에 대해 간단히 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 39 API 미들웨어란?
API 미들웨어에 대해 간단히 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 38 깃헙에서 안보이는 설정파일 만들기
설정파일을 사용하는 방법에 대해 알아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 37 몽고 클라우드(ATLAS) 가입 및 테스트
몽고디비 클라우드 서비스인 아틀라스를 가입 후 테스트 까지 해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 36 서버 오토스케일 정리
지난강좌의 싱글서버로 개발은 충분합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 35 pm2로 실제 서버에 배포하기
개발피씨에서 pm2는 사실 켜둘 필요가 없습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 34 pm2로 안정적인 서버 만들기
npm start, yarn dev, node ./bin/www 등으로 실행하였고 끌 때는 ctrl+c로 종료했습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 33 배포를 위한 개발환경 설정
지금까지 3000포트를 사용하여 테스트를 했습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 32 클라우드 서버 디비 설치 및 테스트
서버가 개발했을 때와 같이 동작하게 하려면 얀, 몽고디비를 설치해야합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 31 클라우드 서버 깃 설치 및 테스트
깃 설치하고 ssh방식으로 소스를 다운로드 받는 방법입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 30 클라우드 서버 노드 설치
리눅스 서버에 모던웹을 서비스할 수 있도록 요소들을 설치해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 29 클라우드 서버 리눅스 다루기
서버 구성을 위해 필요한 최소한의 리눅스 지식을 정리해봤습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 28 클라우드 서버 만들기
클라우드 서버(인스턴스)를 만들고 접속하는 방법을 설명합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 27 클라우드 서버 가입하기
이제부터 3부 응용편 시작합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 응용 서버편 시작
모던웹 응용 서버편 시작합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 26 기본편 정리
기초편에 이어 14~26까지 기본편 한번 달려봤습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 25 API와 프론트 통신 정리
지난 강좌에 이어서 CRUD 중 UD 즉 수정, 삭제를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 24 api와 몽구스 연결
이제 디비를 조작할 수 있으니 api에서 실제 디비데이터로 몽구스(mongoose)를 사용해서 CRUD 중 CR 즉 쓰고 읽기를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 23 몽구스 설치 및 확인
노드에서 몽고디비를 사용하는 방법은 여러가지 입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 22 몽고디비 설치 확인
몽고디비 셸로 설치 확인하기
모던웹(NEMV) 혼자 제작 하기 3기 - 21 몽고디비 설치
몽고디비 로컬에 설치해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 20 RESTful한 api 만들기
REST(Representational State Transfer)는 구글링해보면 잘 나와 있지만 대체 뭔소린지 알아먹기가 힘드실 겁니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 19 axios 사용하기
프론트에서 api를 통해 데이터를 받아서 화면을 변경해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 18 api 설정하기
깃헙에 올린 새 프로젝트에서 api 설정하는 것을 다시 정리해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 17 SPA란
웹사이트를 처음 만드시는 분들도 있기 때문에 SPA에 대해 간략하게 설명해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 16 깃 사용하기
지금까지 프로젝트를 깃을 사용해 다시 만들어 보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 15 뷰티파이 레이아웃
모던웹, 즉 현대적인 웹에서 가장 큰 부분을 담당하는 반응형에 대한 이야기입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 14 자바스크립트 기본
이제부터 기본편 시작합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 13 자바스크립트 언어 사용 시작에 대해
현재 진행중인 모던웹 NEMV, 즉 노드, 익스프레스, 몽고디비, 뷰 모두 자바스크립트를 기반으로 합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 12 뷰티파이 콤포넌트 사용해보기
뷰티파이의 콤포넌트(버튼, 칩)를 사용해서 화면 처리를 위한 연습을 해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 11 익스프레스와 뷰라우터
뷰 라우터의 히스토리모드 이해와 백엔드 라우터의 연결에 대해 알아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 10 뷰티파이 메뉴 추가
뷰티파이 기본 설치된 상태에서 페이지 추가해서 브라우저로 확인해보도록 하겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 9 뷰티파이 수정
뷰티파이 기본 설치된 파일을 수정해서 브라우저로 확인해보기
모던웹(NEMV) 혼자 제작 하기 3기 - 8 익스프레스와 뷰티파이 연동
전 강좌에서 yarn serve로 실행한 http://localhost:8080은 뷰 개발모드입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 7 뷰티파이 설치
뷰티파이 설치에 대해 알아보기
모던웹(NEMV) 혼자 제작 하기 3기 - 6 뷰티파이란
뷰티파이라는 CSS프레임워크에 대해 간략히 소개합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 5 익스프레스 라우터
생성된 익스프레스 소스에 라우터, 페이지를 추가해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 4 익스프레스 수정
생성된 익스프레스 소스를 수정해서 웹서버 동작 확인해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 3 익스프레스 설정
익스프레스 설치 및 약간의 설명입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 2 노드 설치
node.js 설치 및 약간의 설명입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 1 에디터 설치
너무 쉬운 에디터(Atom) 설치이지만, 처음 부터 하는 느낌으로 만들어봤습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 영상화
NEMV(Node.js, Express.js, MongoDB, Vue.js)를 이용해 웹사이트를 한번에 제작하는 강좌를 만들어왔었는데요..
모던웹(NEMV) 혼자 제작 하기 3기 - 신기능 소개
회사에서 새로운 프로젝트를 시작하게 되었습니다.
nemvv
NEMVV 5 계정 api
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMVV 4 계정 모델링
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMVV 3 웹서버 구동
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMVV 2 전역파일
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMVV 1 설정파일
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMVV 0 vuetify로의 전환
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
news
Vuetify(뷰티파이) cli 변경 문제
뷰티파이가 1.3.2 에서 갑자기 설치되는 기본 홈 모양을 바꿨습니다…
Vuetify(뷰티파이) 1.3 릴리즈 소식
기다리던 뷰티파이가 드디어 1.3 릴리즈가 오늘 떴습니다.
nfs
linux nfs server
서버를 운영할 때 file server와 같은 물리적인 데이터를 담아놓을 공간은 항상 필요하다
node
Vue와 Firebase로 모던웹사이트 만들기 52 firebase storage 사용해보기
firebase storage 기능을 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 51 사용자 권한 변경하기
사용자 권한 변경은 단순하지만 종합 선물세트 지식이 필요합니다. firebase(functions, auth, store), vue(component), vuetify(v-select), axios, RESTful API등.. 찬찬히 지금 것들을 되짚어 봅니다~
Vue와 Firebase로 모던웹사이트 만들기 50 회원관리 모양 내보기
vuetify의 v-data-iterator를 사용해서 기존 테이블 방식을 변경해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 49 검색어 필터 만들어보기
vuetify의 v-autocomplete로 검색어 필터를 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 48 파이어스토어 검색해보기
firestore의 where와 vuetify의 v-combobox를 이용해 email검색을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 47 파이어스토어 정렬해보기
firestore 의 orderBy와 vuetify v-data-table을 이용해 정렬을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 46 파이어스토어 페이징해보기
firestore의 offset, limit를 사용해서 vuetify의 v-data-table로 페이징을 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 45 파이어스토어 컬렉션의 전체 개수 구하기
firestore와 functions의 조합으로 컬렉션의 전체 개수 정보를 저장해둡니다.
Vue와 Firebase로 모던웹사이트 만들기 44 파이어베이스 함수에서 파이어스토어 사용하기
파이어베이스 함수(functions)에서 기본 인증으로는 firebase serve –only functions로는 위험하기 때문에 파이어스토어 데이터에 접근할 수 없습니다. 해당 키를 가져와서 프론트에서 데이터를 받아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 43 파이어베이스 함수에서 권한 확인하기
파이어베이스 함수(functions)에서 토큰을 확인하고 풀어헤친 토큰정보(claims)로 권한에 따른 결과를 보냅니다.
Vue와 Firebase로 모던웹사이트 만들기 42 뷰라우터로 권한별 페이지 접근하기
firebase의 토큰 권한 정보(claims.level)로 사용자의 접근을 차단해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 41 파이어베이스 인증 라우터 지연시키기
firebase auth onAuthStateChanged 에서 페이지 이동을 시키는 방법은 잘못되었습니다. 파이어베이스 인증 상태 후의 행동이 중요하므로 다른 방법으로 지연시켜봤습니다.
Vue와 Firebase로 모던웹사이트 만들기 40 firestore에 사용자 정보 추가 삭제하기
firebase auth로 추가/삭제된 이벤트를 firebase functions에서 받아서 firestore에 추가/삭제합니다.
Vue와 Firebase로 모던웹사이트 만들기 39 권한으로 페이지 강제 이동시키기
vue-router로 권한에 따라 페이지를 이동시킵니다.
Vue와 Firebase로 모던웹사이트 만들기 38 firebase token 풀어보기
사용자별 화면 표시를 위해 사용자 데이터를 넣은 토큰을 풀어봅니다~
Vue와 Firebase로 모던웹사이트 만들기 37 firebase functions 맞춤 사용자 설정하기
firebase auth 정보에 사용자 레벨을 추가합니다.
Vue와 Firebase로 모던웹사이트 만들기 36 firebase functions 환경변수 사용하기
관리자 계정 생성을 위해 firebase functions 환경변수를 이용해서 관리자 계정을 지정해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 35 vuetify2로 업그레이드하기
vuetify V1 to V2로 업그레이드 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 34 이메일로 가입과 로그인해보기
파이어베이스 인증(firebase authentication)을 기능중 이메일로 가입과 로그인을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 33 v-form으로 유효성 검사하기
vuetify의 v-form으로 유효성 판단을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 32 회원가입 모양 내보기
vue componet 통신을 이용해 회원가입과 로그인 화면을 토글시켜봅니다.
Vue와 Firebase로 모던웹사이트 만들기 31 로그인 상태 만들어보기
vuetify의 v-menu, v-avatar등을 이용해서 로그인 상태 정보를 표현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 30 로딩 상태 표시하기
vue-progressbar를 이용해서 로딩 상태를 표시해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 29 뷰라우터 네비게이션 가드 사용하기
뷰라우터(vue-router)를 이용해서 로그인 상태에 따라 페이지 접근을 막거나(navigation guard) 이동시킵니다.
Vue와 Firebase로 모던웹사이트 만들기 28 로그인 화면 모양 내보기
뷰티파이(vuetify)를 이용해서 로그인 화면을 만들어 보는 시간을 가져봅니다. 미세한 UI 조절에 고통받는 모습은 아마 누구나 마찬가지 일듯..
Vue와 Firebase로 모던웹사이트 만들기 27 firebase 인증(auth)정보를 vuex 로 저장
인증정보인 user 와 token 을 vuex 저장소에 저장해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 26 뷰엑스(vuex)로 전역 제어하기
vuex를 사용해서 전역 변수를 제어해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 25 뷰(vue) 컴포넌트(component) 알아보기
vue component 사용법을 간단히 알아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 24 인증을 위한 미들웨어와 액시오스 설정하기
파이어베이스 함수(functions)를 사용할 때 가장 주의해야할 것은 보안입니다. 인증된 요청만 받아들이기 위한 미들웨어와 액시오스 설정에 대해 알아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 23 firebase functions 공용 에러 처리
백엔드(firebase functions)에서 에러처리를 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 22 vue 공용 error 처리하기
추후 비동기 함수(async)를 편하게 사용하기위해 공용 에러 처리를 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 21 firebase functions vue에서 axios로 접근하기
파이어베이스 함수(functions)에 등록한 express api에 front(vue + axios)로 접근해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 20 firebase functions RESTful api 만들기
파이어베이스 펑션스를 이용해서 REST API를 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 19 firebase functions 알아보기
파이어베이스의 서버리스 백엔드 역할을 해주는 firebase functions에 대해 알아보고 설치해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 18 firebase 인증(auth) 로그인 해보기
파이어베이스 인증을 이용해서 구글과 이메일 로그인을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 17 firestore crud 해보기
firestore로 데이터베이스의 기본행위인 CRUD를 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 16 firestore 설정하기
프론트에서 firestore 사용할 수 있도록 설정해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 15 vuetify로 노트 만들기
데이터베이스(firestore)를 다루기 위해 프론트를 구성해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 14 promise 알아보기
데이터베이스 처리하기에 앞서 프라미스 사용법에 대해 간단히 알아보고 넘어갑니다.
Vue와 Firebase로 모던웹사이트 만들기 13 vuetify 반응형웹 구현하기
v-container, layout, flex 3종세트로 반응형웹을 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 12 vuetify로 카드 만들기
화면 구성의 기본인 v-card를 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 11 vuetify로 하위 메뉴 구성하기
vuetify list-group 을 사용해 하위 메뉴를 구성해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 10 vuetify로 네비게이션 드라워만들기
툴바 메뉴 클릭시 v-navigation-drawer를 표시해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 9 vuetify로 리스트 만들기
vuetify/vList를 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 8 vuetify로 툴바 만들기
vuetify를 이용해서 상단 툴바를 만들어봅니다.
Vue와 Firebase로 모던웹사이트 만들기 7 vue 맛보기
vue가 무엇인지 이해하고 넘어갑니다.
Vue와 Firebase로 모던웹사이트 만들기 6 git 다운로드 받기
강좌 소스 활용을 위해 git clone 과 checkout에 대해 알아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 5 SPA 알아보기
SPA가 무엇인지 알아보고 vue-router로 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 4 git 사용하기
git에 대해 알아보고 필요한 만큼만 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 3 사이트 배포하기
firebase hosting을 이용해서 사이트를 배포해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 2 에디터 설정하기
뷰(vue)에 최적화된 에디터(vscode) 설정을 합니다.
Vue와 Firebase로 모던웹사이트 만들기 1 개발환경 구축하기
개발에 필요한 요소들을 설치합니다.
Vue와 Firebase로 모던웹사이트 만들기 소개
Vue & Firebase에 대해 간단히 소개합니다.
NUXT로 혼자 웹사이트 만들기 15 파이어베이스(firebase) 리캡챠(recaptcha v3) 사용하기
넉스트(nuxt) 와 파이어베이스 펑션스 (firebase functions)로 리캡챠(recaptcha v3)를 사용해봅니다.
NUXT로 혼자 웹사이트 만들기 14 파이어베이스(firebase) 인증 기능 라우팅해보기
파이어베이스 인증 상태에 따라 페이지 전환을 해보겠습니다.
NUXT로 혼자 웹사이트 만들기 13 파이어베이스(firebase) 인증 기능 화면 표시하기
파이어베이스 인증 기능을 넉스트 저장소(vuex)를 이용해 표현해봅니다.
NUXT로 혼자 웹사이트 만들기 12 파이어베이스(firebase) 인증 기능 토큰 알아보기
파이어베이스 인증 기능중 토큰에 대해 알아봅니다.
NUXT로 혼자 웹사이트 만들기 11 파이어베이스(firebase) 인증 기능(email&password) 사용하기
파이어베이스 인증기능중 이메일+비밀번호를 사용해서 로그인해봅니다.
NUXT로 혼자 웹사이트 만들기 10 파이어베이스(firebase) 파이어스토어(firestore) 페이징(paging)처리하기
파이어스토어를 이용해서 페이징처리를 해봅니다.
NUXT로 혼자 웹사이트 만들기 9 파이어베이스(firebase) 파이어스토어(firestore) CRUD 해보기
파이어스토어를 이용해서 CRUD 를 시험해보겠습니다.
NUXT로 혼자 웹사이트 만들기 8 파이어베이스(firebase) 펑션스(functions) 시작하기
파이어베이스 펑션스를 이용해서 API를 간단히 구현해봅니다.
NUXT로 혼자 웹사이트 만들기 7 닷엔브(dotenv)로 파이어베이스 프로젝트 정리하기
넉스트 프로젝트에서 닷엔브로 파이어베이스를 사용하기 위한 설정을 해보겠습니다.
NUXT로 혼자 웹사이트 만들기 6 firebase로 데이터베이스(firestore) 사용하기
파이어베이스의 noSQL 데이터베이스인 firestore를 파이어베이스 호스팅 환경에서 사용해봅니다.
NUXT로 혼자 웹사이트 만들기 5 firebase로 hosting해보기
넉스트(nuxt) 소스를 파이어베이스 호스팅(google firebase hosting)을 이용해서 배포(deploy)해봅니다.
NUXT로 혼자 웹사이트 만들기 4 플러그인 설치
전역으로 사용할 플러그인 설치에 대해 알아봅니다.
NUXT로 혼자 웹사이트 만들기 3 라우팅
서버사이드 렌더링도 중요하지만, 기존에 하던 동적 화면 전환이 잘 되는 것이 더 중요합니다.
NUXT로 혼자 웹사이트 만들기 2 설치
NUXT를 설치하고 간단히 구조를 알아봅니다.
NUXT로 혼자 웹사이트 만들기 1 소개
항상 고민하던 부분이 있습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 91 국제화 쉽게 구현하기(vue-i18n)
모던 개발자라면 앱이던 웹이던 항상 다국어 지원이 가능할 통로를 열어두어야한다고 생각합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 90 알림창 쉽게 구현하기(vuetify-dialog)
모던웹(NEMV) 제작 하기 보너스편 시작합니다. [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide ...
모던웹(NEMV) 혼자 제작 하기 3기 - 89 활용편 정리
모던웹(NEMV) 제작 하기 활용편 정리합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 88 게시물에 댓글 추가하기
게시물에 댓글을 추가해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 87 위지웍 에디터 사용하기(toast ui editor)
위지웍 에디터를 사용해서 글을 작성해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 86 사용자 정보 표시하기
간단하게 사용자 정보를 화면에 표시해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 85 이미지 컴포넌트로 업로드하기(filepond)
업로드 콤포넌트를 이용해서 이미지를 업로드해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 84 이미지 변환하기(base64, sharp)
이미지 업로드 후 디비 저장까지 하려면 무엇이 필요한지 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 83 파일 업로드 하기(multer)
파일 업로드 미들웨어인 멀터(multer)를 이용해 서버에 파일을 전송해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 82 대시보드 꾸며보기
대시보드에 적절한 위젯들을 배치하고 꾸며봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 81 대시보드 게시판 다르게 표현하기
게시판 데이터를 활용해서 다른 표현을 해보도록 하겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 80 구글 애널리틱스로 사이트 접속 현황 파악하기
구글 애널리틱스로 사이트 분석을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 79 보안연결(ssl) 적용하기
보안연결을 구성하여 https로 접속 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 78 고급편 정리
지금까지 했던 것들을 복습 겸 정리해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 77 구글 리캡챠로 로봇 막아보기(recaptcha)
구글에서 제공하는 리캡챠(recaptcha)를 이용하여 로봇을 막아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 76 반응형 게시판 만들기
모바일, 태블릿, 데스크탑등의 다양한 장에서 적절하게 표현되게 변경해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 75 HTTP 예외처리 제대로 하기
공식 HTTP 에러코드에 맞는 결과를 전송해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 74 공용 알림 메세지 만들기(vuex)
모든 페이지에 있는 알림 메세지 처리를 한 곳에서 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 73 게시판 재활용하기(뷰라우터)
만들어진 게시판 하나로 여러개를 운영해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 72 게시판 페이징과 정렬 처리하기
게시판 페이징과 정렬 처리를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 71 게시판 내용 수정과 삭제
선택된 게시물의 수정과 삭제를 구현해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 70 게시판 내용 읽기
게시판 목록과 내용을 분리해서 읽어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 69 게시판 뷰티파이 테이블 사용하기
뷰티파이의 데이터테이블(v-datatable)을 이용해서 화면에 표시해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 68 게시판 게시물 쓰고 읽기
게시물(article) API CRUD중 게시판 정보가 필요한 CR(Create Read)를 프론트에서 확인해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 67 게시판 게시물 API 만들기
게시물 CRUD를 할 수 있게 API를 만들어 보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 66 게시판 정보 읽기
게시물들을 가져오기 위해 먼저 게시판 정보를 가져와보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 65 게시판을 위한 메뉴 구성
편의를 위해 메뉴를 구성해서 게시판 진입하도록 하겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 64 게시판 모델 만들기(populate)
게시물들은 누가 썼는지, 어느 게시판인지가 제일 중요합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 63 게시판 관리 만들기
일반적으로 운영할 게시판을 만드려면 무엇이 필요한지 생각해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 59 비밀번호 암호화하기
비밀번호를 평문이 아닌 암호화된 문자로 저장해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 48 로그인 해야 들어갈 수 있는 페이지 만들기(네비게이션 가드)
로그인 해야만 진입할 수 있는 페이지를 만들어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 47 토큰 인증하기
프론트에 토큰을 저장해서 매번 토큰과 함께 요청을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 46 실제 데이터로 로그인하기
이제 실제 데이터로 로그인을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 45 사용자 모델 정리하기
기존에는 name, age 로만 테스트 했으니 로그인이 가능할 모델로 변경합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 44 로그인 간단히 만들어보기
간단하게 로그인 프론트와 백엔드가 잘 통신하는 지 확인해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 43 사이트 저장소 다루기
서버로 부터 토큰을 받아서 저장해놔야 다음에 로그인 없이 api요청이 가능합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 42 HTTP 헤더 알아보기
토큰을 보낼 때는 HTTP 헤더(header)를 통해 전송하는 것이 일반적입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 40 토큰(JWT)이란?
토큰(JWT)에 대해 간단히 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 39 API 미들웨어란?
API 미들웨어에 대해 간단히 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 38 깃헙에서 안보이는 설정파일 만들기
설정파일을 사용하는 방법에 대해 알아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 37 몽고 클라우드(ATLAS) 가입 및 테스트
몽고디비 클라우드 서비스인 아틀라스를 가입 후 테스트 까지 해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 26 기본편 정리
기초편에 이어 14~26까지 기본편 한번 달려봤습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 25 API와 프론트 통신 정리
지난 강좌에 이어서 CRUD 중 UD 즉 수정, 삭제를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 24 api와 몽구스 연결
이제 디비를 조작할 수 있으니 api에서 실제 디비데이터로 몽구스(mongoose)를 사용해서 CRUD 중 CR 즉 쓰고 읽기를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 23 몽구스 설치 및 확인
노드에서 몽고디비를 사용하는 방법은 여러가지 입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 18 api 설정하기
깃헙에 올린 새 프로젝트에서 api 설정하는 것을 다시 정리해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 16 깃 사용하기
지금까지 프로젝트를 깃을 사용해 다시 만들어 보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 13 자바스크립트 언어 사용 시작에 대해
현재 진행중인 모던웹 NEMV, 즉 노드, 익스프레스, 몽고디비, 뷰 모두 자바스크립트를 기반으로 합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 12 뷰티파이 콤포넌트 사용해보기
뷰티파이의 콤포넌트(버튼, 칩)를 사용해서 화면 처리를 위한 연습을 해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 11 익스프레스와 뷰라우터
뷰 라우터의 히스토리모드 이해와 백엔드 라우터의 연결에 대해 알아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 10 뷰티파이 메뉴 추가
뷰티파이 기본 설치된 상태에서 페이지 추가해서 브라우저로 확인해보도록 하겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 9 뷰티파이 수정
뷰티파이 기본 설치된 파일을 수정해서 브라우저로 확인해보기
모던웹(NEMV) 혼자 제작 하기 3기 - 8 익스프레스와 뷰티파이 연동
전 강좌에서 yarn serve로 실행한 http://localhost:8080은 뷰 개발모드입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 5 익스프레스 라우터
생성된 익스프레스 소스에 라우터, 페이지를 추가해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 4 익스프레스 수정
생성된 익스프레스 소스를 수정해서 웹서버 동작 확인해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 3 익스프레스 설정
익스프레스 설치 및 약간의 설명입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 2 노드 설치
node.js 설치 및 약간의 설명입니다.
NEMV 5 - vue.js 설치
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMV 4 - node.js & express & mongoDB 설치
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMV 3 - git 등록
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMV 2 - API 설계
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMV 1 - 소개
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
Communication(통신) 5. 구현-수신
이제 바이트 단위로 파악하여 원하는 데이터를 꺼내보도록 하겠다..
Communication(통신) 4. 구현-송신
바이트로 들어오는 데이터를 이제 명확하게 확인 할 수 있는 준비가 되었으니 실제 프로토콜을 이용해 송/수신 을 구현해보겠다.
Communication(통신) 3. 구현-기본
간단하게 프로토콜을 만들어보았다. 이제 정의된 프로토콜 대로 구현해보도록 하겠다..
Communication(통신) 2. Protocol
가상의 바이너리 프로토콜을 만들어 232 혹은 소켓등에서 어떤 방법으로 데이터를 취득해야 하는지 알아보도록 하겠다..
Communication(통신) 1. 개념
한동안 펌웨어쪽 일을 하면서 모뎀을 통해 서버쪽에 데이터를 전송하는 인터페이스를 많이 하게 되었는데.. 대부분 백엔드서버 엔지니어들이 바이너리 통신을 통해 수신받아서 처리(파스)하는 부분에 상당히 무지한 것을 알았다..
Monitoring System
서버를 구성할 때 가장 유의해야할 것은 유지보수라고 할 수 있다.
nodejs
Electron 5 일렉트론뷰로 우아한 데스크탑 앱 만들기 업데이트(vue-cli3)
vue-cli3가 업데이트 되어서 기존 설치법(vue-cli2)이 아예 막혀버렸습니다.
Electron 4 일렉트론뷰로 우아한 데스크탑 앱 만들기 vue-cli3 업그레이드
한동안 일렉트론으로 뭔가 만들지 않았습니다.
Electron 3 일렉트론뷰로 우아한 데스크탑 앱 만들기 ToDo
과정이 지겨우니 뭔가 만들면서 재미를 찾는 것이 훨씬 개발에 득이 된다고 생각합니다..
Electron 2 일렉트론뷰로 우아한 데스크탑 앱 만들기 UI
최근 유행하는 UI 흐름에 대해 간단히 설명드립니다.
Electron 1 일렉트론뷰로 우아한 데스크탑 앱 만들기 데이터 다루기
이번에는 데스크탑 앱으로 데이터를 다뤄보겠습니다.
Electron 0 일렉트론뷰로 우아한 데스크탑 앱 만들기 기초
설치 관련 업데이트(중요)
NEMBV 13 Back-end api paging
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 12 Front-end bootstrap layout
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 11 Back-end and Front-end api test
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 10 Front-end api test
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 9 Back-end api test
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 8 Back-end mongoose model
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 7 Back-end mongoose setup
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 5 Back-end api route
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 4 Back-end route setup
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 3 Back-end route 이해
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 1 Back-end Setup
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
nodemailer
NEMVV 2 전역파일
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
npm
NPM에 모듈 등록해보기
NPM 에 모듈을 만들어 등록해보겠습니다.
npm unorm
맥의 기묘한 외국어 저장 방식으로 인해 한글 깨짐 현상을 극복해본다.
npm del
파일 처리를 많이 하다보니 디렉토리를 몽땅 날려야하는 상황이 종종 있다.
npm geoip
현재 웹사이트를 미국에서도 쓰고.. 프랑스에서도 쓰고 독일에서도 쓸 때 개발자라면 어떻해야할까?
npm pug
html 해본 사람이라면 코딩할 때 정말 짜증나는 것이 있다면
npm intro
이제부터 npm으로 패키지를 사용할 때 마다 리뷰를 해보기로 했다..
nuxt
넉스트(nuxt) 사용 후기
넉스트를 사용하면서 강좌를 하고 있는 이유는 실무에 실제 반영해보고, 좀 더 빠른 개발의 길로 이끌어 보고 싶은 마음에서 였습니다.
NUXT로 혼자 웹사이트 만들기 15 파이어베이스(firebase) 리캡챠(recaptcha v3) 사용하기
넉스트(nuxt) 와 파이어베이스 펑션스 (firebase functions)로 리캡챠(recaptcha v3)를 사용해봅니다.
NUXT로 혼자 웹사이트 만들기 14 파이어베이스(firebase) 인증 기능 라우팅해보기
파이어베이스 인증 상태에 따라 페이지 전환을 해보겠습니다.
NUXT로 혼자 웹사이트 만들기 13 파이어베이스(firebase) 인증 기능 화면 표시하기
파이어베이스 인증 기능을 넉스트 저장소(vuex)를 이용해 표현해봅니다.
NUXT로 혼자 웹사이트 만들기 12 파이어베이스(firebase) 인증 기능 토큰 알아보기
파이어베이스 인증 기능중 토큰에 대해 알아봅니다.
NUXT로 혼자 웹사이트 만들기 11 파이어베이스(firebase) 인증 기능(email&password) 사용하기
파이어베이스 인증기능중 이메일+비밀번호를 사용해서 로그인해봅니다.
NUXT로 혼자 웹사이트 만들기 10 파이어베이스(firebase) 파이어스토어(firestore) 페이징(paging)처리하기
파이어스토어를 이용해서 페이징처리를 해봅니다.
NUXT로 혼자 웹사이트 만들기 9 파이어베이스(firebase) 파이어스토어(firestore) CRUD 해보기
파이어스토어를 이용해서 CRUD 를 시험해보겠습니다.
NUXT로 혼자 웹사이트 만들기 8 파이어베이스(firebase) 펑션스(functions) 시작하기
파이어베이스 펑션스를 이용해서 API를 간단히 구현해봅니다.
NUXT로 혼자 웹사이트 만들기 7 닷엔브(dotenv)로 파이어베이스 프로젝트 정리하기
넉스트 프로젝트에서 닷엔브로 파이어베이스를 사용하기 위한 설정을 해보겠습니다.
NUXT로 혼자 웹사이트 만들기 6 firebase로 데이터베이스(firestore) 사용하기
파이어베이스의 noSQL 데이터베이스인 firestore를 파이어베이스 호스팅 환경에서 사용해봅니다.
NUXT로 혼자 웹사이트 만들기 5 firebase로 hosting해보기
넉스트(nuxt) 소스를 파이어베이스 호스팅(google firebase hosting)을 이용해서 배포(deploy)해봅니다.
NUXT로 혼자 웹사이트 만들기 4 플러그인 설치
전역으로 사용할 플러그인 설치에 대해 알아봅니다.
NUXT로 혼자 웹사이트 만들기 3 라우팅
서버사이드 렌더링도 중요하지만, 기존에 하던 동적 화면 전환이 잘 되는 것이 더 중요합니다.
NUXT로 혼자 웹사이트 만들기 2 설치
NUXT를 설치하고 간단히 구조를 알아봅니다.
NUXT로 혼자 웹사이트 만들기 1 소개
항상 고민하던 부분이 있습니다.
paging
NUXT로 혼자 웹사이트 만들기 10 파이어베이스(firebase) 파이어스토어(firestore) 페이징(paging)처리하기
파이어스토어를 이용해서 페이징처리를 해봅니다.
NEMBV 13 Back-end api paging
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
playground
NEMBV 8 Back-end mongoose model
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
plugin
NUXT로 혼자 웹사이트 만들기 7 닷엔브(dotenv)로 파이어베이스 프로젝트 정리하기
넉스트 프로젝트에서 닷엔브로 파이어베이스를 사용하기 위한 설정을 해보겠습니다.
NUXT로 혼자 웹사이트 만들기 6 firebase로 데이터베이스(firestore) 사용하기
파이어베이스의 noSQL 데이터베이스인 firestore를 파이어베이스 호스팅 환경에서 사용해봅니다.
NUXT로 혼자 웹사이트 만들기 5 firebase로 hosting해보기
넉스트(nuxt) 소스를 파이어베이스 호스팅(google firebase hosting)을 이용해서 배포(deploy)해봅니다.
NUXT로 혼자 웹사이트 만들기 4 플러그인 설치
전역으로 사용할 플러그인 설치에 대해 알아봅니다.
pm2
모던웹(NEMV) 혼자 제작 하기 3기 - 36 서버 오토스케일 정리
지난강좌의 싱글서버로 개발은 충분합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 35 pm2로 실제 서버에 배포하기
개발피씨에서 pm2는 사실 켜둘 필요가 없습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 34 pm2로 안정적인 서버 만들기
npm start, yarn dev, node ./bin/www 등으로 실행하였고 끌 때는 ctrl+c로 종료했습니다.
NEMBV 21 운영과 배포 방법
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
promise
모던웹(NEMV) 혼자 제작 하기 3기 - 41 프라미스(promise) 어씽크(async) 이정도만 하자!
비동기식 언어인 자바스크립트의 불편함을 해소해주는 프라미스(promise), 어씽크(async)에 대해 설명합니다.
publish
NPM에 모듈 등록해보기
NPM 에 모듈을 만들어 등록해보겠습니다.
pug
NEMBV 3 Back-end route 이해
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
recaptcha
NUXT로 혼자 웹사이트 만들기 15 파이어베이스(firebase) 리캡챠(recaptcha v3) 사용하기
넉스트(nuxt) 와 파이어베이스 펑션스 (firebase functions)로 리캡챠(recaptcha v3)를 사용해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 77 구글 리캡챠로 로봇 막아보기(recaptcha)
구글에서 제공하는 리캡챠(recaptcha)를 이용하여 로봇을 막아보겠습니다.
renderforest
렌더포레스트로 멋진 홍보동영상 만들어보기
최근 개발에서 디자인 부분은 머터리얼, 부트스트랩등으로 많은 것을 대체할 수 있습니다.
router
모던웹(NEMV) 혼자 제작 하기 3기 - 11 익스프레스와 뷰라우터
뷰 라우터의 히스토리모드 이해와 백엔드 라우터의 연결에 대해 알아보겠습니다.
serialport
Electron native module 사용하기
electron-vue(vue-cli2)로 제작되었던 앱을 vue-cli3플러긴 일렉트론 버전(vue add electron-builder)으로 마이그레이션을 하다보니 생각보다 괴로운 부분이 많았습니다..
server
모던웹(NEMV) 혼자 제작 하기 3기 - 36 서버 오토스케일 정리
지난강좌의 싱글서버로 개발은 충분합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 35 pm2로 실제 서버에 배포하기
개발피씨에서 pm2는 사실 켜둘 필요가 없습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 34 pm2로 안정적인 서버 만들기
npm start, yarn dev, node ./bin/www 등으로 실행하였고 끌 때는 ctrl+c로 종료했습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 32 클라우드 서버 디비 설치 및 테스트
서버가 개발했을 때와 같이 동작하게 하려면 얀, 몽고디비를 설치해야합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 31 클라우드 서버 깃 설치 및 테스트
깃 설치하고 ssh방식으로 소스를 다운로드 받는 방법입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 30 클라우드 서버 노드 설치
리눅스 서버에 모던웹을 서비스할 수 있도록 요소들을 설치해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 29 클라우드 서버 리눅스 다루기
서버 구성을 위해 필요한 최소한의 리눅스 지식을 정리해봤습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 28 클라우드 서버 만들기
클라우드 서버(인스턴스)를 만들고 접속하는 방법을 설명합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 27 클라우드 서버 가입하기
이제부터 3부 응용편 시작합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 응용 서버편 시작
모던웹 응용 서버편 시작합니다.
linux nfs server
서버를 운영할 때 file server와 같은 물리적인 데이터를 담아놓을 공간은 항상 필요하다
Server log
서버를 구성하여 러닝 시키는 것은 간단하지만 운영과 유지보수가 어려운데, 그 이유중 하나가 보안이다.
Monitoring System
서버를 구성할 때 가장 유의해야할 것은 유지보수라고 할 수 있다.
SSL server setting
https로 구현된 사이트는 최근에는 중요한 가치를 가진다.
sharp
모던웹(NEMV) 혼자 제작 하기 3기 - 84 이미지 변환하기(base64, sharp)
이미지 업로드 후 디비 저장까지 하려면 무엇이 필요한지 알아봅니다.
sheel
모던웹(NEMV) 혼자 제작 하기 3기 - 22 몽고디비 설치 확인
몽고디비 셸로 설치 확인하기
spa
모던웹(NEMV) 혼자 제작 하기 3기 - 17 SPA란
웹사이트를 처음 만드시는 분들도 있기 때문에 SPA에 대해 간략하게 설명해보겠습니다.
ssl
모던웹(NEMV) 혼자 제작 하기 3기 - 79 보안연결(ssl) 적용하기
보안연결을 구성하여 https로 접속 해보겠습니다.
NEMVV 3 웹서버 구동
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
SSL server setting
https로 구현된 사이트는 최근에는 중요한 가치를 가진다.
stream
Flutter와 Firebase로 Android iOS 둘 다 만들기 13 Stream 사용해보기
dart의 Stream에 대해 알아봅니다.
swift
모바일앱(iOS Android) 둘 다 만들기 - 3 iOS 스위프트 이정도만 하고 넘어가자
기본적인 앱을 개발하기위해 스위프트를 최소한만 알아보겠습니다.
talk
Vue와 Firebase로 모던웹사이트 만들기 소개
Vue & Firebase에 대해 간단히 소개합니다.
Firebase functions에서 mongodb atlas에 접속하기
Firebase functions에서 mongodb atlas에 접속하는 방법을 다룹니다.
넉스트(nuxt) 사용 후기
넉스트를 사용하면서 강좌를 하고 있는 이유는 실무에 실제 반영해보고, 좀 더 빠른 개발의 길로 이끌어 보고 싶은 마음에서 였습니다.
일렉트론 앱 제작 후기
최근에 데스크탑 앱을 하나 만들어서 배포했습니다.
Electron native module 사용하기
electron-vue(vue-cli2)로 제작되었던 앱을 vue-cli3플러긴 일렉트론 버전(vue add electron-builder)으로 마이그레이션을 하다보니 생각보다 괴로운 부분이 많았습니다..
최근 개발 흐름 따라가보기
최근 일이 좀 바빠져서 강좌를 쉬고 있습니다.
모바일앱(iOS Android) 둘 다 만들기 - 3 iOS 스위프트 이정도만 하고 넘어가자
기본적인 앱을 개발하기위해 스위프트를 최소한만 알아보겠습니다.
모바일앱(iOS Android) 둘 다 만들기 - 1 iOS UI 기초
간단히 버튼을 올리고 UI가 동작하는 지 테스트 해봅니다.
앱(iOS Android) 둘 다 만들기 - iOS 준비하기
모바일앱을 개발한다고 하면 대부분은 안드로이드와 iOS 둘 다 원합니다.
앱(iOS Android) 둘 다 만들기 - 하이브리드 vs 네이티브 앱 선택
앱을 시작해야되는 상황이 왔습니다.
Electron 5 일렉트론뷰로 우아한 데스크탑 앱 만들기 업데이트(vue-cli3)
vue-cli3가 업데이트 되어서 기존 설치법(vue-cli2)이 아예 막혀버렸습니다.
Vuetify(뷰티파이) cli 변경 문제
뷰티파이가 1.3.2 에서 갑자기 설치되는 기본 홈 모양을 바꿨습니다…
Vuetify(뷰티파이) 1.3 릴리즈 소식
기다리던 뷰티파이가 드디어 1.3 릴리즈가 오늘 떴습니다.
Electron 4 일렉트론뷰로 우아한 데스크탑 앱 만들기 vue-cli3 업그레이드
한동안 일렉트론으로 뭔가 만들지 않았습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 17 SPA란
웹사이트를 처음 만드시는 분들도 있기 때문에 SPA에 대해 간략하게 설명해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 신기능 소개
회사에서 새로운 프로젝트를 시작하게 되었습니다.
책 리뷰 - 소개글
책을 이유 없이 싫어했던 사람이 있습니다.
데이터베이스 사용 및 팁
저는 전산쪽과 1%도 상관이 없는 사람인데 어떠한 계기로 데이터베이스를 쓰게 되었습니다.
잠시 지나가며 끄적
최근에 일이 좀 생겨서 강좌 진도가 너무 안나갔네요..
Electron 3 일렉트론뷰로 우아한 데스크탑 앱 만들기 ToDo
과정이 지겨우니 뭔가 만들면서 재미를 찾는 것이 훨씬 개발에 득이 된다고 생각합니다..
Electron 2 일렉트론뷰로 우아한 데스크탑 앱 만들기 UI
최근 유행하는 UI 흐름에 대해 간단히 설명드립니다.
Electron 1 일렉트론뷰로 우아한 데스크탑 앱 만들기 데이터 다루기
이번에는 데스크탑 앱으로 데이터를 다뤄보겠습니다.
Electron 0 일렉트론뷰로 우아한 데스크탑 앱 만들기 기초
설치 관련 업데이트(중요)
npm unorm
맥의 기묘한 외국어 저장 방식으로 인해 한글 깨짐 현상을 극복해본다.
NEMVV 0 vuetify로의 전환
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 0 모던 웹 제작 소개
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 새로운 솔루션 공개 예고
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
Weapons(개발무기들)
대부분의 시간을 모니터, 키보드, 마우스와 함께 하는 개발자는 하드웨어와 소프트웨어가 중요하다.
일일일(잡담)
지난 한달간 정말 미친듯이 일에 달려들었다..
DBA
DBA는 위키에 아래와 같이 나와있다.
npm del
파일 처리를 많이 하다보니 디렉토리를 몽땅 날려야하는 상황이 종종 있다.
database 안정성
noSQL mongoDB를 사용하며 사람들로 부터 가장 많이 들은 부분은 안정성이었다.
variable(변수) 사용
프로그래밍이 어려운 이유중 가장 큰 것은 변수라고들 한다.
Renewal github page 2
전면 스플래쉬 페이지를 만들어 봤다.
bootstrap의 대안
한동안 vue.js 파느라 즐거웠다.
full-stack
풀스택 개발자란 말을 요새 종종 듣는 데…
npm geoip
현재 웹사이트를 미국에서도 쓰고.. 프랑스에서도 쓰고 독일에서도 쓸 때 개발자라면 어떻해야할까?
npm pug
html 해본 사람이라면 코딩할 때 정말 짜증나는 것이 있다면
npm intro
이제부터 npm으로 패키지를 사용할 때 마다 리뷰를 해보기로 했다..
Renewal github page
기존 jekyll-now 기본테마가 너무 흉해서 변경중
GTD(시간 관리)
GTD란 데이비드 앨런(David Aallan)의 책, 할 일 관리(Getting Things Done, GTD)라는 것이다. 개인이 효율적으로 시간을 관리하여 자신이 하고자 하는 일을 깔끔하게 해결하는 방법을 정리했다. 2001년에 처음 출판된 이후, IT 개발자들에게 열...
Again posting
간만에 다시 기록해본다.
가산 GSM Test 후기
해외에 디바이스를 팔려면 팔 곳에 가서 만들고 테스트하면 되지만..
New language
나는 어쩌다 보니 몇가지 언어를 쓰고 있게 되었다..
Hello world
오늘부터 다시! 개발일지를 작성하려한다..
tip
NPM에 모듈 등록해보기
NPM 에 모듈을 만들어 등록해보겠습니다.
Electron native module 사용하기
electron-vue(vue-cli2)로 제작되었던 앱을 vue-cli3플러긴 일렉트론 버전(vue add electron-builder)으로 마이그레이션을 하다보니 생각보다 괴로운 부분이 많았습니다..
npm unorm
맥의 기묘한 외국어 저장 방식으로 인해 한글 깨짐 현상을 극복해본다.
npm del
파일 처리를 많이 하다보니 디렉토리를 몽땅 날려야하는 상황이 종종 있다.
npm geoip
현재 웹사이트를 미국에서도 쓰고.. 프랑스에서도 쓰고 독일에서도 쓸 때 개발자라면 어떻해야할까?
npm pug
html 해본 사람이라면 코딩할 때 정말 짜증나는 것이 있다면
npm intro
이제부터 npm으로 패키지를 사용할 때 마다 리뷰를 해보기로 했다..
toast
모던웹(NEMV) 혼자 제작 하기 3기 - 89 활용편 정리
모던웹(NEMV) 제작 하기 활용편 정리합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 88 게시물에 댓글 추가하기
게시물에 댓글을 추가해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 87 위지웍 에디터 사용하기(toast ui editor)
위지웍 에디터를 사용해서 글을 작성해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 36 서버 오토스케일 정리
지난강좌의 싱글서버로 개발은 충분합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 35 pm2로 실제 서버에 배포하기
개발피씨에서 pm2는 사실 켜둘 필요가 없습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 34 pm2로 안정적인 서버 만들기
npm start, yarn dev, node ./bin/www 등으로 실행하였고 끌 때는 ctrl+c로 종료했습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 32 클라우드 서버 디비 설치 및 테스트
서버가 개발했을 때와 같이 동작하게 하려면 얀, 몽고디비를 설치해야합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 31 클라우드 서버 깃 설치 및 테스트
깃 설치하고 ssh방식으로 소스를 다운로드 받는 방법입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 30 클라우드 서버 노드 설치
리눅스 서버에 모던웹을 서비스할 수 있도록 요소들을 설치해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 29 클라우드 서버 리눅스 다루기
서버 구성을 위해 필요한 최소한의 리눅스 지식을 정리해봤습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 28 클라우드 서버 만들기
클라우드 서버(인스턴스)를 만들고 접속하는 방법을 설명합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 27 클라우드 서버 가입하기
이제부터 3부 응용편 시작합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 응용 서버편 시작
모던웹 응용 서버편 시작합니다.
todo
Electron 3 일렉트론뷰로 우아한 데스크탑 앱 만들기 ToDo
과정이 지겨우니 뭔가 만들면서 재미를 찾는 것이 훨씬 개발에 득이 된다고 생각합니다..
token
NUXT로 혼자 웹사이트 만들기 12 파이어베이스(firebase) 인증 기능 토큰 알아보기
파이어베이스 인증 기능중 토큰에 대해 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 62 로그인 시간 제한하기(토큰 갱신)
토큰 생성시 만료시간 없이 만들 었기 때문에 브라우저 로컬스토리지에 토큰이 남아있다면 100년이 지나도 로그인이 가능합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 61 시간 계산하기(moment)
시간 2월28일 23:50:55 에서 1시간이 더해지면 어떤 시간일까요?
모던웹(NEMV) 혼자 제작 하기 3기 - 40 토큰(JWT)이란?
토큰(JWT)에 대해 간단히 알아봅니다.
unorm
npm unorm
맥의 기묘한 외국어 저장 방식으로 인해 한글 깨짐 현상을 극복해본다.
v3
NUXT로 혼자 웹사이트 만들기 15 파이어베이스(firebase) 리캡챠(recaptcha v3) 사용하기
넉스트(nuxt) 와 파이어베이스 펑션스 (firebase functions)로 리캡챠(recaptcha v3)를 사용해봅니다.
variable
variable(변수) 사용
프로그래밍이 어려운 이유중 가장 큰 것은 변수라고들 한다.
vee-validate
모던웹(NEMV) 혼자 제작 하기 3기 - 57 회원가입 완성하기
백엔드를 만들어서 만들어둔 프론트와 연동시켜보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 56 회원가입 프론트 적용하기
뷰티파이 예제로 만들고 있는 모델에 맞게 수정해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 55 회원가입 유효성 판단
뷰티파이 폼을 이용해 회원가입을 간단하게 만들어보겠습니다.
vscode
Vue와 Firebase로 모던웹사이트 만들기 52 firebase storage 사용해보기
firebase storage 기능을 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 51 사용자 권한 변경하기
사용자 권한 변경은 단순하지만 종합 선물세트 지식이 필요합니다. firebase(functions, auth, store), vue(component), vuetify(v-select), axios, RESTful API등.. 찬찬히 지금 것들을 되짚어 봅니다~
Vue와 Firebase로 모던웹사이트 만들기 50 회원관리 모양 내보기
vuetify의 v-data-iterator를 사용해서 기존 테이블 방식을 변경해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 49 검색어 필터 만들어보기
vuetify의 v-autocomplete로 검색어 필터를 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 48 파이어스토어 검색해보기
firestore의 where와 vuetify의 v-combobox를 이용해 email검색을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 47 파이어스토어 정렬해보기
firestore 의 orderBy와 vuetify v-data-table을 이용해 정렬을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 46 파이어스토어 페이징해보기
firestore의 offset, limit를 사용해서 vuetify의 v-data-table로 페이징을 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 45 파이어스토어 컬렉션의 전체 개수 구하기
firestore와 functions의 조합으로 컬렉션의 전체 개수 정보를 저장해둡니다.
Vue와 Firebase로 모던웹사이트 만들기 44 파이어베이스 함수에서 파이어스토어 사용하기
파이어베이스 함수(functions)에서 기본 인증으로는 firebase serve –only functions로는 위험하기 때문에 파이어스토어 데이터에 접근할 수 없습니다. 해당 키를 가져와서 프론트에서 데이터를 받아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 43 파이어베이스 함수에서 권한 확인하기
파이어베이스 함수(functions)에서 토큰을 확인하고 풀어헤친 토큰정보(claims)로 권한에 따른 결과를 보냅니다.
Vue와 Firebase로 모던웹사이트 만들기 42 뷰라우터로 권한별 페이지 접근하기
firebase의 토큰 권한 정보(claims.level)로 사용자의 접근을 차단해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 41 파이어베이스 인증 라우터 지연시키기
firebase auth onAuthStateChanged 에서 페이지 이동을 시키는 방법은 잘못되었습니다. 파이어베이스 인증 상태 후의 행동이 중요하므로 다른 방법으로 지연시켜봤습니다.
Vue와 Firebase로 모던웹사이트 만들기 40 firestore에 사용자 정보 추가 삭제하기
firebase auth로 추가/삭제된 이벤트를 firebase functions에서 받아서 firestore에 추가/삭제합니다.
Vue와 Firebase로 모던웹사이트 만들기 39 권한으로 페이지 강제 이동시키기
vue-router로 권한에 따라 페이지를 이동시킵니다.
Vue와 Firebase로 모던웹사이트 만들기 38 firebase token 풀어보기
사용자별 화면 표시를 위해 사용자 데이터를 넣은 토큰을 풀어봅니다~
Vue와 Firebase로 모던웹사이트 만들기 37 firebase functions 맞춤 사용자 설정하기
firebase auth 정보에 사용자 레벨을 추가합니다.
Vue와 Firebase로 모던웹사이트 만들기 36 firebase functions 환경변수 사용하기
관리자 계정 생성을 위해 firebase functions 환경변수를 이용해서 관리자 계정을 지정해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 35 vuetify2로 업그레이드하기
vuetify V1 to V2로 업그레이드 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 34 이메일로 가입과 로그인해보기
파이어베이스 인증(firebase authentication)을 기능중 이메일로 가입과 로그인을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 33 v-form으로 유효성 검사하기
vuetify의 v-form으로 유효성 판단을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 32 회원가입 모양 내보기
vue componet 통신을 이용해 회원가입과 로그인 화면을 토글시켜봅니다.
Vue와 Firebase로 모던웹사이트 만들기 31 로그인 상태 만들어보기
vuetify의 v-menu, v-avatar등을 이용해서 로그인 상태 정보를 표현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 30 로딩 상태 표시하기
vue-progressbar를 이용해서 로딩 상태를 표시해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 29 뷰라우터 네비게이션 가드 사용하기
뷰라우터(vue-router)를 이용해서 로그인 상태에 따라 페이지 접근을 막거나(navigation guard) 이동시킵니다.
Vue와 Firebase로 모던웹사이트 만들기 28 로그인 화면 모양 내보기
뷰티파이(vuetify)를 이용해서 로그인 화면을 만들어 보는 시간을 가져봅니다. 미세한 UI 조절에 고통받는 모습은 아마 누구나 마찬가지 일듯..
Vue와 Firebase로 모던웹사이트 만들기 27 firebase 인증(auth)정보를 vuex 로 저장
인증정보인 user 와 token 을 vuex 저장소에 저장해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 26 뷰엑스(vuex)로 전역 제어하기
vuex를 사용해서 전역 변수를 제어해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 25 뷰(vue) 컴포넌트(component) 알아보기
vue component 사용법을 간단히 알아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 24 인증을 위한 미들웨어와 액시오스 설정하기
파이어베이스 함수(functions)를 사용할 때 가장 주의해야할 것은 보안입니다. 인증된 요청만 받아들이기 위한 미들웨어와 액시오스 설정에 대해 알아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 23 firebase functions 공용 에러 처리
백엔드(firebase functions)에서 에러처리를 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 22 vue 공용 error 처리하기
추후 비동기 함수(async)를 편하게 사용하기위해 공용 에러 처리를 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 21 firebase functions vue에서 axios로 접근하기
파이어베이스 함수(functions)에 등록한 express api에 front(vue + axios)로 접근해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 20 firebase functions RESTful api 만들기
파이어베이스 펑션스를 이용해서 REST API를 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 19 firebase functions 알아보기
파이어베이스의 서버리스 백엔드 역할을 해주는 firebase functions에 대해 알아보고 설치해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 18 firebase 인증(auth) 로그인 해보기
파이어베이스 인증을 이용해서 구글과 이메일 로그인을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 17 firestore crud 해보기
firestore로 데이터베이스의 기본행위인 CRUD를 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 16 firestore 설정하기
프론트에서 firestore 사용할 수 있도록 설정해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 15 vuetify로 노트 만들기
데이터베이스(firestore)를 다루기 위해 프론트를 구성해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 14 promise 알아보기
데이터베이스 처리하기에 앞서 프라미스 사용법에 대해 간단히 알아보고 넘어갑니다.
Vue와 Firebase로 모던웹사이트 만들기 13 vuetify 반응형웹 구현하기
v-container, layout, flex 3종세트로 반응형웹을 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 12 vuetify로 카드 만들기
화면 구성의 기본인 v-card를 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 11 vuetify로 하위 메뉴 구성하기
vuetify list-group 을 사용해 하위 메뉴를 구성해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 10 vuetify로 네비게이션 드라워만들기
툴바 메뉴 클릭시 v-navigation-drawer를 표시해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 9 vuetify로 리스트 만들기
vuetify/vList를 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 8 vuetify로 툴바 만들기
vuetify를 이용해서 상단 툴바를 만들어봅니다.
Vue와 Firebase로 모던웹사이트 만들기 7 vue 맛보기
vue가 무엇인지 이해하고 넘어갑니다.
Vue와 Firebase로 모던웹사이트 만들기 6 git 다운로드 받기
강좌 소스 활용을 위해 git clone 과 checkout에 대해 알아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 5 SPA 알아보기
SPA가 무엇인지 알아보고 vue-router로 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 4 git 사용하기
git에 대해 알아보고 필요한 만큼만 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 3 사이트 배포하기
firebase hosting을 이용해서 사이트를 배포해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 2 에디터 설정하기
뷰(vue)에 최적화된 에디터(vscode) 설정을 합니다.
vue
Vue와 Firebase로 모던웹사이트 만들기 52 firebase storage 사용해보기
firebase storage 기능을 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 51 사용자 권한 변경하기
사용자 권한 변경은 단순하지만 종합 선물세트 지식이 필요합니다. firebase(functions, auth, store), vue(component), vuetify(v-select), axios, RESTful API등.. 찬찬히 지금 것들을 되짚어 봅니다~
Vue와 Firebase로 모던웹사이트 만들기 50 회원관리 모양 내보기
vuetify의 v-data-iterator를 사용해서 기존 테이블 방식을 변경해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 49 검색어 필터 만들어보기
vuetify의 v-autocomplete로 검색어 필터를 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 48 파이어스토어 검색해보기
firestore의 where와 vuetify의 v-combobox를 이용해 email검색을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 47 파이어스토어 정렬해보기
firestore 의 orderBy와 vuetify v-data-table을 이용해 정렬을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 46 파이어스토어 페이징해보기
firestore의 offset, limit를 사용해서 vuetify의 v-data-table로 페이징을 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 45 파이어스토어 컬렉션의 전체 개수 구하기
firestore와 functions의 조합으로 컬렉션의 전체 개수 정보를 저장해둡니다.
Vue와 Firebase로 모던웹사이트 만들기 44 파이어베이스 함수에서 파이어스토어 사용하기
파이어베이스 함수(functions)에서 기본 인증으로는 firebase serve –only functions로는 위험하기 때문에 파이어스토어 데이터에 접근할 수 없습니다. 해당 키를 가져와서 프론트에서 데이터를 받아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 43 파이어베이스 함수에서 권한 확인하기
파이어베이스 함수(functions)에서 토큰을 확인하고 풀어헤친 토큰정보(claims)로 권한에 따른 결과를 보냅니다.
Vue와 Firebase로 모던웹사이트 만들기 42 뷰라우터로 권한별 페이지 접근하기
firebase의 토큰 권한 정보(claims.level)로 사용자의 접근을 차단해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 41 파이어베이스 인증 라우터 지연시키기
firebase auth onAuthStateChanged 에서 페이지 이동을 시키는 방법은 잘못되었습니다. 파이어베이스 인증 상태 후의 행동이 중요하므로 다른 방법으로 지연시켜봤습니다.
Vue와 Firebase로 모던웹사이트 만들기 40 firestore에 사용자 정보 추가 삭제하기
firebase auth로 추가/삭제된 이벤트를 firebase functions에서 받아서 firestore에 추가/삭제합니다.
Vue와 Firebase로 모던웹사이트 만들기 39 권한으로 페이지 강제 이동시키기
vue-router로 권한에 따라 페이지를 이동시킵니다.
Vue와 Firebase로 모던웹사이트 만들기 38 firebase token 풀어보기
사용자별 화면 표시를 위해 사용자 데이터를 넣은 토큰을 풀어봅니다~
Vue와 Firebase로 모던웹사이트 만들기 37 firebase functions 맞춤 사용자 설정하기
firebase auth 정보에 사용자 레벨을 추가합니다.
Vue와 Firebase로 모던웹사이트 만들기 36 firebase functions 환경변수 사용하기
관리자 계정 생성을 위해 firebase functions 환경변수를 이용해서 관리자 계정을 지정해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 35 vuetify2로 업그레이드하기
vuetify V1 to V2로 업그레이드 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 34 이메일로 가입과 로그인해보기
파이어베이스 인증(firebase authentication)을 기능중 이메일로 가입과 로그인을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 33 v-form으로 유효성 검사하기
vuetify의 v-form으로 유효성 판단을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 32 회원가입 모양 내보기
vue componet 통신을 이용해 회원가입과 로그인 화면을 토글시켜봅니다.
Vue와 Firebase로 모던웹사이트 만들기 31 로그인 상태 만들어보기
vuetify의 v-menu, v-avatar등을 이용해서 로그인 상태 정보를 표현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 30 로딩 상태 표시하기
vue-progressbar를 이용해서 로딩 상태를 표시해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 29 뷰라우터 네비게이션 가드 사용하기
뷰라우터(vue-router)를 이용해서 로그인 상태에 따라 페이지 접근을 막거나(navigation guard) 이동시킵니다.
Vue와 Firebase로 모던웹사이트 만들기 28 로그인 화면 모양 내보기
뷰티파이(vuetify)를 이용해서 로그인 화면을 만들어 보는 시간을 가져봅니다. 미세한 UI 조절에 고통받는 모습은 아마 누구나 마찬가지 일듯..
Vue와 Firebase로 모던웹사이트 만들기 27 firebase 인증(auth)정보를 vuex 로 저장
인증정보인 user 와 token 을 vuex 저장소에 저장해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 26 뷰엑스(vuex)로 전역 제어하기
vuex를 사용해서 전역 변수를 제어해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 25 뷰(vue) 컴포넌트(component) 알아보기
vue component 사용법을 간단히 알아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 24 인증을 위한 미들웨어와 액시오스 설정하기
파이어베이스 함수(functions)를 사용할 때 가장 주의해야할 것은 보안입니다. 인증된 요청만 받아들이기 위한 미들웨어와 액시오스 설정에 대해 알아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 23 firebase functions 공용 에러 처리
백엔드(firebase functions)에서 에러처리를 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 22 vue 공용 error 처리하기
추후 비동기 함수(async)를 편하게 사용하기위해 공용 에러 처리를 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 21 firebase functions vue에서 axios로 접근하기
파이어베이스 함수(functions)에 등록한 express api에 front(vue + axios)로 접근해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 20 firebase functions RESTful api 만들기
파이어베이스 펑션스를 이용해서 REST API를 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 19 firebase functions 알아보기
파이어베이스의 서버리스 백엔드 역할을 해주는 firebase functions에 대해 알아보고 설치해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 18 firebase 인증(auth) 로그인 해보기
파이어베이스 인증을 이용해서 구글과 이메일 로그인을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 17 firestore crud 해보기
firestore로 데이터베이스의 기본행위인 CRUD를 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 16 firestore 설정하기
프론트에서 firestore 사용할 수 있도록 설정해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 15 vuetify로 노트 만들기
데이터베이스(firestore)를 다루기 위해 프론트를 구성해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 14 promise 알아보기
데이터베이스 처리하기에 앞서 프라미스 사용법에 대해 간단히 알아보고 넘어갑니다.
Vue와 Firebase로 모던웹사이트 만들기 13 vuetify 반응형웹 구현하기
v-container, layout, flex 3종세트로 반응형웹을 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 12 vuetify로 카드 만들기
화면 구성의 기본인 v-card를 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 11 vuetify로 하위 메뉴 구성하기
vuetify list-group 을 사용해 하위 메뉴를 구성해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 10 vuetify로 네비게이션 드라워만들기
툴바 메뉴 클릭시 v-navigation-drawer를 표시해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 9 vuetify로 리스트 만들기
vuetify/vList를 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 8 vuetify로 툴바 만들기
vuetify를 이용해서 상단 툴바를 만들어봅니다.
Vue와 Firebase로 모던웹사이트 만들기 7 vue 맛보기
vue가 무엇인지 이해하고 넘어갑니다.
Vue와 Firebase로 모던웹사이트 만들기 6 git 다운로드 받기
강좌 소스 활용을 위해 git clone 과 checkout에 대해 알아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 5 SPA 알아보기
SPA가 무엇인지 알아보고 vue-router로 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 4 git 사용하기
git에 대해 알아보고 필요한 만큼만 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 3 사이트 배포하기
firebase hosting을 이용해서 사이트를 배포해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 2 에디터 설정하기
뷰(vue)에 최적화된 에디터(vscode) 설정을 합니다.
Vue와 Firebase로 모던웹사이트 만들기 1 개발환경 구축하기
개발에 필요한 요소들을 설치합니다.
Vue와 Firebase로 모던웹사이트 만들기 소개
Vue & Firebase에 대해 간단히 소개합니다.
넉스트(nuxt) 사용 후기
넉스트를 사용하면서 강좌를 하고 있는 이유는 실무에 실제 반영해보고, 좀 더 빠른 개발의 길로 이끌어 보고 싶은 마음에서 였습니다.
NUXT로 혼자 웹사이트 만들기 15 파이어베이스(firebase) 리캡챠(recaptcha v3) 사용하기
넉스트(nuxt) 와 파이어베이스 펑션스 (firebase functions)로 리캡챠(recaptcha v3)를 사용해봅니다.
NUXT로 혼자 웹사이트 만들기 14 파이어베이스(firebase) 인증 기능 라우팅해보기
파이어베이스 인증 상태에 따라 페이지 전환을 해보겠습니다.
NUXT로 혼자 웹사이트 만들기 13 파이어베이스(firebase) 인증 기능 화면 표시하기
파이어베이스 인증 기능을 넉스트 저장소(vuex)를 이용해 표현해봅니다.
NUXT로 혼자 웹사이트 만들기 12 파이어베이스(firebase) 인증 기능 토큰 알아보기
파이어베이스 인증 기능중 토큰에 대해 알아봅니다.
NUXT로 혼자 웹사이트 만들기 11 파이어베이스(firebase) 인증 기능(email&password) 사용하기
파이어베이스 인증기능중 이메일+비밀번호를 사용해서 로그인해봅니다.
NUXT로 혼자 웹사이트 만들기 10 파이어베이스(firebase) 파이어스토어(firestore) 페이징(paging)처리하기
파이어스토어를 이용해서 페이징처리를 해봅니다.
NUXT로 혼자 웹사이트 만들기 9 파이어베이스(firebase) 파이어스토어(firestore) CRUD 해보기
파이어스토어를 이용해서 CRUD 를 시험해보겠습니다.
NUXT로 혼자 웹사이트 만들기 8 파이어베이스(firebase) 펑션스(functions) 시작하기
파이어베이스 펑션스를 이용해서 API를 간단히 구현해봅니다.
NUXT로 혼자 웹사이트 만들기 7 닷엔브(dotenv)로 파이어베이스 프로젝트 정리하기
넉스트 프로젝트에서 닷엔브로 파이어베이스를 사용하기 위한 설정을 해보겠습니다.
NUXT로 혼자 웹사이트 만들기 6 firebase로 데이터베이스(firestore) 사용하기
파이어베이스의 noSQL 데이터베이스인 firestore를 파이어베이스 호스팅 환경에서 사용해봅니다.
NUXT로 혼자 웹사이트 만들기 5 firebase로 hosting해보기
넉스트(nuxt) 소스를 파이어베이스 호스팅(google firebase hosting)을 이용해서 배포(deploy)해봅니다.
NUXT로 혼자 웹사이트 만들기 4 플러그인 설치
전역으로 사용할 플러그인 설치에 대해 알아봅니다.
NUXT로 혼자 웹사이트 만들기 3 라우팅
서버사이드 렌더링도 중요하지만, 기존에 하던 동적 화면 전환이 잘 되는 것이 더 중요합니다.
NUXT로 혼자 웹사이트 만들기 2 설치
NUXT를 설치하고 간단히 구조를 알아봅니다.
NUXT로 혼자 웹사이트 만들기 1 소개
항상 고민하던 부분이 있습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 91 국제화 쉽게 구현하기(vue-i18n)
모던 개발자라면 앱이던 웹이던 항상 다국어 지원이 가능할 통로를 열어두어야한다고 생각합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 90 알림창 쉽게 구현하기(vuetify-dialog)
모던웹(NEMV) 제작 하기 보너스편 시작합니다. [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide ...
일렉트론 앱 제작 후기
최근에 데스크탑 앱을 하나 만들어서 배포했습니다.
Electron native module 사용하기
electron-vue(vue-cli2)로 제작되었던 앱을 vue-cli3플러긴 일렉트론 버전(vue add electron-builder)으로 마이그레이션을 하다보니 생각보다 괴로운 부분이 많았습니다..
모던웹(NEMV) 혼자 제작 하기 3기 - 89 활용편 정리
모던웹(NEMV) 제작 하기 활용편 정리합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 88 게시물에 댓글 추가하기
게시물에 댓글을 추가해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 87 위지웍 에디터 사용하기(toast ui editor)
위지웍 에디터를 사용해서 글을 작성해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 86 사용자 정보 표시하기
간단하게 사용자 정보를 화면에 표시해봅니다.
Electron 5 일렉트론뷰로 우아한 데스크탑 앱 만들기 업데이트(vue-cli3)
vue-cli3가 업데이트 되어서 기존 설치법(vue-cli2)이 아예 막혀버렸습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 85 이미지 컴포넌트로 업로드하기(filepond)
업로드 콤포넌트를 이용해서 이미지를 업로드해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 84 이미지 변환하기(base64, sharp)
이미지 업로드 후 디비 저장까지 하려면 무엇이 필요한지 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 83 파일 업로드 하기(multer)
파일 업로드 미들웨어인 멀터(multer)를 이용해 서버에 파일을 전송해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 82 대시보드 꾸며보기
대시보드에 적절한 위젯들을 배치하고 꾸며봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 81 대시보드 게시판 다르게 표현하기
게시판 데이터를 활용해서 다른 표현을 해보도록 하겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 80 구글 애널리틱스로 사이트 접속 현황 파악하기
구글 애널리틱스로 사이트 분석을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 79 보안연결(ssl) 적용하기
보안연결을 구성하여 https로 접속 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 78 고급편 정리
지금까지 했던 것들을 복습 겸 정리해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 77 구글 리캡챠로 로봇 막아보기(recaptcha)
구글에서 제공하는 리캡챠(recaptcha)를 이용하여 로봇을 막아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 76 반응형 게시판 만들기
모바일, 태블릿, 데스크탑등의 다양한 장에서 적절하게 표현되게 변경해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 75 HTTP 예외처리 제대로 하기
공식 HTTP 에러코드에 맞는 결과를 전송해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 74 공용 알림 메세지 만들기(vuex)
모든 페이지에 있는 알림 메세지 처리를 한 곳에서 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 73 게시판 재활용하기(뷰라우터)
만들어진 게시판 하나로 여러개를 운영해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 72 게시판 페이징과 정렬 처리하기
게시판 페이징과 정렬 처리를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 71 게시판 내용 수정과 삭제
선택된 게시물의 수정과 삭제를 구현해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 70 게시판 내용 읽기
게시판 목록과 내용을 분리해서 읽어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 69 게시판 뷰티파이 테이블 사용하기
뷰티파이의 데이터테이블(v-datatable)을 이용해서 화면에 표시해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 68 게시판 게시물 쓰고 읽기
게시물(article) API CRUD중 게시판 정보가 필요한 CR(Create Read)를 프론트에서 확인해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 67 게시판 게시물 API 만들기
게시물 CRUD를 할 수 있게 API를 만들어 보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 66 게시판 정보 읽기
게시물들을 가져오기 위해 먼저 게시판 정보를 가져와보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 65 게시판을 위한 메뉴 구성
편의를 위해 메뉴를 구성해서 게시판 진입하도록 하겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 64 게시판 모델 만들기(populate)
게시물들은 누가 썼는지, 어느 게시판인지가 제일 중요합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 63 게시판 관리 만들기
일반적으로 운영할 게시판을 만드려면 무엇이 필요한지 생각해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 62 로그인 시간 제한하기(토큰 갱신)
토큰 생성시 만료시간 없이 만들 었기 때문에 브라우저 로컬스토리지에 토큰이 남아있다면 100년이 지나도 로그인이 가능합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 60 뷰 컴포넌트 사용하기
뷰의 특장점중 하나인 콤포넌트에 대해 알아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 58 사용자편 정리
응용편: 사용자를 마칩니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 57 회원가입 완성하기
백엔드를 만들어서 만들어둔 프론트와 연동시켜보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 56 회원가입 프론트 적용하기
뷰티파이 예제로 만들고 있는 모델에 맞게 수정해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 55 회원가입 유효성 판단
뷰티파이 폼을 이용해 회원가입을 간단하게 만들어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 54 한 소스로 사이트 다르게 사용하기
현재 소스를 가지고 다른 사람이 사용하려면 코드 수정이 필요합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 53 새로고침 없이 로그인 하기(by 인터셉터)
매번 요청시 코드 신경쓰지 않으면서 토큰을 매번 날리도록 만들어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 52 모든 요청 토큰 설정으로 접근 막기
매번 액시오스로 api 요청을 할 때마다 헤더에 토큰을 넣어야 작동하는 부분을 사전 정의해서 생략해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 51 백엔드로 페이지 권한 얻기
토큰 유무만 가지고 화면 보안 접근을 하는 것은 역시 위험합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 50 사용자 및 페이지 관리하기
사용자를 자동으로 만들어 주긴 하지만 권한등을 코드에서 제어하기 불편합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 49 뷰저장소(vuex) 이정도만 쓰자
토큰 유무에 따라 로그인/아웃 상태를 전체 페이지에서 판단할 수 있는 뷰저장소에 대해 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 48 로그인 해야 들어갈 수 있는 페이지 만들기(네비게이션 가드)
로그인 해야만 진입할 수 있는 페이지를 만들어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 47 토큰 인증하기
프론트에 토큰을 저장해서 매번 토큰과 함께 요청을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 46 실제 데이터로 로그인하기
이제 실제 데이터로 로그인을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 45 사용자 모델 정리하기
기존에는 name, age 로만 테스트 했으니 로그인이 가능할 모델로 변경합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 44 로그인 간단히 만들어보기
간단하게 로그인 프론트와 백엔드가 잘 통신하는 지 확인해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 43 사이트 저장소 다루기
서버로 부터 토큰을 받아서 저장해놔야 다음에 로그인 없이 api요청이 가능합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 42 HTTP 헤더 알아보기
토큰을 보낼 때는 HTTP 헤더(header)를 통해 전송하는 것이 일반적입니다.
Electron 4 일렉트론뷰로 우아한 데스크탑 앱 만들기 vue-cli3 업그레이드
한동안 일렉트론으로 뭔가 만들지 않았습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 26 기본편 정리
기초편에 이어 14~26까지 기본편 한번 달려봤습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 25 API와 프론트 통신 정리
지난 강좌에 이어서 CRUD 중 UD 즉 수정, 삭제를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 24 api와 몽구스 연결
이제 디비를 조작할 수 있으니 api에서 실제 디비데이터로 몽구스(mongoose)를 사용해서 CRUD 중 CR 즉 쓰고 읽기를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 20 RESTful한 api 만들기
REST(Representational State Transfer)는 구글링해보면 잘 나와 있지만 대체 뭔소린지 알아먹기가 힘드실 겁니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 19 axios 사용하기
프론트에서 api를 통해 데이터를 받아서 화면을 변경해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 16 깃 사용하기
지금까지 프로젝트를 깃을 사용해 다시 만들어 보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 15 뷰티파이 레이아웃
모던웹, 즉 현대적인 웹에서 가장 큰 부분을 담당하는 반응형에 대한 이야기입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 14 자바스크립트 기본
이제부터 기본편 시작합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 13 자바스크립트 언어 사용 시작에 대해
현재 진행중인 모던웹 NEMV, 즉 노드, 익스프레스, 몽고디비, 뷰 모두 자바스크립트를 기반으로 합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 12 뷰티파이 콤포넌트 사용해보기
뷰티파이의 콤포넌트(버튼, 칩)를 사용해서 화면 처리를 위한 연습을 해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 11 익스프레스와 뷰라우터
뷰 라우터의 히스토리모드 이해와 백엔드 라우터의 연결에 대해 알아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 10 뷰티파이 메뉴 추가
뷰티파이 기본 설치된 상태에서 페이지 추가해서 브라우저로 확인해보도록 하겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 9 뷰티파이 수정
뷰티파이 기본 설치된 파일을 수정해서 브라우저로 확인해보기
모던웹(NEMV) 혼자 제작 하기 3기 - 8 익스프레스와 뷰티파이 연동
전 강좌에서 yarn serve로 실행한 http://localhost:8080은 뷰 개발모드입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 7 뷰티파이 설치
뷰티파이 설치에 대해 알아보기
모던웹(NEMV) 혼자 제작 하기 3기 - 6 뷰티파이란
뷰티파이라는 CSS프레임워크에 대해 간략히 소개합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 신기능 소개
회사에서 새로운 프로젝트를 시작하게 되었습니다.
Electron 3 일렉트론뷰로 우아한 데스크탑 앱 만들기 ToDo
과정이 지겨우니 뭔가 만들면서 재미를 찾는 것이 훨씬 개발에 득이 된다고 생각합니다..
Electron 2 일렉트론뷰로 우아한 데스크탑 앱 만들기 UI
최근 유행하는 UI 흐름에 대해 간단히 설명드립니다.
Electron 1 일렉트론뷰로 우아한 데스크탑 앱 만들기 데이터 다루기
이번에는 데스크탑 앱으로 데이터를 다뤄보겠습니다.
Electron 0 일렉트론뷰로 우아한 데스크탑 앱 만들기 기초
설치 관련 업데이트(중요)
NEMBV 20 jwt를 이용한 인증
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 19 인증 시스템 준비
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 18 부드러운 게시판
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 17 다른 게시판 운영
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 16 게시판 댓글 만들기
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 15 게시판 만들기
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 14 Front-end finished
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 12 Front-end bootstrap layout
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 11 Back-end and Front-end api test
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 10 Front-end api test
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMBV 2 Front-end Setup
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMV 5 - vue.js 설치
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMV 4 - node.js & express & mongoDB 설치
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMV 3 - git 등록
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMV 2 - API 설계
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
NEMV 1 - 소개
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
vue-cli
모던웹(NEMV) 혼자 제작 하기 3기 - 신기능 소개
회사에서 새로운 프로젝트를 시작하게 되었습니다.
vue-i18n
모던웹(NEMV) 혼자 제작 하기 3기 - 91 국제화 쉽게 구현하기(vue-i18n)
모던 개발자라면 앱이던 웹이던 항상 다국어 지원이 가능할 통로를 열어두어야한다고 생각합니다.
vuecli3
Electron 5 일렉트론뷰로 우아한 데스크탑 앱 만들기 업데이트(vue-cli3)
vue-cli3가 업데이트 되어서 기존 설치법(vue-cli2)이 아예 막혀버렸습니다.
vuetify
Vue와 Firebase로 모던웹사이트 만들기 52 firebase storage 사용해보기
firebase storage 기능을 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 51 사용자 권한 변경하기
사용자 권한 변경은 단순하지만 종합 선물세트 지식이 필요합니다. firebase(functions, auth, store), vue(component), vuetify(v-select), axios, RESTful API등.. 찬찬히 지금 것들을 되짚어 봅니다~
Vue와 Firebase로 모던웹사이트 만들기 50 회원관리 모양 내보기
vuetify의 v-data-iterator를 사용해서 기존 테이블 방식을 변경해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 49 검색어 필터 만들어보기
vuetify의 v-autocomplete로 검색어 필터를 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 48 파이어스토어 검색해보기
firestore의 where와 vuetify의 v-combobox를 이용해 email검색을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 47 파이어스토어 정렬해보기
firestore 의 orderBy와 vuetify v-data-table을 이용해 정렬을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 46 파이어스토어 페이징해보기
firestore의 offset, limit를 사용해서 vuetify의 v-data-table로 페이징을 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 45 파이어스토어 컬렉션의 전체 개수 구하기
firestore와 functions의 조합으로 컬렉션의 전체 개수 정보를 저장해둡니다.
Vue와 Firebase로 모던웹사이트 만들기 44 파이어베이스 함수에서 파이어스토어 사용하기
파이어베이스 함수(functions)에서 기본 인증으로는 firebase serve –only functions로는 위험하기 때문에 파이어스토어 데이터에 접근할 수 없습니다. 해당 키를 가져와서 프론트에서 데이터를 받아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 43 파이어베이스 함수에서 권한 확인하기
파이어베이스 함수(functions)에서 토큰을 확인하고 풀어헤친 토큰정보(claims)로 권한에 따른 결과를 보냅니다.
Vue와 Firebase로 모던웹사이트 만들기 42 뷰라우터로 권한별 페이지 접근하기
firebase의 토큰 권한 정보(claims.level)로 사용자의 접근을 차단해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 41 파이어베이스 인증 라우터 지연시키기
firebase auth onAuthStateChanged 에서 페이지 이동을 시키는 방법은 잘못되었습니다. 파이어베이스 인증 상태 후의 행동이 중요하므로 다른 방법으로 지연시켜봤습니다.
Vue와 Firebase로 모던웹사이트 만들기 40 firestore에 사용자 정보 추가 삭제하기
firebase auth로 추가/삭제된 이벤트를 firebase functions에서 받아서 firestore에 추가/삭제합니다.
Vue와 Firebase로 모던웹사이트 만들기 39 권한으로 페이지 강제 이동시키기
vue-router로 권한에 따라 페이지를 이동시킵니다.
Vue와 Firebase로 모던웹사이트 만들기 38 firebase token 풀어보기
사용자별 화면 표시를 위해 사용자 데이터를 넣은 토큰을 풀어봅니다~
Vue와 Firebase로 모던웹사이트 만들기 37 firebase functions 맞춤 사용자 설정하기
firebase auth 정보에 사용자 레벨을 추가합니다.
Vue와 Firebase로 모던웹사이트 만들기 36 firebase functions 환경변수 사용하기
관리자 계정 생성을 위해 firebase functions 환경변수를 이용해서 관리자 계정을 지정해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 35 vuetify2로 업그레이드하기
vuetify V1 to V2로 업그레이드 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 34 이메일로 가입과 로그인해보기
파이어베이스 인증(firebase authentication)을 기능중 이메일로 가입과 로그인을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 33 v-form으로 유효성 검사하기
vuetify의 v-form으로 유효성 판단을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 32 회원가입 모양 내보기
vue componet 통신을 이용해 회원가입과 로그인 화면을 토글시켜봅니다.
Vue와 Firebase로 모던웹사이트 만들기 31 로그인 상태 만들어보기
vuetify의 v-menu, v-avatar등을 이용해서 로그인 상태 정보를 표현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 30 로딩 상태 표시하기
vue-progressbar를 이용해서 로딩 상태를 표시해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 29 뷰라우터 네비게이션 가드 사용하기
뷰라우터(vue-router)를 이용해서 로그인 상태에 따라 페이지 접근을 막거나(navigation guard) 이동시킵니다.
Vue와 Firebase로 모던웹사이트 만들기 28 로그인 화면 모양 내보기
뷰티파이(vuetify)를 이용해서 로그인 화면을 만들어 보는 시간을 가져봅니다. 미세한 UI 조절에 고통받는 모습은 아마 누구나 마찬가지 일듯..
Vue와 Firebase로 모던웹사이트 만들기 27 firebase 인증(auth)정보를 vuex 로 저장
인증정보인 user 와 token 을 vuex 저장소에 저장해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 26 뷰엑스(vuex)로 전역 제어하기
vuex를 사용해서 전역 변수를 제어해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 25 뷰(vue) 컴포넌트(component) 알아보기
vue component 사용법을 간단히 알아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 24 인증을 위한 미들웨어와 액시오스 설정하기
파이어베이스 함수(functions)를 사용할 때 가장 주의해야할 것은 보안입니다. 인증된 요청만 받아들이기 위한 미들웨어와 액시오스 설정에 대해 알아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 23 firebase functions 공용 에러 처리
백엔드(firebase functions)에서 에러처리를 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 22 vue 공용 error 처리하기
추후 비동기 함수(async)를 편하게 사용하기위해 공용 에러 처리를 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 21 firebase functions vue에서 axios로 접근하기
파이어베이스 함수(functions)에 등록한 express api에 front(vue + axios)로 접근해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 20 firebase functions RESTful api 만들기
파이어베이스 펑션스를 이용해서 REST API를 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 19 firebase functions 알아보기
파이어베이스의 서버리스 백엔드 역할을 해주는 firebase functions에 대해 알아보고 설치해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 18 firebase 인증(auth) 로그인 해보기
파이어베이스 인증을 이용해서 구글과 이메일 로그인을 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 17 firestore crud 해보기
firestore로 데이터베이스의 기본행위인 CRUD를 해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 16 firestore 설정하기
프론트에서 firestore 사용할 수 있도록 설정해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 15 vuetify로 노트 만들기
데이터베이스(firestore)를 다루기 위해 프론트를 구성해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 14 promise 알아보기
데이터베이스 처리하기에 앞서 프라미스 사용법에 대해 간단히 알아보고 넘어갑니다.
Vue와 Firebase로 모던웹사이트 만들기 13 vuetify 반응형웹 구현하기
v-container, layout, flex 3종세트로 반응형웹을 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 12 vuetify로 카드 만들기
화면 구성의 기본인 v-card를 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 11 vuetify로 하위 메뉴 구성하기
vuetify list-group 을 사용해 하위 메뉴를 구성해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 10 vuetify로 네비게이션 드라워만들기
툴바 메뉴 클릭시 v-navigation-drawer를 표시해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 9 vuetify로 리스트 만들기
vuetify/vList를 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 8 vuetify로 툴바 만들기
vuetify를 이용해서 상단 툴바를 만들어봅니다.
Vue와 Firebase로 모던웹사이트 만들기 7 vue 맛보기
vue가 무엇인지 이해하고 넘어갑니다.
Vue와 Firebase로 모던웹사이트 만들기 6 git 다운로드 받기
강좌 소스 활용을 위해 git clone 과 checkout에 대해 알아봅니다.
Vue와 Firebase로 모던웹사이트 만들기 5 SPA 알아보기
SPA가 무엇인지 알아보고 vue-router로 구현해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 4 git 사용하기
git에 대해 알아보고 필요한 만큼만 사용해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 3 사이트 배포하기
firebase hosting을 이용해서 사이트를 배포해봅니다.
Vue와 Firebase로 모던웹사이트 만들기 2 에디터 설정하기
뷰(vue)에 최적화된 에디터(vscode) 설정을 합니다.
Vue와 Firebase로 모던웹사이트 만들기 1 개발환경 구축하기
개발에 필요한 요소들을 설치합니다.
Vue와 Firebase로 모던웹사이트 만들기 소개
Vue & Firebase에 대해 간단히 소개합니다.
넉스트(nuxt) 사용 후기
넉스트를 사용하면서 강좌를 하고 있는 이유는 실무에 실제 반영해보고, 좀 더 빠른 개발의 길로 이끌어 보고 싶은 마음에서 였습니다.
NUXT로 혼자 웹사이트 만들기 15 파이어베이스(firebase) 리캡챠(recaptcha v3) 사용하기
넉스트(nuxt) 와 파이어베이스 펑션스 (firebase functions)로 리캡챠(recaptcha v3)를 사용해봅니다.
NUXT로 혼자 웹사이트 만들기 14 파이어베이스(firebase) 인증 기능 라우팅해보기
파이어베이스 인증 상태에 따라 페이지 전환을 해보겠습니다.
NUXT로 혼자 웹사이트 만들기 13 파이어베이스(firebase) 인증 기능 화면 표시하기
파이어베이스 인증 기능을 넉스트 저장소(vuex)를 이용해 표현해봅니다.
NUXT로 혼자 웹사이트 만들기 12 파이어베이스(firebase) 인증 기능 토큰 알아보기
파이어베이스 인증 기능중 토큰에 대해 알아봅니다.
NUXT로 혼자 웹사이트 만들기 11 파이어베이스(firebase) 인증 기능(email&password) 사용하기
파이어베이스 인증기능중 이메일+비밀번호를 사용해서 로그인해봅니다.
NUXT로 혼자 웹사이트 만들기 10 파이어베이스(firebase) 파이어스토어(firestore) 페이징(paging)처리하기
파이어스토어를 이용해서 페이징처리를 해봅니다.
NUXT로 혼자 웹사이트 만들기 9 파이어베이스(firebase) 파이어스토어(firestore) CRUD 해보기
파이어스토어를 이용해서 CRUD 를 시험해보겠습니다.
NUXT로 혼자 웹사이트 만들기 8 파이어베이스(firebase) 펑션스(functions) 시작하기
파이어베이스 펑션스를 이용해서 API를 간단히 구현해봅니다.
NUXT로 혼자 웹사이트 만들기 7 닷엔브(dotenv)로 파이어베이스 프로젝트 정리하기
넉스트 프로젝트에서 닷엔브로 파이어베이스를 사용하기 위한 설정을 해보겠습니다.
NUXT로 혼자 웹사이트 만들기 6 firebase로 데이터베이스(firestore) 사용하기
파이어베이스의 noSQL 데이터베이스인 firestore를 파이어베이스 호스팅 환경에서 사용해봅니다.
NUXT로 혼자 웹사이트 만들기 5 firebase로 hosting해보기
넉스트(nuxt) 소스를 파이어베이스 호스팅(google firebase hosting)을 이용해서 배포(deploy)해봅니다.
NUXT로 혼자 웹사이트 만들기 4 플러그인 설치
전역으로 사용할 플러그인 설치에 대해 알아봅니다.
NUXT로 혼자 웹사이트 만들기 3 라우팅
서버사이드 렌더링도 중요하지만, 기존에 하던 동적 화면 전환이 잘 되는 것이 더 중요합니다.
NUXT로 혼자 웹사이트 만들기 2 설치
NUXT를 설치하고 간단히 구조를 알아봅니다.
NUXT로 혼자 웹사이트 만들기 1 소개
항상 고민하던 부분이 있습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 91 국제화 쉽게 구현하기(vue-i18n)
모던 개발자라면 앱이던 웹이던 항상 다국어 지원이 가능할 통로를 열어두어야한다고 생각합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 90 알림창 쉽게 구현하기(vuetify-dialog)
모던웹(NEMV) 제작 하기 보너스편 시작합니다. [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide ...
일렉트론 앱 제작 후기
최근에 데스크탑 앱을 하나 만들어서 배포했습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 89 활용편 정리
모던웹(NEMV) 제작 하기 활용편 정리합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 88 게시물에 댓글 추가하기
게시물에 댓글을 추가해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 87 위지웍 에디터 사용하기(toast ui editor)
위지웍 에디터를 사용해서 글을 작성해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 86 사용자 정보 표시하기
간단하게 사용자 정보를 화면에 표시해봅니다.
Electron 5 일렉트론뷰로 우아한 데스크탑 앱 만들기 업데이트(vue-cli3)
vue-cli3가 업데이트 되어서 기존 설치법(vue-cli2)이 아예 막혀버렸습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 85 이미지 컴포넌트로 업로드하기(filepond)
업로드 콤포넌트를 이용해서 이미지를 업로드해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 84 이미지 변환하기(base64, sharp)
이미지 업로드 후 디비 저장까지 하려면 무엇이 필요한지 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 83 파일 업로드 하기(multer)
파일 업로드 미들웨어인 멀터(multer)를 이용해 서버에 파일을 전송해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 82 대시보드 꾸며보기
대시보드에 적절한 위젯들을 배치하고 꾸며봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 81 대시보드 게시판 다르게 표현하기
게시판 데이터를 활용해서 다른 표현을 해보도록 하겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 80 구글 애널리틱스로 사이트 접속 현황 파악하기
구글 애널리틱스로 사이트 분석을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 79 보안연결(ssl) 적용하기
보안연결을 구성하여 https로 접속 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 78 고급편 정리
지금까지 했던 것들을 복습 겸 정리해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 77 구글 리캡챠로 로봇 막아보기(recaptcha)
구글에서 제공하는 리캡챠(recaptcha)를 이용하여 로봇을 막아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 76 반응형 게시판 만들기
모바일, 태블릿, 데스크탑등의 다양한 장에서 적절하게 표현되게 변경해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 75 HTTP 예외처리 제대로 하기
공식 HTTP 에러코드에 맞는 결과를 전송해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 74 공용 알림 메세지 만들기(vuex)
모든 페이지에 있는 알림 메세지 처리를 한 곳에서 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 73 게시판 재활용하기(뷰라우터)
만들어진 게시판 하나로 여러개를 운영해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 72 게시판 페이징과 정렬 처리하기
게시판 페이징과 정렬 처리를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 71 게시판 내용 수정과 삭제
선택된 게시물의 수정과 삭제를 구현해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 70 게시판 내용 읽기
게시판 목록과 내용을 분리해서 읽어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 69 게시판 뷰티파이 테이블 사용하기
뷰티파이의 데이터테이블(v-datatable)을 이용해서 화면에 표시해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 68 게시판 게시물 쓰고 읽기
게시물(article) API CRUD중 게시판 정보가 필요한 CR(Create Read)를 프론트에서 확인해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 67 게시판 게시물 API 만들기
게시물 CRUD를 할 수 있게 API를 만들어 보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 66 게시판 정보 읽기
게시물들을 가져오기 위해 먼저 게시판 정보를 가져와보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 65 게시판을 위한 메뉴 구성
편의를 위해 메뉴를 구성해서 게시판 진입하도록 하겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 64 게시판 모델 만들기(populate)
게시물들은 누가 썼는지, 어느 게시판인지가 제일 중요합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 63 게시판 관리 만들기
일반적으로 운영할 게시판을 만드려면 무엇이 필요한지 생각해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 58 사용자편 정리
응용편: 사용자를 마칩니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 57 회원가입 완성하기
백엔드를 만들어서 만들어둔 프론트와 연동시켜보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 56 회원가입 프론트 적용하기
뷰티파이 예제로 만들고 있는 모델에 맞게 수정해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 55 회원가입 유효성 판단
뷰티파이 폼을 이용해 회원가입을 간단하게 만들어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 54 한 소스로 사이트 다르게 사용하기
현재 소스를 가지고 다른 사람이 사용하려면 코드 수정이 필요합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 52 모든 요청 토큰 설정으로 접근 막기
매번 액시오스로 api 요청을 할 때마다 헤더에 토큰을 넣어야 작동하는 부분을 사전 정의해서 생략해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 51 백엔드로 페이지 권한 얻기
토큰 유무만 가지고 화면 보안 접근을 하는 것은 역시 위험합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 50 사용자 및 페이지 관리하기
사용자를 자동으로 만들어 주긴 하지만 권한등을 코드에서 제어하기 불편합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 49 뷰저장소(vuex) 이정도만 쓰자
토큰 유무에 따라 로그인/아웃 상태를 전체 페이지에서 판단할 수 있는 뷰저장소에 대해 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 48 로그인 해야 들어갈 수 있는 페이지 만들기(네비게이션 가드)
로그인 해야만 진입할 수 있는 페이지를 만들어보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 47 토큰 인증하기
프론트에 토큰을 저장해서 매번 토큰과 함께 요청을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 46 실제 데이터로 로그인하기
이제 실제 데이터로 로그인을 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 45 사용자 모델 정리하기
기존에는 name, age 로만 테스트 했으니 로그인이 가능할 모델로 변경합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 44 로그인 간단히 만들어보기
간단하게 로그인 프론트와 백엔드가 잘 통신하는 지 확인해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 43 사이트 저장소 다루기
서버로 부터 토큰을 받아서 저장해놔야 다음에 로그인 없이 api요청이 가능합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 42 HTTP 헤더 알아보기
토큰을 보낼 때는 HTTP 헤더(header)를 통해 전송하는 것이 일반적입니다.
Electron 4 일렉트론뷰로 우아한 데스크탑 앱 만들기 vue-cli3 업그레이드
한동안 일렉트론으로 뭔가 만들지 않았습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 26 기본편 정리
기초편에 이어 14~26까지 기본편 한번 달려봤습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 25 API와 프론트 통신 정리
지난 강좌에 이어서 CRUD 중 UD 즉 수정, 삭제를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 24 api와 몽구스 연결
이제 디비를 조작할 수 있으니 api에서 실제 디비데이터로 몽구스(mongoose)를 사용해서 CRUD 중 CR 즉 쓰고 읽기를 해보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 16 깃 사용하기
지금까지 프로젝트를 깃을 사용해 다시 만들어 보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 15 뷰티파이 레이아웃
모던웹, 즉 현대적인 웹에서 가장 큰 부분을 담당하는 반응형에 대한 이야기입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 14 자바스크립트 기본
이제부터 기본편 시작합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 13 자바스크립트 언어 사용 시작에 대해
현재 진행중인 모던웹 NEMV, 즉 노드, 익스프레스, 몽고디비, 뷰 모두 자바스크립트를 기반으로 합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 12 뷰티파이 콤포넌트 사용해보기
뷰티파이의 콤포넌트(버튼, 칩)를 사용해서 화면 처리를 위한 연습을 해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 11 익스프레스와 뷰라우터
뷰 라우터의 히스토리모드 이해와 백엔드 라우터의 연결에 대해 알아보겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 10 뷰티파이 메뉴 추가
뷰티파이 기본 설치된 상태에서 페이지 추가해서 브라우저로 확인해보도록 하겠습니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 9 뷰티파이 수정
뷰티파이 기본 설치된 파일을 수정해서 브라우저로 확인해보기
모던웹(NEMV) 혼자 제작 하기 3기 - 8 익스프레스와 뷰티파이 연동
전 강좌에서 yarn serve로 실행한 http://localhost:8080은 뷰 개발모드입니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 7 뷰티파이 설치
뷰티파이 설치에 대해 알아보기
모던웹(NEMV) 혼자 제작 하기 3기 - 6 뷰티파이란
뷰티파이라는 CSS프레임워크에 대해 간략히 소개합니다.
Electron 3 일렉트론뷰로 우아한 데스크탑 앱 만들기 ToDo
과정이 지겨우니 뭔가 만들면서 재미를 찾는 것이 훨씬 개발에 득이 된다고 생각합니다..
Electron 2 일렉트론뷰로 우아한 데스크탑 앱 만들기 UI
최근 유행하는 UI 흐름에 대해 간단히 설명드립니다.
Electron 1 일렉트론뷰로 우아한 데스크탑 앱 만들기 데이터 다루기
이번에는 데스크탑 앱으로 데이터를 다뤄보겠습니다.
Electron 0 일렉트론뷰로 우아한 데스크탑 앱 만들기 기초
설치 관련 업데이트(중요)
vuetify-dialog
NUXT로 혼자 웹사이트 만들기 4 플러그인 설치
전역으로 사용할 플러그인 설치에 대해 알아봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 90 알림창 쉽게 구현하기(vuetify-dialog)
모던웹(NEMV) 제작 하기 보너스편 시작합니다. [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide ...
vuex
NUXT로 혼자 웹사이트 만들기 14 파이어베이스(firebase) 인증 기능 라우팅해보기
파이어베이스 인증 상태에 따라 페이지 전환을 해보겠습니다.
NUXT로 혼자 웹사이트 만들기 13 파이어베이스(firebase) 인증 기능 화면 표시하기
파이어베이스 인증 기능을 넉스트 저장소(vuex)를 이용해 표현해봅니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 51 백엔드로 페이지 권한 얻기
토큰 유무만 가지고 화면 보안 접근을 하는 것은 역시 위험합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 50 사용자 및 페이지 관리하기
사용자를 자동으로 만들어 주긴 하지만 권한등을 코드에서 제어하기 불편합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 49 뷰저장소(vuex) 이정도만 쓰자
토큰 유무에 따라 로그인/아웃 상태를 전체 페이지에서 판단할 수 있는 뷰저장소에 대해 알아봅니다.
web
Renewal github page 2
전면 스플래쉬 페이지를 만들어 봤다.
Renewal github page
기존 jekyll-now 기본테마가 너무 흉해서 변경중
github page domain 설정
기본적으로 jekyll github page 를 이용할 경우 id.github.io 라는 도메인명으로 접속하게 되는데
Markdown
markdown은 인터넷 검색하면 뭐에 쓰는지 알수 있다
github hosting
github를 이용해 무료로 블로그를 운영할 수 있다는 소식을 듣고 찾아보았다.
www
NEMVV 3 웹서버 구동
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
yarn
모던웹(NEMV) 혼자 제작 하기 3기 - 33 배포를 위한 개발환경 설정
지금까지 3000포트를 사용하여 테스트를 했습니다.
NEMBV 1 Back-end Setup
이 강좌는 종료되었습니다. 새로운 강좌로 시작하세요~ 모던웹(NEMV) 제작 강좌
youtube
모던웹(NEMV) 혼자 제작 하기 3기 - 영상화
NEMV(Node.js, Express.js, MongoDB, Vue.js)를 이용해 웹사이트를 한번에 제작하는 강좌를 만들어왔었는데요..