Front-end Developer

문제 코딩테스트 연습 - 두 개 뽑아서 더하기 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. 제한 programmers.co.kr 문제풀이 function solution(numbers) { var lst = []; for (let i = 0; i < numbers.length; i++){ if(i !== numbers.length-1){ for (let j = i+1; j < numbers.length; j++){ lst.push(numbers[i]+numbers[j]) } } } //lst 배열을 set 형식으로 바꿔서 중복되는 숫자..

사용자가 원하는 위치를 직접 지도에서 줌인을 해서 찾아내는 건 생각보다 사용하기 힘들기 때문에 인풋에다가 정확한 주소(지번주소 or 도로명 주소)를 기입했을 때 그 주소에 마커가 찍히게 했습니다. Map.js 버튼에 아이디 값을 주어서 해당 아이디 값에 클릭이벤트를 주고 클릭했을 때 input 태그 아이디값을 주어서 value(주소)를 가져왔습니다. 그리고 그 주소를 좌표값으로 변환시켜서 그 좌표값을 토대로 지도를 그 중심으로 옮기고 마커를 그 좌표에 찍었습니다. 더보기 const Map = (props) => { useEffect(() => { const container = document.getElementById('myMap'); //지도 표시할 div const options = { center..

마우스를 사용하지 않는 사용자를 위해서 지도위에 줌 인 아웃을 할 수 있는 버튼을 만들었습니다. Map.js useState를 이용해서 맵 정보를 useEffect 밖을 빼내고 줌 인 아웃 함수를 버튼에 넣어서 사용했습니다. 더보기 const Map = (props) => { const [_map, setMap ] = useState(); useEffect(() => { const container = document.getElementById('myMap'); //지도 표시할 div const options = { center: new kakao.maps.LatLng(37.545642179638556, 126.98117041998981), //지도 중심 좌표 level: 8 //지도의 확대 레벨 }; ..

해당 마커의 게시물 개수가 10개 이상인 마커와 10개 미만인 마커를 구분하기 위해서 마커의 종류를 노멀마커와 핫 마커로 만들었습니다. Map.js normal 마커와 hot 마커의 이미지를 다르게 구현해서 구분했습니다. 그리고 게시물을 작성할 때 이 게시물이 hot 마커 게시물인지 normal 마커 게시물인지 알려주었습니다. 더보기 const Map = (props) => { const [ is_write, setWrite ] = useState(false); const [ is_writeModal, setWriteModal ] = useState(false); const [ hot, setHot ] = useState(false); const normalMarker = useSelector((stat..

생성한 마커를 클릭했을 때 어떻게 해당 게시물을 보여주고 게시물을 작성하게 했는지 알아보도록 하겠습니다. Map.js 생성된 마커를 클릭했을 때 서버에서 해당 마커에서 생성된 게시글을 불러오게 합니다. 그리고 사용자가 로그인을 한 상태이면 게시물 작성 버튼도 보여지게 합니다. 더보기 const Map = (props) => { const [ is_write, setWrite ] = useState(false); const normalMarker = useSelector((state) => state.marker.normal) const hotMarker = useSelector((state) => state.marker.hot) useEffect(() => { const container = docume..

리액트에서 카카오 맵 API를 가져오는 방법은 다른 블로그에 많이 올라와 있어서 따로 올리지 않겠습니다. 그리고 카카오 맵 페이지에도 친절하게 잘 설명되어있습니다.😀 카카오 맵에서 주어지는 일반 마커를 이용해서 어떻게 마커를 생성했는지 알아보도록 하겠습니다. Map.js 일단 먼저, Map을 생성하고 관리하는 코드는 모두 useEffect안에다가 넣었습니다. 그렇게해서 처음 렌더링 됬을 때 맵을 볼 수 있도록 했습니다. 새 마커를 생성하기 위해서는 일단 맵에 클릭 이벤트를 주어서 맵을 클릭했을 때 파란색 기본 마커가 클릭한 곳에 나타나게 하고, 그곳에 위치 정보(위도, 경도)를 useState를 사용해서 변수에 담아냅니다. 기본 마커에도 클릭 이벤트를 주어서 마커를 클릭했을 때 마커 생성 모달창이 보이게..

ART_Seoul 항해99 7주차는 그 전까지는 힘겹게 오르막길을 올랐다면 이번에는 좀 쉬어가는 자신을 돌아보고 정비하는 시간이라고 했다. 이번에는 총 2주이고, 저희 팀 프로젝트는 카카오 맵 API를 이용해서 전시나 공연을 관람했던 장소에 마커를 생성하고 그곳에다가 게시글을 올리고 서로 정보를 공유하는 웹사이트입니다. (아직 진행중에 있습니다.) 이번 프로젝트는 좀 여유를 가지면서 진행하라고 했기 때문에 좀 내 자신을 돌아볼 수 있는 기회가 있었다. 프로젝트를 하면서 수요일날 갑자기 코딩을 하는 열정이 팍 사라졌다. 갑자기 그러니까 내 자신도 좀 당황스러웠고, 프로젝트를 계속 하지만 하기가 싫었다.. 이런적은 처음이였다. 그때는 그냥 내가 좀 피로가 많이 쌓였나보다 생각했지만, 아침에 일어났을 때도 여..

문제 코딩테스트 연습 - 피보나치 수 피보나치 수는 F(0) = 0, F(1) = 1일 때, 1 이상의 n에 대하여 F(n) = F(n-1) + F(n-2) 가 적용되는 수 입니다. 예를들어 F(2) = F(0) + F(1) = 0 + 1 = 1 F(3) = F(1) + F(2) = 1 + 1 = 2 F(4) = F(2) + F(3) = 1 + 2 = 3 F(5) = F(3) + F(4) = programmers.co.kr 문제풀이 # n은 100000이하인 자연수여서 재귀함수를 풀면서하니까 에러가 났다. def solution(n): # num = num2 + num1 num2 = 0 num1 = 1 num = 1 # range 3부터 시작한 이유는 num, num1, num2를 이미 세팅해놨기 때문입..