본문 바로가기

프론트엔드58

[ 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.
wecode/ 12주차 회고록 /인턴 생활 끝! 그리고 위코드에서의 마지막 어김없이 마지막은 찾아온다.인턴 생활 최종화 그리고 위코드 수료식 1. 무러무럭 자라나는 인턴 인턴 마지막 주가 시작 됐다. 한달이라는 시간이 정신없이 흘러갔다. 이번주부터 동기 한명이 나오지 않게 되었다. 한 자리가 비었는데 빈자리가 꽤 크다.o(TヘTo) 복작복작 우리끼리 점심먹으러 가던 순간이 생각났다. 그동안 맡아서 했던 기능들을 톺아보며 리팩토링을 진행했다. 그리고 금요일에 있을 기업협업 팀 발표 준비도 했다. 피피티 오랜만에 만들어보는데 재밌었다. 한달이라는 시간이 짧다는 것은 알고 있었지만 정말 눈 감았다 뜨니 한달이 지나있다. 시간이 흘러가는게 체감이 안된다. 그만큼 열심히 했다는 거겠지? 동기들과 함께 어리숙한 모습으로 쭈뼛쭈뼛 회사에 들어서던 첫날이 떠오른다. 우리끼리 똘똘 뭉쳐서 잘 .. 2023. 7. 1.
wecode / 2nd team project 회고록 두번째 팀프로젝트를 마치며 About Team [팀구성] 팀명 : FRENEMY Product Manager: 하지현(B) Project Manager: 김수정(F) Teammates: 김희연(F), 양진민(F), 전승범(F), 오진석(B) [프로젝트 기간] 2023.05.16 ~ 2023.05.30 (총 2주) [적용 기술 및 협업 툴] ⚙️ FrontEnd JavaScript, React, HTML, Styled Component ⚙️ Collaboration Tool Github, Trello, Figma, Notion, Slack, Postman ⚙️Libraries React-DatePicker nicemodal ⚙️ API Social Login : Kakao Login API 사용 Map :.. 2023. 6. 26.
wecode/ 11주차 회고록 / 인턴 생활 3주차 벌써 일년...아니 삼주차... 인턴 생활 끝날 때까진 끝난게 아니다 벌써 기업 협업을 시작한지 3주가 되었다. 다음주 목요일이면 인턴 생활이 끝난다. 그리고 금요일에는 위코드 수료식이 있다. 마치 브레이크가 고장난 8톤 트럭처럼 달려가는 개발 견습생 생활~ 월요일 프론트 팀장님과의 즐거운 코드 리뷰 시간~~~*★,°*:.☆(￣▽￣)/$:*.°★* 。 이번에는 내가 짰던 코드를 보시고 axios로 서버에 보내는 요청에서 try와 catch를 사용했던 부분에 대해 설명해줄수 있냐고 하셨다. 내가 아는대로 말씀드렸더니 그 부분에 대해 좀 더 깊이 있게 다뤄보자고 하셨다. throw, try, catch ,finally 위의 4가지를 사용하는 방법과 사용하는 상황에 대해 설명해주셨다. 그리고 어떤 식으로 활용.. 2023. 6. 25.
wecode/ 10주차 회고록 /인턴생활 2주차 1. 드디어 진짜 업무 시작! 벌써 기업협업이 시작되고 2주가 흘렀다. 이번주부터 본격적으로 업무를 할당받아서 개발에 들어갔다. 새로운 기술들을 사용해 실제 프로덕트에 사용될 기능을 개발하는 재미있는 도전이었다. 기획부터 디자인까지 전반적인 과정에 다 참여해볼 수 있는 기회였다. 사실 팀프로젝트를 하면서 기획과 디자인을 다 해보긴 했지만 현업에서는 확실히 다른 점들이 보였다. 좀 더 에자일하게 프로젝트가 진행이 되고 그 과정에서 필수 기능부터 빠르게 빌드업한다. 필수기능이 구현되면 로직을 다시 분석하고 불필요한 부분은 제거하고 추가적으로 보완되어야하는 부분들은 빠른 피드백으로 그때 그때 수정 보완한다. 스타트업의 경우 기획이 완벽하게 갖추어진 상태에서 하나씩 쌓아가는 형식보다는 에자일하게 테스트 할 수 .. 2023. 6. 19.

티스토리툴바