designer DK의 블로그

강의에서는 백엔드 배포 방법으로 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 강의가 커리큘럼 상 실용적인 부분이 많아보였다. 할일앱부터 쇼핑몰까지 실전예제들을 다루는..

지난주 가족들과 간만에 교외로 나갔는데 괜찮은 카페가 있어서 포스팅하게 되었다. 파주 출판단지에 위치한 밀크북이라는 카페. 가게 앞 사진인데 가게 앞 말고 약간 더 들어가면 큰 전용 주차장이 있어서 주차도 매우 편리하다. 카페 내부는 매우 크고 도서관처럼 책도 많이 열람할 수 있다. 특이한 점은 2층에 블록놀이를 할 수 있는 공간이 있는데 약간의 추가금액을 내면 원하는 블록을 재미있게 만들어 볼 수 있다. 옛날에 어릴 때 만들었던 과학상자도 구경할 수 있어서 신기했다. 빵도 커피도 맛있었다 😋😋 아이 데려오면 널찍한 공간에서 편하게 쉬다가 갈 수 있는 카페. 다음에 또 한번 가봐야지👍

평생 윈도우즈 기반 컴퓨터를 사용하다가 최근에와서야 맥을 사용하면서 좋은 점도 많이 느끼지만 일부 불편한 점도 있었다. 그 중 대표적인게 기본 mac os에서 잘라내기 기능. 윈도우즈로 치면 컨트롤 x가 안되는 부분이었다. 희한하게 맥 기본 메모장이나 다른 여러 어플리케이션에서 제공을 해주면서 파인더를 비롯한 기본 os상에서 잘라내기가 안되는 부분이 이해가 되지 않았다 ㅜㅜ 맥에서 잘라내기가 존재하지 않는 이유는 잘라내기라는 기능을 복사하기(command+C)와 똑같이 진행한 후, 붙여넣을 때 command+option+V로 진행하면 잘라내서 붙여넣기를 할 수 있기 때문이었다. 물론 여기에 익숙하다면 상관없겠지만; 다른 모든 프로그램이나 앱, 윈도우즈 os에서 어찌보면 국룰로 x키를 통해서 잘라내기를 해..

약 두 달 전에 시작한 개인 프로젝트인 ‘킨더서울’ 웹사이트를 드디어 오늘 배포하였다. 아직 몇가지 아쉬운 부분이 있지만 그런 부분들은 일단 배포 후 조금씩 다듬어나가보려고한다. https://kinderseoul.netlify.app/   깃허브에 올라간 파일을 넷틀리파이(netlify)로 연결해서 간단하게 배포를 진행했다. 넷틀리파이는 깃허브 데이터를 그대로 연동 배포 가능해서 굉장히 사용이 편리하다.    마지막 작업은 디자인을 css로 옮기는 작업이 대부분이었고 자잘하게 막힌 부분들도 있었지만 큰 어려움 없이 완수할 수 있었다. 사이트는 데스트탑, 태블릿, 모바일 모두 커버할 수 있는 반응형 웹사이트로 구축했다. /* ----------------미디엄 레이아웃 : 태블릿--------------..

프로젝트 진행 전에 컴포넌트를 활용할 확률이 많을 것으로 판단되어서 미리 R&D를 진행 했었고, 그 테스트를 통한 가정을 프로젝트 실전에 적용을 해보려고 시도했다. 일단 예상했던 부분은 카드 디자인들을 컴포넌트로 많이 사용하지않을까로 예측했었는데 막상 카드들의 생성 자체가 for문으로 반복 생성된 부분들이어서 이를 굳이 컴포넌트화 시킬 필요는 없겠다고 판단했다. 따라서 페이지별로 반복되게 사용되는 부분을 찾아보니 '헤더+타이틀'과 '푸터'였고 이 두 가지 부분만 컴포넌트화 해보기로 결정했다. 지난번에 미리 진행해 본 방법대로 진행을 해보았는데…(웹 컴포넌트 테스트 1 - https://designerdk.tistory.com/6)(웹 컴포넌트 테스트 2 - https://designerdk.tistory..