Programming
[React / Node.js] 유튜브 사이트 클론코딩 - 에러 해결, React, ES6 문법 알아보기
error 내용 Router.use() requires a middleware function but got a Object .... 동영상 강의 그대로 쓰다보니 화면에 나오지 않은 코드를 안적어서 생겼던 문제, 이 부분은 server(node) 쪽 router에다 video upload 를 저장하는 내용을 적었던 부분인데 module.exports = router; 동영상 강의 그대로 쓰다보니 화면에 나오지 않은 코드를 안적어서 생겼던 문제, (강사님이 미리 작성했던 모듈에서 복붙해오셨던거라 router를 export 해주는 부분이 안보였었다... ) Express.js server단의 controller 역할(url에 따른 모듈 매칭(route 이용))을 한다 app.use 또는 app.method ..
🔥자바스터디🔥 자바의 정석 CH13 쓰레드
13장. 쓰레드 -프로세스 & 쓰레드 프로세스 : 실행 중인 프로그램 프로세스 구성 : 필요한 데이터 & 메모리 등의 자원, 쓰레드 쓰레드 : 실제로 작업을 수행하는 것 ** 쓰레드가 둘 이상이면 멀티쓰레드 프로세스라고 한다. ex) 프로세스 = 공장 , 쓰레드 = 일꾼 이라고 생각하면 이해하기 쉽다. -멀티쓰레딩 장점 단점 - CPU사용률을 향상시킨다. - 자원을 보다 효율적으로 사용 가능하다. - 응답성이 향상된다. - 작업 분리 -> 코드가 간결해진다. - 자원을 공유하는 특성 존재 - 동기화(synchronization), 교착상태(deadlock) 같은 문제들을 고려하면서 프로그래밍 진행 -쓰레드의 구현 & 실행 - Thread클래스를 상속받는다. - Runnable인터페이스를 구현한다. ** ..
🔥자바스터디🔥 자바의 정석 CH12 지네릭스, 열거형, 어노테이션
1. 제네릭(Generic) 1.1 제네릭? 제네릭의 정의 - 제네릭(Generic)은 컴파일 시 타입을 체크 해 주는 기능이다. - 또는 타입을 파라미터화 해서 컴파일 시 구체적인 타입이 결정 되도록 하는 것이다. 제네릭의 장점 - 객체의 타입 안정성을 높인다. ※ "타입 안정성을 높인다"는 것은 의도하지 않은 타입의 객체가 저장되는 것을 막고, 저장된 객체를 꺼내올 때 원래의 타입과 다른 타입으로 잘못 형변환 되어 발생할 수 있는 오류를 줄여준다는 뜻이다. - 형 변환의 번거로움을 줄여준다. 1.2 제네릭 클래스의 선언 - 제네릭 클래스를 작성할 때, Object 타입 대신 타입 매개변수(E)를 선언해서 사용한다. ① 예를 들어, ArrayList 클래스는 다음과 같이 정의 되어 있었다. public..
[React / Node.js] react-router 리액트 라우터 알아보기
react-router 라우팅 : 다른 주소에 따라 다른 뷰를 보여주는 것 리액트에서 라우팅 기능을 제공하고 있지 않기때문에 직접 구현하여 사용해야한다. 그렇기 때문에 react-router 는 리액트를 사용함으로써 필수적이라 할 수 있다. - 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해준다. - 서버 사이드 렌더링을 도와준다. import { BrowserRouter } from "react-router-dom"; react-router-dom의 라우터는 와 두가지가 있다. 는 HTML5의 history API를 활용하여 UI를 업데이트하고, 는 URL의 hash를 활용한 라우터로 정적인(static)페이지에 적합하다. import { Route, Switch } from "react-route..
[인프런] 레츠기릿 자바스크립트 / 끝말잇기, 셀프체크 쿵쿵따 만들기
1번째 참가자 제시어 : 입력 대화창(prompt, alert, confirm) - 브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능 1) alert("hello") 사용자가 [확인]을 누르기 전까지 계속 떠있는 메세지창 ** 메시지가 있는 작은 창은 모달 창(modal window) 이라고 한다. '모달’이란 단어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미가 내포되어 있다. 2) result = prompt(title, [default]); 텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창 title : 사용자에게 보여줄 문자열 (ex prompt("참여할 인원은 몇 명인가요?")) default(선택값) : 입력 필드의 ..
🔥자바스터디🔥 자바의 정석 CH11 컬렉션프레임웍
1. 컬렉션프레임워크 1.1 컬렉션 프레임워크의 핵심 인터페이스 - Collection 인터페이스 컬렉션 클래스에 저장된 데이터를 읽고 추가하고 삭제하는 등 가장 기본적인 메소드들을 정의 - List 인터페이스 중복을 허용하면서 저장순서가 유지되는 컬렉션을 구현하는데 사용 - Set 인터페이스 중복을 허용하지않고 저장순서가 유지되는 컬렉션을 구현하는데 사용(HashSet, TreeSet 등) - Map 인터페이스 키와 값을 하나의 쌍으로 묶어서 저장하는 컬렉션을 구현 키는 중복될수 없지만 값을 중복을 허용한다. - Map.Entry 인터페이스 Map에 저장되는 key-value 쌍을 다루기 위해 내부적으로 Entry인터페이스를 정의했다. 1.2 ArrayList - Object 배열을 이용해서 데이터의 ..
🔥자바스터디🔥 자바의 정석 CH10 날짜와 시간 형식화
1. 날짜와 시간 1.1 Calendar 와 Date Calendar와 GregorianCalendar - Calendar는 추상 클래스이며, 이를 상속받아 구현한 클래스가 GregorianCalendar(태국 외 모든 국가), BuddihistCalendar(태국) - .getInstance() 를 통해 완성된 객체를 반환하여 사용하거나, (static 메소드) 상속받아 구현된 GregorianCalendar를 이용해서 인스턴스를 반환하여 사용한다. //1. Calendar를 Date로 변환 Calendar cal = Calendar.getInstance(); Data d = new Date(cal.getTimeInMillis()); //Date(long date) //2. Date를 Calendar로..
[React / Node.js] 영화사이트 클론코딩 - 에러 해결, React, ES6 문법 알아보기
기본적인 BoilerPlate는 강사님 github에서 다운로드 받아서 이용했다. 루트 디렉토리 안에 server, client로 폴더가 구분되어있고 server의 package.json은 루트 디렉토리, client의 package.json은 client 폴더 하위에 만들어져 각각의 경로에서 npm install하여 모듈을 설치해준다. server / config 개발환경 설정에 따라 운영환경인지, 개발환경인지를 선택하여 따로 DB가 관리된다. process.env : node.js가 제공하는 환경설정 관련 property이다. npm run dev "scripts": { "start": "node server/index.js", "backend": "nodemon server/index.js", "f..
[인프런] 모던 자바스크립트(javascript) 개발을 위한 ES6 강좌 / 미니프로젝트
기능 ) 1. "코드스쿼드 블로그" 버튼 클릭시 포스팅 목록 ajax로 가져온다 2. 가져온 데이터 카드형식으로 뿌려준다. (제목 - 링크 추가) 3. 찜하기 클릭하면 내 찜 목록에 제목만 리스팅한다. 4. 찜하기 버튼 클릭시 취소로 토글된다 webpack / webpack-cli 설치 - 모듈 번들화 작업을 위해 webpack을 사용했다. - webpack.config.js 파일로 webpack 번들화 작업시 환경설정을 해준다. 1) Node.js에서 path에 대한 경로 값을 가져와서 저장을 한다. 2) 환경설정을 object 타입으로 exports 한다. - entry : budling할 파일의 정보(budling 시작시 기준 파일로, 해당 파일을 기준으로 DI를 확인하고 번들링한다.) - outp..
[인프런] 모던 자바스크립트(javascript) 개발을 위한 ES6 강좌 / 실습예제 2 - Destructuring 과 Set 을 활용한 로또 번호 생성기
문제 ) 다음 조건을 이용하여 Lotto 번호 추출기 만들기 1. 유일한 값을 추출하는 과정에서 Set을 사용한다. 2. getRandomNuber 함수에 변수를 전달하는 과정에서 destructuring을 사용한다. const SETTING = { name :"LUCKY LOTTO!", count : 6, maxNumber : 45 } function getRandomNumber(maxNumber){ //랜덤한 유일한 숫자값을 추출 let random = (Math.floor(Math.random() * maxNumber)+1); return random; } const {maxNumber, count} = SETTING; let setNumber = new Set(); setNumber.clear()..
🔥자바스터디🔥 자바의 정석 CH9 java.lang패키지와 유용한 클래스
1. java.lang패키지 1.1 Object클래스 equals(Object obj) - 매개변수로 객체의 참조변수를 받아서 비교하여 그 결과를 boolean값으로 알려준다. - 주소값으로 비교한다. 값만으로 비교하기 위해서는 오버라이딩하여 재정의하면된다. hashCode() - 해싱기법에 사용되는 해시함수를 구현한 것이다. (다량의 데이터를 저장하고 검색하는데 유용) - 해시함수는 찾고자하는 값을 입력하면 그 값이 저장된 위치를 알려주는 해시코드를 반환한다. toString() - 인스턴스 변수에 저장된 값을 문자열로 표현한다. clone() - 객체 자신의 복사본을 반환한다. - 공변 반환타입(오버라이딩 할때 조상메소드의 반환타입을 자손클래스의 타입으로 변경을 허용)이 가능하다. 얕은 복사와 깊은 ..
🔥자바스터디🔥 자바의 정석 CH8 예외처리
1. 예외처리 1.1 프로그램 오류 - 컴파일 에러 : 컴파일 시에 발생하는 에러 - 런타임 에러 : 실행 시 발생하는 에러 - 논리적 에러 : 실행은 되지만, 의도와 다르게 동작하는 것 ** 런타임시 발생할 수 있는 프로그램 오류 에러 : 메모리 부족이나 스택오버플로우와 같이 발생하면 복구할 수 없는 심각한 오류 예외 : 발생하더라도 수습될 수 있는 오류 1.2 예외 클래스의 계층구조 모든 예외의 최고 조상은 Exception클래스, Exception 하위에서 가장 많은 자손 클래스를 가지고 있는 예외는 RuntimeException클래스 - Exception클래스들 : 사용자의 실수와 같은 외적 요인에 의해 발생하는 예외 - RuntimeException클래스들 : 프로그래머의 실수로 발생하는 예외 ..