프론트 엔드/Javascript

[javascript] 드림코딩 자바스크립트 4. Arrow Function은 무엇인가? 함수의 선언과 표현

이번 시간에는 Javascript에 꽃이라고 불릴 정도로 핵식점인 기능을 담당하고 있는 Functions에 대해 알아보자. 여러분들이 매일 사용하고 있는 각각의 프로그램마다 제공하능 고유한 기능들이 있다. 이렇게 프로그램 안에서도 각각 저마다의 기능을 수행하는 함수들이 있는데 이렇게 절차적인 언어(procedural language)같은 경우는 함수가 프로그램에서 굉장히 중요한 기능을 담당한다. 그런데 Javascript에는 class가 추가되어 object oriented programing(OOP)이 아닌가? 이 추가된 class도 Java 언어처럼 Pure한 Object-oreiented가 아니고 Prototype을 베이스로한 각자의 Object-oreiented이다. 그래서 이 function이 ..

[javascript] 드림코딩 자바스크립트 3.코딩의 기본 operator,if,for loop 코드리뷰 팁

이번 3번째 시간은 Javascript의 연산 operator에 대해 알아볼 것이다. 이 연산은 한번 배워두면 가성비가 너무 좋다. 이유는 다른 프로그래밍언어에서도 공통적으로 사용이 가능하다. 이 연산이 쉽다고 조금 소홀이 공부하고 넘어가는 경우가 많은데, 실제로 현업에서 많은 주니어 분들이 코드 지적을 받는곳이 바로 연산이다. 그래서 여러분이 실수할 수 있는 코드 부분 한가지를 콕 찝어서 정리하고 넘어갈 테니 열심히 따라가 보자. 연산으로 넘어가기전 지난시간에 Variable과 const의 차이점 Mutable Data Type과 Immutable DataType 에 대해 설명해주었는데 조금 헷갈리게 설명해서 한번더 깔끔하게 정리해보자. // 2.Variable == 변수 (변경될 수 있는 값), rw..

[javascript] 드림코딩 자바스크립트 2.데이터 타입, data types, let vs var, hoisting

두번째 Javscript 공부시간인 데이터 타입, let vs var, hoisting을 배울 시간입니다. // 2.Variable == 변수 (변경될 수 있는 값); // JS == let (added in ES6) 이번에는 우리가 제일 중요한 Variable을 정리해보자 Variable을 변수라고도 하는데 변수라는 것은 변경될 수 있는 값을 뜻한다. Javscript에서는 변수를 만들때 let이라는 키워드를 만드는데 let은 ES6에 추가된 아이다. ES6는 전세계적으로 Javascript를 이용하는 문법을 뜻한다. // 두가지가 log되는 방식 == 어플리케이션을 실행하면 어플리케이션마다 사용할 수 있는 메모리 할당 // 이 메모리는 텅텅 빈 상자 let name = 'jungho'; console..

[javascript] 드림코딩 자바스크립트 1.콘솔에 출력 script async와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문

최근에 프론트엔드 개발직군에 짦은 기간을 일하고 다시 프론트엔드 개발자로써 성장하기위한 준비를 하고 있는 과정에서 Javscript 입문편을 정리해보고자 한다. 수많은 오픈소스와 유튜브 강의가 있지만 그 중에서 가장 편의성있고 심도있게 배울 수 있는 DreamCoding을 정리해보고자 한다. 기본 Vscode에서 세팅한 html 이다. 가장 중요한 부분들만 설명해보자면 html에 들어가는 head 요소이다. head요소에는 우리가 불러올 js파일을 이곳에서 불러올수 있는데 js파일은 script태그로 불러올 수 있다. --> 그럼 js를 불러와주는 script의 방식은 어떤 방식인가 기본적은 방식은 이렇게 script안에 src(경로)에 불러와줄 js파일을 명시하는 방법이다. 이런 방법을 사용하면 pag..

[Javascript] Promise란 ?

이번시간에는 Javascript의 객체인 Promise에 대해 알아보겠습니다. Promise란? Promise(약속)이라는 뜻으로 내용이 실행은 되었지만 결과를 아직 반환하지 않은 객체를 뜻합니다. 반환되지 않은 상태에서 Then을 붙이면 결과가 반환되고 실행이 완료되지 않았으면 완료가 된 이후 Then 내부에 함수가 실행됩니다. Resolve(성공후 리턴값) -> then으로 연결 Reject(실패시 리턴값) -> catch로 연결 Finally 부분은 무조건 실행 const condition = true; const promise = new Promise((resolve, reject) => { if (condition) { resolve("성공"); } else { reject('실패'); } })..

[javascript] 함수형 프로그래밍 과 자바스크립트와 객체지향

이번 시간에는 Javascript는 객체지향 프로그래밍인가 + 함수형 프로그래밍과 객체지향 프로그래밍 (OOTP)에 대해 알아보도록 하겠습니다.! 이번 시간에 가장 중요한 면접 질문일 수 도 있습니다!! 1. 함수형 프로그래밍이란? 함수형 프로그래밍은 명령형 프로그래밍에 속합니다. 무엇을 구현하겠다를 초점을 두어, 자료 처리를 수학적인 함수의 계산으로 취급해 상태(state)와 가변적인 데이터(variable data)를 배제하는 프로그래밍 입니다.(선언형) 실행 순서를 지정할 필요가 없기 떄문에 비절차형 언어(non-procedural language)라고도 합니다. 함수형의 중요한 개념인 순수함수 동일한 input에는 항상 같은 output을 반환한다. 함수의 실행이 프로그래밍에 영향을 주진 않는다...

[javascript]비동기적 처리(Callback, Promise, Async-Await)

데이터를 처리하는 방식인 동기, 비동기 처리에 대해서 알아보도록 하겠습니다. 동기 (Synchronous) 와 비동기 (Asynchronous) 동기 방식은 서버에 요청을 보낼때 응답이 돌아와야 다음 작업을 수행할 수 있습니다. 즉 A작업이 모두 진행 되기 전까지는 B작업은 대기해야합니다. 비동기 방식은 반대로 요청을 보낼때 응답 상태와 상관없이 다음 동작을 수행할 수 있습니다. 즉 A작업이 시작 되었을때 동시에 B작업이 실행됩니다. A작업은 결과값이 나오는대로 출력됩니다. 동기적 처리 (Synchronous) console.log("1st"); console.log("2nd"); console.log("3rd"); 위와 같은 코스를 작성한뒤 실행해보면 예상되는 결과는 1st, 2nd, 3rd일 것입니다..

[javascript] 이벤트 버블링, 캡쳐링, 위임

이번 시간에는 Event버블링 과 캡쳐링 위임에 대해 알아보자. 1. 이벤트 버블링 - Event Bubbling - 특정 화면 요소에서 이벤트가 발생할때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다. 하위의 클릭 이벤트가 상위로 전달되어 가는 그림 상위의 화면요소란? HTML 요소는 기본적으로 트리 구조를 갖는다. 여기서는 트리 구조상 한 단계 위에 있는 요소를 상위 요소라 하고 body 태그 최상위 요소라고 부른다. var divs = document.querySelectorAll('div'); divs.forEach(function(div) { div.addEventListener('click', logEvent); }); function logEvent(event) { c..

[javascript] 자바스크립트의 숫자 타입(Number Type)

Javascript는 Java와 달리 int, double 같은 숫자 타입이 나눠져있지 않다. number 하나로 정수(Integer)와 부동 소수점 수를 모두 표현한다. number 타입 리터릴 number 타입 리터럴에는 다음과 같은 것들이 있습니다. 7; // 정수 리터럴 2.5; // 부동 소수점 리터럴 0b111; // 2진수 리터럴 (binary literal) 0o777; // 8진수 리터럴 (octal literal) 0xf5; // 16진수 리터럴 (hexademical literal) 10_000; // 숫자 구분 기호 (Numeric Separators) 2진수, 16진수 정수 리터럴은 표기법일 뿐, 내부적으로는 10진수 정수와 같은 형태로 다루어 집니다. 예를 들어 0x4d는 0b1..

[Node.js] Express Restful Api 서버 만들기

이번 시간에는 Node.js express 를 만든 예제를 활용해서 서버를 만들어보자 Restful api 라는 말은 무엇일까?? 간단하게 설명하자면 "클라이언트 서버 간에 데이터를 주고 받는 방식을 정의한다" 라고 생각하면 된다. HTTP URL(Uniform Resource Identifier)를 통해 데이터(자원)을 명시하고 Method(GET,POST,PUT,DELETE)를 통해 해당 데이터를 CRUD(Create,Read,Update,Delete)한다고 생각하면 된다. - REST Method GET : 조회 POST: 생성 PUT : 전체 수정 DELTE : 삭제 PATCH : 수정 HTTP 통신을 주고 받을때는 위와 같은 매서드를 사용해서 통신을 주고 받는다. 지난 시간 소스코드에 추가를 하..

[Node.js] Express 서버 구축

이번시간에는 Node.js웹 애플리케이션 프레임워크인 Express를 활용해서 Restful Api서버를 구축하는 법을 알아보도록 하자 기본적으로 Node.js를 설치해야 구동이 가능하니 아래 링크를 참조해서 Node.js를 깔아준다. https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치를 완료했다면 콘솔화면에 직접들어가준다. 생성할 폴더에 들어가서 npm init 명령어로 pakage.json 을 만들어준다. 특별히 입력할 부분 없이 스킵.. 그리고 터미널에 express 라이브러리를 설치해준다. npm install ..