본문 바로가기

개발자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.
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/ 9주차 회고록/ 기업 협업 1주차 후기 드디어 시작된 인턴쉽 한달 동안 잘 부탁드립니다! 새로운 스텍 TypeScript와 Next.js, tailwind 모두 다 처음 사용해 보는 것들이라 첫 출근 전 주말부터 공부를 시작했다. 리액트를 기반으로 하는것 외에는 완전히 다른 방식이지 않을까 하는 우려와는 달리 생각보다 기존에 내가 쓰던 리액트와 자바스크립랑 비슷했다. 타입스크립트가 자바스크립트 기반으로 사용하는 언어라서 그런지 유사점도 많았다. 특히 타입스크립트는 유지 보수 측면에서 에러를 훨씬 수월하게 핸들링 할 수 있다는 장점 때문에 점점 더 수요가 늘어나고 있다. 요즘 왠만한 회사에서는 다 타입스크립트를 선호하는 추세이다. 그래서 이번 기회에 타입스크립트를 제대로 공부해보기로 했다. 동기들과 서로 괜찮은 강의가 없는지 공유하고 서로 듣고.. 2023. 6. 11.
wecode/ 8주차 회고록 / 2nd Team Project 끝! 두번의 팀프로젝트와 두달간의 위코드 오프라인 과정을 마치며 1. The End! 두번째 팀프로젝트가 드디어 끝이 났다. 첫번째 팀프로젝트와는 또 다른 느낌. 첫번째 프로젝트 때는 처음이라는 설렘과 잘 할 수 있을지에 대한 걱정이 컸다. 두번째 프로젝트에서는 더 잘해내고 싶은 욕심과 마지막이라는 아쉬움이 공존했다. 위코드에서의 2달간의 오프라인 코스가 이 프로젝트를 마지막으로 종료된다. 그리고 남은건 한달 간의 기업 협업. 시간이 참 빨리 지나갔다는 생각이 들었다. 팀원들이나 동기들과 최근들어 부쩍 이런 얘기들을 많이 했었다. 눈 감았다 뜨니까 두달이 지나갔다며, 한달만 더 시간이 있으면 좋겠다고. 하지만 모든 것에는 시작이 있으면 끝도 있는 법. 당연한 사실이지만 그 과정들이 너무도 행복했기 때문일까 끝.. 2023. 6. 10.

티스토리툴바