230105 - JavaScript - AJAX, FETCH, AXIOS를 이용한 비동기 통신하기

jQuery를 이용하지 않음. 오늘 내가 배운 것 1. 비동기방식 통신이란? 2. 프론트엔드에서 데이터 요청하기 AJAX fetch axios 비동기방식 통신이란? 동기식 방식은 요청을 보낸 후 응답을 받아야 다음 작업을 할 수 있지만 비동기 방식은 요청을 보내고 응답을 기다리지 않고 다른 일을 할 수 있는 상태이다. 그래서 이를 이용하면 웹 페이지를 새로고침 없이 원하는 데이터를 이용하여 웹 페이지의 구성을 바꿔 줄 수 있다. 프론트엔드에서 데이터 요청하기 지금 코드는 front 서버와 back 서버를 분리한 상태이고, MySQL을 이용하여 데이터베이스를 만든 후 데이터가 있는 상태에서 그 값을 back 서버의 라우터를 이용하여 불러오는 과정이다. front와 back 서버가 분리되어 있기 때문에 co..

• format_list_bulleted TIL(Today I Learned)
• · 2023. 1. 5.
• textsms

230103 - SSR,CSR 비교 / AJAX / 프론트엔드 서버와 백엔드서버 / CORS

오늘 내가 배운 것 1. SSR, CSR 비교 2. AJAX 3. 프런트엔드 서버와 백엔드 서버로 분리하기 cors 기본동작 cors 에러해결방법 SSR, CSR 비교 예전에 HTTP를 배우면서 과거의 통신방식과 현재의 통신방식에 대해서 그림으로 표현한 적이 있다. http://baekspace.tistory.com/88 221212 - HTTP 통신 방식, Node.js HTML파일 불러오기, path.join 오늘 내가 배운 것 1. 과거와 현재 HTTP 통신 방식 비교 2. HTML 파일 열기 과거와 현재 HTTP 통신 방식 흐름 비교 그림을 확인하면서 읽어주세요. 과거에는 백엔드 개발자가 웹페이지를 구현하였는데 baekspace.tistory.com 과거의 방식은 SSR(Server Side Re..

• format_list_bulleted TIL(Today I Learned)
• · 2023. 1. 3.
• textsms

JavaScript - 구조 분해 할당

구조 분해 할당 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 배열 구조 분해 할당 1. 배열 구조 분해 할당을 사용하지 않은 할당 방법 let arr = ['1st','2nd', '3nd', '4th', '5th', '6th', '7th'] //mon, tue, wed, thu, fri, sat, sun에 배열 1번요소부터 할당하려고 한다면 //하나씩 기입해줘야했다... const mon = arr[0] const tue = arr[1] const wed = arr[2] const thu = arr[3] const fri = arr[4] const sat = arr[5] const sun = arr[6] console.log(mon) conso..

• format_list_bulleted JavaScript
• · 2022. 12. 12.
• textsms

JavaScript - 자주 쓰이는 배열 메서드 (Array Method)

JavaScript 배열 메서드 최근 노드를 공부하기 시작하면서 배열에 메서드를 이용해서 단순하지만 길게 반복해서 적었던 코드를 간결하고 가독성 좋게 리펙토링 하는 과정이 많아지면서 배열 메서드의 중요성도 많이 알게 되어서 배열 메서드에 대해 알아보았다. 구분자(separator) 뒤에 '?' 선택사항이다. Array.join(separator?) 배열을 문자열로 만들 때 사용한다. 지정한 구분자를 넣어서 문자열로 이어준다. 구분자를 기입하지 않으면 ,(쉼표)를 이용해서 구분하여 준다. const arr = ['바람', '비', '물']; console.log(arr.join()); // 바람,비,물 console.log(arr.join('')); // 바람비물 console.log(arr.join('-..

• format_list_bulleted JavaScript
• · 2022. 12. 12.
• textsms

221114 실전예제 - 웹페이지 MENU 만들기, 슬라이드 영역만들기

오늘 내가 배운 것 1. MENU(gnb) 만들기 2. 슬라이드 영역 만들기 1. MENU(gnb) 만들기 GNB : Global Navigation Bar의 약자로, 웹사이트 전체에 동일하게 적용되는 내비게이션 바 코드 구현 순서 (자바스크립트 순서) 1. 각 id와 class에 접근할 수 있게 변수로 할당한다. 2. gnb 밑에 4개의 li가 있는데, 그 li에 각각 접근하려면 gnbs[0] , gnbs[1] .... 로 접근하는데, 이를 이용해서 이벤트를 등록한다면, gnbs[0].addEventListener / gnbs[1].addEventListener ... 처럼 이벤트를 등록한다. 위에 예시 같은 경우 li에서 마우스가 오버됐을 때 function이 실행되고, 실행되는 코드의 내용은 gnb..

• format_list_bulleted TIL(Today I Learned)
• · 2022. 11. 14.
• textsms

JavaScript - 배열 기초

배열 같은 성향의 변수를 한 곳에 몰아 놓고 필요한 데이터를 쓴다. 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수 있다. 배열 생성하기 "변수 변수명 = [] " 으로 대괄호로 요소들을 감싼다. ex ) let arr = [1,2,3,4 ] 배열 요소 호출 하기 "변수명[인덱스번호]"로 호출한다. 배열의 인덱스는 0부터 시작한다. (인덱스는 배열의 요소가 들어 있는 데이터 박스의 번호라고 생각하면 좋다..) ex) 위 예시를 그대로 사용했을 때, arr[1] .... 2 배열의 총 길이 (배열 안에 요소의 개수) 구하기 " 변수명.length " 로 구할 수 있다. length를 사용하면 유동적인 배열(변화가 있을 경우)에도 대처가 쉽다. ex ) a..

• format_list_bulleted JavaScript
• · 2022. 10. 31.
• textsms