말랑말랑 개발기

이번에는 React로 개발한 프론트 페이지를 AWS S3, CloudFront, Route53를 이용하여 정적 호스팅해보겠습니다! 가장 먼저 해야할 일은 S3를 통하여 프로젝트를 배포하는 것입니다.AWS console에 접속하여 S3에 버킷을 생성합니다. (Create bucket)bucket list에서 생성한 bucket을 찾아 클릭. 그러면 아래와 같은 페이지를 볼 수 있습니다.Object 탭에 빌드한 파일을 업로드합니다. (예시: pnpm build한 결과인 dist 폴더 내 파일 전부)이 페이지에서 바로 업로드 할 수도 있고 aws cli를 이용할 수도 있습니다. 이렇게 index.html이 포함된 빌드 파일을 업로드 해주세요. 1. S3 에서 static hosting2. CloudFron..

React 에서 쿠키를 사용할때 react-cookie 라이브러리를 사용합니다. 물론 필요한 곳에서 라이브러리를 불러다 사용할 수도 있지만, 유지보수를 쉽게 하기 위해서 하나의 파일에서 관리하는 편이 좋습니다. 이렇게 하나의 파일에서 관리하면, 쿠키 키를 한눈에 볼 수 있고 관련 코드를 찾기도 쉬워 응집도를 높힐 수 있습니다. import { Cookies } from 'react-cookie';const cookies = new Cookies();export const COOKIE_KEY = 'customKey';export const setCookie = (name: string, value: string, options?: any) => { return cookies.set(name, value,..

재택 중에 동료와 페어 프로그래밍을 해보기로 했습니다.동료분께서 진행 중인 웹 프로젝트에 참여하게 되어 간단한 버그 수정과 기능 추가를 하기로 했고 태스크 볼륨은 크지 않았지만 일단 제가 전체적인 코드를 잘 모르기 때문에 그때그때 옆에서 물어보면서 빠르게 적응할 수 있었습니다. 프로젝트 구조를 설명하자 다음과 같습니다. Project(root)⌞ server⌞ client 최상위 폴더 밑에 서버(Node)와 클라이언트(React)가 있었고 각각을 로컬에서 실행하여, 페어 프로그래밍으로 수정한 코드의 실행 화면을 서로의 컴퓨터에서 볼 수 있게 하고 싶었습니다.VsCode의 Live Share라는 익스텐션을 사용했고 여러 가지 세팅 과정에서 시행착오가 있었기에 팁을 작성해 봅니다. 제 생각엔 메인으로 진행하..

Girls In Tech X AWS 멘토링 프로그램에 참여하게 되었습니다! 네트워킹을 하고 싶다고 느낀 이후 처음 참여하는 활동이라 모든 것이 어색하기도 하고 두근거리기도 합니다. 프로그램을 통해 다양한 사람들의 이야기를 듣고 새로운 경험을 나눌 수 있기를 기대합니다. 홍성숙 멘토님의 팀의 멘티로 참여하게 되어 월요일에 1회차 모임을 진행했습니다. 처음에는 어떤 방식으로 진행해야 할지 혼란스러웠지만 멘토님께서는 먼저 저희와 이야기를 나누셨고 이후에 관심 있을 법한 분야로 세션도 잡아주시고 길을 잡아주셔서 알찬 시간을 보낼 수 있었습니다.👍 좋은 멘토,멘티 분들과 함께한 시간이 정말 즐거웠습니다. 이날은 멘토님의 강의를 듣고, 사무실 투어까지 마치고 나니 10시였어요😂 늦은 시간까지 챙겨주신 멘토님께 무한..

홈페이지 우측 하단에 고정되어 따라다니는 플로팅 버튼을 만들었습니다. 그런데 이 플로팅 버튼으로인해 홈페이지 최하단 푸터의 일부 정보가 보이지 않는 현상이 있었습니다. 이를 방지하고자 스크롤을 일정 이상 내렸을 경우 플로팅 버튼이 사라지는 효과를 넣었습니다. 부드럽게 보이기 위해 페이드인, 페이드아웃 애니메이션도 추가해주었습니다. body의 전체 스크롤 높이를 이용하여 EventListener를 붙이는 간단한 방법입니다. export const FloatingButton = () => { const [isVisible, setVisible] = useState(true); useEffect(() => { const handleScroll = (e: Event) => { if (window.scrollY ..

vite에서 절대경로를 설정해 주기 위해서는 vite.config.ts와 tsconfig.json에 alias를 설정해줘야 합니다. 이것이 귀찮다면 vite-tsconfig-paths 플러그인을 사용합니다. (관련 링크) 이번 글에서는 플러그인을 사용하지 않고 manual 하게 설정해 보겠습니다. 자주 사용하는 src, atoms, hooks, components, pages, types 폴더에 대해서 설정해 보겠습니다. vite.config.ts import path from 'path'; import { defineConfig } from 'vite'; import eslint from 'vite-plugin-eslint'; import react from '@vitejs/plugin-react-sw..