본문 바로가기

Web Development50

[ AWS ] Amazon S3를 이용한 React 앱 배포하기 Amazon S3를 이용한 React 앱 배포하기 [Index] 1. AWS란? 2. Amazon S3란? 3. Amazon S3를 통해 사이트를 배포하는 과정 4. 느낀점 1. AWS란? AWS(Amazon Web Services) 아마존 웹 서비스는 클라우드 컴퓨팅 및 서비스 제공 플랫폼으로, 기업과 개발자에게 다양한 IT 서비스를 제공합니다. 기업과 개발자에게 확장 가능하고 안정적인 인프라를 제공합니다. AWS의 다양한 보안 서비스와 IAM을 통해 안전한 클라우드 환경을 구축할 수 있습니다. AWS는 선택적으로 사용 가능한 클라우드 인프라로 비용 절감과 전 세계적으로 안정적인 서비스를 제공합니다. CloudWatch를 활용하여 AWS 리소스의 상태를 모니터링하고 로깅, 경보를 통해 효율적인 운영이 .. 2023. 7. 27.
[ React ] date & time Formatter 컴포넌트로 만들어서 관리하기 코드 리팩토링을 진행하며 여러 컴포넌트에서 반복적으로 사용되는 함수가 있어 컴포넌트로 분리해 관리하려고한다. 이렇게 ISO 8601 형식으로 들어오는 날짜 및 시간 데이터를 쓰임에 맞게 가공하는 함수를 컴포넌트로 분리해 관리하기로 했다. 목차 1.date & time Formatter 컴포넌트 분리하기 2.date & time Formatter 각각의 코드 설명 리팩토링 전 코드 (독립된 컴포넌트로 분리해서 관리하기전 불필요한 코드들도 함께 섞여있다.) const TimeTable = ({ time, setSelectedTime }) => { const getTime = e => { const TimeTable = ({ time, setSelectedTime }) => { {ti.. 2023. 7. 27.
클린 코드 / 코드 리팩토링 (2차 팀프로젝트) 드디어 기다려왔던 리팩토링의 시간이 돌아왔다. 2주라는 짧은 시간안에 목표한 결과물을 내기 위해 불편하고 찝찝한 감정을 덮어두고 달렸다. 프로젝트하면서 리팩토링까지 2주안에 진행할 시간이 없다는 것을 1차 팀프로젝트 때 느꼈다. 그래서 애초에 클린코드를 지향했지만 지금보니 형편없는 코드들이 많다. 도대체 무슨생각으로 이렇게 코드를 짰을까 이해가 안되는 부분들도 보이고 생각보다 깔끔하게 잘 정리해서 한달이 지났지만 코드를 읽고 이해하는데 어려움이 없는 경우도 많았다. 6월 한달 간 인턴 생활을 하며 시니어 개발자분들 코드 열심히 보고 이리저리 따라해본게 이번 리팩토링에서 꽤 도움이 되었다. 그리고 코드 리뷰 받을 때마다 직접 수정하고 새로운 업무에서도 계속 의식적으로 코드 작성을 했더니 조금씩 좋은 습관들.. 2023. 7. 27.
[ 카카오맵 API ] 반응형으로 지도 구현하기 ( 지도가 다른 위치를 표시하는 오류 해결) 반응형으로 지도 구현하기 (with Kakao Map) 이 글은 브라우저창의 크기가 변할 때 카카오맵 지도가 정확한 위치를 벗어나 다른 위치를 보여주는 문제를 해결하는 과정을 담고 있습니다. [ 최종적으로 구현한 모습 ] [ 구현해야 할 필수 기능 ] 1. 페이지에 지도 표시 2. 지도 중앙에 마커 표시 3. 지도 반응형으로 구현하기 카카오맵 & 네이버맵 API 비교 및 카카오맵으로 지도 기능 구현하기 위의 글에서 Naver maps API와 Kakao maps API 비교 및 kakao maps API를 이용해 지도를 구현하는 과정을 다루었습니다. [ 마주한 문제점 ] 프로젝트를 진행하는 과정에서 커스텀한 마커까지 완벽하게 구현했지만 새로운 문제점을 발견하게 되었습니다. 반응형을 확인해보니 지도의 마커.. 2023. 7. 26.
날짜 및 시간 예약 기능 구현하기 / with react-datepicker 1. 날짜 및 시간 선택 기능 구현하기 구현하려는 기능 1. 현재 날짜를 기준으로 6일 뒤까지만 예약이 가능하도록한다. 2. 예약하고자 하는 날짜를 선택하면 해당하는 날짜의 타임테이블을 불러온다. 3. 전체 타임 테이블 중에서 예약이 가능한 시간만 버튼이 활성화 되도록 한다. 4. 시간을 선택하고 예약하기를 누르면 예약 날짜와 시간을 서버로 보낸다. 내가 생각한 로직 1. 현재 날짜를 기준으로 예약 가능한 날짜 활성화 2. 예약 날짜 선택과 동시에 해당하는 날짜의 타임테이블 불러오기 3. 예약 가능한 시간만 버튼 활성화 4. 예약 시간 선택 5. 날짜와 시간이 모두 선택 될 때만 예약하기 버튼 활성화 6. 예약하기 버튼을 누르면 결제 단계로 이동 2. 구현에 필요한 라이브러리 비교하기 필요한 라이브러리 .. 2023. 7. 6.
React / 컴포넌트 재사용 / Button component 컴포넌트 재사용 / Button component 구현하려는 기능 프로덕트 내에서 사용될 버튼을 컴포넌트로 반들고 재사용 가능하도록 구현 내가 생각한 로직 1. 버튼 컴포넌트를 만들고 props로 변경될 값을 받는다. 2. className을 다르게 주어 스타일에 변화를 준다. 처음 작성했던 코드 처음 작성했던 코드는 bigButton 과 smallButton이라는 두개의 컴포넌트로 분리해서 만들었다. 그러나 className으로 색상을 변경할 수 있다면 사이즈도 마찬가지로 className으로 관리할 수 있다는 생각이 들었다. 그래서 버튼 컴포넌트를 하나로 합치고 스타일 속성으로 사이즈를 분리해서 만들었다. import react from "react"; import "./Button.scss"; co.. 2023. 5. 18.
React / useNavigate를 사용해서 경로 이동을 해야할 때 발생하는 페이지 공백 오류 해결 useNavigate를 사용해서 경로 이동을 해야할 때 발생하는 페이지 공백 오류 해결 페이지 전환 시 보이는 로딩 페이지 구현 구현하려는 기능 useNavigate를 사용해서 경로 이동을 해야할 때 페이지 공백이 발생한다. 결제페이지에서 인보이스 페이지로 넘어가는 과정에서 페이지 공백이 잠깐 발생했다. 이때 notFound 화면이 나오게 되는데 사용자는 결제가 완료되지 않았다고 오해할 수 있는 상황이었다. 그래서 결제페이지에서 인보이스 페이지로 이동하는 사이에 보여질 로딩페이지를 구현하고자 했다. 내가 생각한 로직 1. 로딩 페이지를 만들어서 path경로를 /invoice 로 지정한다. 2. orderId를 전달받아서 새로운 페이지를 불러오기 전에는 /invoice가 기본 경로로 설정되어 loading.. 2023. 5. 17.
React / 컴포넌트가 마운트 될 때 fetch로 서버에서 받아오는 데이터 값이 없어서 생기는 오류 해결 컴포넌트가 마운트 될 때 fetch로 서버에서 받아오는 데이터 값이 없어서 생기는 오류 해결 데이터가 들어오기 전에는 값을 출력하지 않고 다시 데이터를 요청하도록 구현하려는 기능 네비게이션에 서버에서 받아온 userdata를 활용해서 포인트와 상품 수량 출력 내가 생각한 로직 1. 서버에서 받아오는 유저 데이터는 계속해서 값이 변하기때문에 useState를 사용해서 관리한다. 2. fetch를 사용하여 서버에서 데이터를 받아온다. 3. 받아온 데이터를 state에 저장하고 각각의 데이터를 쓰임에 맞게 가공해서 변수로 선언한다. 처음 작성했던 코드 (오류 발생) useEffect(() => { fetch("http://10.58.52.169:9001/users", { method: "GET", header.. 2023. 5. 17.
React / 토큰 유무에 따른 조건부 랜더링 / token undefined가 true로 인식되는 오류 해결 토큰 유무에 따른 조건부 랜더링 token undefined가 true로 인식되는 오류 해결 구현하려는 기능 토큰 유무에 따라 조건부 랜더링으로 다른 결과값 출력 내가 생각한 로직 1. 로그인 버튼을 누르면 fetch가 실행되면서 서버로 요청을 보낸다. 2. 서버로부터 받은 토큰을 localStorage에 저장한다. 3. localStorage에 저장한 토큰을 변수로 저장한다. 4. 변수로 저장된 토큰의 값으로 토큰 유무를 판별하여 조건부 랜더링을 한다. 처음 작성했던 코드 (오류 발생) const token = localStorage.getItem("TOKEN"); const loginOn = () => { fetch("http://10.58.52.169:9001/users/logIn", { metho.. 2023. 5. 17.

티스토리툴바