전체 글

1. 카카오맵 API 공식 사이트 샘플 코드 참고 처음 맵 API를 가져와 내가 원하는 기능을 설계하기 위해선 필요한 코드를 수정해야하지만 기본 틀을 잘 제공해주고 있어 참고하였다. 참고한 두가지 Sample Code이다. 1. 마커 생성하기 Sample Code 2. 커스텀 오버레이 Sample Code 2. 공식 사이트 Sample Code를 활용하여 class화 하기 var map = new kakao.maps.Map(mapContainer, mapOption); // 지도 생성 class CustomContent { constructor(idV, contentTitle, contentLat, contentLng, markerImg, wishBest, wishImg, wishAddr, wishMem..

Weather Forecast 프로젝트를 만들면서 만났던 이슈에 대해 포스팅해보고자 한다. 📍 문제 발생 Weather Forecast 프로젝트에서 오늘의 날씨를 보여주는 섹션 중 하단에 현재 시간 이후 24시간 동안 날씨와 기온을 나타내 보여주는 섹션이 있다. 이 부분을 보기 위해서 노트북 키패드로 작동 시에는 그냥 옆으로 넘기면서 작동하면 됐지만, 마우스를 이용할 때에는 하단에 스크롤 바를 눌러 움직이는 방식으로 이동해야 했다. 즉 마우스 휠을 했을 때 가로 스크롤이 작동이 되지 않았던 것이었다. 사용자 경험을 바탕으로 사용자가 이용하는데 불편함을 느낄 것이라 생각하여 개선하고자 하였다. 📍 고민 및 해결 과정 처음 접근했던 방식은 시간마다 날씨 및 기온 정보 li들을 감싸는 ul와 li를 css t..

계기스터디에서 코드리뷰 할 당시 팀원 모두가 왜 Queue를 이용했을 때 시간초과 결과가 나오는지에 대해 이유를 파악하지 못하고 있었고, 그 이해를 돕고자 포스팅하게 되었습니다. 문제https://www.acmicpc.net/problem/18258 18258번: 큐 2첫째 줄에 주어지는 명령의 수 N (1 ≤ N ≤ 2,000,000)이 주어진다. 둘째 줄부터 N개의 줄에는 명령이 하나씩 주어진다. 주어지는 정수는 1보다 크거나 같고, 100,000보다 작거나 같다. 문제에 나와있지www.acmicpc.net 먼저 18258번 문제는 Queue를 활용하여 풀이하는 문제이다. 처음 Queue를 설계할 때 아래 코드와 같이 this.queueArray = [];를 두고 진행하려 하였으나 결과는 계속 시간 ..

대체적으로 Frontend Engineer의 직무 필요 역량에도 기재되어 있듯이 개발하면서 UX, UI 디자인이 많이 언급된다. 그리고 취준 하면서 여러 공고를 보다보니 UX Engineer라는 직종을 보게 되었다. UI, UX의 차이점을 정리하게 되었고, 다른 분들도 함께 궁금증을 해소할 수 있도록 포스팅하게 되었다. 📄 UX 디자인과 UI 디자인의 설명 UI design (User Interface Design : 사용자 인터페이스 디자인) 웹 사이트나 앱과 같은 디지털 화면의 시각적인 요소와 레이아웃을 만드는데 중점을 둔 디자인이다. 색상, 타이포그래피, 아이콘, 버튼 및 기타 그래픽 요소를 선택하여 미적으로 쾌적하고 사용자 친화적인 인터페이스를 만든다. 예시 : 거실 인테리어할 때 전체적으로 톤을..