728x90
반응형

분류 전체보기 230

사이드 프로젝트 - forYourRecipe - 시작

www.no1recipe.com Recipe 빠르게 찾고 빨리 해먹자. No.1 Recipe www.no1recipe.com 동갑내기 사원 한 분이 있는데 학원에서 했던 결과물이 아쉽다고 비슷한 주제로 같이 만들어보자고 제안을 해주셔서 같이 해보기로 했다. 주제는 음식 레시피 관련된 반응형 웹 사이트 이다. 초기 버전의 경우 정말 간단한 CRUD 의 기능만 있는 게시판 형태의 사이트이다. 각자 맡은 업무도 있기도 하고, 처음부터 크게 잡으면 흐지부지될걸 알기에 빨리 할 수 있는 정도의 양으로만 정했다. 프론트 개발은 Vue cli 3, 백엔드 개발은 NestJs, DB는 MongoDB 를 사용한다. 스택은 현재의 회사 기술 스택에 맞춰서 진행하되 각자 추가하고 싶은게 있다면 언제든지 추가하는 방향으로 잡..

개발노트/Note 2023.02.16

사이드 프로젝트 - Dotto의 개발 일지 - 두달간의 여정 마무리

백엔드를 맡고 있는 형과 같이 발급받은 ssh key 를 등록을 하려는데 아무래도 가장 걱정됐던 부분은 요금 문제였다. 혹여나 요금 폭탄을 맞지 않을까하는 마음에 등록하기전에 ACM 에 붙어 있는 여러 서비스 링크를 따라가면서 인증서를 등록하고 난 다음에 어떤 구조로 흘러가는지 따라가봤다. 근데 뭔가 이건 상당히 잘못됐다라는 느낌을 많이 받았다. ( 배보다 배꼽이 더 큰 느낌... ) 사실 그냥 이런 서비스도 있으니까 한번 사용해봐라~~ 이런 글이였는데 둘 다 처음이다 보니...무조건 써야하는줄 알았다. "아니 이게 맞아...? 저거 다 써야한다고?????" 딱 이런 느낌...ㅎㅎ 그래서 다시 각자 알아보기로 하고 저날 인증서 등록은 포기하고 일단 프론트를 다시 넷리파이로 옮겨놨다. 몇일 지나고 회사에서..

개발노트/Note 2023.02.14

사이드 프로젝트 - Dotto 개발 일지 - SSL 인증서 발급

이전 포스팅에 이어 SSL 인증서 발급 받았던 방법이다. SSL 인증을 받으려고 했던 이유는 처음에 HTTPS 통신을 하기 위해서는 프론트와 백엔드가 동일한 인증서로 사용해야만 서로 호출이 가능한줄로 알았다. 그래서 발급 받은 인증서로 프론트는 넷리파이에 인증서를 올리고, 백엔드도 ACM에 인증서를 올리는 방법으로 방향을 잡았다. 참고한 블로그에 발급받는 정리가 잘 되어있어 많은 도움이 되었다. 일단 발급받는데 까지는 성공했는데 문제는 EC2에 접근해서 인증서를 가져오는 것.. (하나 성공하면 또 다른 하나가 문제...) EC2에 접근해서 파일을 가져오려면 FTP 를 사용해야해서 파일질라를 써보기로 했다. 파일질라도 회사에서 메뉴얼 작업 때문에 다뤄본적은 있지만 개인적으로 파일을 다운받기 위해서 사용해 ..

개발노트/Note 2023.02.13

사이드 프로젝트 - Dotto 개발 일지 - 프론트 배포

프론트는 넷리파이를 통하여 정적 웹 호스팅을 하였고, 백엔드의 경우 aws 에 배포하여 운영하고 있다. 문제는 프론트는 HTTPS, 백엔드는 HTTP 이기 때문에 프론트에서 백엔드로 API 호출 시 Mixed Contents 에러가 발생하게 된다. 도메인 구입부터 해서 배포까지 모든게 처음이다 보니까 문제를 해결하는데 있어서 두달 가까이 걸렸다... 가비아에서 도메인을 구입 후 처음했던 부분은 넷리파이의 DNS 정보를 가비아에 등록하였고, 구입한 도메인으로 사이트가 잘 들어가져 괜찮을 줄 알았지만 백엔드가 문제였다. 프론트는 HTTPS 로 올라가져있고, 백엔드는 HTTP 인데 Route53에 도메인이 등록되어있지 않기 때문에 ACM을 사용하지 못하였다. 그래서 생각했던 건 ssh 키를 발급받아서 ACM에..

개발노트/Note 2023.02.13

사이드 프로젝트 - 닷투 (Dotto)

닷투(Dotto) 는 타투이스트와 사용자를 매칭 시켜주는 사이트를 만들어보자 해서 시작된 사이드 프로젝트. 닷투 공간안에서 서로의 타투를 공유할 수도 있고, 원하는 도안, 타투이스트에게 타투를 할 수 있도록 도와주는 웹 사이트 이다. 사이트 LINK: https://www.dotto.site/ Github: https://github.com/DaHoon06/Dotto 📜 히스토리 초기 기획은 22년도 초에 시작하였는데 벌써 23년이다. 같이 학원을 수료한 분들과 공부도할 겸 뭐 하나 만들어보자 하다가 타투에 관심이 많은 친구가 있어서 프로젝트 주제를 타투로 정하였다. 타투이스트와 타투를 하고 싶어 하는 사용자들한테 나름의 설문 조사를 통하여 각자 원하는 바가 무엇이고 기존 서비스에서 불편했던게 무엇인지 ..

개발노트/Note 2023.02.13

[JavaScript] this

지금의 회사에서는 매주 수요일 마다 개발 내용으로 주간 스터디를 진행하고 있다. (안바쁜 달 한정 매 주) (개발에 관련한 내용이라면 아무 얘기나 가능~!) 스터디라고 해서 거창한건 없고, 한 주에 1명씩 돌아가면서 정해진 주제를 가지고 간단하게 팀원에게 소개하는 자리인데, 이번 주는 내 차례였다. 내가 맡은 주제는 자바스크립트의 옵셔널 체이닝 근데 왜 이 글의 제목은 this 인 것인가... 왜냐면... 내가 설명한 부분에서 잘못된게 있었다. 내가 맡았던 옵셔널 체이닝 부분 포스팅이다. 더보기 https://pmirnc-dev.github.io/javascript/2023/01/24/Optional-Chaining.html JavaScript Optional Chaining 안녕하세요 PMI(피앰아이)..

[TIL] Vue에서의 백엔드 통신

🙋🏻‍♂️ 오늘 받은 질문 "Vue에서 axios를 통해 백엔드로 통신하는데 사용하는 proxy를 이해 못 하겠어요. 왜 이렇게 사용하는 건가요.?" 질문을 받고 난감했다... 프로젝트를 진행할 때 항상 그렇게 사용해 왔기에 전혀 의구심을 품지 못 했었다. 그렇기 때문에 대답을 못 해드렸다. 같이 모니터를 보면서 어떤 식으로 동작하는 건지 이곳저곳을 고쳐보면서 흐름을 찾아나갔다. 그치만 어떤 식으로 흘러가는지만 확인할 뿐 정확히 왜 그렇게 되는지 알지 못했다. 그래서 오늘은 이 부분을 정리해볼까 한다.. Vue에서는 최상단(루트) 위치에 vue.config.js를 생성하여 아래와 같이 작성하면 proxy 패턴을 사용할 수 있다. module.exports = { devServer: { proxy: { '..

개발노트/Note 2022.11.14

입사 1년 회고록

10월 1일 오늘 날짜로 지금 회사에 입사한지 1년이 되었다. 시간이 어떻게 갔는지 모를 정도로 빨리 지나갔네.. 입사하면서 정한 목표가 뭐였는지 다시 읽어 볼까.. 음.. 목표는 따로 정해두지 않았구나 단지 올 한 해의 목표??? 목표로 5개를 잡았는데 지켜진게 하나도 없구나...ㅎㅎㅎㅎ 그래도 마냥 놀지는 않았다. 1년동안 업무 보면서 꾸준히 공부는 하고 있었다. 다른 달에 비해 2월에 잔디가 없는데, 이때 뭔가 많이 복잡했다. 회사 생활하면서 이게 맞나 싶기도 하고 1 일 1 커밋을 해볼까 했는데 하루에 무조건 커밋을 해야한다는 압박감 때문에 정말 의미없는 커밋이 쌓이는거 같아서 이런식으로 커밋을 할꺼면 하지 말자 라는 생각이 들었다... 그래서 3월 초쯤까지??? 편하게 지내다가 이러면 안되겠다 ..

[JavaScript] Promise (async/await)

Promise 자바스크립트 비동기 처리에 사용되는 객체 💡 비동기 처리란? 특정 함수의 실행이 끝날 때까지 기다리지 않고 다음 함수를 실행하는 과정 비동기 처리는 순차적으로 처리하지 않는다는 특징이 있는데, 상황에 따라서 비동기 처리를 했을때 순차적으로 처리해야할 때가 있다. 이때 프로미스 객체를 사용하여 비동기임에도 불구하고 순차적으로 처리할 수 있다. Promise의 처리 상태 3가지 Pending(대기) : 비동기 처리가 아직 완료되지 않은 상태 Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태 new Promise()를 통하여 프로미스 객체를 생성하고 인자 값으로는 콜백 함수를 넣는다. 이..

728x90
반응형