식초의 지식보관소

※조코딩, 드림코딩 참고※ API란 무엇일까? 프론트엔드(보이는 화면) vs. 백엔드(화면에 보여줄 정보 처리) 프론트와 백 작동 과정 프론트엔드에서 1번 글 클릭 -> 프론트가 백한테 정보 요청 -> 백엔드는 DB에서 1번글에 대한 제목/내용 등 정보 가져옴 -> 백은 프론트한테 정보 전달 -> 프론트엔드는 정보를 화면에 표시함 프론트가 백한테 정보 요청할 때, 규칙에 맞게 해야한다! = API (Application Programming Interface) 백엔드에서 API를 만들고 주소, 사용규칙을 공개한 것 = Open API 공개된 백엔드를 이용하고 프론트엔드만 만들어 쓸 수 있다. = serverless ex. 지도(Naver Maps), 결재(I'mport API), 채팅(socket.io)..

Variable (변수선언) 한 줄에 한 개씩 한다 (예시) const ... ; const ... ; const ... ; 변수에 함수 할당하는 등 다양한 표현 가능하다 =중간에 함수 넣으면 가독성이 떨어진다 =한 줄에 하나씩 변수 선언한다 String template (글자열 템플릿) ` ` 와 ${ } 를 활용한다 (2문장 처럼) Array (배열) 1. 불필요한 배열은 만들지 말자 (2문장처럼 - Array.from()배열은 삭제한다) 2. 배열을 생성하면서 바로 데이터 할당하는 경우 (사진1처럼 - API 사용해서 데이터 작성 보다는) 함수안에서 배열을 만들면서, 아이템 생성한다 (사진2처럼) 3. 배열을 만든 다음에 인덱스로 접근하기 보다는 (사진1처럼) 배열 안에 아이템들을 넣는다 (사진2처..

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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 //Fetch the items from the JSON file (fetch: 동적으로 받아온다) function loadItems() { return fetch('data/data.json') //경로를 지정하면 간단하게 데이터 받아온다 .then(response => response.json()) //성공하면, response 객체 전달해준다 //resopnse의 API인..

▶동적인 페이지 구성할 때, HTML 안에 데이터와 html요소(UI적 요소) 섞여 있는 것은 좋지 않다 ▶자바스크립트는 어플의 비지니스 로직 담당 : 코드가 들어있다 ▶데이터는 자바스크립트가 아닌 곳에 따로 보관하는 것이 좋다 : 백엔드, 데이터 파일 등 ▶현재 프로젝트는 백엔드가 없기 때문에, JSON에 데이터를 보관한다 ▶JSON = javascript object notation, 오브젝트와 유사하다 ▶object는 key : value로 구성된다 ▶JSON은 주석을 허용하지 않는다 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 32 33 34 35 36 37 38 39 40 41 42 43 4..

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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 :root { /* color */ --color-black: #3f454d; /*전체 색을 먼저 변수로 저장한다*/ --color-..

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 32 33 34 35 36 37 38 39 Online Shopping Blue Yellow Pink Colored by Color Scripter cs HTML까지 완성 후 페이지

123456789101112131415161718192021/함수 출력 = 함수 선언 + 함수 호출 //함수 선언function doSomething(add) { console.log(add); const result = add(2, 3); console.log(result);} function add(a, b) { const sum = a + b; return sum;} //함수 호출//doSomething(add); //add: 함수 자체가 전달, add() 안 됨!! const addFun = add; //addFun은 함수자체만 가리킨다console.log(addFun);addFun(1, 2); //호출: addFun에 인자를 넣어준다 Colored by Color Scriptercs

async는 Promise의 syntatic sugar 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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 //async & await // 깔끔하게 promise를 사용하는 방법 :) //1. async (비동기) async function fetchUser() { //네트워크 통신해서 받아오는데 10초 걸린다...가정 return 'sigcho'; }; const user = fetchUser(); us..

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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 'use strict'; //Promise는 자바스크립트 안에 내장된 object이다 //Promise는 비동기 작업 수행할 때 콜백 대신 사용한다 //State(프로미스의 상태): pending(수행중) -> fulfilled(완료) or rejected(문제생김) 상태가 된다 //Producer vs..

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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 'use strict'; //JavaScript is synchronous (자바스크립트는 동기적이다) //hoisting이 된 이후부터 코드가 순서에 맞춰 동지거으로 실행된다 //hoisting: var, function declaration 이 제일 위로 올라가는 것이다 console.log('1'); setTimeout(()..