분류 전체보기

[자바스크립트 / Vanilla JS] 함수 선언식 과 함수 표현식

함수 선언식(Function Declarations)이란? 1. 일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식이다. 2. 변수 선언이 let이나 const로 시작해야하는 것처럼 함수 선언을 function으로 시작한다. 3. 함수 선언문의 경우 반드시 함수명이 정의돼 있어야 하고 선언된 함수는 나중 사용을 위해 저장되며, 함수를 실행하려면 함수 이름을 호출하면 된다. 4. 함수 선언식은 코드가 실행되기 전에 로드된다 5. 함수 선언식은 var 문과 유사하게 호이스팅된다. function 함수명() { // 개발 코드 } // 함수 선언 function name() { console.log("JIWOO"); } // 함수 호출 name(); 함수 표현식(Function Expressions)이란?..

React.js 학습을 위한 준비 (~ing)

https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us 리액트를 학습중인 지인에게 추천받은 곳이다 벨로퍼트님이 운영하시는 곳이고 리액트 기초를 잡아가는 과정에서 참고 할 곳이다. 서적 1. 생활코딩! React 리액트 프로그래밍:처음 프로그래밍을 시작하는 입문자의 눈높이에 맞춘 나는 다른 언어의 기초를 잡을 때 생활코딩을 보는 편이다. 이 또한 리액트에 대해 기초를 알아가는데에 작은 도움이라도 되지 않을까 하여 구매한 서적이다. 2. 리액트를 다루는 기술..

[자바스크립트 / Vanilla JS] async / await 비동기 통신

이 번 회차에서는 프로젝트에서 필자가 직접 개발하던 도중에 적용한 비동기 통신 기능 중 ES7에서 새로 나온 기능 중 하나인 async / await에 대해 다룰 것 이다. 난 비동기 통신을 사용하여 input 값 null value check를 성공적으로 완료 -> POST fetch를 통해 파일 업로드가 성공적으로 완료 -> POST fetch를 통해 파일 업로드가 완료된 경로와 그 파일에 대한 정보를 DB에 INSERT 하는 함수를 개발하는 파트에 사용하였다. 잡언은 여기서 각설하고 async / await와 비동기통신에 대해 설명하겠다. async / await 그리고 비동기 통신이란? 자바스크립트는 싱글 스레드 프로그래밍언어기 때문에 비동기처리가 필수적이다. 비동기 처리는 그 결과가 언제 반환될..

[자바스크립트] 함수형 자바스크립트 / 함수형 프로그래밍에 대하여

https://github.com/CodeSoom/functional-javascript 정리하기엔 내용이 방대하고 알찬 내용이 많아서 정독을 권장합니다.

[자바스크립트 / Vanilla JS] new 연산자와 생성자 함수

생성자 함수란? 생성자 함수를 한 문장의 팩트로 표현하자면 "객체를 생성하는 역할을 하는 함수"이다. 더 설명할 말이 없다 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없다. 생성자 함수엔 보통 return 문이 없다. 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문에 반환문을 명시적으로 써 줄 필요가 없다. 만약 return 문이 있다면 아래와 같은 간단한 규칙이 적용된다. 객체를 return 한다면 this 대신 객체가 반환 원시형을 return 한다면 return문이 무시 return 뒤에 객체가 오면 생성자 함수는 해당 객체를 반환해주고, 이 외의 경우는 this가 반환된다 생성자 함수의 특징 생성자 함수의 특징은 다음과 같이 ..

[자바스크립트 / Vanilla JS] window.onload 여러 번 사용하기

자바스크립트에서 페이지가 모두 로딩된 후 함수 등을 호출하는 방법을 많이 사용한다. 그런데 만약 웹페이지에서 window.onload가 여러 번 사용하는 경우에는 여러 번 호출되지 않고 단 한 번만 호출된다는 단점이 있다. window.onload을 사용해야 할 때에는만약 자바스크립트를 사용한 라이브러리를 만들었을 때 ... 그리고 이 라이브러리가 여러개이고 모두 페이지가 모두 로딩된 후 동작해야한다면 onload를 대체할 방법이 필요하다. # window.onload 대체하는 방법을 알아보자, 이 경우 생각할 수 있는 방법은 window.onload를 사용하는 대신에 바로 window.addEventListener()를 사용하여 window 객체에 이벤트를 직접 추가하는 방법이 있다. window.ad..

[자바스크립트 / Vanilla JS] 비공개 멤버

비공개 멤버 function add(num1, num2) { var sum = num1 + num2; return sum; } 위 코드의 함수에는 num1, num2, sum이라는 세 가지의 고유변수가 있다. 이들 변수는 함수 내부에서는 접근이 가능하지만 함수 외부에서는 접근이 불가능하다. 비공개 멤버에 대한 별도의 문법은 없지만 클로저를 사용해서 구현할 수 있다. 생성자 함수 안에서 클로저를 만들면, 클로저 유효범위 안의 변수는 생성자 함수 외부에 노출되지 않지만 객체의 공개 메서드 안에서는 쓸 수 있다. 클로저를 함수 안에 만들어 사용하면 스코프 체인을 통해 이들 변수에 접근이 가능하게 된다. 즉, 생성자에서 객체를 반환할 때 객체의 메서드를 정의하면, 이 메서드안에서는 비공개 변수에 접근할 수 있는..

실무에서 바로 쓰는 Frontend Clean Code

https://toss.im/slash-21/sessions/3-3 실무에서 바로 쓰는 Frontend Clean Code 실무에서 클린 코드의 의의는 유지보수 시간의 단축입니다. 동료 혹은 과거의 스스로 짠 코드를 빠르게 이해할 수 있다면 유지보수할 때 드는 개발 시간이 짧아집니다. 실제 예시와 함께 1. 응집 toss.im 해당 영상은 Frontend의 Clean Code 작성에 대해 이해하기 쉽게 설명하는 영상이다 해당 영상에서 말하기를 클린코드는 짧은 코드가 아닌 로직을 빠르게 찾을 수 있는 코드라고 명시한다. 크게 보면 아래에 대한 내용에 대해 얘기하고자 한다. - 응집도: 동일한 목적을 가진 코드는 한 곳에 뭉쳐두자. - 단일책임: 함수는 한가지 기능을 하도록 하자. - 추상화: 함수의 세부구..