본문 바로가기

분류 전체보기129

한 달 만에 다시 돌아온 회고록 위코드 부트캠프 수료 후 한 달이라는 시간이 지났습니다. 7월1일 마지막 12주차 회고록을 올렸었는데 벌써 7월의 마지막이 되어 한 달 간의 회고를 해보려고 합니다. 우선 7월 첫주부터 본격적으로 취업준비에 들어갔습니다. 그동안 정리하지 못했던 지난 프로젝트들을 마무리 짓는 것으로 7월을 시작했습니다. 프로젝트를 단기간에 완성시키다보니 개인적으로 아쉬움이 남는 것들이 있었습니다. 그리고 새로운 프로젝트들을 경험하고 또 개인적으로 공부를 하면서 배우게 되는 것들이 많았습니다. 배움이 많아질수록 이전의 코드들이 어찌나 엉망진창이던지, 제가 작성한 코드이지만 충격적인 부분들도 있어 그런 아쉬움들을 하나씩 보완해나가고 있습니다. 그리고 이력서 세션과 면접 세션에서 얻은 팁들을 참고하여 이력서와 포트폴리오 작업에.. 2023. 7. 30.
[ React ] textarea text 높이 따라 자동으로 높이 조절하기 (with Tailwind css) textarea text 높이 따라 자동으로 높이 조절하기 with Tailwind css 이 글은 비교적 동적 스타일 적용이 번거로운 tailwind css를 사용하는 과정에서 textarea의 높이를 자동으로 조절하는 방법에 대해 다루고 있습니다. tailwind css가 아니라면 이것보다 더 편리한 다른 방법도 있을 것 같습니다만, 우선 해당 조건에서 실행되어야만 하는 상황이기에 최선을 다해 방법을 찾아보았습니다. 이점 참고하시기 바랍니다. onChange 이벤트 리스너를 이용해 scrollHeight를 textarea.style.height에 직접 적용하는 방법 위와 같이 적용 한 후 콘솔로그로 높이를 확인해보면 이렇게 event.target.scrollHeight가 정상적으로 확인됩니다. 그리고.. 2023. 7. 30.
[카카오 API] 카카오 맵 & 카카오 로그인 API 이용한 서비스 배포하기 카카오 맵 & 카카오 로그인 API 이용한 서비스 배포하기 [index] 1. 간략한 배포 전 과정 2. 카카오맵 API 연결하기 3. 카카오 로그인 API 연결하기 4. 배운점 1. 간략한 배포 전 과정 이번 프로젝트에서도 서비스 배포를 담당하게 되었습니다. 이전의 프로젝트에서는 외부 API를 사용하지 않아 비교적 수월하게 배포를 진행했었는데 이번 프로젝트에서는 외부 API를 사용하였더니 배포하는 과정에서 어려움이 있었습니다. 이 글에서는 배포하는 과정에서 마주했던 문제와 해결 방법에 대해 다뤄보려고 합니다. 우선 이번 프로젝트는 Amazon S3를 이용해 배포를 진행하였습니다. Amazon S3를 통한 배포에 대해 궁금하시다면 아래의 글을 참고해주세요. https://reveur1996.tistory.. 2023. 7. 27.
[ 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.

티스토리툴바