프로젝트/[개인] 프론트엔드 로드맵 검색 결과
23 개의 검색 결과가 있습니다.
프로젝트/[개인] 프론트엔드 로드맵

[용어정리] Part4 JavaScript | Hoisting 등 개념 이해하기

Front-end 로드맵 따라하기 (요약) 키워드로 알아보기 "Understand the concepts" 1. Hoisting 2.Event Bubbling 3.Scope 4.Prototype 5.Shadow DOM 6.Strict 더 알아보기 1. Hoisting 사전적 의미 : 끌어올리기, 들어올려 나르기 JavaScript에서 아직 선언되지 않은 함수/변수를 끌어 올려서 사용할 수 있는 JavaScript의 작동방식을 의미한다. "hosting해야된다"라고 알아야되는게 아니라, 'JavaScript에서 이러한 현상이 일어난다' 라는 것을 알고 왠만하면 피해야된다. myFunction(); function myFunction() { console.log('hello world!'); } //출력결과..

2022. 1. 28. 11:04
프로젝트/[개인] 프론트엔드 로드맵

[용어정리] Part4 JavaScript | fetch API / Ajax(XHR)배우기

Front-end 로드맵 따라하기 (요약) 키워드로 알아보기 fetch API(Application Programming Interfaces)란? - api를 불러오고, 정보를 내보내주는 함수라고한다. - Ajax를 구현한 여러 방법중 최신 방법잉 fetch API이다. - fatch는 서버와 비동기 요청방식중에 하나인데, 대표적인 비동기 요청방식중에 하나인 Ajax의 방식 중 하나이다. - fetch함수에 쓰여지는 method는 get과 post가 있는데 설정을 따로 안해주면 기본적으로 get으로 설정된다. AJAX() XHR이란? - XMLHttpRequestAPI는 Ajax(Asynchronous JavaScript and XML)의 핵심 (X가 XML라고는 하지만 현재 많이 사용하고 있는 JSON..

2022. 1. 27. 16:04
프로젝트/[개인] 프론트엔드 로드맵

[용어정리] Part4 JavaScript | 문법 및 기본구조(5)

17 async function과 await 비동기를 다루는 또다른 방법이다. mdn문서 - async_function 를 보면 es2017에 표준으로 정해진것을 알 수 있다. 문서 이름은 async function으로 되어있다. 즉, async를 함수 앞 키워드로 붙이는 것이다. 이렇게 붙인 후, await도 함께 사용하는 것이다. 따라서 아래처럼 사용가능하다. 1) async function 함수이름( ) { } 2) const 함수이름 = async( ) => { } 자 그럼 본격적으로 언제 이렇게 쓰는지 알아보자! ※ async await는 Promise기반으로 하고있다. 결과값을 보게되면 SyntaxError : await is only valid in async function 라고 에러가뜬다..

2022. 1. 20. 14:41
프로젝트/[개인] 프론트엔드 로드맵

[용어정리] Part4 JavaScript | 문법 및 기본구조(4)

16 Promise 프로그램에서 간단한 코드가 한줄한줄 순차적으로 실행된다면 크게 어렵지 않겠지만, 하지만 자바스크립트에서 함수를 호출했는데 그 함수가 시작되고 끝나는 동안에도 프로그램을 계속 진행될 필요가 많이 있다. 이럴때 Promise를 이용해서 비동기적 상황에서 코드를 좀 더 명확하게 파악하고 실행하도록 만들 수 있다. mdn - Promise 문서에 따르면, Promise개체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다. /** * 1. * ES6 부터 JavaScript의 표준 내장 객체로 추가되었다. * ES6 를 지원하는 브라우저나 Node.js에서 전역에 있는 Promise를 확인할 수 있다. * * Promise개체 혹은 Promiise객체라고 불린다. */ ..

2022. 1. 20. 11:11
프로젝트/[개인] 프론트엔드 로드맵

[용어정리] Part4 JavaScript | 문법 및 기본구조(3)

15 클래스(class) >es6에 새로 추가된 문법 >JavaScript는 객체지향을 지원하기 위해서 프로토타입(prototype)기반의 방식을 지원하는데, 새로 추가된 class라는 키워드를 통해 좀 더 강력한 객체지향 프로그래밍을 지원하게되었다. mdn에 소개된 class를 보면 class라는 키워드는 새로운 객체지향 상속모델을 제공하는 것은 아니다. 기존의 프로토타입(prototype)방식을 좀 더 명료하게 사용할 수 있도록 돕는 일종의 도우미 라고 생각하는 것이 좋다. 클래스를 만드는 방식에는 2가지가 있다. 1. 선언적 방식 2. class 표현식을 변수에 할당 생성자(constructor) 함수를 통해 객체를 만들때도 함수에 인자로 넣어서, 외부에서 객체를 생성할때 안으로 넣어줄 수 있는 기..

2022. 1. 19. 18:13
프로젝트/[개인] 프론트엔드 로드맵

[용어정리] Part4 JavaScript | 문법 및 기본구조(2)

11-2 연산자 - 논리연산자 NOT - ! , AND - && , OR- || - 사칙연산할때도 곱셈 나눗셈 먼저하고, 덧셈 나눗셈을 나중에 하듯이 처리되는 순서가 따로있다 - 조건문을 구현할때 유용하게 사용된다 ! > && > || 로써, NOT이 최우선 순위를 가지고있다. const value = !(true && false || true && false || !false); // !(true && false || true && false || true); // !(false || false || true); // !(true) // false 아래 주석 풀이해놓은것을 보면, ! 먼저 처리되고, && 다음 || 순으로 처리된 것을 확인 할 수 있다. 12 조건문(Conditional Statemen..

2022. 1. 18. 00:04