SlideShare ist ein Scribd-Unternehmen logo
1 von 12
Downloaden Sie, um offline zu lesen
• 프론트엔드 (Vue.js) 및 마크업
• 백엔드 (Node.js + Express.js + Mongoose)
• 백오피스 개발 (앱 내 콘텐츠 관리, CS, 통계)
• 인프라 (AWS)
현재 하는 일
1. SPA
2. 만들어봅시다
목차
1 / 10
SPA
• 백엔드 코드, HTML 템플릿, 프론트엔
드 코드가 섞여있음
전통적인 웹사이트 SPA
• 백엔드 코드와 프론트엔드 코드 분리
SPA
• 백엔드와 프론트엔드 분리
• 다른 클라이언트와 API 서버 공유
• S3 배포 가능
장점 단점
• 초기 로딩 속도
• SEO
다른 라이브러리/프레임워크도 있는데
• JSX
• 쉽지 않은 개발환경 설정
React
• TypeScript
Angular
Vue.js를 선택한 이유
vue, vue-router, webpack, babel,
eslint, 테스트 도구(karma, mocha),
각종 loader 등
Vue.js를 선택한 이유
만들어봅시다
목표
15분 동안 블로그 만들기
만들어봅시다
API
[get] /post
– 글 목록을 가져옴
[get] /post/:id
– 글 하나를 가져옴
[post] /post
- 글을 저장함
뭐 보고 만들면 되나요?
• 공식 문서가 훌륭합니다.
• Vue.js 한국 사용자 모임에 유용한 글이 많습니다.
• 페이스북 모임/슬랙에 초고수님들이 있습니다.
베이비홈닥터
설치하고
안전육아 하세요
구글 플레이, 앱 스토어에서 설치 가능

Weitere ähnliche Inhalte

Was ist angesagt?

Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)Junsu Kim
 
원모먼트 Vue js 적용기
원모먼트 Vue js 적용기원모먼트 Vue js 적용기
원모먼트 Vue js 적용기우현 김
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기JinKwon Lee
 
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문종훈 박
 
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신Sungwoo Choo
 
퍼블리셔, 프론트엔드개발을 시작하다
퍼블리셔, 프론트엔드개발을 시작하다퍼블리셔, 프론트엔드개발을 시작하다
퍼블리셔, 프론트엔드개발을 시작하다정석 양
 
[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)
[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)
[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)NAVER D2
 
비 개발자를 위한 웹 개발 기초
비 개발자를 위한 웹 개발 기초비 개발자를 위한 웹 개발 기초
비 개발자를 위한 웹 개발 기초Gihyo Joshua Jang
 
2020년 10월 24일 개발자 이야기
2020년 10월 24일 개발자 이야기2020년 10월 24일 개발자 이야기
2020년 10월 24일 개발자 이야기Jay Park
 
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)JinKwon Lee
 
PHP Slim Framework with Angular
PHP Slim Framework with AngularPHP Slim Framework with Angular
PHP Slim Framework with AngularJT Jintae Jung
 
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기복연 이
 
The LESS 기초 : The Dynamic Styleshee Language Basic
The LESS 기초 : The Dynamic Styleshee Language BasicThe LESS 기초 : The Dynamic Styleshee Language Basic
The LESS 기초 : The Dynamic Styleshee Language Basicjeong seok yang
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: YeomanJae Sung Park
 
Front-end Development with Ruby on Rails
Front-end Development with Ruby on RailsFront-end Development with Ruby on Rails
Front-end Development with Ruby on Rails추근 문
 
응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angularredribbon1307
 
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드수정 김
 
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기우영 주
 
Basic of web ref.웹을지탱하는기술_01
Basic of web ref.웹을지탱하는기술_01Basic of web ref.웹을지탱하는기술_01
Basic of web ref.웹을지탱하는기술_01SangHun Lee
 

Was ist angesagt? (20)

Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)
 
원모먼트 Vue js 적용기
원모먼트 Vue js 적용기원모먼트 Vue js 적용기
원모먼트 Vue js 적용기
 
Cooking jquery
Cooking jqueryCooking jquery
Cooking jquery
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
 
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
 
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
NAVER 오픈세미나 대구 (2014.08.01) - 오픈소스 라이브러리를 활용한 네이티브 어플리케이션의 데이터 저장과 통신
 
퍼블리셔, 프론트엔드개발을 시작하다
퍼블리셔, 프론트엔드개발을 시작하다퍼블리셔, 프론트엔드개발을 시작하다
퍼블리셔, 프론트엔드개발을 시작하다
 
[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)
[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)
[D2 CAMPUS] tech meet up(Back-end) - 교내 웹서비스 개발 일지 (박은찬님)
 
비 개발자를 위한 웹 개발 기초
비 개발자를 위한 웹 개발 기초비 개발자를 위한 웹 개발 기초
비 개발자를 위한 웹 개발 기초
 
2020년 10월 24일 개발자 이야기
2020년 10월 24일 개발자 이야기2020년 10월 24일 개발자 이야기
2020년 10월 24일 개발자 이야기
 
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
 
PHP Slim Framework with Angular
PHP Slim Framework with AngularPHP Slim Framework with Angular
PHP Slim Framework with Angular
 
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기
『풀스택 개발자를 위한 MEAN 스택 입문』 - 미리보기
 
The LESS 기초 : The Dynamic Styleshee Language Basic
The LESS 기초 : The Dynamic Styleshee Language BasicThe LESS 기초 : The Dynamic Styleshee Language Basic
The LESS 기초 : The Dynamic Styleshee Language Basic
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman
 
Front-end Development with Ruby on Rails
Front-end Development with Ruby on RailsFront-end Development with Ruby on Rails
Front-end Development with Ruby on Rails
 
응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular
 
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드
 
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기
 
Basic of web ref.웹을지탱하는기술_01
Basic of web ref.웹을지탱하는기술_01Basic of web ref.웹을지탱하는기술_01
Basic of web ref.웹을지탱하는기술_01
 

Kürzlich hochgeladen

JMP가 걸어온 여정, 새로운 도약 JMP 18!
JMP가 걸어온 여정, 새로운 도약 JMP 18!JMP가 걸어온 여정, 새로운 도약 JMP 18!
JMP가 걸어온 여정, 새로운 도약 JMP 18!JMP Korea
 
(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?
(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?
(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?Jay Park
 
JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개
JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개
JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개JMP Korea
 
실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석
실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석
실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석JMP Korea
 
JMP를 활용한 전자/반도체 산업 Yield Enhancement Methodology
JMP를 활용한 전자/반도체 산업 Yield Enhancement MethodologyJMP를 활용한 전자/반도체 산업 Yield Enhancement Methodology
JMP를 활용한 전자/반도체 산업 Yield Enhancement MethodologyJMP Korea
 
JMP를 활용한 가속열화 분석 사례
JMP를 활용한 가속열화 분석 사례JMP를 활용한 가속열화 분석 사례
JMP를 활용한 가속열화 분석 사례JMP Korea
 
공학 관점에서 바라본 JMP 머신러닝 최적화
공학 관점에서 바라본 JMP 머신러닝 최적화공학 관점에서 바라본 JMP 머신러닝 최적화
공학 관점에서 바라본 JMP 머신러닝 최적화JMP Korea
 
데이터 분석 문제 해결을 위한 나의 JMP 활용법
데이터 분석 문제 해결을 위한 나의 JMP 활용법데이터 분석 문제 해결을 위한 나의 JMP 활용법
데이터 분석 문제 해결을 위한 나의 JMP 활용법JMP Korea
 

Kürzlich hochgeladen (8)

JMP가 걸어온 여정, 새로운 도약 JMP 18!
JMP가 걸어온 여정, 새로운 도약 JMP 18!JMP가 걸어온 여정, 새로운 도약 JMP 18!
JMP가 걸어온 여정, 새로운 도약 JMP 18!
 
(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?
(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?
(독서광) 인간이 초대한 대형 참사 - 대형 참사가 일어날 때까지 사람들은 무엇을 하고 있었는가?
 
JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개
JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개
JMP 기능의 확장 및 내재화의 핵심 JMP-Python 소개
 
실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석
실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석
실험 설계의 평가 방법: Custom Design을 중심으로 반응인자 최적화 및 Criteria 해석
 
JMP를 활용한 전자/반도체 산업 Yield Enhancement Methodology
JMP를 활용한 전자/반도체 산업 Yield Enhancement MethodologyJMP를 활용한 전자/반도체 산업 Yield Enhancement Methodology
JMP를 활용한 전자/반도체 산업 Yield Enhancement Methodology
 
JMP를 활용한 가속열화 분석 사례
JMP를 활용한 가속열화 분석 사례JMP를 활용한 가속열화 분석 사례
JMP를 활용한 가속열화 분석 사례
 
공학 관점에서 바라본 JMP 머신러닝 최적화
공학 관점에서 바라본 JMP 머신러닝 최적화공학 관점에서 바라본 JMP 머신러닝 최적화
공학 관점에서 바라본 JMP 머신러닝 최적화
 
데이터 분석 문제 해결을 위한 나의 JMP 활용법
데이터 분석 문제 해결을 위한 나의 JMP 활용법데이터 분석 문제 해결을 위한 나의 JMP 활용법
데이터 분석 문제 해결을 위한 나의 JMP 활용법
 

vuetiful korea 발표자료