항해99

항해 99 8주차 ART SEOUL(완료) [WIL]

Brad Daeho Lee 2021. 4. 25. 21:06

ART_Seoul

항해99 8주차에도 7주차에 이어서 ART SEOUL 프로젝트를 진행하고 완성하는 시간을 가졌습니다.  그리고 기능을 더 많이 추가하기보다는 기존 기술들을 사용자가 사용하기 편하게 다듬는 시간을 가졌습니다.

 

프로젝트 노션 정리 

 

프로젝트 이름 : ART SEOUL (2조)

ART SEOUL 프로젝트

www.notion.so

Github

 

leedaeho1188/hh99_smallProject

Contribute to leedaeho1188/hh99_smallProject development by creating an account on GitHub.

github.com

 

 

<느낀점>

2주동안 함께 프로젝트를 진행한 우리 조원분들과 함께 할 수 있어서 정말 좋았다. 단 한번도 트러블 없이 서로가 배려하면서 팀 협업을 할 수 있는 시간이였다. 팀 협업을 하는데 있어서 실력도 중요하지만, 남을 배려할 줄 아는게 더 중요함을 다시 한번 더 깨달을 수 있었다. 백엔드 개발자에게 어떤 API를 만들어달라고 부탁할 때도 마치 백엔드 개발자가 API를 만들어내는 기계처럼 대하는게 아니라 눈치를 보지는 않되 감사하는 마음을 가지면 좋지 않을까 생각을 했다. 그리고 백엔드 개발자에게 왜 해당 API가 필요한지 설명을 하고 설득을 하는데 있어서도 내가 이 프로젝트를 좀 더 꼼꼼하게 체크하는데 도움이 되었던 것 같다. 😊

 

마지막 제출하는 날이 되고 생각보다 잡아야되는 오류들이 많았다. 그래서 어느때보다 긴장감이돌면서 열심히 오류를 해결하고 프로젝트 마무리하는데 열중했던 것 같다. 그런데 이렇게 집중하면서 하루를 열심히 살아가는게 싫은게 아니라 뿌듯하고 즐겁다는 생각이 들었다. 오히려 좀 여유롭게 코딩하는 것 보다 할 일이 많아서 열심히 열중하는게 내 체질에 더 맞는 것 같다는 생각이 들었다. 이런 나를 보면서, 스타트업 회사에 가서 일하면 즐거울 것 같다는 생각이 들었다. 하루하루 지금처럼 성장할 수 있는 그런 곳에서 일하고 싶다. 😁 

 

 

<배운것>

기능구현

1.카카오 맵 마커 생성하기

 

React (카카오 맵) 마커 생성하기

리액트에서 카카오 맵 API를 가져오는 방법은 다른 블로그에 많이 올라와 있어서 따로 올리지 않겠습니다. 그리고 카카오 맵 페이지에도 친절하게 잘 설명되어있습니다.😀 카카오 맵에서 주어

leedaeho1188.tistory.com

2. 카카오 맵 생성된 마커 눌렀을 때 해당 게시물 보여주고 게시물 생성하기

 

React (카카오 맵) 마커 눌렀을 때 해당 게시물 보여주고 게시물 생성하기

생성한 마커를 클릭했을 때 어떻게 해당 게시물을 보여주고 게시물을 작성하게 했는지 알아보도록 하겠습니다. Map.js 생성된 마커를 클릭했을 때 서버에서 해당 마커에서 생성된 게시글을 불러

leedaeho1188.tistory.com

3. 카카오 맵 마커 종류별로 나누기

 

React (카카오 맵) 마커 종류별로 나누기

해당 마커의 게시물 개수가 10개 이상인 마커와 10개 미만인 마커를 구분하기 위해서 마커의 종류를 노멀마커와 핫 마커로 만들었습니다. Map.js normal 마커와 hot 마커의 이미지를 다르게 구현해서

leedaeho1188.tistory.com

4. 카카오 맵 줌 인 아웃 버튼 넣기

 

React (카카오 맵) 줌 인 아웃 버튼 넣기

마우스를 사용하지 않는 사용자를 위해서 지도위에 줌 인 아웃을 할 수 있는 버튼을 만들었습니다. Map.js useState를 이용해서 맵 정보를 useEffect 밖을 빼내고 줌 인 아웃 함수를 버튼에 넣어서 사용

leedaeho1188.tistory.com

5. 카카오 맵 주소 입력했을 때 해당 주소에 마커 나타내기

 

React (카카오 맵) 주소 입력했을 때 해당 주소에 마커 나타내기

사용자가 원하는 위치를 직접 지도에서 줌인을 해서 찾아내는 건 생각보다 사용하기 힘들기 때문에 인풋에다가 정확한 주소(지번주소 or 도로명 주소)를 기입했을 때 그 주소에 마커가 찍히게

leedaeho1188.tistory.com

6.  한 페이지에서 클릭한 버튼만 스타일링 주기

 

리액트 클릭한 버튼만 스타일링 주기

클릭 된 버튼만 스타일링을 주는 것을 구현했습니다.🙂 버튼에 아이디 값을 주고 해당 아이디값에 스타일링을 주는 함수를 만들었습니다. 그리고 그 함수들을 각 종류 컴포넌트에 props 값으로

leedaeho1188.tistory.com

 

알고리즘

팀원들과 같이 자바스크립트로 알고리즘 문제들을 풀어봤습니다. 그 중에서 2개만 정리했습니다. 

처음에는 자바스크립트 문법으로 문제를 푸는게 어색했는데 개발자 도구에 콘솔 창을 사용해서 문제를 푸니까 많은 도움이 되었습니다.

 

 

프로그래머스 두개뽑아서 더하기 [자바스크립트]

문제 코딩테스트 연습 - 두 개 뽑아서 더하기 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 ret

leedaeho1188.tistory.com

 

 

프로그래머스 모의고사 [자바스크립트]

문제 코딩테스트 연습 - 모의고사 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같

leedaeho1188.tistory.com