일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 검색
- 모던 자바스크립트
- redis
- compateto
- 코멘토 #코멘토실무PT #실무PT후기 #실무강의 #리액트강의 #웹프로그래밍 #react #웹개발실무
- 스프링부트
- 유효시간 설정 url
- invalid_grant
- 음악 url 파일 다운로드
- Deep Dive
- api 비동기처리
- 파일 url
- concurrency limit
- api 요청 수 제한
- 우아한테크코스
- 프리코스
- 우아한 테크코스
- this
- TypeORM
- 딥다이브
- Dev-Matching
- bucket4j
- NestJS
- AWS
- 프론트엔드
- oauth
- 프론트엔드 과제
- 타입스크립트
- 프로그래머스
- 자바스크립트
- Today
- Total
목록웹 (68)
개발 알다가도 모르겠네요
제네릭은 어떠한 클래스 혹은 함수에서 사용할 타입을 그 함수나 클래스를 사용할 때 결정하는 프로그래밍 기법을 말합니다. JavaScript는 원래 타입 선언이 필요하지 않고, 코드를 실행시키기 전까지는 함수와 클래스가 모든 타입에 대응합니다. 반면에 TypeScript는 정적 타입 언어이기 때문에, 기본적으로 타입을 정의한 함수 혹은 클래스는 모두 다른 타입에 재사용할 수 없습니다. 제네릭을 사용하는 이유 다음과 같이 스택 자료구조를 TypeScript로 구현한다고 가정하면 class Stack { private data: any[] = []; contructor() {} push(item: any): void { this.data.push(item); } pop(): any { return this.d..
ES6 클래스는 클래스 몸체에 메소드만을 포함할 수 있습니다. 클래스 몸체에 클래스 프로퍼티를 선언할 수 없고 반드시 생성자 내부에서 클래스 프로퍼티를 선언하고 초기화합니다. // person.js class Person { constructor(name) { // 클래스 프로퍼티의 선언과 초기화 this.name = name; } walk() { console.log(`${this.name} is walking.`); } } Typescript 클래스는 클래스 몸체에 클래스 프로퍼티를 사전 선언해야 합니다. // person.ts class Person { // 클래스 프로퍼티를 사전 선언하여야 한다 name: string; constructor(name: string) { // 클래스 프로퍼티수에 값..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/MUYHv/btrEYIf8xHn/lRMMbmzt2hEalU89qwKozK/img.jpg)
타입스크립트란? 타입스크립트는 MS에서 개발하고 관리하는 오픈소스 프로그래밍 언어입니다. 타입스크립트는 자바스크립트의 상위 집합으로서 ECMA의 최신 표준을 지원합니다. 기존의 ES5 자바스크립트 문법을 그대로 사용할 수 있으며, Babel과 같은 별도 트랜스파일러를 사용하지 않아도 ES6의 새로운 기능을 기존의 자바스크립트 엔진에서 사용할 수 있습니다. 타입스크립트의 장점은 정적 타입 언어이기 때문에 컴파일 시 시간이 조금 걸리더라도 안정성을 보장한다는 점입니다. 자바스크립트의 경우는 동적 타입 언어이기 때문에 런타임 속도는 빠르지만 타입 안정성이 보장되지 않습니다. 타입스크립트는 자바스크립트의 이러한 단점을 보완하기 위해서 만들어 졌고, 이러한 이유로 MS에서는 타입스크립트에 “JavaScript t..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/z1PYY/btrqvyFmgp7/qCr5MWkSlIblcjAZS28ki0/img.png)
컴포넌트의 생명주기 모든 리액트 컴포넌트에는 수명 주기가 존재함. 컴포넌트의 수명은 페이지에 렌더링 되기 전인 준비과정에서 시작, 페이지에서 사라질 때 끝남. Mount DOM이 생성되고 웹 브라우저상에 나타나는 것 componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 Update props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 this.forceUpdate로 강제로 렌더링 트리거할 때 componentDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드 Unmount 컴포넌트를 DOM에서 제거하는 것 componentWillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드 LifeCycle Method..
1.Component Component에는 클래스형과 함수형있음. 리액트가 레고 라면? 컴포넌트는 블록. 웹 사이트의 조각(컴포넌트)을 모아서 웹사이트에 뿌림. HTML을 한 단어로 줄여서 쓸 수 있는 방법 항상 Component는 대문자로 function Modal(){ ←이름 짓고 return ( ←원하는 HTML담고 ) } return() 내부 묶을때 의미없는 쓰기 싫으면 ←fragment 문법 Component로 만들면 좋은 경우 반복 출현하는 HTML 덩어리들 자주 변경되는 HTML UI들 다른 페이지 만들때도 컴포넌트로 만듦. 2.State&Props props는 사용자가 지정하는 값에 의해 달라지는 컴포넌트의 변수 state는 컴포넌트 내부에서 사용되는 변수 이벤트는 state값을 변경하기위..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cTwq9U/btrmeamEiyF/RUxPklCFIGZjDbi4m922t1/img.png)
Spring IoC 컨테이너가 관리하는 자바 객체를 빈(Bean)이라고 부릅니다. 일반적인 자바 프로그램에서는 각 객체들이 프로그램의 흐름을 결정하고 각 객체를 직접 생성하고 조작하는 작업 (객체를 직접 생성하여 메소드 호출)을 했습니다. 즉, 모든 작업을 사용자가 제어하는 구조였습니다. 예를 들어 A 객체에서 B 객체에 있는 메소드를 사용하고 싶으면, B 객체를 직접 A 객체 내에서 생성하고 메소드를 호출합니다. 하지만 IOC(제어의 역전) 가 적용된 경우, 객체의 생성을 특별한 관리 위임 주체에게 맡깁니다. 이 경우 사용자는 객체를 직접 생성하지 않고, 객체의 생명주기를 컨트롤하는 주체는 다른 주체가 됩니다. 즉, 사용자의 제어권을 다른 주체에게 넘기는게 되는 것입니다. Class를 생성하고 new를..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/rE5Y2/btrj2Wd27mr/EI3mT8kXLyc3C0wlQ143RK/img.png)
쿠키(cookie) 웹 서버가 브라우저에게 지시하여 사용자 로컬 컴퓨터에 저장하는 4K 이하의 작은 데이터 도입배경 HTTP 통신의 기본 약점 : 브라우저와 웹서버 사이의 통신은 무상태(stateless) 프로토콜임. 무상태 프로토콜: 바로 이전 요청과 현재 요청이 연결되어 있음을 기억하지 않는 통신 예)지금 'java'를 검색하는 사용자가 바로 전에 'javascript' 를 검색한 사용자라는 사실을 모른다. 쿠키는 HTTP의 무상태 프로토콜의 약점을 보완하기 위해 도입. 쿠키 생성 및 사용 과정 1.쿠키는 웹 서버가 생성하여 브라우저로 보냄. 사용자가 어떤 웹 서버에 처음 접속할 때 웹 서버가 다음 요청에서 그 사용자를 기억할 수 있도록 쿠키(이름&값)를 만들어 전송 2.쿠키를 받은 브라우저는 로컬 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bY1gE0/btrjKNgiak0/oPfvTveB94lsGdJD5KpPJK/img.png)
클라이언트로부터 요청이 들어오면 Controller가 요청을 받게 된다. service -> DAO 호출 후, 그 결과를 Model에 저장하게 된다. Model을 View에 전달하게 되고 View는 Model를 렌더링해 동적인 페이지로 클라이언트의 요청에 응답하게 된다. –Model •애플리케이션 데이터를 캡슐화하며 일반적으로 POJO로 구성됩니다. – View •모델 데이터 렌더링을 담당하고 일반적으로 HTML 출력을 생성합니다. –Controller •사용자 요청을 처리하고 적절한 모델을 구축하고 렌더링을 위해 뷰에 전달합니다. •Dispatcher servlet –프론트 컨트롤러 역할 – 애플리케이션에 들어오는 모든 요청을 가로채서 핸들러(즉, 컨트롤러)에 요청을 전달합니다. – 요청을 처리하기 위..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bk4UML/btre5vxX7Mz/uCs8AL1e7027hGX8RdHOfK/img.jpg)
프레임워크란? 프레임워크는 '구조 품질' 을 보장합니다. SW 구조 그리고 기반되는 클래스를 제공합니다. 라이브러리 vs 프레임워크 제어의 역전 (Inversion of Control) 라이브러리 클래스의 집합으로, 코드의 재사용성을 지원(ex.math) 제어의 주체는 개발자: 코드에서 라이브러리 함수를 호출. 프레임워크 제어의 주체는 프레임워크: 프레임워크에서 우리의 코드를 호출(제어의 역전) 프레임워크에서 기본적인 골격을 잡아놓았기 때문에 우리는 제어의 흐름에 맞게 코드를 작성해 두면 프레임워크에서 호출. 따라서 프레임워크는 애플리케이션 구조 및 코드의 상당 부분을 제공. 개발자는 애플리케이션의 핵심 로직에 집중 가능. 스프링이란? 자바 애플리케이션을 개발하는데 필요한 하부구조(infrastructu..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/HmH3W/btrdKWRDD6X/VX2EbzdWAEdT1O51ASfggk/img.png)
CSS란? Cascading Style Sheet Author style User style Browser 폭포수처럼 author(개발자) ->user(사용자) ->brower(브라우저 디폴트) 순으로 흘러 내립니다. Selector 종류 class selector : . id selector : # universal: * type: tag state: : attribute: [] *id는 한개, class는 여러개 존재 자식 셀렉터 부모 자식 관계인 두 셀렉터를 '>' 기호로 조합. ex) div > strong {color: dodgerblue; } 의 직계 자식인 에만 적용. 자손 셀렉터 자손 관계인 2개 이상의 태그 나열 ex) ul strong {color: dodgerblue; } 의 자손 에..