IT's Time

회사에서 프로젝트를 진행하던 중 배포를 먼저 해달라는 대표님의 요구사항이 있었고 이를 위해 배포를 먼저 진행하게 되었는데 어차피 프론트엔드 나 혼자이기 때문에 내가 배우고 싶었던 AWS S3와 Cloudfront를 활용해서 배포를 하고 추후 Github Actions로 CI/CD를 구축해보았다. CI/CD 구축은 2번째 포스팅때 하기로 하고 일단 AWS S3와 CloudFront를 활용해서 배포를 해보고자 한다. 1. AWS S3 + Cloudfront를 선택한 이유 : 현재 회사의 프로젝트는 Vite 기반 React로 이루어져 있고 CSR 기반이기 때문에 정적 리소스를 대규모로 특화 되어 있는 S3를 선택했고 또한 회사에서 이미 AWS 환경을 구축한 상태이기 때문에 한 곳에 모아두는 것이 나중에 유지 ..

이번에 두 번째 토이프로젝트를 11/6~11/16일까지 진행했는데 짧지만 많은 걸 배웠던 시간 같았다. 바로 내일부터 백엔드와 같이 프로젝트를 하기 때문에 오늘 틈틈이 복습 할 것을 적어두려고 한다. 복습 내용은 남들이 보기엔 사소할수도 있지만 내가 이번에 프로젝트 하면서 어려움을 느꼈던 부분 위주로 적으려고 한다. 주제는 채팅 서비스였기 때문에 우리 조는 카카오톡을 비슷하게 따라하고자 했다. 1. 동적 라우팅(Dynamic Routing) 이번 프로젝트에서 NextJs를 사용했는데 사실 아쉬운 점 중 하나였다. SSR과 SSG , CSR의 차이점을 충분히 이해하지 못해 이를 활용하지 못했던 점이 아쉬웠다. 스택 선정이 매우 중요함을 느꼈고 나중에 NextJs 관련해선 길게 포스팅 해볼 예정이다. 일단 ..

평소 강의나 직접 했던 상태 관리였지만 머릿속에만 있던 것을 직접 정리하는 시간이 필요했기에 본격적으로 프로젝트 전에 정리하고자 한다. 1. 상태란? State 라고도 한다. React에서 상태란 데이터이다. 특히 변할 수 있는 데이터 혹은 값이라고 보면 될 것 같다. 예를 들면 로그인 유무 혹은 관리자 유무 등으로 나눌 수 있을 것이다. import react , { useState } from 'react' const page = () => { const [isSignIn , setIsSignIn] = useState(false) const [isAdmin , setIsAdmin] = useState(false) return ( { isSignIn ? 로그인 됐어요 : 로그인 해주세요! } ) } 2..