어제보다 한 걸음 더

[Javascript] ES6 (ECMAScript 6) ES6에 새롭게 추가된 기능들 ES6에는 아래와 같이 새로운 기능들이 추가되었다. - arrows - classes - enhanced object literals - template strings - destructuring - default + rest + spread - let + const - iterators + for…of - generators - unicode - modules - module loaders - map + set + weakmap + weakset - proxies - symbols - subclassable built-ins - promises - math + number + string + array + objec..

[Git] Gitflow로 branch를 관리하자!! Git에 관련된 포스팅은 오랜만인 것 같다... 개인적으로 Git의 여러 개념, 명령어 정도는 알고 있기 때문에 사용하는 데는 무리가 없었다. 하지만 회사 또는 팀 프로젝트에서 협업하면서 git을 사용할 때, 무분별하게 생겨나는 branch들(이게 문제...) 그래서 branch를 효율적으로 관리하기 위한 규칙이나 정책들이 필요하다. 이에 대한 여러 방법 중 하나, 그것이 Gitflow!! 이것에 대해서 정리해보자. Gitflow 가 무엇인가? Vincent Driessen 이 제안한 git의 workflow 디자인에 기반한 브랜칭 모델이다. 좀 더 자세히 말하자면 Vincent는 master, develop, feature, release, hotf..

[Javascript] ES5 (ECMAScript 5) 자바스크립트를 접했다면 흔히 ES5, ES6, ECMA 어쩌고...에 대해서 한번 쯤은 들어봤을 것이다. 이번 포스팅부터는 이것들에 대해서 정리를 하고자 한다. ECMAScript란 무엇인가? 자바스크립트는 1995년에 Brendan Eich라는 사람이 발명했다고 한다. 그리고 1997년에 ECMA 표준이 되었다고 한다. ECMAScript는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다. 자바스크립트를 표준화하기 위해 만들어졌고 지금도 자바스크립트가 제일 잘 알려져 있지만, 액션스크립트, J스크립트 등 다른 것들도 포함된다고 한다. ES5 (ECMAScript 5) 그래서 계속해서 자바스크립트는 기..

VSCode에 ESLint & Prettier 적용 1. VSCode Extension 설치 ESLint 자바스크립트의 문법을 체크해주는 도구 Prettier Code Formatting 도구 (코드 정렬, 세미콜론 등) 2. 설정 커스터마이징 package.json ... "eslintConfig": { "extends": [ "airbnb", "prettier" ], "parser": "babel-eslint", "rules": { "react/jsx-filename-extension": 0, "import/no-named-as-default": 0, "import/no-named-as-default-member": 0, "import/no-unresolved": 0, "import/prefer-de..

참고로 제 프로젝트의 폴더 구조는 아래와 같습니다. 개념 위주로 포스팅을 하다보니, 생략한 부분이 어느정도 있습니다. 궁금한 점은 댓글 남겨주시면 답변 드리겠습니다^^ (광고도 한번씩 클릭해주시면 감사하겠습니다 ㅠㅠ ㅋㅋㅋㅋㅋ) redux는 정의된 Action과 Reducer에 의해 구독하고 있는 컴포넌트에 state를 전달하게 된다. 1) store/modules/ 폴더에 파일 생성 or 만드려는 reducer와 관련된 파일에 작성 2) action type, action creator, initial state, reducer 작성 import { createAction, handleActions } from 'redux-actions'; import { Map, fromJS } from 'immut..

참고로 제 프로젝트의 폴더 구조는 아래와 같습니다. 개념 위주로 포스팅을 하다보니, 생략한 부분이 어느정도 있습니다. 궁금한 점은 댓글 남겨주시면 답변 드리겠습니다^^ (광고도 한번씩 클릭해주시면 감사하겠습니다 ㅠㅠ ㅋㅋㅋㅋㅋ) 이전 포스팅에서 잠깐 언급하기도 했고, 보통 폴더 구조에도 containers 폴더와 components 폴더로 나눈 게 된다. 각각의 개념과 역할에 대해서 알아보자. Container(smart component) Smart component 또는 Container라고 불림 앱의 상태(Redux state)를 제어하는 역할 Redux의 store 접근은 오직 container를 통해서만 이루어진다. Component(dumb component) Dumb component 또는 ..

참고로 제 프로젝트의 폴더 구조는 아래와 같습니다. 개념 위주로 포스팅을 하다보니, 생략한 부분이 어느정도 있습니다. 궁금한 점은 댓글 남겨주시면 답변 드리겠습니다^^ (광고도 한번씩 클릭해주시면 감사하겠습니다 ㅠㅠ ㅋㅋㅋㅋㅋ) React의 실행순서는 Entry Point인 index.js → Root.js → App.js 순이다. 여기서 index.js 안에 바로 App 컴포넌트를 붙이지 않은 이유는 Router와 Redux를 Root.js에서 연동하기 위함이다. Entry Point인 index.js에 Root 컴포넌트가 렌더링된다고 했을 때, Root.js부터 App.js에 서브 컴포넌트들이 렌더링 되는 과정을 보자. Root.js import React from 'react'; import { B..

[React] Redux의 개념과 활용 1. Redux 개념 1) Redux의 필요성 리액트에서 상태를 더 효율적으로 관리하는 데 사용하는 상태 관리 라이브러리 위와 같이 컴포넌트가 구성되어있다고 가정하자. 만약, App 컴포넌트에서 데이터 상태(state)에 변화가 생겨서 state를 업데이트하면 App 컴포넌트가 리렌더링 되고, 리액트 특성상 하위 컴포넌트도 모두 리렌더링 된다. 그렇기 때문에 TodoInput만 업데이트하길 원해도 TodoList도 함께 리렌더링 되는데, 이런 경우는 TodoList 컴포넌트에 shouldComponentUpdate를 구현하는 등 방지 할 수 있는 방법이 있긴 하다. 하지만, 프로젝트가 더 복잡해진다면 이런 방법도 어려워질 것이고, 아래와 같은 비효율적인 면이 있다...

[Spring] Gradle을 위한 Groovy 문법 요약정리 Groovy Groovy 실행원리 그루비 소스는 컴파일하면 자바 클래스가 만들어진다. 이것을 실행하기 위해서는 groovy.jar와 asm.jar 라이브러리 파일이 필요하다. Groovy 문법 요약 변수 선언과 값 할당 동적 타입 바인딩 def a = 20 // 값을 할당할 때 a 변수의 타입이 결정됨 a = "문자열" // 다른 값을 할당하면 변수의 타입이 바뀜 b = "문자열" // 변수 선언 시 def를 생략해도 됨 정적 타입 바인딩 int a = 20 // 변수 a는 int로 데이터형이 고정됨 a = "문자열" //문자열 값을 할당하면 오류 발생 문자열과 자동 형변환 String a = "문자열" // 변수 a는 String으로 데이터..

[IntelliJ] Tomcat 실행 시, 콘솔 창 한글깨짐 문제 Error 인텔리J에서 Tomcat 실행 시, 아래와 같이 한글이 깨지는 상황이 발생한다. Error는 아니지만 찝찝해서 해결방법을 찾아보았다. 해결방법 C:\Program Files\JetBrains\IntelliJ IDEA 2019.1\bin\idea64.exe.vmoptions 파일에서 맨 아랫줄에 다음과 같이 추가해준다. -Dfile.encoding=UTF-8 Edit Configurations... 에서 VM options에도 추가해준다. 인텔리J를 껐다가 실행해서 Tomcat을 실행해본다.