분류 전체보기237 마스크 재고 관리 프로젝트 - 2 개요 바이러스가 만연한 현재에 개발자로써 주변사람들을 도울 수 있는 방법이 없을까 고민을 하다가, 마스크 재고를 알려주는 사이트를 만들어야 겠다 결심하였고 프로젝트에 대해 정리하는 글을 작성하였습니다. 프로젝트 글은 총 5편으로 나뉘어 작성될 예정이며 이번 글은 프론트엔드에 대한 내용을 담습니다. 목차 사용자 위치 Data 유의사항 프론트엔드 작업 작업 순서 데이터 확인 퍼블리싱 재고상태 화면 구성 요소 배치 반응형으로 만들기 JS 로 요소 렌더링 하기 요소 추가하기 요소 삭제하기 상태관리 결과물 추가사항 출처 사용자 위치 Data 유의사항 Google Doc에서 Geolocation API 를 사용할 때 유의할 점에 대해 설명해준 글을 찾아서 정리했다. 핵심 내용 사용자에게 거부감이 들지 않도록 하기 .. 2020. 3. 30. 마스크 재고 관리 프로젝트 - 1 개요 바이러스가 만연한 현재에 개발자로써 주변사람들을 도울 수 있는 방법이 없을까 고민을 하다가, 마스크 재고를 알려주는 사이트를 만들어야 겠다 결심하고 시작한 끝에 완성을 하였습니다. 완성해가는 과정에서 생각보다 많은 것을 얻을 수 있었고 배운 점을 잘 정리하면 사이드 프로젝트를 시작하는 분들께도 도움이 되고 저 나름 정리하는것 또한 학습차원에서 좋을 것 같아 글을 작성하였습니다. 점점 더 사회에 도움을 주는 개발자분들의 능력이 발휘되길 기원합니다. 프로젝트 글은 총 5편으로 나뉘어 작성될 예정이며 각 글은 자료조사, 프론트엔드, 서버세팅에 대한 내용을 담습니다. 목차 들어가기 앞서 자료조사 공공 데이터 포털(마스크 판매 정보) Geolocation API Permission API 들어가기 앞서 어느.. 2020. 3. 27. 연결리스트(Linked-list) 개념 정리 및 문제 풀이 개요 연결리스트 문제를 풀면서 모르는 점들이 많다고 느껴 해당 개념을 정리하고 관련 문제를 푸는 방법에 대해서 글을 작성하였습니다. 개념 연결리스트란? 배열 원소들의 순서를 유지하면서 임의의 위치에 원소를 삽입하거나, 임의의 위치에서 원소를 삭제하는 것은 시간이 오래 걸리는 작업입니다. 해당 위치 뒤에 있는 원소들을 하나씩 뒤칸 혹은 앞칸으로 옮겨야 하기 때문입니다. 평균적인 경우 이 작업들에는 원소의 개수에 선형 비례하는 시간이 걸립니다. 이와 같은 문제를 해결하기 위해 고안된 자료 구조가 연결 리스트(linked list)로, 특정 위치에서의 삽입과 삭제를 상수 시간에 할 수 있게 해줍니다. 연결 리스트는 배열과 아주 다른 형태를 가지고 있습니다. 배열에서는 메모리의 연속된 위치에 각 원소들이 저장되.. 2020. 2. 18. width, max-width 의 차이 개요 모던 웹 디자인 실습을 하는 도중 원래 알고 있던 max-width 의 개념에 반하는 현상이 나타난 듯 하여 궁금증이 생겼고 이를 정리하기 위해 글을 작성합니다. 개념 width : 속성을 100%로 설정할 경우 요소를 감싸고 있는 부모 요소의 크기에 맞춰 100%를 유지 max-width : 속성을 100%로 설정할 경우 요소의 기본 크기 이상으로는 조절되지 않음 예제 위 그림에서 이미지 리소스의 크기는 1500 * 375 크기이다. 여기에 max-width 또는 width를 100% 적용해보면 다음과 같다. 조금 의아했던게 max-width 로 속성을 100% 기본 요소 크기로 잡힌다고 알고 있었다. `그러면 1500*375 크기로 잡혀야 되지 않나? 근데 오히려 화면에 맞춰서 더 작게 영역이 .. 2020. 2. 6. Leetcode 17번 문제 풀이 개요 Leetcode 에서 알고리즘 문제를 풀고 배운 내용을 정리하기 위해 작성하였습니다. 문제 : 17. Letter Combinations of a Phone Number 주어진 번호에 해당하는 문자들을 조합해서 나올 수 있는 모든 문자들을 출력하기 https://leetcode.com/problems/letter-combinations-of-a-phone-number/ 풀이 이 문제는 생각보다 간단한 풀이로 풀 수 있다. 문자열이 두개 주어지는 다음 경우를 보자. 위 그림처럼 abc, def 2개의 문자열을 조합해 결과를 출력하면 ad, ae, af ... cf 까지 총 9개가 나온다. 이는 두 문자열을 이중 for loop 로 조합해서 만들 수 있는데 이를 응용하여 다른 문자열들도 조합하는 것이 .. 2020. 2. 5. Leetcode 15번 문제 풀이 개요 Leetcode 에서 알고리즘 문제를 풀고 배운 내용을 정리하기 위해 작성하였습니다. 문제 : 15. 3Sum 주어진 배열에서 요소 3개를 골라 합했을 때 0이 되는 것들만 배열로 추려내서 반환하기. 단 중복되는 것은 피하기(not allowed duplicate triplets) 풀이 문제 풀이를 위해서 먼저 주어진 배열을 오름차순으로 정렬해야 한다. 정렬을 하면 합했을 때 0이 되는 요소를 찾기 쉬워지기 때문이다. 그래서 만약 다음과 같이 정렬을 했다고 하자. 현재 배열 요소가 -2 라면, 그 다음 요소와 배열 마지막 요소로부터 인덱스를 줄여나가면서 적합한 요소를 추려낸다. 이 때 현재 배열 요소의 다음 값 인덱스를 low, 배열 마지막 요소 인덱스를 high 라고 하자. 현재 배열 요소가 -2.. 2020. 2. 3. JS의 비동기 동작에 관한 글 https://www.freecodecamp.org/news/thrown-for-a-loop-understanding-for-loops-and-timeouts-in-javascript-558d8255d8a4/ 2020. 1. 31. text-align을 이용해 블록요소 중앙에 위치시키기 개요 모던 웹 디자인 책을 읽으며 배운 점을 정리합니다. text-align 책에서 ul 태그를 text-align을 사용하여 중앙 정렬합니다. text-align으로 어떻게 중앙 정렬이 가능한지 궁금하였습니다. text-align 속성은 인라인 요소를 문서의 수평측에서 특정 위치로 정렬할 때 사용합니다. (img 태그의 경우 text-align 속성을 직접 적용하면 정렬되지 않고 블록 요소로 감싸준 뒤 사용해야 정렬됩니다) 수평측에서 블록요소 정렬하기 그러면 텍스트를 정렬 시키는 위 속성으로 블록 요소를 정렬할 수 있을까요? 네 있습니다. 일단 일반적인 블록 요소에 text-align 속성을 적용하면 정렬이 되지 않습니다. 아래 그림과 같이 text-align: center 속성을 주어도 정렬이 되지 .. 2020. 1. 29. Leetcode 4번 문제 풀이 개요 Leetcode 에서 알고리즘 문제를 풀고 배운 내용을 정리하기 위해 작성하였습니다. 문제 : 4. Median of Two Sorted Arrays 주어진 두 배열들에서 중간값(Median)을 구해야 함. ** 중간값은 말 그대로 배열의 중간에 위치한 값임. 이 때 배열요소의 갯수가 홀수이면 중간에 있는 요소가 정답이 되지만 짝수이면 중간위치 주변의 값들의 평균이 정답이 됨. 풀이1 : Bruce force 주어진 두 배열을 합친 후, 합쳐진 배열에서 중간값을 찾음. 이 때의 시간복잡도는 O(m + n) 이며 공간복잡도 또한 O(m + n) 으로 동일함. 풀이2 : Binary Search Binary Search 로 풀기 위한 방법에는 배열을 적당히 나누는 기법이 들어가는데, 이에 대한 이해가 .. 2020. 1. 24. 이전 1 ··· 15 16 17 18 19 20 21 ··· 27 다음
