키다리 개발자

상태 State 개념과 React Hooks를 소개하고, useState와 useEffect를 작성하는 방법을 알아보겠습니다. State React에서 핵심 개념 2가지 중 하나인 State 상태 개념은 컴포넌트 자체적으로 보유하고 있는 데이터입니다. 또 다른 하나인 props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식입니다. React Hooks Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 랜더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 다양한 작업을 할 수 있게 해 줍니다. React가 지원하는 함수 중 use로 시작하는 것으로 통칭한 명칭입니다. useState useEffect useSta..

2019년 한 해는 정말 행복하고 많은 경험과 고뇌하는 값 진 한 해였다. 커리어 전환을 위해 작년부터 Java로 Backend 프로그래밍을 배우던 도중 우연히 '노마드 코더(니콜라스)' 의 Frontend Web-developer road map 영상을 보고, 신선한 충격과 이게 내가 원하는 것이라 확신이 들어, 또 한 번의 새로운 목표가 생겨서 본격적으로 Frontend를 시작하게 되었다. 때마침 훌륭한 멘토분을 만나 도움을 많이 받았고, 차근차근 Html, Css, Javascript(ES6) 과정을 밟으며, 웹 개발을 시작하였으며 그 과정으로 느끼는 인내와 희열의 반복 무한 루프. 아마 개발자들은 대부분 공감할 거라 생각한다. Front-end를 시작한 이유 내가 Frontend를 시작한 이유는 ..

filter(value, index) filter 함수는 반환 값이 true인 대상만 필터링해서 새로운 배열로 반환한다. value = 배열 안의 요소 하나하나의 값 -> 여기서(사진)는 1, 2, 3, 4, 5 index = 순서 -> 이 데이터가 몇 번째 데이터인가? value 값에서 2에서 4까지 숫자만 남기고 새로운 배열을 반환하고 싶을때 새로운 배열 [ 2, 3, 4 ] 예시) 배열에서 Premium 요소가 true인 요소들만 필터링해서 가져오기 Premium 회원들만 필터링해서 출력할 수 있다. map(value, index) 모든 요소에 적용될 공통 form에 반환 값을 적용하여 새로운 배열을 반환한다. arr 배열 내 모든 숫자에 value + 5를 반환하여 새로운 배열인 [ 6, 7, 8..

저번에는 HTML과 Javascript로 계산기를 만들어보았으며(Javascript 메뉴에 글 기재함), 이번에는 React만을 이용하여 계산기를 만들어 보았습니다. 만든 방식과 원리는 저번과 비슷하며, 이번에는 React의 state를 이용한 것과 큰 차이가 없습니다. state는 자기 자신의 상태를 나타내 주는것으로, setState로 상태를 재설정해 줍니다. Html 구조 코드 vs React.js (state, props, map)코드 비교하기 바로 첫번째 소스코드는 React.js에서 state를 이용해 Html구조로 구성한 코드입니다. 보시다시피 위의 계산기 기능으로서는 전혀 문제없이 구현되었습니다. 하지만, component없이 한 번에 다 소스코드를 작성하였기에 코드가 길어지고, 엄청 많은..

한걸음 더 나아가기 위해 마찬가지로 매일 코딩 공부에 매진하였다. node.js로 나만의 웹 개발을 하며, 여러 시행착오를 겪었다. 11월에 달성한 목표 Node.js로 웹개발(ES6) Cycling 영어 회화(학원) Life Cycle Node.js로 나만의 웹 개발을 하기로 결정하였고, 컨셉을 생각을 해보다가 여행을 좋아하여 '여행' 웹을 만들어 보았다. HTML구조를 머릿속으로 미리 예측하여, createElement()로 element를 구성하였고 classList.add()로 클래스 네임을 지정하여 HTML의 기초가 정말 중요하다는 것을 다시 한번 깨닫게 되었다. 새로운 환경에서 작업을 하는 거라 코딩 후 Viewport 확인을 무한 반복하며 여러 가지 경우를 시도하며 시행착오를 많이 겪었던 경..

node.js 환경에서 Javascript를 이용하여 여행 웹을 만들어 보았습니다. 만들면서 쓰였던 코드 리뷰를 먼저 작성하고 실행 동영상은 글 마지막에 배치 하였습니다. 일단 node.js환경을 구축하여 json파일을 만듭니다. (트랜스파일러를 하기 위해 browserify를 사용하였습니다.) 터미널에서 npm run build 또는 npm run build2로 나누어서 실행시켰습니다. HTML을 만듭니다. browserify를 사용하면 bundle.js가 생성됩니다. 그래서 script 경로를 bundle.js로 해줍니다. 페이지는 main 화면과 클릭되면 들어가지는 detail page들로 나누었기때문에 build와 build2로 나눈것 입니다. require(); require("불러올 경로")로..

React는 JavaScript 라이브러리이며, 따라서 JavaScript 언어에 대한 기본적인 이해가 필요합니다. Facebook에서 개발한 컴포넌트(Components) 기반의 Javascript UI Library입니다. 싱글 페이지 애플리케이션(SPA)이나 모바일 애플리케이션을 개발할 때 사용할 수 있습니다. 하지만 React는 프론트엔드 라이브러리인 만큼 UI 이외의 라우트, 상태 관리 같은 기능들이 내장되어 있지 않습니다. Facebook에서 npm이 느려서 만든것. 굉장히 빠르다. 호환이 안 되는 모듈들이 있다. js, jsx 확장자를 많이 쓴다. jsx란? React용 Javascript js, jsx 파일 확장자를 가진 파일은 "무조건" (import React from 'react') ..

ECMA Script 1999년 ES3이 공개될 때, 여러 웹 브라우저들의 표준이 난립하는 상황이었다. 예를 들어, Internet Explorer에서는 작동하는 기능이 Firefox에서는 동작하지 않았기 때문에 어느 브라우저를 사용하던 원활하게 동작하는 Javascript를 확보하는 것이 큰 고민이었다. 2009년부터 ES5가 공개된 후로부터는 차차 개발되어, 각 브라우저 간 호환성을 확보하기 위해 ECMA Script 표준을 구현하기 시작했다. 2015년 ES2015 (ES6) 부터는 엄청나게 많은 문법과 기능이 추가되고 구동환경이 많아졌다. 하지만 빠르게 발전하는 언어로 인해 최신 버전의 Javascript를 지원하지 않는 브라우저는 항상 존재하거나, 브라우저마다 업데이트 주기 및 지원하는 기능이 ..