반응형 웹 구현에 대한 방법은 여러 가지가 있다. 그 중에서도 무난하면서 비용이 적게 드는 방법은 바로 미디어 쿼리를 활용하는 방법이다. 미디어 쿼리 사용하기 - 웹 개발자 안내서 | MDN 미디어 쿼리 사용하기 Jump to sectionJump to section 미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 developer.mozilla.org 스타일 시트 내에서 선언되어 사용되기 때문에 별도의 js실행 없이도 구현이 가능하다는 장점이 있다. 특히나 서버사이드 렌더링으로 구현하는 페이지의 경우 이 장점이 더욱 빛난다. 노드 서버에서 window 객체를 얻을 수 없기 때문에 클라이언트의 창 크기를..

As you know, Create-React-App(CRA) made by Facebook is first recommanded Tool Chain in react environment. Create-React-App(줄여서 CRA)는 React 공식 가이드에서 첫 번째로 추천하는 툴체인이다. (first recommanded !== most recommanded) (물론 첫 번째로 추천한다는 말이 제일 추천한다는 말은 아니긴 하다) Anyway, CRA is powerful ToolChain to make single-page-application And also useful starter-kit for who learning react recently! (like me) 아무튼 공식 가이드에서 소개..

React 프로젝트 환경을 쉽게 구성할 수 있게 해주는 CRA 보일러 플레이트는 webpack 설정 등의 설정 파일을 숨김으로써 귀찮고 두려운 webpack 세팅에서 벗어날 수 있다는 이점을 가지고 있다. (기술 부채를 덮어둔다면) 다만 webpack 설정을 숨기게 되면서, hot-loader와 같이 webpack 설정과 긴밀하게 연결된 일부 의존성 모듈의 적용에 있어 제약을 가지게 된다. 이러한 문제는 eject(ejection: 숨겨진 설정 파일 창고 대방출) 명령어를 통해 설정 파일을 추출 후 직접 관리하여 해결할 수 있으나, 이 경우 CRA의 모든 설정을 직접 유지보수하게 되면서 CRA의 장점인 one Build Dependency를 잃게 된다. (cra eject는 되돌릴 수 없다는 게 큰 마음..

요즘 일을 본격적으로 시작하면서, 하루하루 그동안 해왔던 공부에 비해 굉장히 밀도 높은 학습을 하게 되었다. 변명처럼 들리겠지만 그간 포스팅을 하지 못했던 이유도 과거의 내 미숙함이 덕지덕지 묻어있는 블로그를 마주할 용기가 없었기 때문이다. 하지만 반대로 생각해보면 내가 그만큼 성장하고 있다는 뜻이니 철면피를 깔고 오랜만에 새 포스팅을 쓴다. 웹 클라이언트 개발자로 일을 하면서 당연하지만 디자이너분들과 협업할 일이 참 많다. 특히 디자이너 분들이 제플린을 통해 제공해주는 가이드라인은, 나에게 많은 고민거리(컴포넌트 구조를 어떻게 짤 것인지)와 편함(사이즈 가이드라인이 되어있어 고민 할 필요가 없다)을 동시에 선사해주고 있다. 다만 아쉬운 점은 제플린에서는 요소 간 간격을 마우스 오버를 통해 쉽게 잴 수 ..

목차 - 고민 - 흥미 - 시작 - 열심 - 결실 고민 작년 여름. 나는 1년 정도 일하던 쿠팡 사무직을 그만두고 그저 하염없이 실업 급여를 받으며 놀고 있었다. 나이는 어느덧 28살에 진로마저 불확실한 상태였지만, 다행히 독립 후 혼자 살면서 정서적으로 안정된 상태였다. 물론 노는 와중에도 계속 이렇게 살 수는 없다는 생각과 불안감이 있던 나날이었다. 아무것도 안 할 수는 없었기에, 남들이 한다는 공기업 준비도 하는 척 해보고, 코레일에서 사람을 많이 뽑는다는 이야기를 듣고선 코레일을 목표로 한 척 NCS준비도 해보고... 분명히 난 하고 싶은 일을 하면서 살아야 하는 사람인데, 하고 싶은 일을 찾을 수 없는 힘든 시기. 그런 시기였다. 다행히 나 자신에 대한 깊은 고민을 할 수 있는 시간과 여유가 있..

JS에서 비동기 http 통신을 위한 방법은 대표적으로 3개(Ajax, Axios, fetch)가 있다. 이 중 내가 실제로 사용해본건 Ajax와 fetch뿐인데, 문득 각 방법별로 장단점이 뭔지 궁금해서 이번 기회에 정리해두려 한다. Ajax Asysnchronous JavaScript And XML의 약자로, 자바스크립트에서 백그라운드 HTTP통신이 가능하게 만든다. http통신의 response와 request를 자바스크립트에서 비동기적으로 다룰 수 있다. 사실 뜻 자체가 비동기 자바스크립트라서, 근래엔 비동기 통신을 하는 자바스크립트 자체를 Ajax로 통칭하기도 한다. 새로고침이 필요 없다는 점 때문에 Google Gmail, Map에서 사용되어 주목받기 시작했다. Ajax라 함은 보통의 상황에서..