키다리 개발자

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 확인을 무한 반복하며 여러 가지 경우를 시도하며 시행착오를 많이 겪었던 경..

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를 지원하지 않는 브라우저는 항상 존재하거나, 브라우저마다 업데이트 주기 및 지원하는 기능이 ..

문서 객체 모델(DOM) 문서 객체 모델(DOM, Document Object Model)은 HTML 문서를 객체화한 것입니다. (인터페이스) 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. 이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현됩니다. Javascript에서 HTML을 가져오기 위해 만든것이 DOM이다. 그러므로 Javascript는 DOM을 이용하여 새로운 HTML / 기존의 HTML의 요소를 생성, 변경, 삭제를 할 수 있다. API (Application Programming InterFace) API = 다른 사람이 자신의 소스를 쉽게 사용할 수 있도록 함수를 만들어 놓은 것 HTML 요소와 관련된 작업을 도와주는..

node.js = Javascript 개발하기 쉽게 만들어주는 환경 npm = node package manager npm init -> npm 초기화 -> 프로젝트 생성 -> node project 생성 프로젝트 = package npm install 모듈 -> 온라인 상에서 다운로드 -> require로 다운로드 한 모듈 가져오기(vs code) (기본 명령어들은 하단에 설명) Git bash로 node.js 환경 구축 index.js 와 package.json 파일 생성 (visual studio code에서 확인) git bash 기본 명령어 ls 디렉터리 목록 조회 cat 파일 내용 조회 cd .. 상위 디렉터리 이동 cd 하위 디렉토리 이동 mkdir 디렉토리 폴더 생성 mk rm -r 디렉토..