개발 로그

회사에서 AWS로 배포하며 팀원들에게 공유하려고 작성했던 글인데 조금 더 다듬어서 블로그에도 올려봅니다. Next.js로 배포를 하려면 어떻게 해야할까요?보통 vercel을 이용하여 배포하는게 일반적입니다. 그게 훨씬 쉽기도 하구요..그런데 vercel을 쓸 수 없는 경우가 있죠. 계정에서 무료로 배포할 수 있는 횟수를 다 채웠다던가, private organization에서 private repository를 배포하려면 매달 돈이 든다던가 ^^  보통 리액트 프로젝트를 AWS로 배포하면 S3에서 정적 페이지 배포, E2C에서 서버 배포, RDS에서 DB를 배포하는데요,저희는 Next.js에서 서버액션을 사용하기 때문에 S3를 이용해 정적으로 배포하면 안됐습니다.벌써 머리아프죠? 뭐가 뭔지도 헷갈리고 모..

README 파일은 GitHub과 같은 코드 저장소에서 프로젝트에 대한 설명과 정보를 알려주는 문서입니다.주로 프로젝트의 목적, 설치 방법, 사용 방법 등을 안내하여 다른 사람들이 프로젝트에 대해 쉽게 알 수 있도록 하죠~ Readme가 깔끔하게 잘 적혀있어야 이게 어떤 프로젝트인지, 뭘 개발했는지, 어떤 기술을 썼는지 잘 알 수 있겠죠?제 프로젝트도 아직 개발이 많이 진행되진 않았지만, 일단 Readme부터 써두고 점점 추가할 계획입니다 제 프로젝트는 아직 기획이 확정되지 않고 개발중이라 리드미에는 프로젝트 이름, 설명, 기간, 기술 스택, 실행 방법 정도만 넣었는데요, 기획이 확정되고 기능이 추가되면 프로젝트 구조, 기능 목록, 주요 기능 소개 등을 넣으면 좋을 것 같습니다. 1. Add a Read..

6개월 간의 인턴을 마무리하며 인수인계서를 쓰고 있다.그런데 다음 인턴분께서 Git을 사용해본 적이 별로 없으신 것 같아 인수인계서 쓰는 김에 Git 사용법+그 외 프로젝트 할 때 주의사항이나 참고하면 좋을 것들도 같이 정리해서 블로그에도 공유해본다.  Git을 사용해서 코드를 관리하는 방법은 대체로 아래 순서를 따릅니다. 이슈 생성→브랜치 생성 및 브랜치 변경→작업→commit→push→PR→merge→pull 1. 이슈 생성하기Git Repository에서 Issues를 클릭하고 New issue를 클릭합니다 title과 description을 씁니다Assginees에는 보통 assign yourself를 클릭해서 자기 자신을 선택합니다본인이 맡은 이슈는 본인을 assgin하고 같이 하거나 다른 사람..

저번에 구현했던 캐러셀은 마지막 사진에서 맨 앞 사진으로 돌아올 때 애니메이션이 어색하다는 단점이 있었다. 무한 루프 슬라이더를 구현해보자.   어떻게 구현하면 좋을까?이미지 배열의 맨 앞과 끝에 가장 마지막 이미지와 제일 첫 이미지를 붙이고, 끝 이미지 일 경우 속도를 0으로 바꿔서 이동시킨다."use client";import { useState, useEffect } from "react";import Image from "next/image";const images = [ { src: "/image/sample/1.jpg" }, { src: "/image/sample/2.jpg" }, { src: "/image/sample/3.jpg" }, { src: "/image/sample/4.jpg..

메인 페이지에 슬라이드 배너 (캐로셀)을 react-slick이라는 라이브러리를 이용해 구현했었는데,1. 디자인 커스텀이 어렵고2. 라이브러리를 많이 설치하면 성능 상 좋지 않을 것 같아 직접 구현해보기로 했다. 기본 원리구현하는 것은 어렵지 않은데,슬라이더에 넣고 싶은 이미지를 flex를 이용해 가로로 길게 붙이고useEffect로 처음 렌더링 되었을 때 setInterval을 실행시켜, 5초마다 옆으로 이동시켜준다이동 버튼을 누를 경우, 옆으로 이동시켜준다.개인적으로 배너 위에 마우스를 올렸을 때 좌우 이동 버튼이 나타나는게 예쁜 것 같아서 버튼 hover도 같이 구현했다. 영상에는 무한 루프 슬라이더가 구현되어있는데, 이번 게시글 코드에는 구현되지 않고 다음 게시글에서 마저 구현할 예정이다.전체 코..

이번에 들어가게 된 회사에서 Next.js를 사용한다고 하여 미리 공부해보기로 했다. Next.js란 무엇일까? Next.js란 풀스택 웹앱을 더 쉽게 구축하기 위한 React 프레임워크이다.프론트엔드를 하기 위해 React도 겨우 공부했는데 React에 익숙해지기도 전에 Next.js까지 해야한다니... 배움이 끝이 없구나 싶다. 그치만 결국 더 쉽고 편하기 위해 사용하는거겠죠? 직접 사용해보며 React보다 얼마나 더 쉽고 편한지 경험해볼예정이다 (ㅋㅋ)  1. create-next-app으로 Next.js 프로젝트 세팅하기https://nextjs.org/docs/getting-started/installation Getting Started: Installation | Next.jsCreate a..

이번에 인턴으로 들어가게 된 회사에서, tailwindcss를 사용한다고 하여 tailwindcss를 미리 공부해보기로 했다.사실 리액트에서 css 라이브러리는 style component밖에 사용해본적이 없어서, 둘의 차이가 뭔지도 함께 알아볼 것이다.  1. Tailwind CSS란?Tailwind CSS는 유틸리티 클래스 기반의 CSS 프레임워크이다. 개발자에게 미리 정의된 CSS 클래스를 제공하여, 이를 HTML 요소에 적용함.  유틸리티 클래스란? 유틸리티 클래스(Utility Class)는 특정 스타일 속성 하나만을 정의하는 CSS 클래스이다. 유틸리티 클래스는 스타일을 작은 단위로 쪼개서 제공하므로, 다양한 조합을 통해 복잡한 스타일을 쉽게 구성할 수 있다. Tailwind CSS의 특징:유..