피플펀드컴퍼니 김 현 태

Strange JavaScript특이점이 온 자바스크립트의 특성과 팁{ }

우스갯 소리로 외국에서 google에 ‘js’ 라는 단어를 넣어서

JavaScript 내용이 안나오는 페이지 먼저 찾기 내기를 한다는 이야기가 ...

Contents

1. Introduce

2. Basic

3. Objects

4. Functions

5. 스타트업 이야기

자바스크립트? 그거 자바랑 비슷한거 아닌가요?

(* 주의! 자바와 자바스크립트는 키위와 키위새만큼이나 다릅니다.)

var unit1 = {

subject: “Introduce”,

articles: [ { id: 1, title: “Modern Web” }, { id: 2, title: “What’s the JavaScript” }, { id: 3, title: “What’s doing” } ]}

Modern Web

• 프론트앤드 개발의 춘추전국시대

• 반응형 웹 (Responsive Web)

• 하이브리드앱 (Hybrid Web Application)

• SPA (Sigle Page Application)

• PWA (Progressive Web Application)

• Data Visualization

• 수 많은 JavaScript Frameworks & Libraries

출처: https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f

출처: https://octoverse.github.com/

프로그래밍 언어 취급도 못받던 시절이 있었는데...

• 참 이상한 언어…

• 웹브라우저 언어, 가장 많이 사용, 가장 무시당했던

• 놀랍게도(?) 객체지향 언어

• 언어상 제약이 없으며 느슨한 타입

• 클래스가 없으며, 함수는 일급객체

• 관례적으로 Camel Case, K&R Style 권고

• Node.js 의 등장으로 서버단에도 활용

What’s the JavaScript

• HTML 컨트롤

• CSS 컨트롤

• Event 핸들링

• http 통신

• 수학 연산

• Validation

• Interection

What’s doing

• 옛날엔 이런 용도로 많이 사용했죠.

• 뭐 요즘엔 이런것도 가능합니다.

• https://codepen.io/dsenneff/pen/QajVxO

• https://www.beckett.de/

var unit2 = {

subject: “Basic”,

articles: [ { id: 1, title: “Variables” }, { id: 2, title: “Scope & Hoisting” }, { id: 3, title: “Data Types” }, { id: 4, title: “Strange Operator” }, { id: 5, title: “Number” } ]}

Variables

> var1 a

> var2 b

> var3 c > var4 d

> var5 e > var6 e

> var7 f > var8 f

• var 키워드로 선언

• 선언과 동시에 값을 할당 가능.

• 객체와 함수도 변수에 할당 가능.

• 선언되지 않은 변수는 전역변수.

• 콤마(,)를 이용해 동시에 여러 변수 선언.

• 변수를 재선언 해도 값을 잃지 않음.

Scope & Hoisting

> undefined > b

• Hoisting • 스코프 내에서 모든 변수의 선언을 최상단으로 끌어올리는 자바스크립트의 기본 행동.

• 모든 변수는 최상단에 작성하는 습관 필요

• Scope • Local scope, Global scope

• 범위 내 변수의 접근 가능성을 결정

• 전역변수는 모든 스크립트의 함수와 웹페이지 전체에서 접근 가능.

• 전역변수의 scope는 window 객체

잠깐만요

참고: https://en.wikipedia.org/wiki/Indentation_style#K.26R_style

• K&R Style

Data Types

• null, undefined (?!)

• typeof

Strange Operator

• + • 사칙연산의 + 와 문자열 결합의 연산자가 같음

• 기본적으로 HTML 에서 넘어온 값은 모두 “string”

• ==, === (?) • ==, != 은 값만 비교

• ===, !== 은 값과 타입을 함께 비교

Number casting

NaN

• Not a Number

• 정의되지 않은 (undefined) 또는 숫자가 아닌 것으로 연산을 시도할 경우

• NaN이 발생하기 전에 예외 처리하는게 최선 (0으로 초기화)

참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/NaN

var unit3 = {

subject: “Objects”,

articles: [ { id: 1, title: “JavaScript == Object” }, { id: 2, title: “Properties” } ]}

JavaScript == Object

• 자바스크립트에서는 객체가 짱

• object 도 객체

• 배열도 객체

• 함수 또한 객체

• null 조차 객체

• 무튼 죄다 객체임.

Properties

• 객체의 프로퍼티를 언제든지 변경, 추가 가능

• 객체의 프로퍼티로 함수를 가질 수 있음 (메서드)

• 함수도 프로퍼티와 메서드를 가질 수 있음.

var unit4 = {

subject: “Functions”,

articles: [ { id: 1, title: “First Class Object” }, { id: 2, title: “Function Definitions” }, { id: 3, title: “Parameters” }, { id: 4, title: “JsDoc & ||” } ]}

First Class Object

• 일급객체

• 변수나 데이터 구조에 담을 수 있음

• 인수로 전달 가능

• 반환값으로 사용 가능

• 런타임에 생성 가능

Function Definitions

• Function Declarations • Function Expressions

• The Function() Constructor• Self-Invoking Functions

Parameters• 데이터 타입을 지정하지 않음

• 전달된 인수의 유형 검사도 하지 않음

• 전달된 인수의 개수도 확인하지 않음 (?!)

JsDoc & ||

참고: http://usejsdoc.org/

웹 프론드앤드 개발에서 가장 중요한건?

바로..

User friendly

약간의 오류가 있더라도 사이트는 보여줍시다...

웹 프론드앤드 개발에서 가장 중요한건?

피플펀드의 신뢰도가 -1 만큼 하락하였습니다.

피플펀드의 신뢰도가 -100 만큼 하락하였습니다.

그러니까 살살 다뤄주세요...

1. K&R 스타일로 코딩

2. 변수는 최상단에 모아두자

3. 변수는 무조건 명시적으로(var) 선언할 것

4. 전역변수를 최소화 하자

5. ==, != 대신 ===, !== 로 비교하기

6. 숫자 연산은 parseInt() 와 Number() 적절히 사용

7. 복잡한 연산은 서버단에 양보하기

8. 배열과 객체의 마지막 콤마에 주의

9. 스크립트의 시작은 즉시실행 익명 함수로 시작하자

10. 함수 정의는 가급적 한가지 패턴으로 통일하자

11. 함수의 매개변수가 필요하지만 없어도 동작하도록 만들자

12. jsDoc을 이용한 주석의 생활화

var unit5 = {

subject: “스타트업 이야기”}

2016년에 자바스크립트를 배우는 기분

난 지금 사용자들이 남긴 최근 행동들을 보여주는 페이지를 짜려고 하는데, 그러면 일단 REST를 이용해서 데이터를 불러와 필터가 되는 테이블에 표시해 준 다음, 서버에서 갱신되는 게 있다면 테이블을 업데이트 해주려고 해. 데이터 불러오고 표시하는 데 jQuery 쓰면 되지?

야잌ㅋㅋㅋㅋㅋㅋㅋ 누가 jQuery 쓴다고 그러냐. 2016년 잇 아이템인 React를 써야지.

헐, 그게 뭔데?

페이스북 존잘러들이 만든 슈퍼쿨 짱짱 라이브러리지. 네가 웹앱 만들 때 뷰를 마음대로 다루면서 기능과 성능도 모두 챙길 수 있지.

쩐다... React 써서 서버에서 온 데이터도 표시할 수 있지?

당근, 근데 일단 React랑 React DOM을 니 웹 페이지에 넣어야 됨.

엥? 왜 두 개나 넣어야 함?

하나는 진짜 라이브러리고 다른 건 DOM 다루는 데 쓰지. 그건 JSX로 표현되는거고.

JSX? 그건 또 뭔

JSX는 자바스크립트 문법을 확장하는 거야 XML처럼. DOM을 표현하는 다른 방식인데 HTML보다 훨 나음.

HTML 가지고 뭐가 부족하길래 그런 걸 씀?

야 2016년에 직접 HTML을 다루는 사람이 어딨어.

알았어. 그럼 그 둘만 더하면 React 쓸 수 있는거지?

글쎄, Babel을 추가해야 React를 쓸 수 있을껄.

Babel은 또 뭐임?

ㅋㅋㅋ Babel은 자바스크립트를 특정 자바스크립트 버전으로 옮겨주는 녀석이지. ReactJS를 쓰는데 꼭 Babel을 써야할 필요는 없는데 그럼 ES5만 써야 함. 2016년인데 당근 ES2016+ 정도 써야 어디가서 자바스크립트 좀 한다고 볼 수 있지.

ES5? ES2016+? 이게 다 뭔데... 진짜 돌아버리겠음 ES5는 ECMAScript 5를 나타내는거야. 요즘

브라우저들에서 구현되어 돌아가고 있는 대부분의 버전이 이거라고 보면 됨.

ECMAScript?

엉, 표준이라 불리는 자바스크립트는 1999년에 만들어진 …중략… 그 땐 모든 게 엉망진창이었는데 요즘 그나마 이렇게 된 걸 감사해야지. 아무튼 요즘 돌아가는건 일곱 번째 구현체야.

일곱 번째라고? 흠좀무. 그럼 ES5랑 ES2016+는 뭐라고?

다섯 번째랑 일곱 번째를 그렇게 부르지.

여섯 째한텐 도대체 뭔 일이 있었길래...

알았다... 그럼 ES6 말고 ES2016+는 왜 쓰는데?

뭐... 굳이 원한다면 ES6 써도 돼. 근데 async랑 await 같이 멋진걸 쓰려면 ES2016+을 써야만 해. 아니면 ES6 제너레이터로 코루틴만 쓸 수 있을거야. 비동기 호출 흐름을 제어하려면 말이지.

... 뭐라고 하는지 하나도 모르겠는데. 이름도 헷갈리고. 난 그냥 서버에서 데이터 불러서 보여주고 싶은 건데. CDN에서 jQuery 받아서 걍 AJAX 콜 하려는거고. 이렇게 하면 왜 안 되는데?

2016년이잖아. 아무도 jQuery 같은 건 안 쓴다고. 그런거 썼다간 쓰레기 같은 스파게티 코드만 남아. 그것도 몰라?

ES6 말하는거임? ㅋㅋ 뭐 다 하위호환성을 가지고 있어서 ES2016+을 쓴다면 그 이전 버전의 기능 다 쓰고 있는 거라고 보면 됨

출처: www.looah.com/article/view/2054 원글: How it feels to learn JavaScript in 2016

기존것과 새로운것 멋진것과 효율적인것

피플펀드에 들어와서 2년동안 한 일들

• 메인 리뉴얼 3회

• 개인채권투자 전체 리뉴얼 2회

• 개인신용대출 전체 리뉴얼 2회

• 담보채권투자 신규런칭 및 리뉴얼 2회

• 담보채권 랜딩 페이지 약 300건

• 투자 마이페이지 리뉴얼 2회

• 이벤트 프로모션 랜딩페이지 15건

• 약관 공통 모듈화 (약 35개 약관)

• 게시판 5종

…

아무튼 겁나 만들고 수정하고 없애고

다시만들고 …

불과... 1년 사이에

?

심지어 예전엔 이런것도..

이제는 기억속으로..

그래서 뭐 어쩌라는...

적극적으로 사용하세요

그대신 잘.. 적절히

피플펀드도 합니다. 새로운거

〉

〉 〉

slim version

another ajax 〉 〉

〉

[참고자료]

• 데이비드 플래너건 [자바스크립트 완벽가이드], O’REILLY, 2008

• 스토얀 스테파노프 [자바스크립트 코딩 기법과 핵심 패턴], O’REILLY, 2011

• https://developer.mozilla.org/ko/docs/Web/JavaScript

• https://www.w3schools.com/js/default.asp

• https://wtfjs.com/

감사합니다.