전체 글
[react] What is The Difference Point Between Next.js & Create-React-App? (React의 CRA와 Next.js는 대체 뭐가 다를까?)
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로 만든 프로젝트 eject없이 hot-loader 적용하기
React 프로젝트 환경을 쉽게 구성할 수 있게 해주는 CRA 보일러 플레이트는 webpack 설정 등의 설정 파일을 숨김으로써 귀찮고 두려운 webpack 세팅에서 벗어날 수 있다는 이점을 가지고 있다. (기술 부채를 덮어둔다면) 다만 webpack 설정을 숨기게 되면서, hot-loader와 같이 webpack 설정과 긴밀하게 연결된 일부 의존성 모듈의 적용에 있어 제약을 가지게 된다. 이러한 문제는 eject(ejection: 숨겨진 설정 파일 창고 대방출) 명령어를 통해 설정 파일을 추출 후 직접 관리하여 해결할 수 있으나, 이 경우 CRA의 모든 설정을 직접 유지보수하게 되면서 CRA의 장점인 one Build Dependency를 잃게 된다. (cra eject는 되돌릴 수 없다는 게 큰 마음..
Ryan's ZZaplin (짭플린) 개발기
요즘 일을 본격적으로 시작하면서, 하루하루 그동안 해왔던 공부에 비해 굉장히 밀도 높은 학습을 하게 되었다. 변명처럼 들리겠지만 그간 포스팅을 하지 못했던 이유도 과거의 내 미숙함이 덕지덕지 묻어있는 블로그를 마주할 용기가 없었기 때문이다. 하지만 반대로 생각해보면 내가 그만큼 성장하고 있다는 뜻이니 철면피를 깔고 오랜만에 새 포스팅을 쓴다. 웹 클라이언트 개발자로 일을 하면서 당연하지만 디자이너분들과 협업할 일이 참 많다. 특히 디자이너 분들이 제플린을 통해 제공해주는 가이드라인은, 나에게 많은 고민거리(컴포넌트 구조를 어떻게 짤 것인지)와 편함(사이즈 가이드라인이 되어있어 고민 할 필요가 없다)을 동시에 선사해주고 있다. 다만 아쉬운 점은 제플린에서는 요소 간 간격을 마우스 오버를 통해 쉽게 잴 수 ..
지난 1년의 회고록
목차 - 고민 - 흥미 - 시작 - 열심 - 결실 고민 작년 여름. 나는 1년 정도 일하던 쿠팡 사무직을 그만두고 그저 하염없이 실업 급여를 받으며 놀고 있었다. 나이는 어느덧 28살에 진로마저 불확실한 상태였지만, 다행히 독립 후 혼자 살면서 정서적으로 안정된 상태였다. 물론 노는 와중에도 계속 이렇게 살 수는 없다는 생각과 불안감이 있던 나날이었다. 아무것도 안 할 수는 없었기에, 남들이 한다는 공기업 준비도 하는 척 해보고, 코레일에서 사람을 많이 뽑는다는 이야기를 듣고선 코레일을 목표로 한 척 NCS준비도 해보고... 분명히 난 하고 싶은 일을 하면서 살아야 하는 사람인데, 하고 싶은 일을 찾을 수 없는 힘든 시기. 그런 시기였다. 다행히 나 자신에 대한 깊은 고민을 할 수 있는 시간과 여유가 있..
Ajax? Axios? fetch?
JS에서 비동기 http 통신을 위한 방법은 대표적으로 3개(Ajax, Axios, fetch)가 있다. 이 중 내가 실제로 사용해본건 Ajax와 fetch뿐인데, 문득 각 방법별로 장단점이 뭔지 궁금해서 이번 기회에 정리해두려 한다. Ajax Asysnchronous JavaScript And XML의 약자로, 자바스크립트에서 백그라운드 HTTP통신이 가능하게 만든다. http통신의 response와 request를 자바스크립트에서 비동기적으로 다룰 수 있다. 사실 뜻 자체가 비동기 자바스크립트라서, 근래엔 비동기 통신을 하는 자바스크립트 자체를 Ajax로 통칭하기도 한다. 새로고침이 필요 없다는 점 때문에 Google Gmail, Map에서 사용되어 주목받기 시작했다. Ajax라 함은 보통의 상황에서..
JS Callback / Promise
/* In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects. */ JS에서 함수는 객체로 취급된다. 이유는 객체가 가지고 있는 속성, 기능을 모두 가질 수 있기 때문이다. Callback이란 Observer 디자인 패턴에서 나온 개념으로, 객체의 상태변화(이벤트) 발생시에 이 사실을 함수로 전달하는 데 사용되었다. 알게 모르게 이미 많이 사용했..
JS 함수형 언어?
JS는 함수형 프로그래밍 언어처럼 주로 사용된다. 물론 ES6부터 js class등이 도입되는 등 객체지향 언어의 장점을 취하려는 여러 변화들이 있었고 앞으로도 있을테지만, 기본적으로는 그렇다는 말이다. 여태까지 내가 접했던 java나 python은 모든 것이 객체를 기반으로 동작한다. js는 완벽한 함수형 프로그래밍 언어는 아니지만 함수형 프로그래밍 언어 스타일을 사용하고 있다. 함수형 프로그래밍의 원칙은 다음과 같다. - 입출력이 순수해야 함 (순수함수) - 부작용(부산물)이 없어야 함 - 함수와 데이터를 중점으로 생각 입출력이 순수하다는 것은, 파라미터로 하나 이상의 인자(파라미터)를 받고, 받은 인자를 처리해서 반드시 결과를 return해야 한다는 뜻이다. 받은 인자를 제외한 다른 변수는 사용하지..
Restful API에 대한 정리
REST API와 RESTful API 1. REST란? Representational State Transfe라는 용어의 약자이다. 자원을 URI로 표시하고 해당 자원의 상태를 주고 받는 것을 의미한다. REST의 구성 요소는 자원(Resource): URI 행위(Verb): HTTP METHOD 표현(Representat velog.io 1. REST란? Representational State Transfe라는 용어의 약자이다. 자원을 URI로 표시하고 해당 자원의 상태를 주고 받는 것을 의미한다. REST의 구성 요소는 자원(Resource): URI 행위(Verb): HTTP METHOD 표현(Representations) 로 이루어져 있다. 즉 Rest는 URI를 통해 자원을 표시하고, HTT..
스크롤에 따른 목차 하이라이트 만들기
프로젝트 내에서 웹 프론트엔드 포지션을 맡고, 처음 한 과제 중 하나는 howto 페이지였다. 과제 목표는 inteliJ 페이지처럼 만드는 것. IntelliJ IDEA overview - Help | IntelliJ IDEA IntelliJ IDEA overview IntelliJ IDEA is an Integrated Development Environment (IDE) for JVM languages designed to maximize developer productivity. It does the routine and repetitive tasks for you by providing clever code completion, static code analysis, a www.jetbrains...
Ubuntu 20.04 LTS 홈 서버 구축기 (3)
저번 편에서 했던 django, react 설치 외에도, 내 편의를 위해 세팅한 다른 소소한 기능들이 많다. 이번 편에서는 그 소소한 기능들에 대해 알아보자. 홈서버를 통해 이루고자 하는 내 목표는 다음과 같았다. 1. 포트폴리오 사이트 겸 그 자체로 포트폴리오인 웹페이지 만들기 React 2. 뉴스 정보 크롤링해서 매일 볼 수 있는 Django API 3. NAS처럼 쓸 수 있는 파일 서버 owncloud 4. 토렌트, 마그넷 던져주면 받아준다는 transmission 5. 어디서나 영화, 드라마 볼 수 있는 plex media server -> 라이브러리 transmission 폴더랑 연동시켜서 받자마자 보기 위에 두 개는 설치를 끝내고 진행중인 상황이고, 나머지 녀석들을 설치해보았다. ownclou..