구글 킵 웹 어플리케이션과 같은 노트 어플리케이션을 만들어보는 실습을 위한 코드입니다. 기본 코드 틀은 main브랜치에 있으며 완성된 코드는 complete브랜치에서 보실 수 있습니다. complete에 있는 코드는 완성 예제일 뿐 정답은 아니니 원하시는대로 자유롭게 기본 코드 틀을 이용하여 구현해주시기 바랍니다.😁
- 프로젝트 코드 다운로드(클론)
- 프로젝트 구조
- 프로젝트 코드 설치 및 실행
- 완성된 코드 보는 방법
코드는 현재 페이지의 코드 다운로드 버튼을 통해 zip파일로 받으시거나 아래의 명령어로 로컬 머신에서 클론하셔서 작업을 하실 수 있습니다:
HTTPS 주소를 사용하는 경우:
git clone https://github.com/1i2hs/google-keep-clone-practice.gitSSH 주소를 사용하는 경우:
git clone git@github.com:1i2hs/google-keep-clone-practice.git본 코드베이스는 크게 다음과 같은 구조로 나누어져있습니다:
- backend: 백앤드 REST API 서버 어플리케이션 코드
- frontend: 프론트앤드 UI 어플리케이션 코드 + UI 어플리케이션을 제공하는 웹 서버 어플리케이션 코드
frontend의 내부 구조:
- pages: html파일들이 위치하는 경로
- public: css, js, 이미지 파일들이 위치하는 경로
- src: UI 코드들을 브라우저로 제공해주기 위한 웹 서버 코드가 있는 경로
기본적으로 백앤드와 프론트앤드의 코드는 모두 JavaScript로 이루어져있습니다. 세부적으로 backend는 Node.js의 express.js framework을 기반으로 되어있으며 frontend의 UI코드는 HTML5, CSS3, JavaScript(ES6, vanilla)로 구성되었습니다.
본 실습에서의 UI에서 프레임워크를 사용하지 않은 이유는 React, Vue, Angular, jQuery와 같은 프레임워크를 쓰지 않았을 때 어떻게 JavaScript코드로 UI를 컨트롤하는지를 학습할 수 있도록 도와드리기 위함입니다. 순수 JavaScript코드를 써서 UI 컨트롤을 해보는 경험을 해보시면 이후에 프레임워크의 이론/개념/철학을 이해하고 사용할 때 여러 방면에서 도움이 되실 겁니다. 결국 프레임워크도 순수 JavaScript 코드로 이루어져있는 친구들이기 때문입니다.😉
- 코드 설치(프로젝트 루트 경로에서)
cd backend
npm install- 코드 실행(
backend경로에서) 단순히 실행만 하는 경우:
npm start개발을 위해 실행하는 경우:
npm run dev- 코드 설치(프로젝트 루트 경로에서)
cd frontend
npm install- 코드 실행(
frontend경로에서) 아래 실행 코드는 UI 코드들을 브라우저에서 받을 수 있도록 하기 위한 웹 서버 실행 코드입니다:
npm start- 브라우저에서 페이지 확인 크롬과 같은 브라우저에서 http://localhost:3100 으로 접속하시면 작성하신 프론트앤드 UI를 보실 수 있습니다.
main브랜치에 있는 코드를 다운/클론 받으신 후 바로 실행하시면 실행이 되지 않고 에러가 발생합니다. 기본적인 코드를 작성하셔야 정상적으로 동작되니 참고바랍니다.😅
코드를 처음 다운/클론 받고 개발을 시작하시는 경우에는 코드 설치까지만 진행하시고 코드가 어느 정도 작성된 후부터 코드를 실행하시면 됩니다. 자세한 건 강의에서 확인해주세요!
브랜치를 변경해서 완성된 코드 샘플을 로컬 머신에서 확인하실 수 있습니다:
git checkout completemedia query 등을 사용해서 데스크탑, 테블릿, 모바일 스크린에 맞도록 개발해보기
무료 호스팅 서비스
- Netlify(by Netlify)
- Heroku(by Salesforce)
- Firebase(by Google)
- Vercel(by Vercel)
- GitHub Page(by Microsoft)
- Glitch(by Glitch)
- Heroku(by Salesforce)
- AWS / Azure / Google Cloud의 무료 서비스들
jQuery가 3대장 프레임워크 때문에 역사 속으로 사라졌다는 얘기들이 있지만 2000년대에 압도적인 점유율을 가지고 있었던 프레임워크인 만큼 아직까지도 건재하고 있다는 것을 알고 계셔야합니다. 2021년 8월 16일 기준으로 몇 달 전에 새로운 버전 업데이트가 출시되었다는 것을 보면 아직은 잊혀질 프레임워크라고 생각이 들진 않더라고요. 그렇기 때문에 시간이 있다면 간단하게 jQuery를 학습해보시는 것도 추천드립니다. 그리고 jQuery가 3대장 프레임워크와 어떻게 다른지도 비교해보시면 프론트앤드 개발자 또는 풀스택 개발자 커리어를 걸어가실 때 정말 정말 도움이 되실 겁니다.
AWS EC2 instance, Azure virtual machine 등의 가상 머신에 배포해보는 것도 좋은 경험입니다. 현재 많은 IT기업들이 상용 클라우드 서비스 상에서 기업의 서비스들을 운영하기 때문에 가성 머신에 서버 어플리케이션을 배포해보고 간단하게 운영해보는 것도 커리어에 많은 도움이 되실 겁니다. 추가로 더 욕심을 내자면 컨테이너(Container)를 공부하셔서 어플리케이션을 컨테이너화까지 해보시면 좋을 것 같습니다. 컨테이너화까지 해보시면 요즘엔 당연시되고 있고 업계에서 많이 언급되는 쿠버네티스(Kubernetes)까지 이해할 수 있게 되실겁니다.😉
Express를 학습하고 나중에 Fastify와 같은 최근 1-2년에 각광을 받고 있는 프레임워크를 학습하시는 걸 추천드립니다. Express 이후에 나온 프레임워크들은 대부분의 개념이 Express와 비슷하기 때문에 Express를 먼저 공부하시는 걸 추천드리는 것이니 참고해주세요. 만약 TypeScript로 개발을 하고 싶다면 Express 후에 Nestjs를 학습해보시는 걸 추천드립니다. 다만 Nestjs는 Express와 컨셉이 많이 다르고 오히려 Java 진영의 Spring 프레임워크와 비슷한 컨셉을 가지고 있기 때문에 이해하시려면 AOP(Aspect Oriented Programming)에 대해서 공부를 하셔야 할겁니다.
아직 구현하지 못한 기능들이 매우 많습니다: 노트에 태그달기, 아카이브 하기, Todo list 만들기, 이미지 추가하기, 알람 설정하기 등을 시간이 되실 때 차례대로 구현해보셔도 좋을 것 같습니다.
- Backend 코드를 Cloud Functions(Serverless) 기능으로 구현
- Frontend 코드를 Hosting 기능으로 웹에 호스팅
- Authentication 기능으로 사용자 인증(가입/로그인/탈퇴 등) 구현
- Realtime Database를 프로젝트의 DB로 연동
- and more...
만약 JavaScript로 풀스택 개발자가 되길 원하신다면 JS로 이루어진 백앤드(서버 어플리케이션) 진영의 생태계와 프론트앤드(UI 어플리케이션) 진영의 생태계를 잘 이해하셔야합니다. 이 생태계에 대한 학습 로드맵을 잘 정리한 사이트가 있는데 참고하시면 좋을 것 같습니다:
추가로 웹 개발의 역사를 공부해보시면 미래의 웹 개발의 트랜드를 읽어가기에도 매우 도움이 되실 겁니다. 이것은 역사를 알아야 똑같은 실수를 안하고 더 좋은 길로 나아갈 수 있다는 것과 비슷한 맥락입니다😁
점차 많은 기업들이 TypeScript의 유용함과 실용성을 느끼면서 기존의 JavaScript로 구현된 서비스들을 TypeScript로 옮겨가고 있습니다. 그 이유는 정적 코드 분석 때문인데요. Type을 명시적으로 사용하기 때문에 기존의 JS보다는 코드 자체가 상대적으로 안정적이기 때문입니다. 물론 Type때문에 개발할 때 부가적인 작업들(Type을 반드시 맞춰줘야하는 번거로움)이 필요하지만 지금까지의 프로그래밍 역사를 통해 Type 시스템이 코드 안정성을 높�여준다는 것이 입증이 되었기 때문에 개인적으로는 감당할만한 수고라고 생각합니다. 그렇기 때문에 JS를 주 언어로 삼으실 분들은 한 번 쯤 시간을 내셔서 TS 공부를 해보시는 걸 추천드립니다.