designer DK의 블로그

풀스택 todo-app제작의 마지막 단계인 프론트엔드 배포. 기존에 해오던대로 netlify로 배포를 진행했다. netlify로 배포하면 git-hub연동이어서 업로드 과정도 매우 편하고 무엇보다 무료로 배포+도메인주소도 얻을 수 있어서 너무나 좋다. 로그인을 깃허브로 진행하면 깃허브 파일들을 연동시켜서 사용할 수 있다.  add new site 버튼을 누르고 import existing project를 진행.  여기서 깃허브를 누르고 내가 깃허브에 올린 리포지토리를 선택해주면 된다.  여기서 사이트네임을 설정할 수 있는데 이 사이트 명이 내 사이트 url 주소가 된다. 겹치는지 체크 필요!  Deploy를 진행하면~   이렇게 내가 만든 사이트를 퍼블리쉬할 수 있다. 잠깐 기다려서 퍼블리쉬 완료를 확인..

강의에서는 백엔드 배포 방법으로 Heroku, Cloudtype, AWS를 제안해주었고 그중에 실 강의로는 Heroku와 AWS를 진행해주었다. 각기 장단점이 존재했는데 Heroku는 배포가 매우 간단한데 월 5000원이 들어간다는 단점이 있었다.클라우드타입(Cloudtype)은 배포가 편리하고 무료플랜이 있는데 무료플랜 시 하루에 한번 서버가 잠깐 꺼진다고 한다 ㄷㄷㄷAWS는 aws elastic beanstalk라는 서비스로 무료 배포가 가능한데 배포과정이 번거롭고 배포 중 에러발생률이 높다. 처음엔 무료이기도하고 그래도 개발 배우는데 aws 한번 써봐야지~라는 생각으로 aws 배포를 시도했으나 계속해서 발생하는 에러로 결국 포기하게 되었다. 그렇게 차선책으로 선택하게 된 Cloudtype. 하루 한..

강의를 통해 풀스택으로 '할일 앱'을 만들었고 배포하는 과정으로 들어갔다.가장 먼저 DB 배포를 진행했다. mongoDB atlas를 가입하고 클러스터라는 걸 만들어준다. (shared가 클러스터 1개까지 무료)     커넥트를 진행. compass와 연결시켜주면 된다. 콤파스를 누르면 URI주소를 제공해주는데 그걸 복사해서 콤파스를 실행했을 때 URI주소 인풋에 넣어주면 된다. 주소에서 패스워드부분을 입력해줘야하는데 기억이 안날 때에는 Database Access라는 메뉴로들어가면 패스워드 재설정을 할 수 있다.패스워드를 재설정 후 꼭! '업데이트 유저' 버튼을 눌러주고 해당 패스워드를 콤파스 uri주소 패스워드 쪽에 넣어준다. 그러고 연결을 해주고 프로젝트 명 생성. (백엔드 연결을 먼저 진행해도 됨..

강의 예제로 할일 앱 프론트엔드 부분 작업을 진행했다.강의의 경우 리액트 기반으로 프론트엔드를 제공하는데 나는 리액트로 프론트엔드를 진행하지 않고 생 자바스크립트로 진행하기 때문에 처음부터 끝까지 직접 구현해보았다. (물론 gpt에게 물어가면서) 서버 데이터를 가져오는 방식은 fetch api 방식을 썼다.처음에는 읽기, 생성, 수정, 삭제 네가지 fetch를 만들어서 진행했었는데 진행하다보니 생성을 제외한 케이스들은 처음 fetch를 실행하는 방식이 일치해서 getTasks라는 하나의 함수로 묶이게되었다. '할 일'이라는 리소스를 tasks라는 url로부터 가져와서 할일 목록을 만들어냈다. (읽기)function getTasks() { fetch("http://localhost:5001/tasks") ..

강의를 통해 배우는 첫 백엔드 설정 예제를 진행해보았다. mongoDB와 node.js를 연결하고 백엔드 설정을해서 프론트엔드와 소통하는 할일 앱을 만드는 과제. 사실 한번에 너무 방대한 양을 배우는 데다가 페이지가 잘게 쪼개져 있어서 아직도 좀 아리송한 부분들은 있지만 대략적으로는 백엔드와 프론트엔드가 어떻게 돌아가는지 알게 된 것 같다. 시작 전에 npm을 이용해서 express, mongoose, body-parser를 설치. (바디파서는 이제 설치 필요 없음)express를 이용해서는 서버를 간편하게 열 수 있었고 mongoose를 이용해서 mongoDB 스키마를 설계할 수 있었다.const express = require('express');const mongoose = require('mong..

벡엔드 강좌를 들으면서 mongo DB 설치를 진행했는데 생각보다 설치과정이 정말 극악의 난이도였다 ;; 일단 mongo DB 홈페이지에서 리소스 탭에서 서버를 클릭  그러면 db 환경 선택이 나오는데 나는 커뮤니티로 선택  그리고는 macOS에 설치  그럼 이런식으로 설치법이 나오는데 여기서부터 하나씩 꼬이기? 시작한다.  맥에서 터미널을 켜주고 아래 문구 실행xcode-select --install 그리고 homebrew라는 맥에 소프트웨어 설치를 해주는 패키지 관리자를 먼저 설치해줘야한다.  홈페이지에 적힌 저 문구를 터미널에서 실행하면 설치가 된다.하지만 이때 아래와 같은 문구의 에러가 발생했다. Warning: /opt/homebrew/bin is not in your PATH.  Instruc..

최근 만들어본 ‘킨더서울’ 사이트를 비롯해서 기존에 오픈 되어있는 api 정보들을 가져와서 만드는 사이트들을 여러번 만들다보니 자연스럽게 내가 자체적으로 서버와 데이터베이스를 구축해보고싶은 욕심이 생겼다. 지금까지 자바스크립트 위주로 공부해왔었는데 조사해보니 같은 자바스크립트 베이스의 백엔드 툴로 node.js가 괜찮아보였고 나의 코딩 바이블인 ‘생활코딩’사이트를 통해 node.js를 전반적으로 접해보니 너무 넘사벽 느낌이라기보다 한번 해 볼만 하겠다고 느껴졌다. 좀 더 깊숙하게 공부하면서 실용적인 기능들을 익혀가고 싶었고 (db사용법, 로그인, 주문, 결제 등)이리저리 서치해보니 ‘코딩알려주는누나’의 node.js 강의가 커리큘럼 상 실용적인 부분이 많아보였다. 할일앱부터 쇼핑몰까지 실전예제들을 다루는..