earthssu 개발 공부

최근 졸업 프로젝트를 시작하면서 다시 리액트를 공부해야 하는 상황이 생겼다. 이 프로젝트 내에서 ref를 유용하게 쓸 수 있을 것 같아 공부 겸 다시 정리해보려고 한다. 개념은 책 '리액트를 다루는 기술'을 참고했다. ref ? 일반적으로 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다. 그래서 CSS에서 특정 id에 스타일을 적용하거나 Javascript에서 특정 id에 접근해 작업할 수 있는 것이다. 이렇게 HTML에서 id를 사용해 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법을 ref라고 한다. 어라 잠깐, 리액트 프로젝트에서는 id를 쓸 수 없는 건가? 쓸 수 있다! 그러나 리액트는 컴포넌트 단위로 이루어지는데, 컴포넌트가 여러 번 사용될 경우 '유일..

다익스트라(dijkstra) 알고리즘은 '최단 경로'를 찾을 때 유용하게 쓰인다. 한 정점에서 다른 모든 정점까지의 최단 경로를 찾는 알고리즘이라고 할 수 있다. 알고리즘의 아이디어 1. 출발 노드와 도착 노드를 설정한다. 2. 알고 있는 모든 거리값을 부여한다. 3. 출발 노드부터 시작하여 방문하지 않은 인접 노드를 방문하여 둘 사이의 거리를 계산한다. 이때 이미 알고 있는 거리보다 짧으면 해당 거리를 갱신한다. 4. 현재 노드에 인접한 모든 노드를 방문했다면 해당 노드는 모든 방문을 끝낸 것이므로 미방문 노드에서 없앤다. 5. 모든 미방문 노드를 방문했다면 알고리즘을 종료한다. 해당 알고리즘은 파이썬에서 heap을 이용해 구현할 수 있다. 보통 최소 힙으로 정렬이 되기 때문에 최단 경로를 찾을 때 유..

python에는 너무 유용한 내장 함수가 많이 있는데, 그 중에서도 경우의 수를 구할 때 사용되는 내장 함수를 다뤄보겠다. 경우의 수는 전체 탐색이 필요한 알고리즘 문제에서 은근 자주 쓰이므로 기억해둘 것! 경우의 수를 구할 땐 itertools라는 모듈을 활용한다. import itertools 순열 서로 다른 n개 중에서 r개를 '순서'대로 나열하는 경우의 수 # 배열 ['1','2','3','4'] 중에서 서로 다른 원소 두 개를 순서대로 나열하는 경우의 수를 출력한다. itertools.permutations(['1','2','3','4'], 2) 중복순열 중복 가능한 n개 중에서 r개를 '순서'대로 나열하는 경우의 수 # 배열 ['1','2','3','4'] 에서 중복 가능한 원소 두 개를 순서..

리액트 공부를 시작할 때 필수적으로 보이는 두 단어가 있다. 바로 Bundler와 JSX! 이 두 가지가 무엇인지, 어떻게 쓰이는지 간단하게 정리해보았다. 번들러(Bundler) 이전의 자바스크립트 : 페이지별, 기능별 등으로 자바스크립트 파일을 분리해 HTML파일에서 형식으로 불러왔다. 프로젝트 규모가 작을 경우 큰 문제 없지만, 규모가 커질수록 몇 가지 치명적인 문제가 발생한다. 1. 두 개의 자바스크립트 파일에서 같은 변수명을 사용할 경우, 해당 변수명의 용도가 불분명해질 수 있다. 자바스크립트 파일이 얼마 없을 경우 겹치지 않게 개발하면 되지만, 프로젝트 규모가 커진다면...? 일일이 확인하고 변수명을 고치기란 꽤나 머리 아픈 일이다. 2. 사용자가 URI를 입력하면 해당 URI에 필요한 파일을 ..

위의 사진과 같이 서울시 행정구를 폴리곤으로 구분하고, 해당 위치에 마우스를 얻을 경우 색이 바뀌는 이벤트를 발생시키는 것까지 해보겠다. 그 전에 행정 구역을 구분하는 geojson 파일이 필요하다. 해당 파일은 아래 링크를 통해 쉽게 생성할 수 있다! https://neurowhai.tistory.com/350 대한민국 행정구역(시도, 시군구) GeoJSON 파일 다운로드 및 SHP 파일 단순화 후 변환 방법 설명 원본 출처이자 해상도가 높은 파일(SHP)은 아래 링크에서 구하실 수 있습니다. http://www.gisdeveloper.co.kr/?p=2332 대한민국 최신 행정구역(SHP) 다운로드 – GIS Developer www.gisdeveloper.co.kr 위 데이터.. neurowhai...

이런 저런 코드를 참고하다 보면 다양한 display 속성을 자주 만날 수 있다. 이 속성은 말 그대로 요소를 어떻게 보여줄지 결정하는 속성이다. 대체 이 display 속성이 요소를 어떤 식으로 보여주는지 확실하게 알아보도록 하자. none 요소를 랜더링하지 않도록 설정한다. 자리 차지도 하지 않고 완전히 사라진다. 예시 display none 설정 none 설정 안 됨 결과 none 설정 안 됨 block 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보인다. width, height 속성을 지정할 수 있으며 block 요소 바로 오른쪽에 배치될 수 있는 태그도 줄바꿈이 되어 표시된다. div, p, h, li 태그 등이 이에 해당한다. 예시 bloc..

css에서 조금 더 유연한 크기 지정 단위로 em과 rem을 많이 사용하고 있을 것이다. 그러나 이 단위가 어떤 것을 기준으로 변화하는지, 어디에 무엇을 사용하면 좋을지 헷갈릴 때가 많다. 이번 포스팅에서 이들의 차이점과 적절한 사용법을 정리해보겠다. rem 페이지의 최상위 요소, 즉 html 요소의 폰트 크기를 기준으로 변화한다.예를 들어 최상위 요소의 폰트 크기가 16px이라면, 10rem은 160px이 된다. em 스타일을 지정한 요소의 폰트 크기를 기준으로 변화한다.현재 지정된 요소에 폰트 크기가 지정되지 않았다면, 상위 요소의 폰트 크기를 기준으로 변화한다.예를 들어 한 요소의 폰트 크기가 20px이라면, 10em은 200px이 된다. 브라우저가 HTML 폰트 크기에 미치는 영향 기본적으로 브라..

배울 때마다 헷갈리고 이해되지 않던 우선 탐색들... 오늘 드디어 완전히 이해 완료했다 생각보다 간단한 원리로 제작! 그래프로 문제를 해결할 때 어떤 방식으로 해결해야 적절한지에 따라 갈린다. 알고리즘에 큰 차이는 없다! 너비 우선 탐색 (Breadth First Seartch) 말 그대로 '너비를 우선적으로 탐색하는 알고리즘'이다. 즉, 시작점인 루트 노드와 같은 거리에 있는 노드를 우선으로 방문한다고 생각하면 쉽다. '큐(queue)'를 사용하는 것이 이 알고리즘의 핵심! 노드를 방문하면서 인접한 노드 중 방문하지 않았던 노드의 정보만 큐에 넣어 '먼저 큐에 들어있던 순서대로' 노드를 방문하면 된다. 이때, python 라이브러리 중 deque 를 사용하면 시간을 절약할 수 있다. 코드 from co..