분류 전체보기

React로 준비? 좀 하고 개발하기 - 1 : React Hooks

React로 준비? 좀 하고 개발하기 - 1 React Hooks Hooks are functions that let you “hook into” React state and lifecycle features from function components 공식문서에 의한 hooks에 대한 정의입니다. *함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)"할 수 있게 해주는 함수로 번역된다. 생명주기함수와 hooks를 둘다 써본 지금에서야 저 정의에서 와닿는 부분은, hooks로 생명주기 함수들을 재정의을 해뒀는데, 정의를 못하는 것도 있고, 어떤건 좀 더 디테일하게 세부적으로 해둘 수 있는 것도 존재한다는 정도이다. 사실 처음 hooks를..

React로 준비? 좀 하고 개발하기 - 0 : React Lifecycle

React로 준비? 좀 하고 개발하기 - 0 React Lifecycle 일전에 회사에서 React로 일단 머리를 박으면서 개발을 해봤는데 생각보다 고려해야할 부분이 많다고 느꼈습니다. 주로 작업하던 영역이 core단은 vanilla js, view단은 jquery로 작업하다보니 최신? 프레임워크/라이브러리에 익숙해지는데 제법 많은 시간이 걸린것 같습니다. 확실히 js는 라이브러리/프레임워크를 도입했을 때 장점이 많은 것 같지만 제어의 역전에 대해서는 아무래도 조금 거부감이 드는것도 사실입니다. 서론은 여기까지하고, 오늘은 React로 개발을 하면서 먼저 알아두면 좋을 것에 대해 기술해보려 합니다. LifeCycle React에서의 lifeCycle은 크게 3개 Mounting / Updating / `..

0. Electron - 기본

Before writing Electron을 현업에서 사용한지가 2년이 다 되가는 것 같습니다. 처음 사용하였을 때는 크로스플랫폼을 지원해서 아주 강력하고 좋은 프레임워크라고 생각이 들었습니다. (쓰면 쓸수록 제약도 많고 무거워서 역시 native가 짱이다라는 생각이 들기도 합니다.) 그래도 가벼운 프로그램을 만드는데 사용한다면 오직 js만 다루어서 응용프로그램을 만들 수 있게 해주는 꽤나 쓸만한 프레임워크입니다. 약 2년간 사용+공부를 하면서 뭘 공부하면 좋은지에 대해 써볼까합니다. What is Electron? Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding Ch..

1. Nuxt.js - 설치하기

Nuxt.js - 설치하기 1. Mac 에 설치 공식문서에 따르면 크게 두가지 방식이 있는 것으로 보입니다. create-nuxt-app을 이용하여 project 구조를 미리 잡아 놓고 시작. package.json 부터 완전 밑바닥 부터 세팅. 본인은 1번 방식으로 구성을 시작해볼까 합니다. 1번 방식 경우 webpack, webpack-dev-server, lint, test tool, git init, CI(github), UI framework 등 여러가지를 미리 세팅해줘서 유용할 듯 합니다. 1-1: Create Project Command yarn을 사용하셔도 좋지만 전 npm으로 사용하였습니다 npm init nuxt-app@latest 부분에 원하시는 프로젝트 이름을 기입하셔서 원하시는 ..

0. Nuxt.js 란?

Nuxt.js란 1. 두두둥 등장 우선 Nuxt.js project의 첫번째 커밋은 무려 2016년도 10월입니다. (비록 0.x대 버전이긴 함) 1.0.0 alpha 버전은 2017년 5월 22일부터 시작된 것으로 보이고 정식으로 1.0.0이 release된 시점은 2018년 1월 9일입니다. 생각보다 정식 출시된 시점은 오래되지 않은 것 같으며.. 3년이나 지난 지금에서야 포스팅을 하고 있는 저는 반성합니다.. (중간중간 몇번 써보긴함) 3년동안 2.14.8 버전까지 올라왔으며, major 버전까지 업데이트 된 걸로 보면 생각보다 꽤나 많은 사용자들이 사용하는 듯 합니다. 제 개인적인 추측이지만 Next.js의 1.0.0 release 출시일이 2016년 10월 26일인걸로 봤을 때, Next.js ..

React로 무작정 개발하기 - 2

React로 무작정 개발하기 - 2 리스트 렌더링 import React, { Component } from 'react'; class Test extends Component { static defaultProps = { test: 'test' } listRenderingTest() { let arr = [0,1,2,3,4,5,6,7,8,9] let listTemplate = arr.map((item) => ( { item } )) return ( { listTemplate } ) } render() { return ( { this.listRenderingTest() }; ); } } export default Test;코드를 먼저 보여주는게 훨씬 이해하기가 빠를 것 같습니..