CLIEN

본문 바로가기 메뉴 바로가기 보기설정 테마설정
톺아보기 공감글
커뮤니티 커뮤니티전체 C 모두의광장 F 모두의공원 I 사진게시판 Q 아무거나질문 D 정보와자료 N 새로운소식 T 유용한사이트 P 자료실 E 강좌/사용기 L 팁과강좌 U 사용기 · 체험단사용기 W 사고팔고 J 알뜰구매 S 회원중고장터 B 직접홍보 · 보험상담실 H 클리앙홈
소모임 소모임전체 ·굴러간당 ·주식한당 ·아이포니앙 ·MaClien ·일본산당 ·방탄소년당 ·개발한당 ·자전거당 ·안드로메당 ·이륜차당 ·소셜게임한당 ·육아당 ·AI당 ·나스당 ·소시당 ·가상화폐당 ·디아블로당 ·골프당 ·클다방 ·야구당 ·걸그룹당 ·젬워한당 ·리눅서당 ·영화본당 ·사과시계당 ·캠핑간당 ·패셔니앙 ·맛있겠당 ·IoT당 ·키보드당 ·라즈베리파이당 ·3D메이킹 ·X세대당 ·ADHD당 ·AI그림당 ·날아간당 ·배드민턴당 ·농구당 ·블랙베리당 ·곰돌이당 ·비어있당 ·FM당구당 ·블록체인당 ·보드게임당 ·활자중독당 ·볼링친당 ·냐옹이당 ·문명하셨당 ·클래시앙 ·콘솔한당 ·요리한당 ·쿠키런당 ·대구당 ·DANGER당 ·뚝딱뚝당 ·개판이당 ·동숲한당 ·날아올랑 ·전기자전거당 ·e북본당 ·갖고다닌당 ·이브한당 ·물고기당 ·도시어부당 ·FM한당 ·포뮬러당 ·안경쓴당 ·차턴당 ·총쏜당 ·땀흘린당 ·하스스톤한당 ·히어로즈한당 ·인스타한당 ·KARA당 ·꼬들한당 ·덕질한당 ·어학당 ·가죽당 ·레고당 ·LOLien ·Mabinogien ·임시소모임 ·미드당 ·밀리터리당 ·땅판당 ·헌팅한당 ·오른당 ·MTG한당 ·소리당 ·노키앙 ·적는당 ·방송한당 ·바다건너당 ·PC튜닝한당 ·찰칵찍당 ·그림그린당 ·소풍간당 ·심는당 ·패스오브엑자일당 ·품앱이당 ·리듬탄당 ·노젓는당 ·달린당 ·Sea마당 ·SimSim하당 ·심야식당 ·윈태블릿당 ·미끄러진당 ·축구당 ·나혼자산당 ·스타한당 ·스팀한당 ·파도탄당 ·퐁당퐁당 ·테니스친당 ·테스트당 ·빨콩이당 ·공대시계당 ·여행을떠난당 ·터치패드당 ·트윗당 ·창업한당 ·VR당 ·시계찬당 ·WebOs당 ·위스키당 ·와인마신당 ·WOW당 ·윈폰이당
임시소모임
고객지원
  • 게시물 삭제 요청
  • 불법촬영물등 신고
  • 쪽지 신고
  • 닉네임 신고
  • 제보 및 기타 제안
© CLIEN.NET
공지[점검] 잠시후 서비스 점검을 위해 약 30분간 접속이 차단됩니다. (금일 18:15 ~ 18:45)

팁과강좌

PC/모바일 모던웹(NEMV) 제작 하기 강좌 기본편 16

9
2018-10-17 23:43:51 수정일 : 2018-10-18 00:01:08 211.♡.246.251
memi

개요

지난강좌 기초편: https://www.clien.net/service/board/lecture/12640795CLIEN


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


현재 강좌처럼 화면, 서버, 디비 죄다 하는 걸 풀스택이라고 합니다.


하나 하나 보면 별 것 없는데 여러가지를 하면 괜히 정신이 없어지는 것이죠..


과거 부트스트랩 강좌(NEMBV)처럼 쓸만한 화면이 번쩍 나타나지 않아서 안타까우실 분들도 있지만..


차근차근 따라해서 개념을 확실히 이해하시면 현재 강좌가 훨씬 강력한 무기가 될 것입니다.


기본편 정리 표


대충 그려서 못생긴 그림이지만 지금까지 한 것들이 이것입니다.


SPA로 부드러운 웹을 구현하기 위해 고생한 그림이죠..


영상 강좌 후기

하고 싶었던 것은 소리 없이 영상만 녹화하고 자막으로 처리하고 싶었으나..


편집이 귀찮은 것을 떠나서 시간이 장난 아니게 많이 소모되는 것임을 깨달았습니다.


다시 보면서 구간 자르는 것도 힘들고, 본인 목소리 듣는 것도 매우 거북해서 사실 아예 다시 보지 않은 강좌도 여럿 있습니다..


2018 맥북프로 기준 30분 영상 편집(고작 인트로 자막 하나 넣음)하고 파일 내보내는데 30분 걸리는 것도 처음 알았습니다.


유튜브에 올리는데 또 20분 정도 걸립니다.


iMovie가 후져서 그런지는 모르겠지만..(파이널컷은 비싸서 못삼) 보통일이 아니네요 유튜버님들 존경합니다.


최대한 15분 내외로 짧게 여러편을 만들고 싶었는데 버벅이다 보니 뜻대로 안되어 1시간을 소모한 강좌도 있습니다..


대부분 아무 생각 없이 이제 뭐해볼까? 라는 무계획으로 영상을 촬영하다 그렇게 된것이죠..


그래도 장점은 정리할 것도 없이 빠르게 잘 설명할 수 있는 것 같습니다.


고수가 아닌 개발자가 고민하는 멍청한 모습도 분명 도움이 된다고 생각합니다.


다음편 강좌에 대해

다음은 이제 응용할 차례입니다.


그 어떤 책이나 강좌를 봐도 서버 배포는 맨 뒷장이지만..


전 시작부터 서버 배포를 할 예정입니다.


아무리 생각해도 본인 피씨(로컬호스트)에서 잘 돌려서 뭐합니까..


연습게임 그만하고 실제 서버에 배포해서 돌려야 웹이죠..


그래서 AWS, GCP, TOAST 등에 조건 좋은 클라우드 서버 무료티어 6개월권이라도 하나 계정파서 돌리는 것을 해볼 예정입니다.


도메인과 ssl 즉 https(443)로 서비스 가능하게 해놓고 무엇을 만들 지 생각하려 합니다.


역시 개발취지인 선구현후개선 이어 가야죠..


무엇을 만들것인가

웹교육의 꽃인 게시판은 너무 지루합니다..


사실 왠만한 서비스는 무료에 좋은 게 많아서 생각이 안나네요…


현재 생각하고 있는 것은 가계부나, 카드게임, 익명채팅, 가짜뉴스 등록 사이트 같은 거 만들까 하는데..


혹시 아이디어 보내주시면 참고해서 결정 해보도록 하겠습니다.


마치며

아무래도 영상만 보는 것보다 정리된 글과 함께 보는 것이 좋을 것 같아서.. 기존 기초강좌도 게시글들을 전부 리뉴얼해두었습니다.


하면서 의문나는 것이 있으면 바로 피드백 주셔도 괜찮습니다.


모던웹(NEMV) 많이 도전 바랍니다~


영상 목록


14 자바스크립트 기본 익히기


글참고: https://fkkmemi.github.io/nemv/nemv-014-javascript-study/


15 뷰티파이 레이아웃


글참고: https://fkkmemi.github.io/nemv/nemv-015-vuetify-layout/


16 깃허브 등록


글참고: https://fkkmemi.github.io/nemv/nemv-016-git-start/


17 SPA란


글참고: https://fkkmemi.github.io/nemv/nemv-017-about-spa/


18 api 설정하기


글참고: https://fkkmemi.github.io/nemv/nemv-018-hello-api/


19 AXIOS 시작하기


글참고: https://fkkmemi.github.io/nemv/nemv-019-hello-axios/


20 RESTful한 api 만들기


글참고: https://fkkmemi.github.io/nemv/nemv-020-make-rest/


21 몽고디비 설치


글참고: https://fkkmemi.github.io/nemv/nemv-021-mongo-install/


22 몽고디비 설치 확인


글참고: https://fkkmemi.github.io/nemv/nemv-022-mongo-shell/


23 몽구스 설치 및 확인


글참고: https://fkkmemi.github.io/nemv/nemv-023-mongoose-setup/


24 api와 몽구스 연결


글참고: https://fkkmemi.github.io/nemv/nemv-024-mongoose-and-api/


25 API와 프론트 통신 정리


글참고: https://fkkmemi.github.io/nemv/nemv-025-mongoose-and-api-2/


26 기본편 정리


글참고: https://fkkmemi.github.io/nemv/nemv-026-standard-end/


기본편 재생목록 링크

모던웹(NEMV) 강좌








출처 : https://fkkmemi.github.io/nemv/nemv-026-standard-end/
memi 님의 게시글 댓글
  • 주소복사
  • Facebook
  • X(Twitter)
댓글 • [16]
Realtime
IP 75.♡.156.182
10-18 2018-10-18 00:39:53
·
아~ 지난 번에 친절한 응답에 도움 많이 받았습니다.
이제는 저도 조금씩 일렉트론으로 데스크탑 앱을 만들어서 써보고 있네요.
기회/수준이 되어서 저도 자료 공유할 날이 오면 좋겠습니다~^^
memi
IP 211.♡.246.251
10-18 2018-10-18 08:10:57
·
도움이 되었다니 기쁩니다~ 일렉트론이 버전업되면서 점점 완성도가 높아지고 있습니다~
수준 낮은 저도 공유하는데요 뭘~ 기회가 문제죠 ㅎ
memi
IP 211.♡.246.251
10-18 2018-10-18 11:48:12 / 수정일: 2018-10-18 11:48:43
·
최근에 vuetify&electron이 vue-cli3로 업뎃 되었네요~
간만에 일렉트론 둘러보고 포스트 남겨봅니다.
https://fkkmemi.github.io/electron/electron-04-vuecli3/
참고하셔서 마이그레이션 권장합니다~
소프트코어
IP 175.♡.11.99
10-18 2018-10-18 07:38:18
·
영상편집은 정말 공이 많이 필요한 것 같습니다. 짬내서 봐야겠네요. 좋은글 감사합니다
memi
IP 211.♡.246.251
10-18 2018-10-18 08:11:45
·
편집은 기법이나 하드웨어가 문제가 아닌 것 같아요.. 그냥 시간 투자 부터 힘듬..
팜뽀이
IP 183.♡.246.83
10-18 2018-10-18 10:01:15
·
좋은강좌 만들어주셔서 감사합니다. 시간내서 전체 다 보려구 합니다~ memi님 덕분에 구닥다리 개발툴을 버리고 모던앱의 세계로 가려고 합니다.
memi
IP 211.♡.246.251
10-22 2018-10-22 14:17:13
·
넵~ 주일은 진행하면서 서브로 조금씩 천천히 부담 없이 진행해보세요~
smboy86
IP 121.♡.25.30
10-19 2018-10-19 00:09:48
·
정말 멋진 일입니다
스크랩해두고 두고두고 보겠습니다
감사합니다.
Naleo_
IP 223.♡.22.196
10-19 2018-10-19 16:23:30
·
초급 웹 개발자로서 잘 배우고 갑니다. 영상편집은 일반적인 건 아이무비로 하는게 솔직히 속편합니다.
아니라면 선택지가 프리미어 파이널컷 다빈치가 있는데.. 다루기가 만만찮아서.... 개인적으로는 다빈치를 추천합니다. 최근에 판올림 많이되서 편해졌습니다. 물론 무료도 있습니다
memi
IP 211.♡.246.251
10-22 2018-10-22 14:18:44
·
조언 감사드립니다. 파이널컷 복잡하군요?
다빈치는 처음 듣네요~
한번 검토해보겠습니다~
이재아빠
IP 106.♡.250.232
10-19 2018-10-19 18:19:01
·
Element UI 적용해서 개발하다가 데인 후에, 덕분에 Vuetify를 알게 되어서 익히고 있습니다. 감사합니다.
memi
IP 211.♡.246.251
10-22 2018-10-22 14:22:20
·
엘레먼트도 무지 좋다고 들었던 것 같던데 판새가 기울긴 했나봐요..
https://madewithvuejs.com/frameworks 저는 요사이트 자주 확인하는데,
보시면 뷰티파이가 5만 엘레먼트가 4만 추천이네요
최근 1.3까지 나왔는데 뷰티파이는 https://fkkmemi.github.io/talk/vuetify-update-1.3/ 포스팅해두었습니다.
한번 도전해보세요~ 사용법은 사실 다 거기서 거기라고 봐요 부트스트랩이나 뷰티파이나 엘레먼트나
이재아빠
IP 106.♡.250.232
10-22 2018-10-22 15:26:39
·
엘리먼트는 1.x대에서 2.x대로 올라갔는데, 레이아웃이 깨지더군요. 그래서 1.x대에서 개발해놨던 거 써먹지를 못했습니다. 중국애덜이 개발한 프레임웍이라서 중국어로 커뮤니케이션 하는 부분들도 있구요. 암튼, 뷰티파이가 지금으로서는 젤 낫습니다.
memi
IP 211.♡.246.251
10-22 2018-10-22 15:29:34
·
좋은 사용 정보네요~ 엘리먼트 궁금했었는데 감사합니다~
이재아빠
IP 106.♡.250.232
10-22 2018-10-22 16:50:27
·
엘리먼트를 선택했던 이유가 다른 프레임웍이 grid가 12개인데, 엘리먼트는 24개입니다. 그래서 세세하게 그리드를 운영할 수 있을 거 같아서 선택했는데, 2.x로 가면서 맞춰놓은게 다 틀어지더군요 ㅠㅠ
memi
IP 211.♡.246.251
10-22 2018-10-22 17:01:01
·
욕나오는 상황이네요 정말..
그런데 24개 그리드가 의미는 있긴 하네요, 아주 가끔 데탑 전용 오밀조밀한 레이아웃 필요한 프로젝트가 있죠..
전 그냥 대세에 편승하는 편이라.. 좀 짜증나는 상황이라해도 대세로 재작업합니다 ㅜ

새로운 댓글이 없습니다.
이미지 최대 업로드 용량 15 MB / 업로드 가능 확장자 jpg,gif,png,jpeg,webp
지나치게 큰 이미지의 크기는 조정될 수 있습니다.
목록으로
글쓰기
글쓰기
목록으로 댓글보기 이전글 다음글
아이디  ·  비밀번호 찾기 회원가입
이용규칙 운영알림판 운영소통 재검토요청 도움말 버그신고
개인정보처리방침 이용약관 책임의 한계와 법적고지 청소년 보호정책
©   •  CLIEN.NET
보안 강화를 위한 이메일 인증
안전한 서비스 이용을 위해 이메일 인증을 완료해 주세요. 현재 회원님은 이메일 인증이 완료되지 않은 상태입니다.
최근 급증하는 해킹 및 도용 시도로부터 계정을 보호하기 위해 인증 절차가 강화되었습니다.

  • 이메일 미인증 시 글쓰기, 댓글 작성 등 게시판 활동이 제한됩니다.
  • 이후 새로운 기기에서 로그인할 때마다 반드시 이메일 인증을 거쳐야 합니다.
  • 2단계 인증 사용 회원도 최초 1회는 반드시 인증하여야 합니다.
  • 개인정보에서도 이메일 인증을 할 수 있습니다.
지금 이메일 인증하기
등록된 이메일 주소를 확인하고 인증번호를 입력하여
인증을 완료해 주세요.