맨땅에서 프론트엔드

본 글은 AWS 사용 경험이 거의 무지한 사람이 작성한 글입니다.따라서, '엥, 이걸 모른다고?' 라는 생각이 들 수 있습니다...허허..  최근에 스타트업이랑 같이 진행한 웹 프로젝트가 있는데, 기업 쪽에서 서버 비용이 생각보다 많이 발생해서 한 번 봐달라고 부탁하셨다.금액을 정확히 밝히기 어렵지만, 말씀으로 들었던 금액을 듣고 '그렇게 많이 나올 수 있나..?' 라는 생각이 들긴 했다. 서버를 직접 구축한 것은 아니지만, 백엔드 분이랑 연락이 뜸한지도 오래 되었고,,전에 개발 동아리에서 EC2를 다룬 경험(?)이 있으니 한 번 도전해보기로 하였다.  우선 금액이 얼마나 나오는지 확인해 보자! https://us-east-1.console.aws.amazon.com/costmanagement/home?..

드디어 졸업을 했다..! 취업은 언제,,? ㅎ.. 프로젝트를 진행 중에 손쉽게 날짜를 선택할 수 있도록 캘린더(달력)를 구현하려고 하였다. 캘린더를 사용하는 일은 많으니까 라이브러리를 여러 가지 찾아보았으나... 구현에 있어 몇 가지 불편함이 있었다. 라이브러리를 왜 쓰지 않으셨습니까?! 1. 커스터마이징 등의 사용법에 대한 설명이 부족하다. 관련된 설명이 부족하다! 물론 나의 문해력이 부족해서 그럴 수도 있지만,, 다른 라이브러리에 비해 설명이 부족하다고 생각한다. 어떠한 기능을 사용하고 싶을 때 찾기가 굉장히 힘들었다. 2. 프로젝트가 무거워지는 걸 원치 않는다. 라이브러리를 추가할 수록 프로젝트의 무게가 점점 무거워지는 걸 원치 않는다. 최종적으로 해당 브라우저를 열 때 성능 저하가 생길 수 있기 ..

2024.02.01 - [javascript] - [JWT] 로그인 세션 관리하기 2 (Session Storage, Local Storage, Recoil) [JWT] 로그인 세션 관리하기 2 (Session Storage, Local Storage, Recoil) 2024.02.01 - [javascript] - [JWT] 로그인 세션 관리하기 1 (JWT에 관하여) [JWT] 로그인 세션 관리하기1 (JWT에 관하여) 오늘이 아시안컵 16강이 있던 날인데, 축구를 보니 볼 차고 싶은 생각이 너무 들던 하루 mini-frontend.tistory.com 이번에는 실제 코드를 통해 로그인 세션에서 토큰이 어떻게 하면 처리되는지 알아보자. 토큰이 만료 등의 토큰 처리는 Axios 인터셉터(Intercep..

2024.02.01 - [javascript] - [JWT] 로그인 세션 관리하기 1 (JWT에 관하여) [JWT] 로그인 세션 관리하기1 (JWT에 관하여) 오늘이 아시안컵 16강이 있던 날인데, 축구를 보니 볼 차고 싶은 생각이 너무 들던 하루,,, (사진은 축구하고 있는 나) 오늘은 프론트엔드를 개발하면서 로그인 세션을 어떻게 관리하였는지 작성 mini-frontend.tistory.com 이전 글에서 JWT에 대해 알아보았다. 그렇다면 프론트엔드에서 JWT가 어떻게 쓰이는지 한 번 알아보자. 1. JWT 보관 방법 JWT 토큰을 서버로 부터 발급받는다면 브라우저 등에 보관해야 한다. 프론트엔드를 개발할 때 JWT 토큰을 보관하는 방법을 다음과 같다. 1) Local Storage 브라우저를 닫아도..

오늘이 아시안컵 16강이 있던 날인데, 축구를 보니 볼 차고 싶은 생각이 너무 들던 하루,,, (사진은 축구하고 있는 나) 오늘은 프론트엔드를 개발하면서 로그인 세션을 어떻게 관리하였는지 작성해보겠다. 서버에서는 사용자가 로그인 되어 있는지 알 필요가 있다. 이를 위해 JWT 라는 것을 사용한다. JWT 란 무엇이고 왜 필요할까? 1. JWT란? JWT (JSON Web Token)는 Json 형식을 이용하여 사용자의 속성을 저장하는 Token이다. 즉, 정보를 비밀리에 전달하거나 사용자 인증 시 사용된다. ex) 앱을 실행했을 때 사용자가 가진 JWT를 비교하여 자동로그인을 기능을 제공 상품 구매, 예약 신청 등을 시도할 때 사용자 인증 2. JWT가 필요한 이유 1) 무상태성 (Statelessnes..

요즘 동심에 빠진 것 같아. 유튜브에 이런 플레이리스트가 자꾸 떠,, 프로젝트 진행 중에 좌측 여백 공간에 스크롤에 따라다니는 사이드 바를 넣어야 했다. 좌측 공간에 사이드 바 고정하기 position: fixed; left: 20px; /* 왼쪽 여백 */ top: 50%; transform: translateY(-50%); top: 50% - top 속성은 부모 요소에 대한 요소의 상대적 위치를 지정. - 요소의 상단이 부모 컨테이너의 높이의 50% 지점에 위치하도록 함. - 즉, 요소는 부모 컨테이너의 상단에서부터 시작하여 중간 지점까지 배치된다. transform: translateY(-50%); - transform 속성은 요소를 변형시키는 데 사용되며, translateY는 요소를 수직 방향으..

React 애플리케이션을 개발하다 보면, 다른 페이지로 네비게이션을 하면서 특정 데이터를 전달할 필요가 종종 있다. 이를 위해 useNavigate와 useLocation 이라는 두 React Router Hook을 사용할 수 있다. 01. useNavigate useNavigate Hook은 페이지를 다른 경로로 이동시키는 함수를 제공한다. 이 Hook의 장점은 단순히 페이지를 이동시키는 것뿐만 아니라, 이동할 때 추가적인 상태(state) 또는 데이터를 전달할 수 있다는 점이다. useNavigate의 형태 navigate( '/이동경로', { state: { 키: 값, 키: 값, ... } } ) useNavigate 사용법 먼저, react-router-dom 패키지를 설치해야 한다. npm in..