{Extracurricular Activities}/Codeit Boost-Node.js27 5주차 스터디 자바스크립트 웹 개발 기본기 (4) async/await을 활용한 세련된 비동기 코드 [코드잇 부스트 백엔드 스터디 ] 4. async/await을 활용한 세련된 비동기 코드 async/await이란? promise 객체가 등장함으로써 콜백 헬을 해결할 수 있게됨→ 이후에도 발전되어 async/await을 사용하게 됨 async funtion fetchAndPrint(){ const response = await fetch('https://jsonplaceholder.typicode.com/users'); const result = await response.text(); console.log(result);} fetchAndPrint(); asynchronous 의 줄임말을 사용 (비동기를 의미한다)await : 뒤에 코드를 실행하고 코드가 리턴하는 promise 객체를 기다린다fulfilled 상태가 되면.. 2024. 6. 4. 5주차 스터디 자바스크립트 웹 개발 기본기 (3) 비동기 실행과 Promise 객체 [코드잇 부스트 백엔드 스터디 ] 3. 비동기 실행과 Promise 객체 fetch 함수와 비동기 실행 비동기 실행한번 시작된 작업이 완료되기 전에 바로 다음코드로 실행이 넘어가고 나중에 콜백이 실행됨으로써 작업이 마무리 된다 console.log('Start!');fetch('https://jsonplaceholder.typicode.com/users') .then((response)=>response.text()) .then((result)=>{console.log(result);});console.log('End'); fetch 함수에 비동기 실행이 되는 부분이 있다 fecth 함수는 리퀘스트를 보내고 어떤 객체를 리턴한다그 객체의 then 메소드로 콜백을 등록한다→ 콜백은 서버로부터 리스폰스를 받았을 때 실행된다 .. 2024. 6. 4. 5주차 스터디 자바스크립트 웹 개발 기본기 (2) Web API [코드잇 부스트 백엔드 스터디 ] 2. Web API 배우기 API란 Application Programming Interface의 약자로, 원래는 '개발할 때 사용할 수 있도록 특정 라이브러리나 플랫폼 등이 제공하는 데이터나 함수 등'을 의미 웹 개발에서는 어느 URL로 어떤 리퀘스트를 보냈을 때, 무슨 처리가 수행되고 어떤 리스폰스가 오는지에 관해 미리 정해진 규격을 Web API 💡Web API를 설계한다는 것은 서비스에서 사용될 모든 URL들을 나열하고, 각각의 URL에 관한 예상 리퀘스트와 리스폰스의 내용을 정리한다는 뜻 * REST API는 오늘날 많은 웹 개발자들이 Web API 설계를 할 때, 준수하기 위해 노력하는 일종의 가이드라인 JSON이란 JSON(JavaScript Object Notation) • 어떤 정보를 교.. 2024. 6. 4. 5주차 스터디 자바스크립트 웹 개발 기본기 (1) 웹 기초 [코드잇 부스트 백엔드 스터디 ] 1. 웹 기초 다지기 📌 웹 브라우저와 서버가 통신하는데 필요한 자바스크립트 코드를 어떻게 작성하는지 웹 개론JSONAjaxpromise fetchasync/await fetch 함수 사용해보기 웹 브라우저와 서버가 통신하는 방법 fetch('https://www.google.com') .then((response)=> response.text()) .then((result)=>{console.log(result)}); * html은 웹페이지의 뼈대를 구성하기 위해 사용하는 마크업 언어 💡웹 브라우저가 서버로부터 받는 것은 코드 덩어리웹브라우저가 그것을 해석해서 사용자에게 화면을 보여준다 이런 오류 발생 fetch 함수 살펴보기 ☑️용어웹 브라우저가 서버로 보내는 요청 Requ.. 2024. 6. 4. 5주차 스터디 자바스크립트 객체 지향 기본기 (2) [코드잇 부스트 백엔드 스터디 ] 2. 객체 지향 프로그래밍의 4개의 기둥 📌 객체 지향 프로그래밍의 핵심 개념 4가지추상화 캡슐화 상속 다형성 추상화 어떤 구체적인 존재를 원하는 방향으로 간략화해서 나타내는 것→ 따라서 클래스를 설계하는 것도 모두 추상화 과정에 해당! 💡클래스의 이름, 프로퍼티와 메소드의 이름을 잘 짓는 것 중요 추상화 직접 해보기 실습각 프로퍼티와 메소드 이름 위에 그 의미를 나타내는 간단한 주석을 직접 작성 class BankAccount { constructor(name, money) { // 소유주 this.holder = name; // 잔액 this.balance = money; } // 입금하기 deposit(money) { this.balance += m.. 2024. 6. 4. 5주차 스터디 자바스크립트 객체 지향 기본기 (1) [코드잇 부스트 백엔드 스터디 ] 1. 객체와 클래스 객체 지향 프로그래밍이란? 객체 간의 상호작용을 중심으로 하는 프로그래밍 객체• 객체의 상태를 나타내는 변수• 객체의 행동을 나타내는 함수 ex) 유저 - 변수: 유저의 아이디, 유저의 생일 / 함수: 좋아요, 상품 구매 💡객체 지향 프로그래밍→ 프로퍼티와 메소드로 이루어진 각 객체들의 상호 작용을 중심으로 코드를 작성하는 것 절차 지향 프로그래밍→ 변수와 함수를 가지고 작업의 순서에 맞게 코드를 작성하는 것 객체 만들기 1-1 : Object-Literal Object Literal• 객체를 나타내는 문자열 const user= { email : 'chris123@google.com', //프로퍼티 birthdate: '1992-03-21', buy(i.. 2024. 6. 4. 4주차 스터디 모던 자바스크립트 (4) [코드잇 부스트 백엔드 스터디 ] 5. 자바스크립트의 유용한 내부 기능배열 메소드 ☑️forEach 메소드를 호출할 때 아규먼트로 콜백함수를 작성해주게 되면,이 콜백 함수의 첫 번째 파라미터로 배열의 요소를 순서대로 하나씩 전달하면서 매번 이 함수를 실행하는 원리로 동작// forEach와 mapconst members = ['영훈', '윤수', '동욱', '태호'];for (let member of members) { console.log(`${member}님이 입장하셨습니다.`);}members.forEach(function (member, index, arr) { // 콜백함수 console.log(`${member}님이 입장하셨습니다.`);});• 두번째 파라미터 index, i 는 요소의 인덱스를 관리할 수 있다• .. 2024. 5. 25. 4주차 스터디 모던 자바스크립트 (3) [코드잇 부스트 백엔드 스터디 ] 4. 자바스크립트의 문법과 표현 문장과 표현식 문장 (statements)• 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리 표현식 (expressions)• 표현식은 결과적으로 하나의 값이 되는 모든 코드→ 길이와는 상관없이 결과적으로 하나의 값이 되는 코드를 모두 표현식이라고 할 수가 있다.표현식이면서 문장, 문장이면서 표현식 // 할당 연산자는 값을 할당하는 동작도 하지만, 할당한 값을 그대로 가지는 표현식이다.title = 'JavaScript'; // JavaScript// 함수 호출은 함수를 실행하는 동작도 하지만, 실행한 함수의 리턴 값을 가지는 표현식이다.sayHi(); // sayHi 함수의 리턴 값// console.log 메소드는 콘솔에 아규먼트를 출력하는 동작도 하지만, und.. 2024. 5. 25. 4주차 스터디 모던 자바스크립트 (2) [코드잇 부스트 백엔드 스터디 ] 3. 함수 다루기함수를 만드는 방법 함수 선언을 변수에 할당, 함수 선언을 값 처럼 사용하는 방식 → 함수 표현식 // 함수를 만드는 방법const myBtn = document. querySelector('#myBtn');myBtn.addEventListener('click', function () {console. log('button is.clicked!');}); 함수 선언과 함수 표현식 차이💡일반적으로 변수에 할당해서 함수를 만드는 함수 표현식은 변수의 특성상 선언 이전에 접근 할 수 없음 • 함수 선언은 변수의 var 키워드처럼 함수 스코프를 갖는다→ 함수 안에 선언된 함수는 함수 밖에서 호출할 수 없지만 , 다른 코드 블록에서 선언하면 전역적으로 호출 가능 • 함수 표현식의 경우 할당된 .. 2024. 5. 25. 이전 1 2 3 다음
