React[리액트]- Router 기본 예제 설명 ① 리액트(React)에서는 URL 값에 따른 뷰(View)를 보여주는 Router를 제공한다. ② 렌더링(Rendering)을 서버쪽에서 담당하는 것은 자원 소모가 있으므로, 뷰(View) 렌더링을 브라우저에서 담당 하는 것이다. ③ 즉, 브라우저에서 압축과 캐싱 기능을 활용하여 렌더링을 후 서버에서 필요한 데이터만 전달받아 보여준다. React Router + Redux 기본 구조 React Router + Redux 기반 어플리케이션의 일반적인 구조는 아래와 같다. 참고 하자. React 라우터(Router) 예제 코드 index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 Colored by Color Scripter cs sty..
React[리액트]- 생명주기(LifeCycle) 설명 ① 리액트(React)에서는 Props, State값이 변화 될 때 컴포넌트(Component)에 많은 변화가 일어난다. ② 컴포넌트(Component) 생성, 업데이트, 제거 될 때 일어난다. ③ 리액트(React) 에서는 DOM 혹은 페이지에 올라갈 때를 마운트(Mount), 그 반대는 언마운트(Unmount) 라고 정의한다. React Life Cycle React에서는 아래 그림과 같은 생명주기(LifeCycle)을 원칙으로 한다. React 생명주기(LifeCycle) 예제 코드 main.js 1 2 3 4 5 6 7 8 9 import React from 'react'; import ReactDOM from 'react-dom'; impo..
Spring Boot - 기본 프로젝트(Project) 생성 ① 이번 포스팅에서는 Spring Boot Gradle 기반 프로젝트 생성을 알아보자. ② Spring Boot 실행 및 포트(Port) 변경 부분도 정확하게 알아두도록 하자. 프로젝트 생성 Spring STS 실행 후 Spring Starter Project 선택 다음 화면에서 프로젝트 명 및 Type(Gradle 또는 Maven), Packaging, Version, Language 등을 선택 중요한 선택이다. AWS, RDBMS, NoSQL 등 외부 API를 간편하게 설정 할 수 있다. 현재 포스팅에서는 간단하게 테스트 할 예정이므로, Web 만 선택 후 Finish 한다. 생성 완료 된 프로젝트 구조 Spring Boot - 컨트롤러(C..
Spring STS - Eclipse IDE 설치 방법 ① STS - 이클립스(Eclipse) 기반 사용도가 높고 안정성이 검증된 플러그인이 합쳐진 IDE 이다. ② Gradle 및 Maven 기반 프로젝트를 매우 쉽고 빠르게 시작할 수 있다. 1. 다운로드 Download 클릭 후 본인 OS 환경에 맞는 버전(version)을 다운로드 한다. 2. 압축해제 압축 해제 시 에러가 발생하면 압축 파일 이름을 짧게 변경 후 해제한다. 3. 실행 STS.EXE 파일을 실행한다. 4. 작업 경로 설정(workspace) 프로젝트가 저장 될 폴더를 선택한다. 5. Gradle 다운 및 설치 (1).실행이 완료되면 Dashboard > Manage > IDE EXTENSIONS 를 클릭 (2).Gradle (STS..
Npm(node.js) - 모듈(module) 관리 (1). 설명 ① npm 모듈(module) 관리에서 중요한 설치, 업데이트, 삭제 방법을 설명한다. ② 설치 및 업데이트 명령어에 버전(version)을 명시하지 않으면, 최신버전으로 설치된다. ③ npm 대신에 모듈 설치 부분에서 빠른속도, 안정성이 검증된 yarn에 대해서는 다음 포스팅에 설명한다. npm install module_name #npm 모듈 설치(로컬 설치) npm install -g module_name #npm 모듈 설치(전역 설치) npm update module_name #npm 모듈 업데이트 npm uninstall module_name #npm 모듈 삭제 cs (2). 결과 화면
Npm(node.js) - 캐시(Cache) 삭제 (1). 설명 ① npm을 사용해서 여러 프로젝트 진행 중 모듈(module) 충돌 및 예기치 못한 에러가 발생한다. ② 여러 해결 방법이 있겠으나, 검색 결과 npm 캐시(cache) 클린(clean)을 추천하고 있다. ③ 간단한 명령어로 쉽게 해결 되는 경우가 있다. npm -v #npm 버전 확인 npm cache clean #npm 캐시 삭제 cs (2). 결과 화면
Django(장고) - Logging 설정 (1). Settings.py 설정 ① Django 디폴트(Default) 로그설정은 Apache 와는 달리 파일로 기록이 되지 않는다. ② 이외에도 더욱 디테일(Detail)한 설정은 공식 레퍼런스(링크)를 확인해서 사용하자. ③ 작업은 settings.py 파일에서 작업한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 LOGGING = { 'version': 1, 'disable_existing_loggers': False, 'handlers': { 'file': { 'level': 'DEBUG', 'class': 'logging.FileHandler', 'filename': 'debug.log', #저장 할 파일 이름 ..
Intellij - 단축키 PDF 다운로드 (1).기본 설명 * Intellij 공식 레퍼런스 단축키 PDF 파일
Intellij - Svn Checkout 에러 해결 방법 (1).기본 설명 * Intellij Svn 체크아웃(Checkout) 시도 중 에러(CreateProcess error=2)발생.
이클립스 - 최적화 설정 방법 (1).기본 설명 * 이클립스 실행 시 불 필요한 옵션을 비활성화 해서 좀 더 가볍게 실행하자.* 주로 노트북에서 실행 하므로 아래 방법을 통해서 성능 향상 체감을 느낄 수 있다. (2).실행 메모리 설정 이클립스 실행 폴더 -> eclipse.ini 파일 수정 여러 옵션이 있지만, 아래 2개만 건드려도 문제 없다. -Xms1024m, -Xmx1024m : 너무 메모리를 많이 할당해도 좋지 않다.(램 8G 기준) (3).소스코드 자동 폴딩 해제 Window > Java > Editor > Folding 소스 파일에서 블록 단위로 폴딩 되는 효과를 제거한다. (4).소스코드 자동 완성 기능 해제 Window > Java > Editor > Content Assist 해제 해도..
이클립스 - Tomcat 추가 오류 해결 방법 (1).기본 설명 * 이클립스 개발 시 서버 추가가 되지 않는 버그가 있다.
윈도우10 - 익스플로러(Explorer) 생성 레지스트리 다운 및 설치 (1). 기본 설명 * 윈도우10 설치 후 익스플로러 실행은 약간 불편한 감이 있다. * 아래 파일을 다운로드 하자. (2). 파일 다운 후 실행 윈도우10 32비트 : 일반 파일 실행 윈도우10 64비트 : x64 파일 실행 기본값 복원 파일 포함 (3).파일 실행 실행 후 아이콘 안 보일 경우 F5 키 눌러보세요. (4).실행 결과
Vue.js - 기본 CDN 설치 ① Vue.js는 최신 트렌드에 맞는 진보적인 프레임워크이다. ② 핵심 라이브러리에는 뷰 레이어에 초점을 맞춰어 코딩하면 된다. ③ 대규모 개발 프로젝트에서 Vue.js는 통합 관점에서 매우 편하다는 것을 알 수 있다. cs Vue.js 기초문법4 - 반복문 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 {{ todo.text }} var app4 = new Vue({ el: '#app', data: { todos: [ { text: 'JavaScript 배우기' }, { text: 'Vue 배우기' }, { text: 'React 배우기' } ] } }) cs 실행 화면 Vue.js 기초문법5 - 이벤트 핸들링1 1 2 3 ..
Vue.js - 기본 CDN 설치 ① Vue.js는 최신 트렌드에 맞는 진보적인 프레임워크이다. ② 핵심 라이브러리에는 뷰 레이어에 초점을 맞춰어 코딩하면 된다. ③ 대규모 개발 프로젝트에서 Vue.js는 통합 관점에서 매우 편하다는 것을 알 수 있다. cs Vue.js 기초문법1 - 선언적(정적) 렌더링1(Rendering) 1 2 3 4 5 6 7 8 9 10 11 12 {{ message }} var app = new Vue({ el: '#app', data: { message: '안녕하세요 Vue!' } }) cs 실행 화면 Vue.js 기초문법2 - 선언적(정적) 렌더링2(Rendering) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 마우스를 올리면 타이틀 메시지를 볼 수 있어요..
Vue.js - 설명 및 CDN 설치 방법 ① Vue.js는 React와 마찬가지로 가상 DOM 을 사용하고 핵심 라이브러리에 집중하고 있다.② 현재 Github 에서 4만 개가 넘는 Star를 획득해 React 와 Angular의 인기보다 높다.③ 대규모 개발 프로젝트에서는 CLI(npm) 설치 및 Webpack 빌드를 추천한다.④ 이번 포스팅에서는 간단하게 CDN 설치 방식을 설명하며, 다음 포스팅에 CLI 설치를 설명하기로 한다.⑤ 실제 프로젝트에서 사용해 본 결과 신선하고 가벼운 느낌으로 타 프레임워크 대체에 충분하다고 생각한다. cs Vue.js - Ajax (Fetch) 통신 예제 123456789101112131415161718192021222324252627282930313233343536..
