블로그

홈페이지가 사용자에게 보이는 순서(브라우저 렌더링 과정) 주소창에 입력된 주소를 통해 서버를 찾아간다. 이후 DNS가 연결해줄 곳을 찾는다.(실제 서버) 서버에서 HTML 파일을 클라이언트로 보낸다. HTML 문서는 파싱되어 DOM을 생성한다.(객체 형식) 중간에 css를 로드하는 link혹은 style 태그를 만나면 DOM 생성을 중지한다. CSS를 파싱하고 CSSOM을 생성한다. 이렇게 만들어진 DOM와 CSSOM은 렌더링(브라우저에 시각적으로 출력하는 것)을 위해 렌더 트리로 결합된다. 만약 script 태그를 만나면, css와 동일하게 JS코드를 실행하기 위해 파싱을 중단한다. 이후 JS엔진을 실행하고 JS코드를 파싱한다. 브라우저 동작 요약 HTML로부터 DOM 트리를, CSS로부터 CSSOM ..

Babel이란? 바벨은 자바스크립트 컴파일러로 새로운 방식의 자바스크립트로 개발 후, 배포할 때에는 예전 방식의 자바스크립트로 변환해서 배포하려고 쓴다. Complie: 언어 => 기계 Transpile: 언어 => 언어 바벨 홈페이지에 들어가보면 Babel is a JavaScript compiler라고 쓰여있다. 트랜스파일러는 소스를 입력받으면 다시 다른 소스로 반환하는, 컴파일러의 일종이기 때문에 컴파일러라고 부르는 것은 문제가 되지 않는다. 왜 사용할까? 최신 버젼의 자바스크립트가 실행이 안되는 구버젼 웹브라우저를 대응하기 위해서이다. ES2015 문법은 대부분의 브라우저가 평균 98% 정도로 지원하고, 최근 버전의 크롬 브라우저는 ES2016+ 문법을 제법 지원한다. 크로미움 기반 엣지와 크롬 ..

회사 업무 중 지도 시각화가 필요한 일이 있어 여태는 User들의 위경도값을 받아서 Point를 찍어주는 풍선 지도(Point Map 또는 Dot Map이라고도 하고 일컫는 용어가 다양한 것 같음)를 주로 사용했었다. 위경도값만 있으면 Google Data Studio에서 그릴 수 있었기 때문에 전처리를 크게 이용하지 않았는데, 이번에는 구와 동단위 지도 시각화가 필요하여 지역 지도(Region Map 또는 Choropleth Map)을 활용하려고 했으나... 데이터 스튜디오 도움말 중 지역 측정기준 참조 를 보니 미국, 캐나다 등만 지원이 되고 한국은 지원이 되지 않았다. 띠로리 ! 그래서 다른 방법을 찾다가 Python의 Plotly 라이브러리를 이용하여 진행하였다. 시각화를 시킬 데이터 뿐만 아니라..

폴리곤 그리기를 위해 필요한 포인트는 두 가지를 고려하였습니다. 폴리곤 입력값을 받아서 컴포넌트 간 전달을 어떻게 할지와 어떻게 변환해서 전달할지 두가지를 고민해야 했습니다. 1. 컴포넌트 간 props 전달 컴포넌트 간 입력값을 전달하기 위한 과정을 설명하기에 앞서, 컴포넌트를 어떻게 구성하였는지 설명하고자 합니다. 기획한 화면 구성은 App.js에서 MapContainer 컴포넌트를 불러오고 MapContainer 에는 텍스트를 입력하는 PolygonInput 컴포넌트와 지도를 불러오는 NaverAPIMap 컴포넌트로 구성하였습니다. ├── ... ├── public │ ├── index.html │ ├── ... └── src ├── App.js ├── components │ ├── DrawCont..

React Native를 Expo로 접속을 하는데 아래와 같은 에러가 발생하였다. Something went wrong. Sorry about that. You can go back to Expo home or try to reload the project. 하단의 View error log를 살펴보니 아래와 같은 에러가 발생하였다. 192.168.25.3 (port 19000)이 작업 중인 컴퓨터 IP, 192.168.25.2가 접속을 시도하는 휴대폰 IP이다. 구글링으로 해결방법을 찾아봤을 때 윈도우의 경우 방화벽 문제 때문인 것을 알 수 있었다. 아마 VM 같은 것들이 IP 에 혼선을 주는 것 같았다. 그래서 인바운드 규칙에 포트 19000-19001을 허용해주고, `REACT_NATIVE_PACK..

만든 결과물 링크 : Drawing Polygon 회사에서 DB 내 상권 등의 폴리곤을 확인할 일이 많아서 지도 위에 레이어로 그려주는 툴을 만들 수 있지 않을까 싶어서 만들게 되었다. 네이버 지도 API를 사용하였고 GeoPolygon 좌표값들을 WKT(경도, 위도) 형태로 입력하면 숫자 부분만 읽어서 , 로 구분하여 위경도 값을 지도 상에 그려주도록 설계하였다. 테스트 값으로 소상공인시장진흥공단 상권 에 있는 POLYGON ((127.039452 37.495138, 127.039172 37.495735, 127.033527 37.494008, 127.034194 37.492618, 127.035835 37.493117, 127.035443 37.493923, 127.035641 37.49398, 12..

React에서 SVG에 마우스오버(hover)되면 색깔이 바뀌게 하고 싶었으나 구현이 잘 되지 않았다. 설명에 앞서 SVG란 단순히 jpg, png와 같은 이미지라고 생각했는데 Scalable Vector Graphics : 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식이다. 사전적 정의를 살펴보니 HTML, CSS, JS와 함께 동작하는 XML마크업 언어였다. 내가 이용할 SVG파일도 vscode에서 열어보니 코드 형태로 되어있었다. 다시 본론으로 돌아와서 svg파일을 React에서 사용하기 위해 아래와 같이 ReactComponent 형태로 import하였다. import { Link } from "rea..

0. 전제조건 node.js가 설치되어있어야 하고 설치되지 않았다면 https://nodejs.org/ko/ 에서 다운로드 받도록 하자. 1. svelte-app.zip 다운로드 Svelte REPL에 들어가서 download zip file 클릭으로 svelte-app.zip을 다운로드한다. 2. svelte-app.zip 압축 풀기 VSCode에서 해당 폴더를 연다. 3. 패키지 설치 해당 프로젝트 폴더에서 터미널을 열고 아래와 같이 입력 $ npm install 4. 개발환경으로 서버를 시작 $ npm run dev 이 코드는 다음에 시작할 때도 위와 같이 입력하면 된다! 5. http://localhost:8080 로 접속 Hello World! 화면을 만나볼 수 있다. 참고로 Svelte tut..

현재 4명의 구성원으로 프로젝트 작업을 진행중인데 백엔드는 Django, 프론트엔드는 React로 기술스택을 정했으나 4명의 환경을 일치시키기 위해 도커를 이용하게 되었다. 나만 윈도우 ㅠㅠ 한 분이 감사하게도 도커 환경 구축을 해주셔서 (능력자..!) github를 통해 다운받아서 진행하게 되었는데 이번에 git 서브모듈이라는 걸 처음 알게 되었다. $ git clone --recursive https://github.com/username/repo.git 검색해보니 위와 같이 --recursive 옵션으로 submodule을 포함하는 git 저장소를 한번에 clone할 수 있는데 나는 그것도 모르고 각각 따로따로 git clone 을 진행하였다(ㅎㅎ) docker에서 프로젝트 저번 미팅 시간에 ubu..

오늘은 프로젝트 제안서 작성과 프로토타입을 제작했다. 프로젝트 제안서의 경우 이번에 처음 써봤는데 친구가 써서 거기에 내가 맡은 부분을 좀 더 작성했다. 그리고 페이지 제작에 앞서 프로토타입을 만들어봤는데(정확하게는 와이어프레임일수도) 툴은 카카오오븐을 사용했다. 다른 툴과의 비교 전에도 프로젝트 때 카카오오븐을 써봤는데 쉽고 간편해서 이번에도 카카오오븐을 이용했다. 사실 피그마나 Adobe XD를 사용해볼까 고민을 해봤는데 피그마를 처음 써봐서 그런지 아직은 좀 낯설었다. 카카오오븐에서는 간편하게 컴포넌트나 아이콘을 쉽게 가져다 쓸 수 있는데 피그마의 경우 Iconify라는 플러그인을 따로 설치해야 아이콘을 쓸 수 있었고, 버튼이나 툴팁 같은 요소 또한 마찬가지로 바로 이용할 수는 없어서 조금 서치가 ..