Coding Note

컬렉션 프레임워크(collection framework) 컬렉션 프레임워크(collection framework)란 다수의 데이터를 쉽고 효과적으로 처리할 수 있는 표준화된 방법을 제공하는 클래스의 집합이다. 즉, 데이터를 저장하는 자료 구조와 데이터를 처리하는 알고리즘을 구조화하여 클래스로 구현해 놓은 것! +) Iterable : Collection 인터페이스의 최상위 인터페이스 - 대량의 데이터를 쉽고 효과적으로 처리할 수 있는 표준화된 방법을 제공하는 클래스 집합 - 데이터를 처리하는 알고리즘과 데이터를 저장하는 자료구조를 구조화하여 클래스로 구현한 것 - 데이터 자료 구조에 따라 List, Set, Map으로 나누어짐 1. List - 순서가 있는 데이터의 집합으로, 데이터의 중복을 허용한다. ..

MVC (ModelViewController) 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴 Spring MVC 패턴 MVC 패턴은 비즈니스 로직과 화면을 분리해서 작업하여 협업, 재사용, 수정에 유리하다. MVC Model - 데이터와 비즈니스 로직 관리 - 사용자가 사용할 모든 데이터를 가공하여 가지고 있는 컴포넌트 View - 레이아웃과 화면 처리 - 애플리케이션의 데이터를 보여주는 화면 Controller - 요청을 모델과 뷰 단으로 제어, 연결 - Model과 View를 연결해주는 역할 - Controller > Service > DAO > DB MVC 흐름 1. 사용자가 데이터를 요청한다. 2. 서블릿을 통해 데이터를 Controller로 보낸다. ..

리액트는 빌드 - 배포 과정 진행됨! Router 5 버전보다 6 버전 사용 -> 호환성, 용량이 적어 비용이 더 적게 든다. 라우터는 데이터 패킷을 전송하는 네트워크 장치로 SPA 기능 실행함. SPA(Single Page Application) - 하나의 페이지에서 일정 부분을 렌더링, 페이지 변화 없이 내부 동작 진행 명령어 > 1. create-react-app router -- 라우터 생성 2. npm i react-router -- native와 앱을 합쳐서 사용하는 명령어 3. npm i react-router-dom -- 웹 전용 6 버전 변경사항 > 1. Router -> BrowerRouter - BrowerRouter : 웹 브라우저에서 React Router를 실행하는데 권장되는 인..

React란? 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 서버는 node.js jsx 문법 사용한다. - 보간법 사용 - 백틱 사용 ` ` npm 간단한 명령어 정리 npm install -g create-react-app : react 프로젝트 생성 create-react-app(리액트 앱 환경) template : 리액트 폴더에 이동 후 템플릿 설치 npm i : 노드 모듈 생성 (node_modules) npm start : 서버 시작 ctlr + c : 서버 종료 npm run build : 빌드 실행, 배포 직전에 하는 게 좋음! npm install -g server : 빌드한 거로 서버 실행할 거니? 서버 실행 server -s build : build를 루트로 서버 실행 빌드 ..

this 접근 유형 call - 첫 번째 오는 변수를 thisfh 지정할 수 있음 apply - 배열로 데이터를 받음 Hoisting(호이스팅) 함수, 변수명을 제일 먼저 읽어 드리는 것 var, let, const 모두 호이스팅 됨 즉, 코드가 실행되기 전에 처리되고 해당 스코프가 상단으로 올라간다. var 정의되기 전에 접근 가능, undefined 값을 가지게 된다. let 변수가 선언될 때까지 일시적으로 TDZ(비활성 구역)에 있게 된다. 선언되기 전에 사용 시 error 발생 TDZ(Temporal Dead Zone) 비활성 구역 let, const => 에러 방지 화살표 함수(=>) ES6에서 나온 함수 화살표 함수_매개변수 0개 빈 괄호 반드시 표기해야 함. // () => {} 1개 () ..

4월 초 처음으로 AWS 요금이 부과되었고 걱정되는 마음에 aws-budgets 설정을 했다. AWS 요금 청구 - 과금 방지 알림(Budgets) 설정 AWS 스터디를 하며 사용했던 EC2 요금이 청구되었다. 비록 1,400원 정도에 작은 돈이지만 혹 잘못하면 과금이 부과될 수 있다는 글을 보고 미리 예방하고자 한다! 1. 청구서 확인 어떤 서비스에서 요 coding-day.tistory.com 근데 설정을 하면 뭐하나 메일 확인 안 한 나.. 반성해라 5월 초 무려 전보다 2배 이상 금액인 9.480원이 부과되었다. 영수증 확인 결과 Ep 관련 EC2, RDS, 인스턴스 등 관련 데이터를 삭제했다. 혹시 몰라 구글링도 해보았으나 불안한 것 똑같았다. 확실하게 하기 위해 AWS에 문의했다. (aws -..

JS JavaScript, 객체 기반의 스크립트 언어 .js - JavaScript 기반 - 비동기 통신(Ajax) - 순서 제어, 시간 제어 등 ex) 실시간 검색어 기능에 사용됨 BOM(Browser Object Model) 브라우저 객체 모델 웹 페이지의 내용을 제외한 브라우저 창에 포함된 모든 객체 요소들을 의미함. DOM(Document Object Model) 문서 객체 구조 클라이언트가 볼 수 있는 화면 단 브라우저들은 사용자가 띄운 웹 문서를 그 구성과 내용에 맞게 객체화하여 각 요소 별로 구조화한다. 즉, html과 javascript의 인터페이스 역할 Bom VS Dom Bom은 브라우저 속성에 속하여 문서가 아닌 윈도우를 제어한다. DOM은 문서, 클라우저에 웹문서에 대한 제어와 변경..

Flexbox flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능 태그에 적용하는 flexbox 기능 - display : flex; or inline-flex; - flex-direction : 방향 설정 - flex basis: auto; 부모 영역을 기준으로 잡아 아이템 공간을 차지한다. - flex-wrap : 항목이 여러 줄에 나열되도록 - flex flow(flex-direction + flex-wrap) (ex. flex-flow: row wrap;) - justify-content 행(가로)을 정렬하는 방식 - align content flex 컨테이너에 지정하는 속성이며, 교차축을 따라 flex 항목 열(세로)을 정렬하는 방식을 지정한다. 태그에 적용하는 flexbox..