일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 자바스크립트
- compateto
- 코멘토 #코멘토실무PT #실무PT후기 #실무강의 #리액트강의 #웹프로그래밍 #react #웹개발실무
- Dev-Matching
- bucket4j
- 우아한 테크코스
- Deep Dive
- concurrency limit
- 검색
- 프론트엔드 과제
- NestJS
- redis
- 유효시간 설정 url
- oauth
- 스프링부트
- api 요청 수 제한
- invalid_grant
- api 비동기처리
- 파일 url
- 모던 자바스크립트
- 프리코스
- 프론트엔드
- 프로그래머스
- AWS
- 우아한테크코스
- 타입스크립트
- TypeORM
- 딥다이브
- 음악 url 파일 다운로드
- this
- Today
- Total
목록웹 (68)
개발 알다가도 모르겠네요
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bEAVah/btradSfiptv/xmoMVrNKMASK2TPs7WnZP1/img.png)
1. 추상화(Abstraction) 우리가 객체를 만드는 과정은 현실 또는 가상의 존재를 프로그램 내에서 사용할 용도에 맞게 적절하게 설계하는 과정입니다. 이때 객체를 만들고 나면 그 객체를 사용하는 사람은 객체 내부에 존재하는 복잡한 원리를 모르더라도 객체 외부에 공개된 프로퍼티나 메소드만을 가지고도 객체를 문제없이 잘 사용할 수 있어야 합니다. 이를 위해서는 프로퍼티와 메소드의 이름을 누구나 이해하기 쉽게 잘 지어야하고, 필요한 경우 이렇게 주석을 달거나 class User { constructor(email, birthdate) { // 사용자의 이메일 주소 this.email = email; // 사용자의 생일 this.birthdate = birthdate; } // 물건 구매하기 buy(ite..
개발자들이 어떤 정보를 나타내기 위해 흔히 쓰는 데이터 포맷으로는 JSON 뿐만 아니라 XML(Extensible Markup Language)이라고 하는 데이터 포맷도 있습니다. XML을 한마디로 쉽게 이야기하자면, 태그를 사용해서 데이터를 나타내는 것입니다. { "name":"Michael Kim", "height":180, "weight":70, "hobbies":[ "Basketball", "Listening to music" ] } Json방식에서 XML방식으로 바꾸게 되면 아래와 같이 됩니다. Michael Kim 180 70 Basketball Listening to music 이런 식으로 시작 태그()와 끝 태그(), 그리고 그 사이의 값으로 나타낸 것을 알 수 있습니다. XML이라는 데이..
Content-Type 헤더는 현재 리퀘스트 또는 리스폰스의 바디에 들어 있는 데이터가 어떤 타입인지를 나타냅니다. Content-Type 헤더의 값은 '주 타입(main type)/서브 타입(sub type)'의 형식으로 있습니다. 1.주 타입이 text인 경우(텍스트) 일반 텍스트 : text/plain CSS 코드 : text/css HTML 코드 : text/html JavaScript 코드 : text/javascript ... 2.주 타입이 image인 경우(이미지) image/bmp : bmp 이미지 image/gif : gif 이미지 image/png : png 이미지 ... 3.주 타입이 audio인 경우(오디오) audio/mp4 : mp4 오디오 audio/ogg : ogg 오디오 ...
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ewJnwv/btq91o6LjNF/CBZy3zb7C0Gj2ezgTVNYn1/img.png)
all 메소드 // 1번 멤버 정보 const p1 = fetch('https://test.com/api/members/1').then((res) => res.json()); // 2번 멤버 정보 const p2 = fetch('https://test.com/api/members/2').then((res) => res.json()); // 3번 멤버 정보 const p3 = fetch('https://test.com/api/members/3').then((res) => res.json()); Promise .all([p1, p2, p3]) .then((results) => { console.log(results); // Array : [1번 멤버 정보, 2번 멤버 정보, 3번 멤버 정보] }); all ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/V15i5/btq96EGVyRj/2XAfFF8LtzjzVI8FPr5JTK/img.png)
Promise객체의 등장 Promise 객체가 등장하기 전에도 setTimeout, addEventListener 메소드 같은 비동기적인 처리를 할 수 있는 방법이 있었습니다. 만약 fetch함수를 이런식으로 만들었다면 fetch('https;//first.com', callback) fetch('https://first.com', (response) => { // Do Something fetch('https://second.com', (response) => { // Do Something fetch('https;//third.com', (response) => { // Do Something fetch('https;//fourth.com', (response) => { // Do Something ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/TtUnk/btq93oxMQIC/ghbNNRfJXQ4PTECEm7baD1/img.png)
btn.addEventListener('click', function (e) { // 해당 이벤트 객체가 파라미터 e로 넘어옵니다. console.log('Hello World'); }); // 또는 arrow function 형식으로 이렇게 나타낼 수도 있습니다. btn.addEventListener('click', (e) => { console.log('Hello World'); }); console.log('Start!'); fetch('https://www.google.com') .then((response) => response.text()) .then((result) => { console.log(result); }); console.log('End'); 지금 이 코드에는 다음과 같은 2개의 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/rCHpF/btq94qVEntz/4otkCIqLIM2ulGfYxMT6R1/img.png)
Web API 하나의 서비스를 만들 때는 프론트엔드 개발자들과 백엔드 개발자들이 모여 '프론트엔드에서 이 URL로 이렇게 생긴 리퀘스트를 보내면, 백엔드에서 이런 처리를 하고 이런 리스폰스를 보내주는 것으로 정합시다'와 같은 논의를 하고, 이런 내용들을 정리한 후에 개발을 시작하는데 이것을 'Web API 설계'라고 합니다. API란 Application Programming Interface의 약자로, 원래는 '개발할 때 사용할 수 있도록 특정 라이브러리나 플랫폼 등이 제공하는 데이터나 함수 등'을 의미합니다. 웹 개발에서는 어느 URL로 어떤 리퀘스트를 보냈을 때, 무슨 처리가 수행되고 어떤 리스폰스가 오는지에 관해 미리 정해진 규격을 Web API라고 합니다. Web API를 설계한다는 것은 서비스..
PATCH PATCH 메소드는 기존의 데이터를 수정할 때 사용하는 메소드입니다. PUT은 기존 데이터를 아예 새로운 데이터로 덮어씀으로써 수정하려고 할 때 쓰는 메소드이고, PATCH는 새 데이터로 기존 데이터의 일부를 수정하려고 할 때 쓰는 메소드입니다. 예를 들어 서버에 { "id": 3, "name": "Michael", "age": 25 } 이런 식으로 표현되는 데이터가 있을 때, 리퀘스트에 PATCH 메소드를 설정하고 { "age": 30 } 이라는 데이터를 바디에 담아서 보내면, { "id": 3, "name": "Michael", "age": 30 } 서버의 기존 데이터는 이렇게 age 속성만 갱신되지만, 같은 리퀘스트더라도 PUT 메소드를 설정해서 보내면 { "age": 30 } 이렇게 서..
JSON은 JavaScript Object Notation의 약자로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다. JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다. JSON 표현할 때의 주의점 (1) JSON에서는 각 프로퍼티의 이름을 반드시 큰따옴표(")로 감싸줘야 합니다. (2) JSON에서는 값이 문자열인 경우 큰따옴표(")를 사용해야 합니다. (3)자바스크립트에서는 프로퍼티의 값으로 사용할 수 있..
1. 이벤트 핸들러 등록하기 HTML의 속성이나 DOM 프로퍼티를 활용해 이벤트를 등록하는 방법 외에 Element.addEventListener('type', 'handler')를 통해서 이벤트 핸들러를 등록할 수 있습니다. 2. 이벤트 핸들러 삭제하기 addEventListener 메소드를 활용해서 이벤트 핸들러를 등록했다면, Element.removeEventListner('type', 'handler')를 통해서 이벤트 핸들러를 삭제할 수 있습니다. 3. 이벤트 객체 (Event Object) 이벤트가 발생하면 이벤트 핸들러의 첫 번째 파라미터에는 자동으로 이벤트 객체가 전달됩니다. 이벤트 객체는 이벤트 종류마다 가지고 있는 프로퍼티가 다르며, 이벤트에 대한 유용한 정보들을 프로퍼티로 가지고 있습..