그렇다. 나는 프론트엔드 개발자들의 정석 테크인 블로그를 만들기로 결정했다. 나만의 개인 사이트를 구축하면서 겸사겸사 개인 개발 공부하기에도 좋고, 포트폴리오도 되고... 안 만들 이유가 없다! 동시에 인터넷할 때 사용하는 플랫폼이나 도구들을 명확히 하기에도 좋을 것 같고. 명확한 첫 동기는 개발 공부지만, 동시에 내 티스토리 블로그의 정체성을 잃어버린 것도 한 몫했다. 조금 공들여서 남긴 글들은 인스타그램에 올리고, 티스토리는 잔잔바리 글들을 올리는 용도로 쓰고 싶었는데... 어느새 개발 글만 왕창 올리고 있다. 그렇다고 개발용으로 velog를 하나 '더' 만드는 건 싫고... 그냥 내가 만들고 꾸준히 관리하는 용도로 쓰려고 한다. 겸사겸사 인스타에 올린 글들도 전부 옮기고. rookie_review ..

수정 사항이 있을 때마다 매번 EC2 인스턴스에 들어가 레포지토리를 클론하고 빌드하는 건 번거로운 과정이다. 그래서 배포를 자동화해 주는 작업을 통해 수고로움을 덜 수 있다. 흔히 CI/CD로 부르는데 용어가 뭔지 간단하게 살펴보자. Continuous Integration- 코드의 변경사항을 합쳐서 빌드하고 테스트하는 과정을 말한다. 수정 사항이 애플리케이션을 터친다면 CI에서 막히는 셈이다. Continuous Delivery & Deployment- CI 단계를 통과한 수정 사항을 배포한다. 최종 배포를 수동으로 트리거하면 Delivery, 자동으로 하면 Deployment라 부른다. CI/CD는 다음과 같은 파이프라인으로 구성된다.1. 코드 변경2. 빌드3. 테스트4. 배포 준비5. 배포 이번 포..

드디어 자동 배포까지 구축했다! 개인적인 프로젝트를 진행한다고 토이프로젝트에서 굵직굵직한 개발 요소를 건드리지 못했는데(이 자리를 빌어 인프라를 전부 책임져준 연우에게 감사를), 드디어 뭐가 뭔지 얼추 알 것 같다. 우선 적어도 Docker까지는 다뤄본 뒤 다시 프론트 공부를 할 계획. 개발자로 커리어를 시작하겠다는 다짐을 하고 나니 한 결 마음이 가벼워졌다. 그리고 개발이 재미있어지기도 했고. 더 배워야겠다는 마음을 먹으니 완전히 또 다른 세계다. 열심히 배워봐야지. 먹고 산다는 것에 대한 지난 날의 고민들은 학기 중에 글로 남길 계획! Next.js로 작성한 앱을 AWS EC2로 배포하는 방법은 쉽게 찾아볼 수 있다. 문제는 대부분이 나처럼 공부하며 정리한 글이다보니 온전히 신뢰하기 어렵다는 점. I..

천천히 쓰면서 CD를 구축하던 중... 머리가 깨져가며 code deploy agent와 EC2 속 pm2가 협동해서 배포하도록 하는 방법을 배웠다.  dev prod 환경을 구분한 것도 아니고... 그냥 자동 배포만 구축하는데 왜이리 어려울까. 그리고 이렇게 시행착오를 거칠 줄 알았으면 push할 때 메시지라도 잘 적어놓을 걸 그랬다. 나는 그냥 하나 고치면 될 줄 알았음. 그래도 이제는 정말 aws에 대해 감은 잡은 거 같다. 간단한 걸 멍청하게 실수한 건 부끄럽지만 뭐... 컴린이인 건 사실이니까. 우선은 전반적인 과정은 블로그에 영어로 적어놓고, 어떤 시행착오를 했는지는 따로 한국어로 된 글을 작성할 계획! Last time(복습하기 5), I deployed my project using AWS..

이번 포스트는 한글로 작성! 원래는 자동 배포를 위해 CI/CD 작업을 하던 중, YAML이 뭔지 궁금해졌다. GitHub Actions에서 workflow를 위한 설정 작업에 yml 파일이 쓰이는데, 그래도 알고 쓰면 좋지 않을까 생각이 들었다. 내가 직접 YAML 문법을 기초부터 쌓아나가며 작성하는 것보다, 정규표현식처럼 그때그때 찾아보고 AI랑 대화하며 이해/작성 할 수 있는 정도면 충분하다고 판단했다. 딱 한 번만 정리하면 될 듯! YAML은 JSON의 상위 호환 파일 형식이다. JSON 파일을 그대로 YAML 확장자로 바꿔도 유효하다. 문법은 어떨까? 나무위키에 아주 잘 정리되어 있다. (https://namu.wiki/w/YAML)# 주석을 지원한다!# '', "" 모두 지원한다. \n같은 이..

In this time, I'm going to distribute my project using AWS intead of Vercel. Vercel is a very convenient tool for deployment, especially for Next.js projects. Howeve, I've decided to handle the deployment process on my own. First, let's create virtual server using AWS EC2 instance. This is a page after clicking start instance button. What is the Amazon Machine Image(AMI)? A server is a computer ..

In this post, I practice to create API in Next.js and AWS S3. I add GET function in route.ts which made last time. export const GET = async () => { return NextResponse.json({ message: 'Hello World!'}, { status: 200 });} I want to get the test state when I click the button. For eventHandle, create handler function:const testGetHandler = async () => { const response = await fetch('/api', { ..

S3 is a file storage service provided by AWS. This time, I configured a bucket to store images and created a page to upload images to the bucket. To enhance security, I created an IAM account named 'rookie_reivew' instead of using the root account. I plan to add additional policies only when necessary in the future. And I also issued an access key. Using this IAM account, I created a bucket and ..

First, I'm going to use JSONPlaceholder Guide for easy data fetching. (https://jsonplaceholder.typicode.com/guide/) To test it, add the following fetch and console.log code to the landing page: fetch('https://jsonplaceholder.typicode.com/posts/1') .then((response) => response.json()) .then((json) => console.log(json)); Therefore we get like this picture.  Let's fetch all the posts data an..