당 떨어질 땐 초코딩

구조 UserController.java package com.project.controller; import java.util.List; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.RequestMapp..

DAO : 데이터 베이스 연동 Mapper : Query문 DTO : 모델 Service : 비즈니스 로직 Controller Views : JSP 구조 BoardController.java package com.project.controller; import java.util.List; import java.util.Map; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.ModelAttribute; i..

pom.xml - dependencies mysql mysql-connector-java 8.0.17 org.mybatis mybatis 3.4.1 org.mybatis mybatis-spring 1.3.0 org.bgee.log4jdbc-log4j2 log4jdbc-log4j2-jdbc4 1.16 org.springframework spring-jdbc ${org.springframework-version} org.springframework spring-test ${org.springframework-version} commons-dbcp commons-dbcp 1.4 root-context.xml - [localhost 및 주소] : 데이터베이스 주소 입력 - [shema] : 데이터베이스 안에서 ..

IoC : 스프링에서 객체를 생성하고 조립하는 컨테이너 - 모든 객체가 있고, 모든 기능들이 있는 곳 - Spring 객체가 담겨져 있는 그릇 Bean : 컨테이너를 통해 생성된 객체 - java에서의 객채와 같은 의미

VMWARE 15 포트 포워딩 (Port Forwarding) - 리눅스 : CentOS 7 1. VMWARE 실행 2. 본인이 설치한 CentOS 가상 머신 목록에서 [마우스 오른쪽] 클릭 -> [Settings...] 클릭 3. Network Adapter -> [Custom] 클릭 4. [VMnet8 (NAT)] 선택 -> [OK] 5. [제어판] -> [네트워크 및 인터넷] -> [네트워크 및 공유 센터] -> [어댑터 설정 변경] 6. [VMware Network Adapter VMnet8] -> [마우스 오른쪽] 클릭 -> 속성 7. [인터넷 프로토콜 버전 4(TCP/IPv4)] 선택 -> [속성] 클릭 8. 본인이 CentOS에서 할당받은 IP를 입력, 서브넷 마스크는 아래와 같이 입력 ->..

Hooks : 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 하게 해 줌 - useState : 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줌 - useEffect : 리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 수행하도록 설정할 수 있게 해줌 -> componentDidMount + componentDidUpdate - useConext : 함수형 컴포넌트에서 Context를 보다 쉽게 사용 가능 - useReducer : useState보다 컴포넌트에서 더 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트 할 때 사용 - useMemo : 함수형 컴포넌트 내부에서 발행하는 연산을 최적화 할 수 있게 해줌 - useCallback : 이벤트 핸들러 함수를 필요할 때만..

Mocking docs Jest · 🃏 Delightful JavaScript Testing 🃏 Delightful JavaScript Testing jestjs.io Mocking : 단위 테스트를 작성할 때, 해당 코드가 의존하는 부분을 가짜로 대체하는 기법 - 의존하는 부분을 테스트 코드에서 직접 생성하기가 부담스럽거나 어려운 경우에 많이 사용 mock function(가짜 함수) 사용하는 경우 1. test 코드에서 사용하기 위해 2. 모듈 종속성(dependency)을 재정의 하기 위해 jest.fn( ) : mock function(가짜 함수) 생성 const setup = (props = {}) => { const utils = render(); const { getByText, getByP..

Snapshot Docs Jest · 🃏 Delightful JavaScript Testing 🃏 Delightful JavaScript Testing jestjs.io Snapshot Test : UI가 의도치 않게 변하는것을 막기위해 사용할 때 유용함 - 두개의 snapshot을 비교를 하는데, 맞지 않으면 Fail이 뜨기 때문에 의도치 않은 변경이 일어나는 것을 방지함 React에서의 활용 - 전체 App을 구성하는 UI를 랜더링 하는 대신, 테스트 랜더링을 통해 React tree에 대한 일련의 값들을 빨리 생성 가능 - react-test.js import React from 'react'; import Link from '../Link.react'; import renderer from 're..

TDD (Test Driven Development) : 테스트 주도 개발 - 기술이 아니라 습관 - 모든 개발 과정을 테스트 중심으로 진행해나가는 습관 순서 1. 테스트 작성 - 만들려는 대상이 무엇인지 선언하고, 그 대상이 테스트에서 어떻게 작동해야 할지 기술 2. 테스트를 실행하되, 실패한다 3. 테스트를 통과하기 위해 필요한 최소한의 코드를 작성하여 성공한다 - 테스트 범위를 벗어나는 코드는 추가하지 않을것 4. 코드와 테스트를 함께 리팩토링 작업을 한다 - 리팩토링 작업 : 예외처리, 중복제거, 기능 추가 등 JavaScript에서 실행 Jest : 페이스북에서 사용되는 리액트 애플리케이션을 포함한 모든 자바스크립트 테스트 도구 - npm init 후 사용 npm install jest --sa..

package.json : Node.js를 서버로 실행하기 위해서 필요한 패키지 정보 - 설치 npm init nodemon : 자동으로 서버를 재시작 시켜주는 역할을 함 - 아니면 [ctrl] + [shift] + F5 를 수정 할때 마다 눌러줘야함 npm install nodemon -g --save - nodemon 사용 하려면 내가 사용하는 파일을 지정해주면 됨 nodemon [파일이름.js] Koa : Node.js 환경에서 웹 서버를 구축할 때 사용하는 웹 프레임워크 npm install koa --save - koa 사용 및 연결 확인 -> 4000번 포트로 열어서 사용 const Koa = require('koa'); const app = new Koa(); app.use((ctx) => ..

Router (경로기) 설치 npm install react-router-dom npm install query-string BrowserRouter : 라우터 장비로 사용하겠다고 선언 - 'App를 라우터로 사용한다' import React, { Component } from 'react'; import { BrowserRouter } from 'react-router-dom'; class Root extends Component { render() { return ( ); } }; const App = () => { return ( 안녕 난 App야 ); }; export default Root; Route : 경로 매핑 - exact : 정확하게 주소가 매칭이 될 때 컴포넌트를 가져오게 함 - :p..

전개 연산자 : ... 키워드를 사용해서 값을 중간에 삽입 배열 // 배열 let ar = [10, 20, 30, 40] // let br =[50, ar, 60] // 배열 안에 ar 배열을 넣는 꼴 let br = [50, ...ar ,60] // 배열 안에 ar 값을 넣음 객체 // 객체 const obj = { a: 10, b: 20, c: 30, } const obj2 = { d: 40, ...obj, // d와 e사이에 obj 값을 넣음 e: 50, } console.log(obj2) 함수 // 함수 function f1() { return { a: 10, b: 20, } } const obj3 = { c: 30, d: 40, ...f1() // 함수에서 return 된게 값이 되버림 } co..

기본 함수 형식 // 함수 형식 1 - 선언과 사용을 순서 관계 없이 사용 가능 : 호이스팅 가능 f1(); // 함수 호출 function f1() { console.log("f1"); } // 함수 형식 2 - 호이스팅 불가 // 함수는 코드 자체가 수정 불가이기 때문에 함수이름 앞에는 const를 사용 const f2 = function () { console.log("f2"); } f2(); // 함수 호출 // 함수 형식 3 - 살찐 애로우 or 애로우 함수 const f3 = () => { console.log("f3"); } f3(); // 함수 호출 함수 모양 4개 // 인수 전달 없고, return값 없음 function f1() { console.log("f1"); } f1(); // ..

Ruby : 동적 객체 지향 스크럽트 프로그래밍 언어 장점 - 순수 객체 지향 언어 -> 정수나 문자열 등을 포함한 데이터 형식 등 모든 것이 객체 - 구문은 ALGOL계를 계승하면서 가독성 중시 - 이식성이 매우 높음 ByeBug : 디버거 - 장점 : 스택 프레임을 위한 중단 첨 처리 및 바인등을 제공하며 명령 행 인터페이스를 사용하기 쉬움 Framework - Ruby on Rails : Ruby로 작성된 MVC 패턴을 이용하는 오픈소스 웹 프레임워크 - 모델, 뷰, 컨트롤러의 템플릿 생성 및 테스트 등 자동화하는 툴, 테스트를 위한 웹서버 등 포함 - Sinatra : Ruby로 작성된 자유-오픈소스 소프트웨어 웹 어플리케이션 라이브리러이자 도메인 특화 언어 - 크기가 작고 유연 - 다른 프레임워..

HTML : Hyper Text Markup Language - HyperText : 웹페이지를 이동할 수 있도록 만들어진 문장 CSS : Cascading Style Sheet - HTML 문서의 모든 요소에 대해 스타일을 적용할 수 있는 표준 규격 - 디자인을 목적으로 쓰임 - 편리성, 일관성 제공 Java Script : 객체 기반의 스크립트 언어 - 장점 : DOM 탐색 등 문법이 간단하고, 여러 브라우저에서 같은 결과물을 내줌 - 단점 : 새로운 API를 배워야하는 부담감이 있음 jQuery : 자바스크립트 라이브러리 - 웹 사이트에서 자바스크립트를 사용하는 것이 훨씬 쉬워지도록 하는 것 Java Script ES6 : ECMAScript version6 Type Script : 자바스크립트의 ..

Linked List :

모듈 : 특정한 기능을 하는 함수나 변수들의 집합 - 자바스크립트에서 코드를 재사용하기 위해 함수로 만드는 것과 비슷 - var.js const odd = '홀수'; const even = '짝수'; module.exports = { //exports : 내보는 키워드 -> 다른파일에서 부를 수 있음 odd, even, }; - func.js const { odd, even } = require('./var'); //require : var.js에 있는 값을 불러옴 function checkOddOrEven(num){ if(num % 2) { return odd; } return even; } module.exports = checkOddOrEven; - index,js const {odd, even} ..

Read : 입력한 코드를 읽고 Eval : 해석하고 Print : 결과물을 반환하고 Loop : 종료할 때까지 반복 콘솔에서 REPL로 들아가는 명령어가 node이고, 노드를 통해 파일을 실행하는 명령어는 node [자바스크립트 경로] node app.js node app // .js 생략 가능

프라미스 - 콜백의 단점을 해결

콜백 : 나중에 호출할 함수 - 가장 오래된 비동기적 매커니즘 - 일반적으로 다른 함수에 넘기거나 객체의 프로퍼티로 사용 - 드물게는 배열에 넣어서 쓰는 경우도 있음 - 보통 익명 함수로 사용 내장 함수 - setTimeout( ) : 콜백의 실행을 지정된 밀리초만큼 지연하는 내장 함수 - 한번만 실행하고 멈춤 - setInterval( ) : 콜백을 정해진 주기마다 호출 - clearInterval( ) : setInterval( )을 사용을 멈출 때 호출 오류 우선 콜백 : 콜백과 관련된 에러를 처리할 방법의 표준 - 콜백의 첫 번째 매개변수에 에러 객체를 씀 const fs = require('fs'); const fname = 'may_or_may_not_exist.txt'; fs.readFile..

싱글 스레드 : 주어진 작업을 혼자서 처리 - 자바스크립트와 노드는 싱글 스레드이기 때문에 한번에 한가지 일만 처기 하능함 -> 논블로킹이 중요! 노드 프로세스도 내부적으로는 스레드를 여러개 갖고 있지만, 우리가 직접 제어할 수 있는 스레드는 하나뿐이기 때문에 싱글 스레드라고 부름 프로세스 : 운영체제에서 할당하는 작업의 단위 - 노드나 인터넷 브라우저 같은 프로그램은 개별 프로세스 - 프로세스 간에는 메모리 등의 자원을 공유하지 않음 스레드 : 프로세스 내에서 실행되는 흐름 단위 - 하나의 프로세스는 스레드를 여러개 가질 수 있음 - 스레드들은 부모 프로세스의 자원을 공유 -> 같은 메모리에 접근 가능 멀티 프로세스 : 스레드를 늘리는 대신, 프로세스 자체를 복사해서 여러 작업을 동시에 처리 - 노드가..

논블로킹 방식 : 이전 작업이 완료될 때까지 멈추지 않고 다음 작업을 수행함 - 오래 걸리는 함수를 백그라운드로 보내서 다음 코드가 먼저 실행하게 하고, 그 함수가 다시 태스크 큐를 거쳐 호출 스택으로 올라오기를 기다리는 방식 -> 태스크 큐로 보내서 실행 순서를 달라지게 함

이벤트 기반 : 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식 - 이벤트 : 클릭, 네트워크 요청 등 - 콜백 함수 : 무엇을 할지 미리 등록해 놓은 함수 -> 이벤트 리스너에 콜백 함수를 등록한다 : 특정 이벤트가 발생할 때 무엇을 할지 미리 등록한다는 의미 ex) 버튼을 누르면 경고 창을 띄운다고 했을 때, 콜백 함수는 클릭 이벤트 리스너에 경고 창을 띄우는 행위 노드는 이벤트 기반 방식으로 동작함으로 이벤트가 발생하면 이벤트 리스너에 등록해둔 콜백함수를 호출하고 발생한 이벤트가 없거나 발생했던 이벤트를 다 처리하면 노드는 다음 이벤트가 발생할 때 까지 대기한다 function run() { console.log("3초 후 실행"); } console.log("시작"); setTimeout(..

Node.js Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 서버 : 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 또는 프로그램 클라이언트 : 요청을 보내는 주체 - 브라우저, 데스크톱 프로그램, 모바일 앱, 다른 서버 요청을 보내는 서버 등등 " 비동기 이벤트 주도 JavaScript 런타임으로써 Node는 확장성 있는 네트워크 애플리케이션을 만들 수 있도록 설계되었습니다. " 런타임이란, 특정 언어로 만든 프로그램들을 실행할 수 있는 환경 Node.js란, 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있게 해주는 것 - libuv 라이브러리 : 이벤트 기반, 논블로킹 ..