earthssu 개발 공부

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

리액트 공부를 시작할 때 필수적으로 보이는 두 단어가 있다. 바로 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 폰트 크기에 미치는 영향 기본적으로 브라..

Javascript에서 몇 가지의 테크닉을 통해 개발 시간을 줄일 수 있다. 뿐만 아니라 가독성 또한 올라가니 손에 익혀두고 유용하게 사용해보자! 출처 : js.plainenglish.io/20-javascript-shorthand-techniques-that-will-save-your-time-f1671aab405f 20 JavaScript Shorthand Techniques that will save your time The shorthand techniques of any programming language help you to write more clean and optimized code. Shorthand techniques improve… javascript.plainenglish.io ..

이미지와 같이 스크롤 위치에 따라 상단바의 강조 메뉴 또한 바뀌어야 한다. HOME ABOUT US HISTORY CONTACT US COMMUNITY 메뉴에 따라 id를 설정해준다. 여기서 삽입, 삭제할 class는 "menu-active" 이다. hero = $('#hero').position().top; about = $('#about').position().top - 500; hhistory = $("#history").position().top - 500; contact = $('#contact').position().top - 700; $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll < about) { $..