일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 자바스크립트
- 모던 자바스크립트
- invalid_grant
- compateto
- 우아한테크코스
- 타입스크립트
- api 비동기처리
- Dev-Matching
- 프론트엔드
- 프론트엔드 과제
- 딥다이브
- concurrency limit
- TypeORM
- 우아한 테크코스
- NestJS
- 검색
- 음악 url 파일 다운로드
- 유효시간 설정 url
- 코멘토 #코멘토실무PT #실무PT후기 #실무강의 #리액트강의 #웹프로그래밍 #react #웹개발실무
- redis
- api 요청 수 제한
- 프로그래머스
- 스프링부트
- 프리코스
- this
- oauth
- AWS
- 파일 url
- bucket4j
- Deep Dive
- Today
- Total
목록분류 전체보기 (174)
개발 알다가도 모르겠네요
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/795G7/btrdaGH1tH9/oFp923Y1LpDoV1iVzMshek/img.png)
OSI 7계층 모델은 네트워크를 구성하는 표준 계층 중 하나입니다. 물리 계층(Physical Layer) L1 1. 물리계층은 하드웨어 전송 기술로 이루어져 있습니다. 2. 전기적인, 기계적인 신호를 주고받는 역할을하는 계층이며 비트 0, 1의 통신단위로 통신하게 됩니다. 3. 전송매체, 데이터 전송 속도, 클록 동기화 방법, 물리적 연결 형태 등이 있고, 물리적 연결 형태의 경우 유선: TP, LAN, 광, COAX 등 무선: 전파, WLAN, WiFi, 적외선 등 이 존재합니다. 4. 대표적인 장비로는 통신 케이블, 허브, 리피터 등이 있으며 데이터의 종류나 오류를 제어하지 않습니다. 데이터 링크 계층(Data Link Layer) L2 1. 데이터링크 계층은 Point to Point (1:1통신..
모듈 모듈은 간단하게, 자바스크립트 파일 하나라고 할 수 있습니다. 복잡하고 많은 양의 코드를 기능에 따라 각각의 파일로 나눠 관리하면 코드를 좀 더 효율적으로 관리할 수 있고, 비슷한 기능이 필요할 때 다른 프로그램에서 재사용 할 수도 있다는 장점이 있습니다. 모듈 스코프 모듈 파일 안에서 선언한 변수는 외부에서 자유롭게 접근할 수 없도록 막아야 합니다. 다시 말해 모듈은 파일 안에서 모듈 파일만의 독립적인 스코프를 가지고 있어야 합니다. HTML파일에서 자바스크립트 파일을 불러올 때 모듈 스코프를 갖게 하려면 script태그에 type속성을 module이라는 값으로 지정해 주어야 합니다. 모듈 문법 자바스크립트의 모듈 문법은 기본적으로 export와 import 입니다. 모듈 스코프를 가진 파일에서 ..
forEach 메소드 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드입니다. forEach 메소드는 첫 번째 아규먼트로 콜백 함수를 전달받는데, 콜백 함수의 파라미터에는 각각 배열의 요소, index, 메소드를 호출한 배열이 전달됩니다. (index와 array는 생략가능) const numbers = [1, 2, 3]; numbers.forEach((element, index, array) => { console.log(element); // 순서대로 콘솔에 1, 2, 3이 한 줄씩 출력됨. }); map 메소드 forEach와 비슷하게 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드 입니다. 단, 첫 번째 아규먼트로 전달하는 콜백 함수가 매번 리턴하는 값들을 모아서 새로운 배열을 만..
조건부 연산자 (Conditional operator) 삼항 연산자 (Ternary operator)라고도 불리는 이 연산자는 자바스크립트에서 세 개의 피연산자를 가지는 유일한 연산자 입니다. const cutOff = 80; const passChecker = (score) => score > cutOff ? '합격입니다!' : '불합격입니다!'; console.log(passChecker(75)); Spread 구문 여러 개의 값을 묶어놓은 배열이나 객체와 같은 값은 바로 앞에 마침표 세 개를 붙여서 펼칠 수가 있습니다. const webPublishing = ['HTML', 'CSS']; const interactiveWeb = [...webPublishing, 'JavaScript']; conso..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/co0WRn/btq99nrCaWN/MmUrBQqKkW9HAvHo1rs6L1/img.png)
// 1) Function Declaration async function example1(a, b) { return a + b; } // 2-1) Function Expression(Named) const example2_1= async function add(a, b) { return a + b; }; // 2-2) Function Expression(Anonymous) const example2_2 = async function(a, b) { return a + b; }; // 3-1) Arrow Function const example3_1 = async (a, b) => { return a + b; }; // 3-2) Arrow Function(shortened) const example3_2 ..
async function fetchAndPrint() { console.log(2); const response = await fetch('https://jsonplaceholder.typicode.com/users'); console.log(7); const result = await response.text(); console.log(result); } console.log(1); fetchAndPrint(); console.log(3); console.log(4); console.log(5); console.log(6); 사실 fetchAndPrint 함수를 언뜻 보면, 비동기 실행 함수처럼 생기지 않았습니다. 오히려 코드가 등장하는 순서대로 실행될 것처럼 생겼는데 이건 의도된 것입니다. 왜냐하면..
fetch 함수 말고도 Ajax 통신을 할 수 있는 방법이 존재합니다. 바로 axios 라고 하는 외부 패키지를 사용하는 것입니다 axios .get('https://jsonplaceholder.typicode.com/users') .then((response) => { console.log(response); }) .catch((error) => { console.log(error); }); axios 객체에서 리퀘스트를 보내는 많은 메소드들이 fetch 함수처럼 Promise 객체를 리턴합니다. 그래서 fetch 함수의 사용법과 비슷한 점이 많지만, axios 객체에는 fetch 함수에는 없는 다음과 같은 몇 가지 기능 및 장점들이 있습니다. 모든 리퀘스트, 리스폰스에 대한 공통 설정 및 공통된 전처..
자바스크립트의 데이터 타입 자바스크립트에는 8가지 데이터 타입이 있습니다. number string boolean undefined null object symbol bigint Truthy 값과 Falsy 값 // falsy Boolean(false); Boolean(null); Boolean(undefined); Boolean(0); Boolean(NaN); Boolean(''); // truthy Boolean(true); Boolean('codeit'); Boolean(123); Boolean(-123); Boolean({}); Boolean([]); 독특한 방식으로 동작하는 논리 연산자 자바스크립트에서 AND와 OR연산자는 무조건 불린 값을 리턴하는게 아니라, 왼쪽 피연산자 값의 유형에 따라서 ..
모든 상태 코드(Status Code)는 각각 그에 대응되는 상태 메시지(Status Message)를 갖고 있습니다. (1) 100번대 서버가 클라이언트에게 정보성 응답(Informational response)을 줄 때 사용되는 상태 코드들입니다. 100 Continue : 클라이언트가 서버에게 계속 리퀘스트를 보내도 괜찮은지 물어봤을 때, 계속 리퀘스트를 보내도 괜찮다고 알려주는 상태 코드입니다. 101 Switching Protocols : 클라이언트가 프로토콜을 바꾸자는 리퀘스트를 보냈을 때, 서버가 '그래요, 그 프로토콜로 전환하겠습니다'라는 뜻을 나타낼 때 쓰이는 상태 코드입니다. (2) 200번대 클라이언트의 리퀘스트가 성공 처리되었음을 의미하는 상태 코드들입니다. 200 OK : 리퀘스트..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/zWpP4/btq9TeP4G7q/akwEbaKnSP8UEkRdkUETH1/img.png)
초창기의 웹은 특정 웹 페이지에서 다른 웹 페이지로 갈 수 있는 링크를 클릭하면 새로운 웹 페이지가 로드되는 방식이었습니다. 하지만 화면의 일부분만 바뀌면 되는 경우에도 매번 새 페이지가 로드되는 방식은 효율적이지도 않고 사용자에게도 그다지 좋지 않은 경험을 안겨주었습니다. 그래서 2000년대 초부터는 웹의 이런 단점을 극복하기 위해서 Ajax라는 기술이 도입되었습니다. Ajax는 웹 브라우저가 현재 페이지를 그대로 유지한 채로 서버에 리퀘스트를 보내고 리스폰스를 받아서, 새로운 페이지를 로드하지 않고도 변화를 줄 수 있게 해주는 기술입니다. Ajax는 Asynchronous JavaScript And XML의 줄임말입니다. 이는 자바스크립트를 사용해서 비동기적으로(=사용자가 보고 있는 현재 화면에 영향..