일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 우아한 테크코스
- Dev-Matching
- oauth
- bucket4j
- 유효시간 설정 url
- api 비동기처리
- 프론트엔드 과제
- 프로그래머스
- redis
- NestJS
- 음악 url 파일 다운로드
- AWS
- 파일 url
- 타입스크립트
- api 요청 수 제한
- this
- 모던 자바스크립트
- concurrency limit
- TypeORM
- 우아한테크코스
- 프리코스
- invalid_grant
- 프론트엔드
- 자바스크립트
- Deep Dive
- 스프링부트
- 딥다이브
- 코멘토 #코멘토실무PT #실무PT후기 #실무강의 #리액트강의 #웹프로그래밍 #react #웹개발실무
- 검색
- compateto
- Today
- Total
목록웹 (68)
개발 알다가도 모르겠네요
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/DUeG0/btrdEjmUQJk/vwLriTB47oSm3KskdlRNf1/img.png)
웹의 동작 원리 웹은 기본적으로 클라이언트/서버 방식으로 동작합니다. 요청과 응답으로 이루어지며 요청은 클라이언트에서 서버로 정보를 요구하기 위해 보내는 메시지입니다. 이 요청방식에는 GET방식과 POST 방식이 있습니다. 응답은 HTTP에서 요구된 메시지에 대한 응답, HTML, 이미지 등이 내용이 됩니다. 대표적인 웹 서버로는 아파치(Apache), IIS(Internet Information Server) 등이 있습니다. Static Pages vs Dynamic Pages 정적 웹 페이지 컴퓨터에서 저장된 텍스트 파일을 그대로 보는 것 HTML(HyperText Markup Language), image, video 등의 정적인 콘텐츠 동적 웹 페이지 저장된 내용을 다른 변수로 가공 처리하여 보는..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/d9vaLu/btrdtLqeZoh/iFkrWMnec1Zocrxq3LOlT1/img.png)
HyperText Markup Language 웹 페이지를 기술하기 위한 markup 언어 웹 페이지의 내용(content)과 구조(structure)를 담당하는 언어 html tag를 통해 정보를 구조화 요소는 중첩 가능 빈 요소: content가 없는 요소 (br, hr, img, input, link, meta, …) BOX or ITEM main - section - article (반복되는 것들을 묶어주는 구조) 속성 (attribute) 요소의 성질, 특징을 정의 이름 = 값 주석: 시맨틱 태그 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명 시맨틱 웹 웹 페이지들에 메타데이터(데이터를 설명)를 부여하여 웹 페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 database로 구축..
모듈 모듈은 간단하게, 자바스크립트 파일 하나라고 할 수 있습니다. 복잡하고 많은 양의 코드를 기능에 따라 각각의 파일로 나눠 관리하면 코드를 좀 더 효율적으로 관리할 수 있고, 비슷한 기능이 필요할 때 다른 프로그램에서 재사용 할 수도 있다는 장점이 있습니다. 모듈 스코프 모듈 파일 안에서 선언한 변수는 외부에서 자유롭게 접근할 수 없도록 막아야 합니다. 다시 말해 모듈은 파일 안에서 모듈 파일만의 독립적인 스코프를 가지고 있어야 합니다. 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 함수를 언뜻 보면, 비동기 실행 함수처럼 생기지 않았습니다. 오히려 코드가 등장하는 순서대로 실행될 것처럼 생겼는데 이건 의도된 것입니다. 왜냐하면..
자바스크립트의 데이터 타입 자바스크립트에는 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의 줄임말입니다. 이는 자바스크립트를 사용해서 비동기적으로(=사용자가 보고 있는 현재 화면에 영향..