인생 1회차 (First-Life) Ing

오랜만에 적어보는 티스토리

재밌게 살고 싶은 초보 개발자 — Wed, 22 May 2024 13:12:33 +0900

어쩌다 벨로그로 갈아타면서 오랜만에 티스토리 들어왔더니

꾸준히 일 방문자 30정도씩 찍히고 있길래

괜히 티스토리 대견(?)해져서 적어보는 포스팅..

(사실은 답답한 마음에 일기장처럼 써내려가는 글)

일단 나의 근황

취업준비중이다

이래저래 사정으로.. 하필 젤 어려운 시기에

이력서를 셀 수 없이 넣고 나서

얼마전에 첫 면접을 보고 왔고

어제 떨어졌다는 연락을 받았다

기대는 안했지만 욕심은 났던 회사였어서 참 많이 아쉬웠다

첫 술에 배부를 수 없다고 생각하면서도

'아 그때 왜 그렇게 대답했지' 라는 후회가 몰려왔다

기술 질문에 대답을 못한 것은 별로 아쉽지 않았는데

인성 질문에 대답을 바보같이 한 게 계속 생각났다

~~(특히 비전공자인 나를 왜 뽑아야 하느냐는 질문..)~~

그동안 공부를 하면서도

'이 취업난에 (열악한 조건을 가진) 내가 설 곳이 있을까 ' 라는 생각을 계속 했는데

그 불안이 점점 커지는 것 같다

기술 질문은 공부하면 더 잘 대답할 수 있다는 자신감이 있지만

인성 질문 쪽은 항상 자신이 없다.. ㅎㅎ

불안해도 바뀌는 건 없으니 다시 공부하고 준비할테지만 (울면서)

이렇게 몰래 한번 한탄해본다

취업하게 되면 그때 또 들러서 이렇게 적어야지

첫 면접 떨어져서 어쩌나 했는데

다음 회사가 훨씬 더 좋은 곳이었다니

완전 럭키비키잖아 ( • ᴗ - ) ✧

(혹시 이 글을 보고 있는 취업중인 비전공 개발자 분들 있다면 화이팅입니다!)

innerHTML, innerText, textContent 차이

재밌게 살고 싶은 초보 개발자 — Wed, 26 Jul 2023 14:30:28 +0900

innerHTML

태그를 포함한 모든 HTML을 반환

innerText

웹 브라우저 화면에 렌더링 되는 (=눈에 보이는) 값만 반환

노드로 저장되지 않는 텍스트 데이터는 제외(폼 요소 안에 작성한 텍스트)

textContent

태그 안의 모든 (=눈에 보이지 않는) 텍스트 반환

(<script>, <style> 태그 포함)

공백 제거 함수(trim, replace)

재밌게 살고 싶은 초보 개발자 — Thu, 15 Sep 2022 13:14:56 +0900

trim( )

앞 뒤의 공백을 제거해주는 함수 ( trimStart( ) : 앞 / trimEnd( ) : 뒤)

let a = " a b c d e ";
a.trim();

// 'a b c d e'

replace( )

정규식을 함께 이용하여 공백 제거

let text = ' a b c d e';
let regex = / /gi;
text.replace(regex, '');  

// 'abcde'

import 시 경로가 이상하게 들어오는 문제

재밌게 살고 싶은 초보 개발자 — Wed, 14 Sep 2022 10:11:23 +0900

문제

리액트에서 import 시 경로가 react/cjs/react.production.min 처럼 들어올 때

해결방법

npm install --save @types/react

[Git] 오류(LF will be replaced by CRLF in ~)

재밌게 살고 싶은 초보 개발자 — Mon, 29 Aug 2022 15:08:48 +0900

✔️ 오류문구

warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory

오류가 나는 이유

CR(Carriage-Return) : 현재 커서를 줄 올림 없이 가장 앞으로 옮기는 동작

LF(Line-Feed) : 커서는 그 자리에 그대로 둔 상황에서 종이만 한 줄 올려 줄을 바꾸는 동작

CRLF(Carriage-Return+Line-Feed) : 줄바꿈

OS마다 줄바끔에 대한 문자열이 다르기 때문에 git에서 어느 쪽을 성택해야 할지 경고 메시지를 띄운 것!

❗ 해결방법

window 명령어

git config --global core.autocrlf true

mac 명령어

git config --global core.autocrlf input

+ 시스템 전체 적용하고 싶다면 --global 옵션 추가하고, 해당 프로젝트에만 적용하고싶다면 옵션은 빼주기!

회원가입 페이지 만들기(2) - 깃헙 오류잔치

재밌게 살고 싶은 초보 개발자 — Wed, 17 Aug 2022 12:13:54 +0900

회원가입 페이지는 백엔드 개발자 분과 함께 만들어보는 거라

깃헙에도 남기고 싶어서 저장소도 새로 만들었다

권한도 나눠 갖고 내 컴퓨터에 clone을 해야 되는데.. 문제는!

지금 쓰고 있는 Vscode 예전 사람이 이미 사용하던 것이라 clone 하는 순간부터 무수한 에러 발생..

일단 사용자부터 바꿔주고

git config --global user.name '이름'
git config --global user.email '이메일'

오류시작

✔️ remote: permission to

❗A라는 유저가 '최초' 글로벌 유저 등록을 하고, 나중에 B라는 아이디로 다시 글로벌 유저 등록을 해서 push를 하려할 때 여전히 A의 github 아이디가 나오는 오류

제어판 -> 사용자 계정 -> Windows 자격 증명 관리 -> 일반 자격 증명 github 펼치고 -> 편집에서 사용자 이름과 암호 수정
(window 기준)

✔️updates were rejected because the tip of your current branch is behind

❗깃헙 저장소를 만들 때 readme.md 파일을 생성하면 나는 오류

git pull

git pull

그럼에도 에러가 나면 근본적인 해결책도 있지만 임시방편으로 해결 가능

git push -u origin +master

✔️ src refspec master does not match any

❗로컬 저장소에 있는 프로젝트를 깃허브로 pull 없이 push 하는 경우 기존 내용에 문제가 생길 수 있기 때문에 발생하는 오류

.git 파일을 삭제하고 다시

git init
git add . 
git commit -m "메세지"

✔️ 'origin' does not appear to be a git repository

❗연결되어 있는 저장소 문제, pull 또는 push 하면 발생

git remote -v로 현재 연결된 저장소 확인

현재 연결된 주소를 해제 후 재연결

git remote remove 'origin'
git remote add origin '저장소주소'
git remote -v 로 확인

✔️error: failed to push some refs to

❗원격 저장소(git hub)에 로컬(내 컴퓨터)에는 없는 파일이 있을 때 내 파일을 push 하면 발생하는 오류

먼저 git pull 로 저장소에 내용을 가져온 다음 git push

✔️ authentication failed for~

❗ 2021/08 이후로 git hub에서 Id/Password 방식이 아닌 token 을 이용하여 로그인하기 때문에 발생
깃헙로그인 -> settings -> Developer settings -> Generate new token -> Note와 Expiration 입력 -> repo 체크 -> ⭐토큰 복사⭐ -> 로컬 컴퓨터 깃에 등록

git config --global user.password '복사한 토큰'

회원가입 페이지 만들기(1) - UI, HTML, CSS

재밌게 살고 싶은 초보 개발자 — Tue, 16 Aug 2022 15:13:41 +0900

회원가입 페이지 만들기

드디어 내 힘으로 회원가입 페이지를 만들어 보게 됐다 :)

사실 진작에 했어야 되는데 백엔드 처리하는 것도 막막하고

혼자 뭘 해보기가 겁나서 계속 미루고 있었..

이번에는 (반강제로 하는거긴 하지만) 백엔드 봐주실 분도 있어서

좋은 공부라고 생각하고 시작

일단 어떻게 짜야할지 구글링으로 많이 찾아보고

잘 정리된 블로그를 찾아서 그거 보고 많이 참고했다!

(어떤 항목을 넣을지, 해당 항목에 체크해야할 리스트 등)

그리고 처음으로 백엔드도 경험하는 거니까

협업 경험 해볼 겸 노션, 깃헙저장소, 슬랙도 만들었다!!!

(비록 단둘이지만ㅋㅋㅋㅋㅋㅋㅋㅋ)

노션 페이지는 내가 만들어서 공유하고

깃헙은 백엔드 분이 해주시기로!

UI

따로 디자인이 있는 게 아니라서 피그마 공부도 할 겸 내가 뚝딱뚝딱..

~~늘 느끼는 거지만 디자인... 결코 쉬운게 아니다......~~

결과화면

유효성 검사 생각해서 미리 경고문구 들어갈 곳도 디자인해놓고

최대한 간단하게 만들었다!

HTML / CSS 작성

최근 계속 리액트만 하다가 HTML / CSS 하니까 신나게 한 것 같다!

CSS 재밌어!

HTML

wrapper 로 크게 한번 감싸주고 제목 부분(Header)과 폼 부분으로 나눴다
경고문구는 처음부터 html에 두고 기본 값을 display : none으로 숨겨두었다가 조건이 안 맞으면 나타나게 하려고 했는데 JS 짜다가 보니 경고문구가 상황에 따라 달라질 수 있어서 JS에서 다 다루기로 했다!
input 속성에서 나름 조건을 걸어줬는데 유효성 검사에서 해결이 되길래 많이 수정했다
(ex. minlength, maxlength 등)
짜다 보니 클래스명, 아이디명 짓기가 어찌나 어려운지.. 누가 봐도 알기 쉽게 짓기란 정말 어렵구나
(는 JS 변수명 짓다 보니 이쪽은 선녀였다는 걸...^^)

CSS

간단하게 Reset CSS 해주고
레이아웃은 position은 안 쓴 지가 오래돼서 전부 다 flex로!!
아이디 input 박스 안에 중복 체크 버튼이 안 예쁜 것 같아서 따로 빼버렸다
어떤 태그를 써야 적절한가 고민
기존 input은 이메일 도메인 선택을 위한 select로 수정하고
직접 입력 시에 필요한 input을 하나 더 추가하고 직접 입력 시에만 활성화되도록 했다
이메일 도메인 '선택' 항목이 선택되지 않게 하기 위해 disabled 속성을 추가로 줬다 (아래 코드 참고)
생년월일은 월만 HTML에서 Select로 했다가 (나머지는 input) 일관적으로 하고 싶어서 input만 두고 JS로 동적으로 바꿨다
그리고 디자인할 때 빼먹은 것 소소하게 추가(ex. 필수항목 알려주는 표시 등)

<input class="custom-email" disabled id="domain-input" />
<select id="domain-list" required>
	<option disabled value="" selected>선택</option>
	<option value="naver.com">naver.com</option>
	<option value="hanmail.net">hanmail.net</option>
	<option value="google.com">google.com</option>
	<option value="nate.com">nate.com</option>
	<option value="custom">직접 입력</option>
</select>

결과 화면

참고 링크

https://choiiis.github.io/web/toy-project-sign-up-and-in-page/

SEO (검색 최적화)

재밌게 살고 싶은 초보 개발자 — Mon, 18 Jul 2022 23:59:29 +0900

검색 최적화

검색자의 의도를 이해하고 이에 충실한 웹 페이지를 제작
검색엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발해 검색 결과 상위에 노출될 수 있도록 하는 것

검색 최적화 방법

홈페이지 구조 개선 (시맨틱 마크업)
올바른 메타 태그 활용
이미지에 alt 속성 기재 (시작자료를 텍스트로 설명 = 웹 접근성)
모바일 친화적 웹
(meta name="viewport" 태그를 통해 검색엔진에 해당 사이트가 모바일 친화적이라는 것을 알려주는 것이 최적화 점수를 많이 받을 수 있는 방법)
연관성 있는 양질의 컨텐츠
핵심적인 웹 지표(LCP, FID, CLS)와 로딩지표
LCP : 사용자가 URL을 요청한 시점부터 페이지 내에서 시작적으로 가장 큰 콘텐츠를 그리는 데에 걸리는 시간
FID : 웹 페이지가 사용자의 동작(링크 클릭 등)에 반응할 때 까지 걸리는 시간
CLS : 누적 레이아웃 변경.
SSL(Https) 사용 여부

참고: https://velog.io/@hsecode/%EC%B5%9C%EC%A0%81%ED%99%94-%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84-%EC%B5%9C%EC%A0%81%ED%99%94SEO-%EC%9D%B4%EC%9C%A0%EC%99%80-%EB%B0%A9%EB%B2%95-10%EA%B0%80%EC%A7%80

https://library.gabia.com/contents/domain/4359/

자바스크립트 ES5와 ES6 차이

재밌게 살고 싶은 초보 개발자 — Mon, 18 Jul 2022 00:43:47 +0900

ES란?

ECAMSCRIPT의 약자로 자바스크립트의 표준 규격을 나타내는 용어
ES5 (2009년) ES6(2015년)출시
매년 업데이트 되고 있지만 ES5와 ES6의 차이가 크기 때문에 많이 비교됨

요즘 많은 회사들이 ES6을 쓰고 있는데 왜 ES5까지 알아야 할까?

기존에 작성된 코드를 이해하기 위해

ES5와 ES6 차이

1. let, const 추가

함수레벨 스코프를 사용하고 재할당이 재선언이 가능한 var 와 달리

let과 const는 블록레벨 스코프를 가지며,

let은 재할당 가능, 재선언 불가

const는 재할당/재선언 불가하여 상수에만 쓰임

2. 화살표함수 추가

화살표 함수(Arrow function)가 추가되어 함수를 간결하게 나타낼 수 있고 가독성 및 유지보수성이 올라감

단, 기존의 함수와 this 바인딩이 다르기 때문에 적절히 사용

3. 클래스 추가

ES5까지는 프로토타입을 기반으로 클래스를 대신했지만

ES6부터 클래스가 도입됨

클래스 : 객체를 생성하는 함수 (=생성자 함수)

4. 템플릿 리터럴

작은따옴표나 큰 따옴표 대신 백틱(`)으로 문자열을 감싸 표현하는 기능

const name = "놀먹"
cosnt age = "20"

console.log(`내 이름은 ${name}이고, 나이는 ${age}살이야. ${`잘 부탁해`}`)

// 내 이름은 놀먹이고, 나이는 20야. 잘 부탁해

5. 모듈사용

모듈이란 재사용하기 위한 코드 조각으로 세부사항을 캡슐화시키고 API부분만 외부에 노출시킨 코드들

모듈은 모듈 스코프를 가지며 export, import 키워드로 사용 가능

6. Default parameter

기존 매개변수에 초기값을 작성하려면 함수 내부에서 로직이 필요했으나, ES6이후 default parameter가 추가됨

7. Destrucuring

비구조화 할당. 객체나 배열의 요소를 해체하여 개별 변수를 할당하는 것

let arr = ["one", "two", "three"];
let [one, two, three] = arr;
console.log(one, two, three);
// one two three

let [one,two,three] = ["one", "two", "three"];
console.log(one,two,three)
// one two three

8. Promise

기존의 콜백지옥을 해결하기 위해 도입

프로미스 후속처리 메서드를 통해 에러 처리를 효과적으로 할 수 있게 됨

9. Multi-line Strings

백틱(`)을 이용하여 여러 줄의 문자열을 쉽게 처리

웹접근성과 웹표준

재밌게 살고 싶은 초보 개발자 — Fri, 15 Jul 2022 20:42:33 +0900

웹접근성

모든 사용자가 신체적, 환경적 조건에 관계없이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것
웹 접근성 준수 고려사항 : 시각, 이동성, 청각, 인지
웹 브라우징에 쓰이는 보조과학기술 : 스크린리더, 화면확대도구, 음성인식, 키보드 오버레이

웹표준

브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법
(=어떤 브라우저를 사용하든 웹페이지가 똑같이 보이고 정상적으로 작동해야 웹 표준을 잘 지킨 것)
웹표준의 장점
- 웹접근성 수준의 향상
- 검색 친화적인 웹사이트 구현
- 구조와(html) 표현(css)의 분리 → 페이지 로딩속도 향상
- 손쉬운 유지 보수 및 비용 절감 효과
- 호환성 확보(브라우저 차이에도 항상 동일한 결과를 기대할 수 있음)

참고: https://seulbinim.github.io/WSA/standards.html#%EC%9B%B9%ED%91%9C%EC%A4%80%EC%9D%98-%EC%9E%A5%EC%A0%90

Date 객체 정리

재밌게 살고 싶은 초보 개발자 — Wed, 13 Jul 2022 22:15:39 +0900

Date

const date = new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds)

=> 최소한 연도와 월이 주어졌을 때, Date()의 형태는 Date 객체를 생성할 때 모든 구성 요소(연, 월, 일, 시, 분, 초, 밀리초)를 모두 매개변수에서 가져옵니다. 누락한 요소에는 가장 낮은 값(day는 1, 나머지는 0)을 사용합니다. 모든 매개변수 값은 UTC가 아닌 현지 시간으로 취급.

getYear() : 1970년도 이후의 연도
getFullYear() : 현재 연도
getMonth() : 월. (0부터 시작하기때문에 현재 월을 알려면 +1을 해줘야함)
getDate() : 일
getDay() : 요일 (반환값은 0-6까지이고 0이 '일요일', 6이 '토요일')
getHours() : 시
getMinutes() : 분
getSeconds() : 초
getTime(): 초 단위

toISOString() : 주어진 날짜를 국제표준시 기준 ISO 8601 형식으로 표현한 문자열.

new Date().toISOString()
// '2022-07-13T13:01:30.377Z'

new Date().toISOString().slice(0,10)
// '2022-07-13'

toLocaleString() : 사용자의 문화권에 맞는 표기법으로 문자열 리턴 (date로 할 경우 아래와 동일)

const num = 1234.56789;
console.log(num.toLocaleString("ar-EG"));
console.log(num.toLocaleString("zh-Hans-CN-u-nu-hanidec"));
console.log(num.toLocaleString("ko-KR", { style: 'currency', currency: 'KRW' }));

// ١٬٢٣٤٫٥٦٨
// 一,二三四.五六八
// ₩1,235

toLocaleDateString() : 사용자의 문화권에 맞는 시간표기법으로 객체의 시간을 문자열로 리턴

today = new Date()
console.log(today.toLocaleDateString()); 
console.log(today.toLocaleTimeString());
console.log(today.toLocaleString()); 

// 2022. 7. 13.
// 오후 10:10:00
// 2022. 7. 13. 오후 10:10:00

리액트 훅(React Hook) - 1

재밌게 살고 싶은 초보 개발자 — Tue, 12 Jul 2022 03:14:02 +0900

리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다.

(이전에는 상태를 관리하기 위해 class 기반 컴포넌트를 작성해야 했다. => 함수형에 비해 유지보수 복잡)

※ 왜 class형 컴포넌트를 쓰지 않고 Hook과 함수형 컴포넌트를 쓸까?

class형 컴포넌트의 길어지는 코드 길이 문제, 중복 코드, 가독성 문제 등을 해결하기 위해

useState

React에서 import
컴포넌트에서 상태를 관리
const [data, setData] = useState(data의 초기값)

// 원래는 이런 형태지만 배열 비구조화 할당을 통하여 각 원소를 추출해준 것

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

useState 함수를 호출하면 배열을 반환하는데, 첫번째 원소는 현재 상태의 값이고 두번째 원소는 상태값을 갱신해주는 Setter 함수
useState() 괄호안의 값은 상태의 초기값

useRef

React에서 import
특정 DOM을 선택할 때 사용
useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 선택하고 싶은 DOM 에 ref 값으로 설정 => Ref 객체의 .current 값은 원하는 DOM 을 가르킴

useEffect

React에서 import
컴포넌트의 라이프사이클(mount, update, unmount)을 컨트롤

useEffect ( () => { } );  // 재렌더링 마다 코드실행
useEffect ( () => { } , [ ] ); // mount 시 코드실행
useEffect ( () => { } , [ state ] ); // 특정 state 변경시에만 코드 실행
useEffect ( () => { return()=>{} } , [ ] ); // unmount 시 코드 실행

// Callback 함수
// Dependency Array ( 의존성 배열 / 뎁스) 
// 의존성 배열내에 들어있는 값이 변화하면 콜백함수가 수행된다.

useMemo

Memoization : 이미 계산해 본 연산 결과를 기억해두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억해두었던 데이터를 반환시키게 하는 방법

React에서 import
Memoization 하고 싶은 함수를 감싸서 최적화
함수를 전달받아서 그 함수가 리턴하는 값을 리턴하기 때문에 다른 곳에서 쓸 때는 함수로 쓰는게 아니라 값으로 사용

  const Example = useMemo(() => {
   // 함수내용
  }, [data]); // data 가 변할때만 함수 재실행

  const value = Example;
  // cosnt value = Example() <- 이렇게 쓰면 안됨

useMemo는 연산결과(함수)를 재사용 / React.memo는 컴포넌트를 재사용

useCallback

React에서 import
Memoization 된 콜백함수를 반환
함수는 현재 state 값을 참조할 수 있어야 하기 때문에 컴포넌트가 재생성될 때 다시 생성되는 것이므로, Dependency Array 를 빈배열로 전달하면 문제가 생길 수 있음 ⇒ setState( ( )=> { } )
(setStat함수에 인자로 함수를 전달하여 최신의 state를 참조할 수 있게 해야함)

  const example = useCallback(() => {
	// 함수내용
  }, []);

자주 사용하는 배열 함수 10가지

재밌게 살고 싶은 초보 개발자 — Sun, 10 Jul 2022 23:14:13 +0900

출처 : 드림코딩

https://www.youtube.com/watch?v=3CUjtKJ7PJg&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=9&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9

배열함수

1. 주어진 배열을 문자열로 변환 : join() , toString()
⇒ join은 구분자를 넣을 수 있음, 기본은 콤마

const fruits = ['apple', 'banana', 'orange']; 
fruits.join(',')

// 'apple,banana,orange'

2. 주어진 문자열을 배열로 변환 : split()
⇒ 구분자 전달 필수, 기본 구분자는 콤마

const fruits = ' , , , ';
fruits.split(',')

// (4) [' ', ' ', ' ', ' ']

fruits.split(',', 2)

// (2) [' ', ' ']

3. 배열의 순서를 거꾸로 만들기: reverse()

⇒ 기존 배열을 바꿈

const array = [5,4,3,2,1];
array.reverse()

// (5) [1, 2, 3, 4, 5]

4. 처음 2개의 요소를 제거한 새로운 배열 만들기: slice() (=배열의 특정한 부분만 리턴)
⇒ 남기고 싶은 인덱스의 시작과 끝을 정해줌. 끝은 배제됨
(ex. 인덱스 4번까지 남기고 싶으면 끝 인덱스는 5로 적기)

const array = [1,2,3,4,5];
array.splice(2,5); 

// (3) [3, 4, 5]

splice() ⇒ 기존 배열을 바꿈

const array = [1,2,3,4,5]; // 1
const result = array.splice(0,2); // 2

// console.log(array)
// (3) [3, 4, 5] 
// console.log(result)
// (2) [1, 2]

Q. 5-10번

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
]

5. 점수가 90점인 학생 찾기 : find()
⇒ 배열의 요소마다 콜백함수전달, boolean값 리턴, 처음 찾은 값 리턴

students.find((student)=> student.score === 90);

// Student {name: 'C', age: 30, enrolled: true, score: 90}

6. 수업에 등록한 학생 찾기 : filter()
⇒ 원하는 요소만 필터링 해줌. 새로운 배열을 만듦

students.filter((student)=> student.enrolled);

//(3) [Student, Student, Student]
// 0: Student {name: 'A', age: 29, enrolled: true, score: 45}
// 1: Student {name: 'C', age: 30, enrolled: true, score: 90}
// 2: Student {name: 'E', age: 18, enrolled: true, score: 88}

7. 점수만 들어있는 새로운 배열 만들기: map()
⇒ 배열 안에 있는 각각의 요소를 콜백함수를 호출하면서 다른 요소로 변환. 새로운 배열을 만듦

students.map((student)=> student.score);

// (5) [45, 80, 90, 66, 88]

8. 점수가 50점 미만인 학생유무 확인 : some() , every()
⇒ some : 하나라도 조건에 만족하는 요소가 있다면 true ⇒ every : 모든 요소가 조건에 만족하면 true

students.some((student)=> student.score < 50);

// true

9. 평균 점수 구하기: reduce()

reduceRight() ⇒ 배열의 제일 마지막부터 시작
⇒ 배열 안의 모든 요소들마다 콜백함수 호출, 콜백함수에서 리턴되는 값은 어떤 요소들의 누적 결과값을 리턴
⇒ 원하는 시작점부터 모든 배열을 돌면서 어떤 값을 누적할 때 사용

const result = students.reduce((prev, curr)=> 
  prev + curr.score ,0); // 369
console.log(result/students.length)

// 73.8

// prev : 이전의 콜백함수에서 리턴된 값
// curr : 배열의 아이템을 순차적으로 전달받음
// 0에서 시작하여 0+A의 점수+B의 점수+C의 점수 = ...점수누적
// 학생수로 나누기

모든 점수를 문자열로 변환

students.map(student => student.score).join()

// '45,80,90,66,88'

10. 낮은 점수가 먼저 나오게 정렬하기 : sort()

⇒ 기존 배열을 변경

students.map(student => student.score)
	.sort((a,b)=>a-b)
	.join()

// '45,66,80,88,90'

모던 자바스크립트 Deep Dive #17-1 (프로토타입)

재밌게 살고 싶은 초보 개발자 — Mon, 30 May 2022 18:11:08 +0900

자바스크립트는 명령형imperative, 함수형functional, 프로토타입 기반prototype-based 객체지향 프로그래밍OOP;Object Oriented Programming을 지원하는 멀티 패러다임 프로그래밍 언어다.

자바스크립트는 객체 기반의 프로그래밍 언어이며 자바스크립트를 이루고 있는 거의 "모든 것"이 객체다. 원시 타입primitive type의 값을 제외한 나머지 값들(함수, 배열, 정규 표현식 등)은 모두 객체다.

객체 지향 프로그래밍

객체지향 프로그래밍은 프로그램을 객체object의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 말한다.

객체지향 프로그래밍은 실세계의 실체(사물이나 개념)을 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작한다. 실체는 특징이나 성질을 나타내는 속성attribute/property을 가지고 있고, 이를 통해 실체를 인식하거나 구별할수 있다.

예를 들어, 사람은 이름, 주소, 성별, 나이 등 다양한 속성을 갖는데 이때 "이름이 아무개이고 성별은 여성이며 나이는 20세인 사람"과 같이 속성을 구체적으로 표현하면 특정한 사람을 다른 사람과 구별하여 인식할 수 있다.

이러한 방식을 프로그래밍에 접속시켜 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현하는 것을 추상화abstraction라 한다.

이처럼 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라 하며, 객체지향 프로그래밍은 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임이다.

객체지향 프로그래밍은 객체의 상태state를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동작behavior을 하나의 논리적인 단위로 묶어 생각한다. 따라서 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조라고 할 수 있다. 이때 객체의 상태 데이터를 프로퍼티property, 동작을 메서드method라 부른다.

객체는 고유의 기능을 갖는 독립적인 부품으로 볼 수 있지만 자신의 고유한 기능을 수행하면서 다른 객체와 관계성relationship을 가질 수 있다. (다른 객체와 메시지를 주고받거나 데이터를 처리할 수 도 있고 다른 객체의 상태 데이터나 동작을 상속받아 사용하기도 한다. )

상속과 프로토타입

상속inheritance : 객체지향 프로그래밍의 핵심 개념으로, 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것

자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다. 중복을 제거하는 방법은 기존의 코드를 적극적으로 재사용하는 것이다. 코드 재사용은 개발 비용을 현저히 줄일 수 있는 잠재력이 있으므로 매우 중요하다.

자바스크립트는 프로토타입을 기반으로 상속을 구현한다. 상속은 코드의 재사용이란 관점에서 매우 유용하다. 생성자 함수가 생성할 모든 인스턴스가 공통적으로 사용할 프로퍼티나 메서드를 프로토타입에 미리 구현해두면 생성자 함수가 생성할 모든 인스턴스는 별도의 구현 없이 상위(부모) 객체인 프로토타입의 자산을 공유하여 사용할 수 있다.

프로토타입 객체

프로토타입 객체(또는 줄여서 프로토타입)란 객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용된다. 프로토타입은 어떤 객체의 상위(부모) 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티(메서드 포함)을 제공한다. 프로토타입을 상속받은 하위(자식) 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있다.

모든 객체는 [[Prototype]] 이라는 내부 슬롯을 가지며, 이 내부 슬롯의 값은 프로토타입의 참조(null인 경우도 있다)다. [[Prototype]]에 저장되는 프로토타입은 객체 생성 방식에 의해 결정된다. 즉, 객체가 생성될 때 객체 생성 방식에 따라 프로토타입이 결정되고 [[Prototype]]에 저장된다.

모든 객체는 하나의 프로토타입을 갖는다. 그리고 모든 프로토타입은 생성자 함수와 연결되어 있다. 즉, 객체와 프로토타입과 생성자 함수는 서로 연결되어 있다.

[[Prototype]] 내부 슬롯에는 직접 접근할 수 없지만, __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 자신의 [[Prototype]] 내부 슬롯이 가리키는 프로토타입에 간접적으로 접근할 수 있다. 그리고 프로토타입은 자신의 constructor 프로퍼티를 통해 생성자 함수에 접근할 수 있고, 생성자 함수는 자신의 prototype 프로퍼티를 통해 프로토타입에 접근할 수 있다.

_ _ proto _ _ 접근자 프로퍼티

모든 객체는 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다.

__proto__ 는 접근자 프로퍼티다.
__proto__ 접근자 프로퍼티는 상속을 통해 사용된다.
__proto__ 접근자 프로퍼티를 통해 프로토타입에 접근하는 이유 : 상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지하기 위해
__proto__접근자 프로퍼티를 코드 내에서 직접 사용하는 것은 권장하지 않는다. (모든 객체가 __proto__ 접근자 프로퍼티를 사용할 수 있는 것은 아니기 때문)

object.prototype

모든 객체는 프로토타입 계층 구조인 프로토타입 체인에 묶여있다. 자바스크립트 엔진은 객체의 프로퍼티(메서드 포함)에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면 __proto__접근자 프로퍼티가 가리키는 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다. 프로토타입 체인의 종점, 즉 프로토타입 체인의 최상위 객체는 object.prototype이며, 이 객체의 프로퍼티와 메서드는 모든 객체에 상속된다.

함수 객체의 prototype 프로퍼티

함수 객체만이 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킨다.

따라서 생성자 함수로서 호출할 수 없는 함수, 즉 non-cunstructor인 화살표 함수와 ES6 메서드 축약 표현으로 정의한 메서드는 prototype 프로퍼티를 소유하지 않으며, 프로토타입도 생성하지 않는다.

모든 객체가 가지고 있는(엄밀히 말하면 Object.prototype으로부터 상속받은) __proto__ 접근자 프로퍼티와 함수 객체만이 가지도 있는 prototype 프로퍼티는 결국 동일한 프로토타입을 가리킨다.

구분	소유	값	사용주체	사용 목적
__proto__접근자 프로퍼티	모든 객체	프로토타입의 참조	모든 객체	객체가 자신을 프로토타입에 접근 또는 교체하기 위해 사용
prototype 프로퍼티	constructor	프로토타입의 참조	생성자 함수	생성자 함수가 자신이 생성할 객체(인스턴스)의 프로토타입을 할당하기 위해 사용

프로토타입의 constructor 프로퍼티와 생성자 함수

모든 프로토타입은 constructor 프로퍼티를 갖는다. 이 constructor 프로퍼티는 prototype 프로퍼티로 자신을 참조하고 있는 생성자 함수를 가리킨다. 이 연결은 생성자 함수가 생성될 때, 즉 함수 객체가 생성될 때 이뤄진다.

리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입

리터럴 표기법에 의한 객체 생성 방식과 같이 명시적으로 new 연산자와 함께 생성자 함수를 호출하여 인스턴스를 생성하지 않는 객체 생성 방식도 있다.

리터럴 표기법에 의해 생성된 객체도 물론 프로토타입이 존재한다. 하지만 리터럴 표기법에 의해 생성된 객체의 경우 프로토타입의 consturctor 프로퍼티가 가리키는 생성자 함수가 반드시 객체를 생성한 생성자 함수라고 단정할 수는 없다.

리터럴 표기법에 의해 생성된 객체도 상속을 위해 프로토타입이 필요하다. 따라서 리터럴 표기법에 의해 생성된 객체도 가상적인 생성자 함수를 갖는다. 프로토타입은 생성자 함수와 더불어 생성되며 prototype, constructor 프로퍼티에 의해 연결되어 있기 때문이다. 다시 말해, 프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍pair으로 존재한다.

리터럴 표기법에 의해 생성된 객체의 생성한 함수와 프로토타입은 다음과 같다.

리터럴 표기법	생성자 함수	프로토타입
객체 리터럴	Object	Object.prototype
함수 리터럴	Function	Function.prototype
배열 리터럴	Array	Array.prototype
정규 표현식 리터럴	RegExp	RegExp.prototype

프로토타입의 생성 시점

프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다.

생성자 함수는 사용자가 직접 정의한 사용자 정의 생성자 함수와 자바스크립트가 기본 제공하는 빌트인 생성자 함수로 구분할 수 있다.

사용자 정의 생성자 함수와 프로토타입 생성 시점

생성자 함수로서 호출할 수 있는 함수, 즉 constructor는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다. (non-constructor는 프로토타입이 생성되지 않음)

console.log(Person.prototype); // {constructor: ƒ}

// 생성자 함수
function Person(name) {
	this.name = name;
}

함수 선언문은 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행된다. 따라서 함수 선언문으로 정의된 Person 생성자 함수는 어떤 코드보다 먼저 평가되어 함수 객체가 된다. 이때 프로토타입도 더불어 생성된다. 생성된 프로토타입은 Person 생성자 함수의 prototype 프로퍼티에 바인딩된다.

빌트인 생성자 함수와 프로토타입 생성 시점

빌트인 생성자 함수도 일반 함수와 마찬가지로 빌트인 생성자 함수가 생성되는 시점에 프로토타입이 생성된다. 모든 빌트인 생성자 함수는 전역 객체가 생성되는 시점에 생성된다. 생성된 프로토타입은 빌트인 생성자 함수의 prototype 프로퍼티에 바인딩된다.

객체가 생성되기 이전에 생성자 함수와 프로토타입은 이미 객체화되어 존재한다. 이후 생성자 함수 또는 리터럴 표기법으로 객체를 생성하면 프로토타입은 생성된 객체 [[Prototype]] 내부 슬롯에 할당된다. 이로써 생성된 객체는 프로토타입을 상속받는다.

useEffect 에러 (useMemo)

재밌게 살고 싶은 초보 개발자 — Thu, 19 May 2022 22:21:35 +0900

에러코드

React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.

해결방법

공식문서 : Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns.

=> 반복문, 선언문, 중첩된 함수 내에서 훅을 사용하지 말자! (return문을 사용하면 안됨)

Hook을 최상위에 선언하자!

(useEffect 뿐 아니라 useMemo 등 훅도 마찬가지!)

[클린코드] TIL 10장 클래스

재밌게 살고 싶은 초보 개발자 — Tue, 10 May 2022 19:47:46 +0900

오늘 TIL 3줄 요약

클래스는 작을 수록 좋다
하나의 클래스는 하나의 책임만!
응집력 있는 클래스를 만들어라

책에서 기억하고 싶은 내용

<클래스 체계>

변수목록 : 정적static 공개 public 상수 > 정적 비공개 private 변수 > 비공개 인스턴스 변수
변수목록 다음에는 공개함수가 나오고 비공개 함수는 자신을 호출하는 공개 함수 직후에 넣는다. 즉 추상화 단계가 순차적으로 내려감

<클래스는 작아야 한다!>

클래스를 설계할 때도, 함수와 마찬가지고 '작게'가 기본 규칙
클래스 이름은 해당 클래스 책임을 기술해야 한다. (실제로 작명은 클래스 크기를 줄이는 첫번째 관문)
클래스 이름이 모호하다면 클래스 책임이 너무 많아서다.
[단일 책임 원칙 (SRP : Single Responsibility Principle) ]
단일 책임 원칙 : 클래스나 모듈을 변경할 이유가 단 하나뿐이어야 한다는 원칙
규모가 어느 수준에 이르는 시스템은 논리가 많고도 복잡하다. 이런 복잡성을 다루려면 체계적인 정리가 필수다.
큰 클래스 몇 개가 아니라 작은 클래스 여럿으로 이뤄진 시스템이 더 바람직하다. 작은 클래스는 각자 맡은 책임이 하나며, 변경할 이유가 하나며, 다른 작은 클래스와 협력해 시스템에 필요한 동작을 수행한다.
[응집도 Cohesion]
클래스는 인스턴스 변수 수가 작아야 한다. 각 클래스 메서드는 클래스 인스턴스 변수를 하나 이상 사용해야 한다.
일반적으로 메서드가 변수를 더 많이 사용할수록 베서드와 클래스는 응집도가 더 높다. 모든 인스턴스 변수를 메서드마다 사용하는 클래스는 응집도가 가장 높다.
우리는 응집도가 높은 클래스를 선호하는데, 응집도가 높다는 말은 클래스에 속한 메서드와 변수가 서로 의존하며 논리적인 단위로 묶인다는 의미기 때문.
[응집도를 유지하면 작은 클래스 여럿이 나온다]
클래스가 응집력을 잃는다면 쪼개라

<변경하기 쉬운 클래스>

어떤 변경이든 클래스에 손대면 다른 코드를 망가뜨릴 잠정적인 위험이 존재한다. 그래서 테스트도 다시 해야한다.
새 기능을 수정하거나 기존 기능을 변경할 때 건드릴 코드가 최소인 시스템 구조가 바람직하다. 이상적인 시스템이라면 새 기능을 추가할 때 시스템을 확장할 뿐 기존 코드를 변경하지 않는다.
[변경으로부터 격리]

결합도가 낮다는 소리는 각 시스템 요소가 다른 요소로부터 그리고 변경으로부터 잘 격리되어 있다는 의미다. 시스템 요소가 서로 잘 격리되어 있으면 각 요소를 이해하기도 쉬워진다.

오늘 읽은 소감

아직 클래스를 많이 사용해보지 않아서 어려운 내용이었지만 함수와 마찬가지로 작고 간결하게, 기능은 하나만! 이 계속 강조되는 것 같다.

[클린코드] TIL 9장 단위테스트

재밌게 살고 싶은 초보 개발자 — Sat, 7 May 2022 14:33:59 +0900

오늘의 TIL 3줄 요약

* 테스트 코드는 실제 코드만큼이나 중요하다
* 테스트 코드는 실제 코드의 유연성, 유지보수성, 재사용성을 보존하고 강화한다
* 테스트코드의 표현력을 높이고 간결하게 정리하자

책에서 기억하고 싶은 내용

<TDD 법칙 세 가지>
1. 실패하는 단위 테스트를 작성할 때까지 실제 코드를 작성하지 않는다
2. 컴파일은 실패하지 않으면서 실행이 실패하는 정도로만 단위 테스트를 작성한다
3. 현재 실패하는 테스트를 통과할 정도로만 실제 코드를 작성한다

<깨끗한 테스트 코드 유지하기>
* 테스트 코드는 실제 코드 못지 않게 중요하다. 실제 코드 못지않게 깨끗하게 짜야 한다.
* 단위 테스트 코드는 유연성, 유지보수성, 재사용성을 제공한다.
* 테스트 케이스가 없다면 모든 변경이 잠정적인 버그다.
* 깨끗한 테스트 코드를 만들려면? 가독성을 위해 명료성, 단순성, 풍부한 표현력이 필요
* 도메인에 특화된 테스트 언어 : 테스트를 구현하는 당사자와 나중에 테스트를 읽어볼 독자를 도와주는 테스트 언어
* 이중 표준 : 테스트 코드에 적용하는 표준은 실제 코드에 적용하는 표준과 다르다. 단순하고, 간결하고, 표현력이 풍부해야 하지만 실제 코드만큼 효율적일 필요는 없다.

<테스트 당 assert 하나>
* TEMPLATE METHOD 패턴을 사용하면 중복을 제거할 수 있다.
* '단일 assert문'이라는 규칙이 훌륭한 지침이라 생각한다.
* 테스트 당 개념 하나

<F.I.R.S.T.>
* 빠르게 Fast : 테스트는 빨라야 한다.
* 독립적으로 Independent : 각 테스트는 서로 의존하면 안 된다.
* 반복가능하게 Repeatable : 테스트는 어떤 환경에서도 반복 가능해야 한다.
* 자가검증하는 Self-Validating : 테스트는 부울bool값으로 결과를 내야 한다. (성공 아니면 실패)
* 적시에 Timely : 테스트는 적시에 작성해야 한다.

[클린코드] TIL 7장 오류처리

재밌게 살고 싶은 초보 개발자 — Thu, 5 May 2022 22:09:03 +0900

오늘 TIL 3줄 요약

깨끗한 코드와 오류 처리는 확실히 연관성이 있다
오류코드보다는 예외를 사용하라

오류 처리를 프로그램 논리와 분리하면 독립적인 추론이 가능해지며 코드 유지보수성도 크게 높아진다

책에서 기억하고 싶은 내용

깨끗한 코드와 오류 처리는 확실히 연관성이 있다. 상당수 코드 기반은 전적으로 오류 처리 코드에 좌우된다. (여기서 좌우된다는 표현은 코드 기반이 오류만 처리한다는 의미가 아니라 여기저기 흩어진 오류 처리 코드 때문에 실제 코드가 하는 일을 파악하기가 거의 불가능하다는 의미)
오류 코드보다 예외를 사용하라
Try-Catch-Finally문부터 작성하라
미확인unchecked예외를 사용하라
예외에 의미를 제공하라 (예외를 던질 때는 전후 상황을 충분히 덧붙인다)
호출자를 고려해 예외 클래스를 정의하라
애플리케이션에서 오류를 정의할 때 프로그래머에게 가장 중요한 관심사는 오류를 잡아내는 방법이 되어야 한다
정상 흐름을 정의하라
null을 반환/전달하지 마라
깨끗한 코드는 읽기도 좋아야 하지만 안정성도 높아야 한다 오류 처리를 프로그램 논리와 분리하면 독립적인 추론이 가능해지며 코드 유지보수성도 크게 높아진다

오늘 읽은 소감

오류처리에 대해서는 깊게 생각해본 적이 없는 주제라 흥미로웠다. 코드짤 때 고려할 것이 하루하루 늘어간다. 비록 지금은 이 책이 크게 와닿지 않지만 언젠가는 내 코드가 책처럼 클린해져있길ㅎㅎ

궁금한 내용, 잘 이해되지 않는 내용

JS만 공부하는 나로써는 책의 예제가 이해하기 좀 버겁다

[클린코드] 6장 객체와 자료 구조

재밌게 살고 싶은 초보 개발자 — Wed, 4 May 2022 20:25:09 +0900

오늘 TIL 3줄 요약

객체는 동작을 공개하고 자료를 숨긴다.
자료를 세세하게 공개하기 보다는 추상적인 개념으로 표현하는 것이 좋다.
객체지향 코드에서 어려운 변경은 절차적인 코드에서 쉬우며, 절차적은 코드에서 어려운 변경은 객체지향 코드에서 쉽다.

책에서 기억하고 싶은 내용

변수를 비공개private로 정의하는 이유 : 남들이 변수에 의존하지 않게 만들고 싶어서

<자료 추상화>

변수를 private으로 선언하더라도 각 값마다 조회get 함수와 설정set 함수를 제공한다면 구현을 외부로 노출하는 셈
구현을 감추려면 추상화가 필요하다!
개발자는 객체가 포함하는 자료를 표현할 가장 좋은 방법을 심각하게 고민해야 한다. 아무 생각없이 조회/설정 함수를 추가하는 방법이 가장 나쁘다

<자료/객체 비대칭>

객체지향 코드에서 어려운 변경은 절차적인 코드에서 쉬우며, 절차적은 코드에서 어려운 변경은 객체지향 코드에서 쉽다.
복잡한 시스템을 짜다보면 새로운 함수가 아니라 새로운 자료 타입이 필요한 경우가 생긴다. 이때는 클래스와 객체지향 기법이 가장 적합하다. 반면, 새로운 자료 타입이 아니라 새로운 함수가 필요한 경우도 생긴다. 이때는 절차적인 코드와 자료 구조가 좀 더 적합하다.

<디미터 법칙>

디미터법칙 : 모듈은 자신이 조작하는 객체의 속사정을 몰라야 한다는 법칙
기차충돌 : 여러 객체가 한줄로 이어진 기차처럼 보이기 때문에 피하는 편이 좋음(조잡)
예시) final String outputDir = ctxt.getOptions().getScratchDir().getAbsolutePath();
잡종구조 (절반은 객체, 절반은 자료 구조인 잡종구조도 피하는 편이 좋음)
구조체 감추기

<자료 전달 객체>

자료 구조체의 전형적인 형태는 공개 변수만 있고 함수가 없는 클래스다. 이런 자료 구조체를 때로는 자료 전달 객체Data Transfer Object, DTO라 한다.
DTO: 데이터베이스와 통신하거나 소켓에서 받은 메시지의 구문을 분석할 때 유용. 흔히 데이터베이스에 저장된 가공되지 않은 정보를 애플리케이션 코드에서 사용할 객체로 변환하는 일련의 단계에서 가장 처음으로 사용하는 구조체

오늘 읽은 소감은?

오늘 읽은 내용은 이해하기 너무 어려웠다. 공부를 한 다음에 다시 읽어봐야겠다!

궁금한 내용, 잘 이해되지 않는 내용

객체지향, 자료구조, DTO 등

☕ 문벅스 카페 메뉴 앱 만들기 #03 (웹서버 띄우고, API요청하여 메뉴판 관리)

재밌게 살고 싶은 초보 개발자 — Wed, 4 May 2022 02:27:19 +0900

90년생 HTML과 웹

웹의 고향 스위스
1990년도 웹의 등장
Tim Bernes-Lee 가 만들었음
효율적으로 정보를 주고 받기 위해 탄생
1990.10 세계 최초의 웹 페이지 에디터
1990.11 세계 최초의 웹브라우저 (www)
1990.12 세계 최초의 웹서버 (info.cern.ch) - 웹의 시작

Q. 왜 웹서버가 필요할까?

A. 콘텐츠 관리 : 웹에서 다양한 컨텐츠를 불특정 다수에게 공개할 때 여러 곳에 분산되어 있으면 업데이트를 파악하기도 어렵고 동시 갱신이 어렵고 비용도 많이 듦 -> 웹서버컴퓨터 하나에 정보를 모아두자

=> 데이터 상태를 효율적으로 관리하고, 변경된 데이터를 클라이언트에게 효율적으로 공유하기 위해

1. 요구사항 분석

2. 웹서버 실행시키기

fetch('url', option) : 서버에 데이터를 요청할 때 쓰는 메서드
- url : 서버 주소
- option : 서버에 데이터를 받기/수정하기/삭제하기 등을 요청
자바스크립트는 싱글스레드
- 커피숍에서 주문하고 진동벨을 받으면 뒷사람이 앞사람 주문메뉴가 나오기 전에 또 다른 주문을 넣을 수 있는 것과 비슷!
- 음료 만드는 복잡도에 따라서 먼저 주문 음료를 받을 수도 있겠지?! => async/await을 이용해 순서보장

3. 웹서버 요청으로 메뉴 생성 / 불러오기

4. menu API 객체 분리 (데이터초기화, 리팩터링, 수정, 품절, 삭제)

5. 리팩터링

6. 회고

배운 점 & 느낀 점

세번째 미션이 제일 어려웠다. 이해보다는 흐름을 훑는다는 마음으로 본 것 같다. 평소에도 async/await의 개념을 잘 이해를 못했는데 역시 어렵더라.. 이 부분은 따로 공부를 한 후에 다시 들으면서 하나씩 이해해나가야겠다.

✔ async / await

[클린코드] TIL (5장 형식맞추기)

재밌게 살고 싶은 초보 개발자 — Tue, 3 May 2022 01:18:38 +0900

오늘 TIL 3줄 요약

코드는 중요한 의사소통의 일환이다.
올바른 형식을 지키서 코드를 짜자(가로, 세로)
팀 규칙은 개인의 선호보다 우선!

책에서 기억하고 싶은 내용

<형식을 맞추는 목적>

코드 형식은 중요한 의사소통의 일환이다.
오늘 구현한 코드의 가독성은 앞으로 바뀔 코드의 품질에 지대한 영향을 미친다.

<적당한 행 길이를 유지하라>

신문 기사처럼 작성하라 (이름은 간단하면서도 설명이 가능하게, 이름만 보고도 올바른 모듈을 살펴보고 있는지 아닌지를 판단할 정도로 신경써서 짓기. 아래로 내려갈수록 의도를 세세하게 묘사)
개념은 빈 행으로 분리하라
세로 밀집도 (서로 밀접한 코드 행은 세로로 가까이 놓여야 함)
수직 거리 (같은 파일에 속할 정도로 밀접한 두 개념은 세로 거리로 연관성을 표현한다. 여기서 연관성이란 한 개념을 이해하는 데 다른 개염이 중요한 정도)
- 변수선언(변수는 사용하는 위치에 최대한 가까이 선언)
- 인스턴스 변수(인스턴스 변수는 클래스 맨 처음에 선언, 변수간 세로로 거리 두지 않음)
- 종속 함수(한 함수가 다른 함수를 호출한다면 두 함수는 세로로 가까이 배치, 가능하다면 호출하는 함수를 호출되는 함수보다 먼저 배치)
- 개념적 유사성(개념적인 친화도가 높은 코드를 가까이 배치)

<가로 형식 맞추기>

가로 공백과 밀집도(공백을 사용해 밀접한 개념과 느슨한 개념을 표현)
가로 정렬
들여쓰기
가짜 범위

<팀 규칙>

각자 선호하는 규칙이 있더라도 팀에 속한다면 자신이 선호해야 할 규칙은 팀 규칙
팀은 한 가지 규칙에 합의하고 모든 팀원은 그 규칙을 따라야 한다.

오늘 읽은 소감은?

사전 지식이 없는 사람이 언제 읽어도 읽기 좋은 '글' 같은 코드를 짜는 것에 대한 얘기를 꾸준히 하고 있는 것 같다. 생각하고 코드 짜는 습관이 참 중요한 것 같다!

궁금한 내용이 있거나, 잘 이해되지 않는 내용

밀집도?

[클린코드] TIL (4장. 주석)

재밌게 살고 싶은 초보 개발자 — Fri, 29 Apr 2022 21:09:24 +0900

오늘 TIL 3줄 요약

주석은 필요악이다
주석 대신 코드로 의도를 표현하라
주석은 반드시 필요할 때만, 최소한으로 사용하라

책에서 기억하고 싶은 내용

주석은 '필요악' 이다. 우리에게 프로그래밍 언어를 치밀하게 사용해 의도를 표현할 능력이 있다면, 주석은 전혀 필요하지 않으리라. 하지만 그렇지 못해서 쓰는 것이 주석 (그만큼 주석은 안쓰는 것이 좋다.)
주석은 나쁜 코드를 보완하지 못한다. 나쁜 코드를 주석으로 설명하려 애쓰는 대신 코드를 수정하라.
코드로 의도를 표현하라

<좋은 주석>

- 법적인 주석

-정보를 제공하는 주석

-의도를 설명하는 주석

-의미를 명료하게 밝히는 주석

-결과를 경고하는 주석

-TODO주석

-중요성을 강조하는 주석

<나쁜 주석>

-주절거리는 주석

-같은 이야기를 하는 주석

-오해할 여지가 있는 주석

-의무적으로 다는 주석

-있으나 마나 한 주석

-무서운 잡음 (ex.문서를 제공해야 한다는 잘못된 욕심으로 탄생한 주석)

-함수나 변수로 표현할 수 있다면 주석을 달지 마라

-위치를 표시하는 주석(너무 자주 사용하지 않는다면 반드시 필요할 때만, 아주 드물게 사용하는 편이 좋음)

-닫는 괄호에 다는 주석

-공로를 돌리거나 저자를 표시하는 주석

-주석으로 처리한 코드

-HTML코드

-전역정보(근처에 있는 코드만 기술하라)

-너무 많은 정보

-모호한 관계(주석과 코드의 관계를 명백히 하여 읽는 사람이 주석을 읽고 무슨 소린지 알게 해야함)

-함수 헤더

-비공개 코드에서 Javadocs

오늘 읽은 소감은?

나는 아직 코드 읽기가 익숙하지 않아서 그런지 주석이 있는 코드가 편하다고 생각했는데, 주석은 필요악이라고 하니 조금 찔린다. 특히 위치를 표시하는 주석은 정말 필요하다고 생각했는데 이것마저도 안쓰는게 좋다니..ㅎㅎ 주석보다는 코드를 더 읽기 좋게 쓰자!!!

[클린코드] TIL (3장. 함수)

재밌게 살고 싶은 초보 개발자 — Wed, 27 Apr 2022 19:25:05 +0900

오늘 TIL 3줄 요약

'한 가지'만 하는 함수를 만들어라
중복을 줄여라
잘 읽히는 이야기처럼 코드를 풀어가라

책에서 기억하고 싶은 내용

작게 만들어라 - 가로 100자, 100줄 이상 금지. 20줄도 김
블록과 들여쓰기 - if/else문, while문 등에 들어가는 블록은 한 줄이어야 한다는 의미
= 중첩구조가 생길만큼 함수가 커져서는 안됨
한 가지만 해라 - 한 가지 기능만 하되, 그 기능이 잘 동작해야 함
함수가 '한 가지' 기능만 수행하는지 확인하는 방법?
- 지정된 함수 이름 아래에서 추상화 수준이 하나인 단계만 수행한다면 그 함수는 한 가지 작업만 한다.
- 단순히 다른 표현이 아니라 의미 있는 이름으로 다른 함수를 추출할 수 있다면 그 함수는 여러 작업을 하는 셈.
함수 당 추상화 수준은 하나로! - 한 함수 내에 추상화 수준을 섞으면 코드를 읽는 사람이 헷갈린다. 특정 표현이 근본 개념인지 아니면 세부사항인지 구분하기 어려운 탓
위에서 아래로 코드 읽기 : 내려가기 규칙 - 코드는 위에서 아래로 이야기처럼 읽혀야 좋다. 한 함수 다음에는 한 단계 낮은 함수가 온다. 즉, 위에서 아래로 프로그램을 읽으면 함수 추상화 수준이 한 번에 한 단계씩 낮아지는 것
서술적인 이름을 사용하라 - "코드를 읽으면서 짐작했던 기능을 각 루틴이 그대로 수행한다면 깨끗한 코드라 불러도 되겠다 - 워드"
- 이름이 길어도 괜찮다
- 길고 서술적인 이름이 짧고 어려운 이름보다 좋다
함수 인수 - 함수에서 이상적인 인수 개수는 0개 (무항).
부수 효과를 일으키지 마라
명령과 조회를 분리하라 - 함수는 뭔가를 수행하거나 뭔가에 답하거나 둘 중 하나만 해야함.
오류 코드보다 예외를 사용하라
반복하지 마라
구조적 프로그래밍 - " 모든 함수와 함수 내 모든 블록에 입구와 출구가 하나만 존재해야 한다 - 에츠허르 데이크스트라"
그렇다면 함수는 어떻게 짜야할까?

글을 쓸 때 먼저 초안을 쓰고 계속해서 다듬듯이 함수를 짤 때도 마찬가지로 처음 짠 코드를 계속 수정하여 완성도 있게 만들자.
모든 코드를 빠짐없이 테스트하는 단위 테스트 케이스를 만들자 (모든 수정사항에서 코드는 항상 단위 테스트를 통과해야함)
코드 다듬기, 함수 만들기, 이름 바꾸기, 중복 제거, 메서드 줄이기, 순서 바꾸기, 전체 클래스 쪼개기로 계속해서 보완

DSL(Domain Specific Language) : 특정 응용 분야 시스템을 기술할 목적으로 프로그래머가 설계한 도메인 특화 언어
프로그래머 대가(master)는 시스템을 구현할 프로그램이 아니라 풀어갈 이야기로 여김

그 후 코드 다듬기, 함수 만들기, 이름 바꾸기, 중복 제거, 메서드 줄이기, 순서 바꾸기, 전체 클래스 쪼개기 등

오늘 읽은 소감은?

읽으면 읽을수록 좋은 코드를 짜는 게 참 쉽지 않다는 생각이 든다. 고려해야 할 것도 많고..!

짜놓은 코드를 좀 더 작은 코드로 나눌 수 없는지 고민해봐야겠다.

길고 서술적인 이름이 좋다고 했는데 어느 정도가 적당한 정도일까?ㅎㅎ

궁금한 내용, 잘 이해되지 않는 내용

추상화
switch문에 관한 부분 (다형성 등)

[클린코드] TIL (2. 의미있는 이름)

재밌게 살고 싶은 초보 개발자 — Sun, 24 Apr 2022 20:36:27 +0900

오늘 TIL 요약

문장이나 문단처럼 읽히는 코드 아니면 적어도 표나 자료 구조처럼 읽히는 코드를 짜는 데 집중하자

책에서 기억하고 싶은 내용

의도를 분명히 밝혀라 -변수(혹은 함수나 클래스)의 존재 이유, 수행 기능, 사용 방법 그외 주석이 필요하다면 의도를 분명히 드러내지 못한 것 => 문제는 코드의 단축성이 아니라 함축성
그릇된 정보를 피하라 - 일관성이 떨어지는 정보는 그릇된 정보
의미 있게 구분하라
발음하기 쉬운 이름을 사용하라
검색하기 쉬운 이름을 사용하라 (ex. 7, e 조심)
인코딩을 피하라
자신의 기억력을 자랑하지 마라 (루프에서 반복 횟수를 세는 변수를 쓸 때 'l'은 절대 안됨!)
기발한 이름은 피하라
한 개념에 한 단어를 사용하라
말장난을 하지 마라
해법 영역, 문제 영역에서 가져온 이름을 사용하라 (?)
의미 있는 맥락을 추가하고 불필요한 맥락을 없애라
클래스, 객체 이름 => 명사, 명사구
메서드 이름 => 동사, 동사구

오늘 읽은 소감은?

긴 이름이 짧은 이름보다 좋다는데 나는 아직 개인적으로 짧은 이름이 더 이해하기 쉬운 것 같다. 어떤게 좋은지 많이 써보면서 고민해봐야 할 듯

궁금한 내용, 잘 이해되지 않는 내용

불용어 noise word
해법영역? 문제 영역?

[클린코드] TIL (1장. 깨끗한 코드)

재밌게 살고 싶은 초보 개발자 — Sun, 24 Apr 2022 02:09:22 +0900

오늘 TIL 3줄 요약

중복을 피하라
한 기능만 수행하라
제대로 표현하고, 작게 추상화 하라

책에서 기억하고 싶은 내용

"사소한 곳에서 발휘하는 정직은 사소하지 않다"
"책임 있는 전문가라면 프로젝트를 시작할 때 생각하고 계획할 시간을 확보해야 한다"
기계가 실행할 정도로 상세하게 요구사항을 명시하는 직업, 바로 이것이 프로그래밍. 이렇게 명시한 결과가 바로 코드다.
궁극적으로 코드는 요구사항을 표현하는 언어라는 사실을 명심한다.
나쁜 코드는? 개발 속도를 떨어뜨린다. 팀 생산성이 떨어진다.
좋은 코드를 사수하는 일은 우리 프로그래머들의 책임이다.

깨끗한 코드는?
- '보기에 즐거운' 코드, 한가지에 집중한 코드 - 비야네 스트롭 스트룹
- 잘 쓴 문장처럼 읽히는 코드 - 그래디 부치
- '다른' 사람이 고치기 쉬운 코드 - '큰big' 데이브 토마스
- 주의 깊게 짠 코드 - 마이클 페더스
- 그 문제를 풀기 위한 언어처럼 보이는 코드 - 워드 커닝햄

기존 코드를 읽어야 새 코드를 짜므로 읽기 쉽게 만들면 사실은 짜기도 쉬워진다.

읽은 소감?

나도 '코드감각'을 타고 났으면 좋았겠다!

다시 읽어도 읽기 편한 코드를 짜도록 노력하자!

잘 이해되지 않는 내용

르블랑의 법칙 leblanc's Law

자바스크립트에서 CSS 다루기

재밌게 살고 싶은 초보 개발자 — Thu, 21 Apr 2022 22:56:48 +0900

하나씩 변경하기

const element = document.querySelector("h1")
element.style.color = 'blue'

// 변수 값을 사용 하고 싶다면 백틱

기존에 정의된 style에 새로운 속성 추가

여러개 변경하기

const element = document.querySelector("div")
element.style.cssText = 'color:blue; background-color:red'

// 변수 값을 사용 하고 싶다면 백틱

기존에 정의된 style을 지우고, cssText로 덮어씀

참고링크 : https://hianna.tistory.com/671

자바스크립트 시간 차이 구하기

재밌게 살고 싶은 초보 개발자 — Thu, 21 Apr 2022 01:47:10 +0900

특정 날짜와 오늘 날짜 사이의 시간 구하기 (feat. D-day 계산기)

getTime()

표준시에 따라 지정된 날짜의 시간에 해당하는 숫자 값을 반환
1970 년 1 월 1 일 00:00:00 UTC와 주어진 날짜 사이의 경과 시간 (밀리 초)을 나타내는 숫자
결과값이 밀리 초 단위로 나오기 때문에 변환해주어야함

const date = new Date();
const HappyNewYear = new Date("2023-01-01T00:00:00");
const Dday = HappyNewYear.getTime()-date.getTime(); 

// 22026379074 <- 2022-04-21 기준

변환하는 법

초 : Dday / 1000 (ms단위)

분 : Dday / 1000 * 60 (60초)

시 : Dday / 1000 * 60 * 60 (60분)

일 : Dday / 1000 * 60 * 60 * 24 (24시간)

ex) 시간을 구한다면?

먼저 Dday에서 일(Dday / 1000 * 60 * 60 * 24)을 나눈 후 나머지를 시간(1000 * 60 * 60)으로 나누기!

(소수점 처리를 위해 Math.floor() 필요)

* Math.floor() : 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환

참고링크

https://horangi.tistory.com/396

[노마드코더] 바닐라 JS로 그림판 만들기 #Canvas

재밌게 살고 싶은 초보 개발자 — Tue, 12 Apr 2022 12:47:15 +0900

canvas

html5 의 한 요소로 context를 가짐 (요소안에서 픽셀에 접근할 수 있음)
2개의 사이즈를 가져야 함(CSS사이즈, pixel modifier(실제픽셀사이즈))
strokeStyle( ) : 기본색
lineWidth( ) : 선의 너비
beginPath( ) : 클릭하지 않을 때 선을 만듦 => 경로생성
moveTo(x,y) : x,y 좌표로 path를 옮김 => 선 시작 좌표
lineTo(x,y) : 이전 위치에서 지금 위치까지 선을 만듦 => 선 끝 좌표
stroke( ) : 선을 그음 - 마우스를 움직이는 내내 발생 => 선 그리기

* Canvas MDN

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API

useHistory -> useNavigate

재밌게 살고 싶은 초보 개발자 — Thu, 24 Mar 2022 20:56:26 +0900

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

에러코드

Attempted import error: 'useHistory' is not exported from 'react-router-dom'.

해결방법

react-router-dom v6로 업데이트 되면서 useHistory가 useNavigate로 바뀜

Switch -> Routes 로 변경

재밌게 살고 싶은 초보 개발자 — Thu, 24 Mar 2022 20:31:21 +0900

에러코드

1. Error: [App] is not a <Route> component.

2. export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'.

해결방법

react-router-dom v6로 업데이트 되면서 Switch를 쓸 수 없게 됨

Switch -> Routes 로 바꿔서 쓰기
element 로 컴포넌트 추가

 // 업데이트 전
function App({ authService }) {
  return (  
   <div className={styles.app}>
      <BrowserRouter>
        <Switch>
          <Route exact path="/">
            <Login authService={authService} />
          </Route>
          <Route path="/maker">
            <Maker />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
   );
}

// 업데이트 후
function App({ authService }) {
  return (
    <div className={styles.app}>
      <BrowserRouter>
        <Routes>
          <Route
            exact
            path="/"
            element={<Login authService={authService} />}
          ></Route>
          <Route path="/maker" element={<Maker />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

모던 자바스크립트 Deep Dive #16 (함수와 일급 객체)

재밌게 살고 싶은 초보 개발자 — Fri, 11 Feb 2022 14:06:44 +0900

일급 객체

무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.
변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
함수의 매개변수에 전달할 수 있다.
함수의 반환 값으로 사용할 수 있다.

함수는 위의 조건을 모두 만족하므로 일급 객체다. 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미다. 객체는 값이므로 함수는 값과 동일하게 취급할 수 있다. 따라서 함수는 값을 사용할 수 있는 곳(변수 할당문, 객체의 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 함수 반환문)이라면 어디서든지 리터럴로 정의할 수 있으며 런타임runtime에 함수 객체로 평가된다.

함수는 객체이지만 일반 객체와 차이가 있는데, 일반 객체는 호출할 수 없지만 함수 객체는 호출 할 수 있다. 또한 함수 객체는 일반 객체에는 없는 함수 고유의 프로퍼티를 소유한다.

함수 객체의 프로퍼티

arguments 프로퍼티

함수 객체의 arguments 프로퍼티 값은 arguments 객체다. arguments 객체는 함수 호출 시 전달된 인수argument들의 정보를 담고 있는 순회 가능한iterable 유사 배열 객체이며, 함수 내부에서 지역 변수처럼 사용된다. 즉, 함수 외부에서는 참조할 수 없다.

자바스크립트의 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않기 때문에 매개변수의 개수만큼 인수를 전달하지 않아도 에러가 발생하지 않는다.

함수를 정의할 때 선언한 매개변수는 함수 몸체 내부에서 변수와 동일하게 취급된다. 즉, 함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 선언되고 undefined로 초기화된 이후 인수가 할당된다. (그렇다고 초과된 인수가 그냥 버려지는 것은 아니고, 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관된다.) 이러한 특성 때문에 함수가 호출되면 인수 개수를 확인하고 이에 따라 함수의 동작을 달리 정의할 필요가 있을 수 있다. 이때 유용하게 사용되는 것이 arguments 객체다.

arguments 객체는 매개변수 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용하다.

argument 객체는 배열 형태로 인자 정보를 담고 있지만 실제 배열이 아닌 유사 배열 객체array-like object다. 유사 배열 객체란 length 프로퍼티를 가진 객체로 for문으로 순회할 수 있는 객체를 말한다.

caller 프로퍼티 (비표준 프로퍼티이므로 참고용으로만 알아두자!)

함수 객체의 caller 프로퍼티는 함수 자신을 호출한 함수를 가리킨다.

length 프로퍼티

함수 객체의 length 프로퍼티는 함수를 정의할 때 선언한 매개변수의 개수를 가리킨다.

argumetns 객체의 length 프로퍼티는 인자argumetns 의 개수를 가리키고, 함수 객체의 length 프로퍼티는 매개변수 parameter의 개수를 가리킨다.

function foo() {}
console.log(foo.length); // 0

function bar(x) {
	return x;
}
console.log(bar.length); // 1

function baz(x, y) {
	return x * y;
}
console.log(baz.length); // 2

name 프로퍼티

함수 객체의 name 프로퍼티는 함수 이름을 나타낸다. ES5와 ES6에서 동작을 달리하므로 주의!

익명 함수 표현식의 경우 ES5에서 name 프로퍼티는 빈 문자열을 값으로 갖는다. 하지만 ES6에서는 함수 객체를 가리키는 식별자를 값으로 갖는다.

proto 접근자 프로퍼티

모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는다. [[Prototype]] 내부 슬롯은 객체지향 프로그래밍의 상속을 구현하는 프로토타입 객체를 가리킨다.

__ proto__ 프로퍼티는 [[Prototype]] 내부 슬롯이 가리키는 프로토타입 객체에 접근하기 위해 사용하는 접근자 프로퍼티다. 내부 슬롯에는 직접 접근할 수 없고 간접적인 접근 방법을 제공하는 경우에 한하여 접근할 수 있다.

prototype 프로퍼티

prototype 프로퍼티는 생성자 함수로 호출할 수 있는 함수 객체, 즉 constructor만이 소유하는 프로퍼티다. 일반 객체와 생성자 함수로 호출할 수 없는 non-constructor에는 prototype 프로퍼티가 없다. prototype 프로퍼티는 함수가 객체를 생성하는 생성자 함수로 호출될 때 생성자 함수가 생성할 인스턴스의 프로토타입 객체를 가리킨다.

모던 자바스크립트 Deep Dive #15 (생성자 함수에 의한 객체 생성)

재밌게 살고 싶은 초보 개발자 — Thu, 10 Feb 2022 15:17:12 +0900

Object 생성자 함수

new 연산자와 함께 object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다.

// 빈 객체의 생성
const person = new Object();

// 프로퍼티 추가
person.name = 'Lee';
person.sayHello = function () {
	console.log('Hi! My name is ' + this.name);
}

console.log(person); // {name: "Lee", sayHello: f}
person.sayHello(); // Hi! My name is Lee

생성자 함수constructor란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스instance라 한다.

생성자 함수

객체 리터럴에 의한 객체 생성 방식의 문제점

객체 리터럴에 의한 객체 생성 방식은 직관적이고 간편하지만 단 하나의 객체만 생성한다. 따라서 동일한 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 매번 같은 프로퍼티를 기술해야 하기 때문에 비효율적.

객체는 프로퍼티를 통해 객체 고유의 상태state를 표현한다. 그리고 메서드를 통해 상태 데이터인 프로퍼티를 참조하고 조작하는 동작behavior을 표현한다. 따라서 프로퍼티는 객체마다 프로퍼티 값이 다를 수 있지만 메서드는 내용이 동일한 경우가 일반적이다.

생성자 함수에 의한 객체 생성 방식의 장점

생성자 함수에 의한 객체 생성 방식은 마치 객체(인스턴스)를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

// 생성자 함수
function Circle(radius) {
	// 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다. 
	this.radius = radius;
	this.getDiameter = function() {
		return 2 * this.radius;
    };
}

// 인스턴스의 생성
const circle1 = new Circle(5); // 반지름이 5인 Circle 객체를 생성
const circle2 = new Circle(10); // 반지름이 10인 Circle 객체를 생성

console.log(circle1.getDiameter()); // 10
console.log(circle2.getDiameter()); // 20

* this : 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수self-referencing variable다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다.

함수 호출 방식	this가 가리키는 값(this 바인딩)
일반 함수로서 호출	전역 객체
메서드로서 호출	메서드를 호출한 객체(마침표 앞의 객체)
생성자 함수로서 호출	생성자 함수가 (미래에) 생성할 인스턴스

생성자 함수의 인스턴스 생성 과정

생성자 함수의 역할은 프로퍼티 구조가 동일한 인스턴스를 생성하기 위한 템플릿(클래스)으로서 동작하여 인스턴스를 생성, 생성된 인스턴스를 초기화(인스턴스 프로퍼티 추가 및 초기값 할당) 하는 것이다.

인스턴스 생성과 this 바인딩 : 암묵적으로 빈 객체가 생성된다. 이 빈 객체가 바로 (아직 완성되지 않았지만) 생성자 함수가 생성한 인스턴스다. 그리고 암묵적으로 생성된 빈 객체, 즉 인스턴스는 this에 바인딩된다. 생성자 함수 내부의 this가 생성자 함수가 생성할 인스턴스를 가리키는 이유가 바로 이것이다. 이 처리는 함수 몸체의 코드가 한 줄씩 실행되는 런타임 이전에 실행된다.
* 바인딩 : 식별자와 값을 연결하는 과정
인스턴스 초기화 : 생성자 함수에 기술되어 있는 코드가 한 줄씩 실행되어 this에 바인딩되어 있는 인스턴스를 초기화한다. 즉, this에 바인딩되어 있는 인스턴스에 프로퍼티나 메서드를 추가하고 생성자 함수가 인수로 전달받은 초기값을 인스턴스 프로퍼티에 할당하여 초기화하거나 고정값을 할당한다.
인스턴스 반환 : 생성자 함수 내부의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다. 만약 this가 아닌 다른 객체를 명시적으로 반환하면 this가 반환되지 못하고 return문에 명시한 객체가 반환된다. 하지만 명시적으로 원시 값을 반환하면 원시 값 반환은 무시되고 암묵적으로 this가 반환된다. 이처럼 생성자 함수 내부에서 명시적으로 this가 아닌 다른 값을 반환하는 것은 생성자 함수의 기본 동작을 훼손하기 때문에 생성자 함수 내부에서 return문을 반드시 생략해야 한다.

내부 메서드 [[Call]] 과 [[Construct]]

함수는 객체이므로 일반 객체ordinary object와 동일하게 동작할 수 있다. 함수 객체는 일반 객체가 가지고 있는 내부 슬롯과 내부 메서드를 모두 가지고 있기 때문이다.

하지만 함수는 일반 객체와는 다르다. 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다. 따라서 함수객체는 일반 객체가 가지고 있는 내부슬롯은 물론 함수로서 동작하기 위해 함수 객체만을 위한 [[Environment]], [[FormalParameters]] 등의 내부 슬롯과 [[Call]], [[Construct]] 같은 내부 메서드를 추가로 가지고 있다.

내부 메서드 [[Call]]을 갖는 함수 객체를 callable, [[Construct]] 를 갖는 함수 객체를 constructor, [[Construct]]를 갖지 않는 함수 객체를 non-constructor라고 부른다. callable은 호출 할 수 있는 객체, 즉 함수를 말하며, constructor는 생성자 함수로서 호출할 수 있는 함수, non-constructor는 객체를 생성자 함수로서 호출할 수 없는 함수를 의미한다.

constructor와 non-constructor의 구분

자바스크립트 엔진은 함수 정의를 평가하여 함수 객체를 생성할 때 함수 정의 방식에 따라 함수를 constructor와 non-constructor로 구분한다.

constructor : 함수 선언문, 함수 표현식, 클래스(클래스도 함수)
non-constructor : 메서드 (ES6 메서드 축약 표현), 화살표 함수

함수를 일반 함수로서 호출하면 함수 객체의 내부 메서드 [[Call]]이 호출되고 new 연산자와 함께 생성자 함수로서 호출하면 내부 메서드 [[Construct]]가 호출된다. non-constructor인 함수 객체는 내부 메서드 [[Construct]]를 갖지 않는다. 따라서 non-constructor인 함수 객체를 생성자 함수로서 호출하면 에러가 발생한다.

new 연산자

일반 함수와 생성자 함수에 특별한 형식적 차이는 없다. 따라서 생성자 함수는 일반적으로 첫 문자를 대문자로 기술하는 파스칼 케이스로 명명하여 일반 함수와 구별할 수 있도록 노력한다.

new.target

생성자 함수가 new 연산자 없이 호출되는 것을 방지하기 위해 파스칼 케이스 컨벤션을 사용한다 하더라도 실수는 언제나 발생할 수 있다. 이러한 위험성을 회피하기 위해 ES6에서는 new.target을 지원한다.

new.target은 this와 유사하게 constructor인 모든 함수 내부에서 암묵적인 지역 변수와 같이 사용되며 메타 프로퍼티라고 부른다.

함수 내부에서 new.target을 사용하면 new 연산자와 함꼐 생성자 함수로서 호출되었는지 확인할 수 있다. new 연산자와 함께 생성자 함수로서 호출되면 함수 내부의 new.target은 함수 자신을 가리킨다. new연산자 없이 일반 함수로서 호출된 함수 내부의 new.targer은 undefined다.

모던 자바스크립트 Deep Dive #14 (프로퍼티 어트리뷰트)

재밌게 살고 싶은 초보 개발자 — Wed, 9 Feb 2022 15:51:01 +0900

내부 슬롯과 내부 메서드

내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다. 즉, 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직이므로 원칙적으로 자바스크립트는 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않는다. 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다.

프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체

자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 프로퍼티의 상태란 프로퍼티의 값value, 값의 갱신 가능 여부writable, 열거 가능 여부enumerable, 재정의 가능 여부configurable를 말한다.

프로퍼티 어트리뷰트는 자바스크립트 엔진이 관리하는 내부 상태 값meta-property인 내부 슬록 [[Value]], [[writable]], [[enumerable]], [[configurable]]이다. 따라서 프로퍼티 어트리뷰트에 직접 접근할 수 없지만 Object.getOwnPropertyDescriptor 메서드를 사용하여 간접적으로 확인할 수는 있다. Object.getOwnPropertyDescriptor 메서드는 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터PropertyDescriptor 객체를 반환한다. 만약 존재하지 않는 프로퍼티나 상속받은 프로퍼티에 대한 프로퍼티 디스크립터를 요구하면 undefined가 반환된다.

데이터 프로퍼티와 접근자 프로퍼티

데이터 프로퍼티data property

키와 값으로 구성된 일반적인 프로퍼티 (value, writable, enumerable, configurable)

접근자 프로퍼티accessor property

자체적으로 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수accessor function로 구성된 프로퍼티 (get, set, enumerable, configurable)

프로토타입prototype

어떤 객체의 상위(부모) 객체의 역할을 하는 객체
프로토타입은 하위(자식) 객체에서 자신의 프로퍼티와 메서드를 상속 (프로토타입 객체의 프로퍼티나 메서드를 상속받은 하위 객체는 자신의 프로퍼티 또는 메서드인 것처럼 자유롭게 사용)

프로토타입 체인prototype chain

프로토타입이 단방향 링크드 리스트 형태로 연결되어 있는 상속 구조
객체의 프로퍼티나 메서드에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티 또는 메서드가 없다면 프로토타입 체인을 따라 프로토타입의 프로퍼티나 메서드를 차례대로 검색

프로퍼티 정의

새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의하거나 기존 프로퍼티의 프로퍼티 어트리뷰트를 재정의 하는 것

객체 변경 방지

객체는 변경 가능한 값이므로 재할당 없이 직접 변경할 수 있다. 즉 프로퍼티를 추가, 삭제, 갱신할 수 있고, Object.defineProperty 또는 Object.defineProperties 메서드를 사용하여 프로퍼티 어트리뷰트를 재정의할 수도 있다.

자바스크립트는 객체의 변경을 방지하는 다양한 메서드를 제공한다.

1. 객체 확장 금지

Object.preventExtexsions 메서드는 객체의 확장을 금지한다. 객체 확장 금지란 프로퍼티 추가 금지를 의미한다. 즉, 확장이 금지된 객체는 프로퍼티 추가가 금지된다. (동적 추가와 Object.defineProperty 두 가지 추가 방법 모두 금지)

2. 객체 밀봉

Object.seal 메서드는 객체를 밀봉한다. 객체 밀봉seal이란 프로퍼티 추가 및 삭제와 프로퍼티 어트리뷰트 재정의 금지를 의미한다. 즉, 밀봉된 객체는 읽기와 쓰기만 가능하다.

3. 객체 동결

Object.freeze 메서드는 객체를 동결한다. 객체 동결freeze이란 프로퍼티 추가 및 삭제와 프로퍼티 어트리뷰트 재정의 금지, 프로퍼티 값 갱신 금지를 의미한다. 즉, 동결된 객체는 읽기만 가능하다.

4. 불변 객체

위의 변경 방지 메서드들은 얕은 변경 방지shallow only로 직속 프로퍼티만 변경이 방지되고 중첩 객체까지는 영향을 주지 못한다. 따라서 Object.freeze 메서드로 객체를 동결하여도 중첩 객체까지 동결할 수 없다. 객체의 중첩 객체까지 동결하여 변경이 불가능한 읽기 전용의 불변 객체를 구현하려면 객체를 값으로 갖는 모든 프로퍼티에 대해 재귀적으로 Object.freeze 메서드를 호출해야 한다.

모던 자바스크립트 Deep Dive #13 (let, const 키워드와 블록레벨 스코프)

재밌게 살고 싶은 초보 개발자 — Tue, 8 Feb 2022 15:53:35 +0900

var 키워드로 선언한 변수의 문제점

변수 중복 선언 허용

var x = 1;
var y = 1;

// var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다.
// 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다.
var x = 100;
// 초기화문이 없는 변수 선언문은 무시된다. (에러 발생하지 않음)
var y;

console.log(x); // 100
console.log(y); // 1

함수 레벨 스코프

var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다.

var x = 1; 

if (true) {
	// x 는 전역 변수다. 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언된다. 
	// 이는 의도치 않게 변수값이 변경되는 부작용을 발생시킨다.
	var x = 10;
}

console.log(x); // 10

for 문의 변수 선언문에서 var 키워드로 선언한 변수도 전역 변수가 된다.

함수 레벨 스코프는 전역 변수를 남발할 가능성을 높인다. 이로 인해 의도치 않게 전역 변수가 중복 선언되는 경우가 발생한다.

변수 호이스팅

var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작한다. 즉, 변수 호이스팅에 의해 var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수 있다. 단, 할당문 이전에 변수를 참조하면 언제나 undefined를 반환한다.

// 이 시점에서 변수 호이스팅에 의해 이미 foo 변수가 선언되었다. (1. 선언단계)
// 변수 foo는 undefined로 초기화 된다. (2. 초기화단계)

console.log(foo); // undefined

// 변수에 값을 할당한다. (3.할당단계)
foo = 123;

console.log(foo); // 123

// 변수 선언은 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 실행된다. 
var foo;

let 키워드

변수 중복 선언 금지

let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러SyntaxError가 발생한다.

블록 레벨 스코프

let 키워드로 선언한 변수는 모든 코드 블록(함수, if문, for문, while문, try/catch문 등)을 지역 스코프로 인정하는 블록 레벨 스코프block-level scope를 따른다.

let foo = 1; // 전역 변수

{
	let foo = 2; // 지역 변수
	let bar = 3; // 지역 변수
}

console.log(foo); // 1
console.log(bar); // ReferenceError: bar is not defined

변수 호이스팅

let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

console.log(foo); // ReferenceError: foo is not defined
let foo;

let 키워드로 선언한 변수는 "선언 단계"와 "초기화 단계"가 분리되어 진행된다. 즉, 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행된다.

만약 초기화 단계가 실행되기 이전에 변수에 접근하려고 하면 참조 에러 ReferenceError가 발생한다. let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점(변수 선언문)까지 변수를 참조할 수 없다. 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대Temporal Dead Zone; TDZ라고 부른다.

전역 객체와 let

var 키워드로 선언한 전역 변수와 전역 함수, 그리고 선언하지 않은 변수에 값을 할당한 암묵적 전역은 전역객체 window의 프로퍼티가 된다. 전역 객체의 프로퍼티를 참조할 때 window를 생략할 수 있다.

let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다. 즉, window.foo와 같이 접근할 수 없다.

const 키워드

const 키워드는 상수constant를 선언하기 위해 사용한다. (하지만 반드시 상수만을 위해 사용하지는 않는다.)

선언과 초기화

const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.

const foo =1; 

// 그렇지 않으면 문법 에러가 발생한다. 

const foo; // SyntaxError: Missing initializer in const declaration

let 키워드로 선언한 변수와 마찬가지로 블록 레벨 스코프를 가지며, 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

재할당 금지

var나 let 키워드로 선언한 변수는 재할당이 자유로우나 const 키워드로 선언한 변수는 재할당이 금지된다.

const foo = 1;
foo = 2; // TypeError:Assignment to constant variable.

상수

const 키워드로 선언한 변수에 원시 값을 할당한 경우 변수 값을 변경할 수 없다. 원시 값은 변경 불가능한 값immutable value 이므로 재할당 없이 값을 변경할 수 있는 방법이 없기 때문이다. 이러한 특징을 이용해 const 키워드를 상수를 표현하는 데 사용하기도 한다.

변수의 상대 개념인 상수는 재할당이 금지된 변수를 말한다. 상수도 값을 저장하기 위한 메모리 공간이 필요하므로 변수라고 할 수 있다. 단, 변수는 언제든지 재할당을 통해 변수 값을 변경할 수 있지만 상수는 재할당이 금지된다.

상수는 상태 유지와 가독성, 유지보수의 편의를 위해 적극적으로 사용해야 한다.

일반적으로 상수의 이름은 대문자로 선언해 상수임을 명확히 나타낸다. 여러 단어로 이뤄진 경우에는 언더스코어(_)로 구분해서 스네이크 케이스로 표현하는 것이 일반적.

const 키워드와 객체

const 키워드로 선언된 변수에 원시 값을 할당할 경우 값을 변경할 수 없지만 객체를 할당한 경우 값을 변경할 수 있다.

const 키워드는 재할당을 금지할 뿐 "불변"을 의미하지는 않는다.

const person = {
	name: 'Lee'
};

// 객체는 변경 가능한 값이다. 따라서 재할당 없이 변경이 가능하다.
person.name = 'Kim';

console.log(person); // {name: "Kim"}

var vs. let vs. const

ES6을 사용한다면 var 키워드는 사용하지 않는다.
재할당이 필요한 경우에 한정해 let 키워드를 사용한다. 이때 변수의 스코프는 최대한 좁게 만든다.
변경이 발생하지 않고 읽기 전용으로 사용하는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드를 사용한다. (const 키워드는 재할당을 금지하므로 var, let 키워드보다 안전하다.)

모던 자바스크립트 Deep Dive #12 (전역 변수의 문제점)

재밌게 살고 싶은 초보 개발자 — Thu, 27 Jan 2022 16:03:29 +0900

변수의 생명주기

지역 변수의 생명 주기

변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 그리고 언젠가 소멸한다. 즉, 변수는 생성되고 소멸되는 생명 주기life cycle가 있다. 변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다.

function foo() {
	// 변수 x 생성 → undefined 로 초기화
	var x = 'local'; // 변수 x에 값 할당
	console.log(x);
	return x;
	// 변수 x 소멸
}

foo();
console.log(x); // ReferenceError: x is not defined

변수는 자신이 선언된 위치에서 생성되고 소멸한다. 전역변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 전역 변수의 변수 선언은 선언문이 어디에 있든 상관없이 가장 먼저 실행되지만(=호이스팅) 함수 내부에서 선언한 변수는 함수가 호출된 직후에 함수 몸체의 코드가 한 줄씩 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행된다. 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다. 즉, 지역 변수의 생명 주기는 함수의 생명 주기와 일치한다.

변수의 생명 주기는 메모리 공간이 확보allocate된 시점부터 메모리 공간이 해제release되어 가용 메모리 풀memory pool에 반환되는 시점까지다. 변수는 자신이 등록된 스코프가 소멸(메모리 해제)될 때까지 유효한데, 할당된 메모리 공간이 더 이상 그 누구도 참조하지 않을 때 가비지 콜렉터에 의해 해제되어 가용 메모리 풀에 반환된다. 즉, 누군가가 메모리 공간을 참조하고 있으면 해제되지 않고, 확보된 상태로 남아 있게 된다.

전역 변수의 생명주기

함수와 달리 전역 코드는 명시적인 호출 없이 실행된다. 전역코드를 실행하는 특별한 진입점이 없고 코드가 로드되자마자 곧바로 해석되고 실행된다. 또한, 함수와 달리 전역코드에는 반환문을 사용할 수 없으므로 마지막 문이 실행되어 더 이상 실행할 문이 없을 때 종료한다.

var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 된다. 즉, var 키워드로 선언한 전역 변수의 생명 주기는 전역 객체의 생명 주기와 일치한다.

전역객체global object

코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체. 클라이언트 사이드 환경(브라우저)에서는 window, 서버 사이드 환경(Node.js)에서는 global 객체를 의미한다.

전역 변수의 문제점

암묵적 결합 : 전역 변수를 선언한 의도는 전역, 즉 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 것이다. 이는 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합implicit coupling을 허용하는 것이다. 하지만 이는 변수의 유효 범위가 크면 클수록 코드의 가독성은 나빠지고 의도치 않게 상태가 변경될 수 있는 위험성도 높아진다.
긴 생명주기 : 전역 변수는 생명 주기가 길어 메모리 리소스도 오랜 기간 소비한다. 더욱이 var 키워드는 변수의 중복 선언을 허용하므로 생명 주기가 긴 전역 변수는 변수 이름이 중복될 가능성이 있고, 변수 이름이 중복되면 의도치 않은 재할당이 이뤄진다.
스코프 체인 상에서 종점에 존재 : 스코프 체인 상 종점에 존재하기 때문에 변수를 검색할 때 가장 마지막에 검색된다. 즉, 전역 변수의 검색 속도가 가장 느리다.
네임스페이스 오염 : 자바스크립트의 문제점 중 하나인 파일이 분리되어 있어도 하나의 전역 스코프를 공유한다는 점 때문에 다른 파일 내에서 동일한 이름으로 명명된 전역 변수나 전역 함수가 같은 스코프 내에 존재할 경우 예상치 못한 결과를 가져올 수 있다.

전역 변수 사용을 억제하는 방법

전역 변수의 무분별한 사용은 위험
전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용
변수의 스코프는 좁을 수록 좋음

즉시 실행 함수

함수 정의와 동시에 호출되는 즉시 실행 함수는 단 한 번만 호출된다. 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행함수의 지역 변수가 되므로 전역 변수의 사용을 제한할 수 있다.

네임스페이스 객체

전역에 네임스페이스namespace 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가하여 전역 변수 사용을 제한한다.

모듈 패턴

모듈 패턴은 클래스를 모방해서 관련이 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만든다. 모듈 패턴은 클로저를 기반으로 동작하는데, 전역 변수의 억제는 물론 캡슐화*까지 구현할 수 있다는 특징이 있다.

* 캡슐화encapsulation : 객체의 상태state를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있도록 동작behavior인 메서드를 하나로 묶는 것

ES6 모듈

ES6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공한다. ES6를 사용하면 더는 전역 변수를 사용할 수 없다.

(IE를 포함한 구형 브라우저에서는 동작하지 않으며, 브라우저의 ES6 모듈 기능을 사용하더라도 트랜스파일링이나 번들링이 필요하기 때문에 아직까지는 브라우저가 지원하는 ES6 모듈기능보다는 Webpack 등의 모듈 번들러를 사용하는 것이 일반적)

모던 자바스크립트 Deep Dive #11 (스코프)

재밌게 살고 싶은 초보 개발자 — Tue, 25 Jan 2022 15:48:04 +0900

스코프란?

모든 식별자 (변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정되는데, 이를 식별자가 유효한 범위 즉, 스코프scope(유효범위)라 한다.

자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야 할 것인지 결정하는데, 이를 식별자 결정identifier resolution이라 한다. 따라서 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다.

코드의 문맥과 환경

"코드가 어디서 실행되며 주변에 어떤 코드가 있는지"를 렉시컬 환경lexical enviroment이라고 부른다. 즉, 코드의 문맥context은 렉시컬 환경으로 이뤄진다. 이를 구현한 것이 "실행 컨텍스트exucution context"이며, 모든 코드는 실행 컨텍스트에서 평가되고 실행된다.

var x = 'global';

function foo() {
	var x = 'local';
	console.log(x); // ①
}

foo();

console.log(x); // ②

위 예제에서 코드의 가장 바깥 영역에 선언된 x 변수는 어디서든 참조할 수 있지만, foo 함수 내부에서 선언된 x 변수는 foo 함수 내부에서만 참조할 수 있고, foo 함수 외부에서는 참조할 수 없다. 이때 두 개의 x 변수는 식별자 이름이 동일하지만 자신이 유효한 범위, 즉 스코프가 다른 별개의 변수다.

식별자는 어떤 값을 구별할 수 있어야 하므로 유일해야 한다. 따라서 식별자인 변수 이름은 중복될 수 없다. 즉, 하나의 값은 유일한 식별자에 연결name binding되어야 한다. 우리가 컴퓨터에서 파일을 관리할 때 다른 디렉토리의 같은 파일명을 사용할 수 있듯이 프로그래밍 언어에서도 스코프(유효범위)를 통해 식별자인 변수 이름의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있게 한다. 즉, 스코프는 네임스페이스다.

※ 이름공간 또는 네임스페이스(영어: namespace)는 개체를 구분할 수 있는 범위를 나타내는 말로 일반적으로 하나의 이름 공간에서는 하나의 이름이 단 하나의 개체만을 가리키게 된다.

// var 키워드로 선언된 변수는 같은 스코프 내에서 중복선언이 허용된다. 
// 이는 의도치 않게 변수 값이 재할당 되어 변경되는 부작용을 발생시킨다. 

function foo() {
	var x = 1;
	var x = 2;
	console.log(x); // 2
}

foo (); 


// 하지만 let이나 const 키워드로 선언된 변수는 같은 스코프 내에서 중복선언을 허용하지 않는다. 

function bar() {
	let x = 2; // SyntaxError: Identifier 'x' has already been declared
}

bar();

스코프의 종류

코드는 전역global과 지역local으로 구분할 수 있다.

구분	설명	스코프	변수
전역	코드의 가장 바깥 영역	전역 스코프	전역 변수
지역	함수 몸체 내부	지역 스코프	지역 변수

전역과 전역 스코프

전역이란 코드의 가장 바깥 영역을 말한다.
전역은 전역 스코프global scope를 만든다.
전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수global variable가 된다.
전역 변수는 어디서든지 참조할 수 있다.

지역과 지역 스코프

지역이란 함수 몸체 내부를 말한다.
지역은 지역 스코프local scope를 만든다.
지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수local variable가 된다.
지역 변수는 자신이 선언된 지역과 하위 지역(중첩 함수)에서만 참조할 수 있다.
지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.

스코프 체인

함수는 전역에서 정의할 수도 있고 함수 몸체 내부에서 정의할 수도 있다. 함수 몸체 내부에서 함수가 정의된 것을 '함수의 중첩'이라 한다. 그리고 함수 몸체 내부에서 정의한 함수를 '중첩 함수nested function', 중첩 함수를 포함하는 함수를 '외부 함수outer fucntion'라고 한다.

함수는 중첩될 수 있으므로 함수의 지역 스코프도 중첩될 수 있다. 이는 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다는 것을 의미한다. 다시 말해, 중첩 함수의 지역 스코프는 중첩 함수를 포함하는 외부 함수의 지역 스코프와 계층적 구조를 갖는다. 이때 외부 함수의 지역 스코프를 중첩 함수의 상위 스코프라 한다.

이처럼 모든 스코프는 하나의 계층적 구조로 연결되며, 모든 지역 스코프의 최상위 스코프는 전역 스코프다. 이렇게 스코프가 계층적으로 연결된 것을 스코프 체인scope chain이라 한다.

변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하면서 선언된 변수를 검색identifier resolution한다.

자바스크립트 엔진은 코드(전역 코드와 함수 코드)를 실행하기에 앞서 렉시컬 환경Lexical Environmnet을 실제로 생성한다. 변수 선언이 실행되면 변수 식별자가 이 자료구조(렉시컬 환경)에 키key로 등록되고, 변수 할당이 일어나면 이 자료구조의 변수 식별자에 해당하는 값을 변경한다. 변수의 검색도 이 자료구조 상에서 이뤄진다.

*렉시컬 환경Lexical Environment

스코프 체인은 실행 컨텍스트의 렉시컬 환경을 단방향으로 연결chaining한 것이다. 전역 렉시컬 환경은 코드가 로드되면 곧바로 생성되고 함수의 렉시컬 환경은 함수가 호출되면 곧바로 생성된다.

스코프 체인에 의한 변수 검색

자바스크립트 엔진은 스코프 체인을 따라 변수를 참조하는 코드의 스코프에서 시작해서 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다. 절대 하위 스코프로 내려가면서 식별자를 검색하는 일은 없다. 이는 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없다는 것을 의미한다.

스코프 체인에 의한 함수 검색

함수도 식별자에 할당되기 때문에 스코프를 갖는다. 사실 함수는 식별자에 함수 객체가 할당된 것 외에는 일반 변수와 다를 바 없다. 따라서 스코프를 "변수를 검색할 때 사용하는 규칙"이라고 표현하기보다는 "식별자를 검색하는 규칙"이라고 표현하는 편이 좀 더 적합하다.

함수 레벨 스코프

지역은 함수 몸체 내부를 말하고, 지역은 지역 스코프를 만든다. 이는 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다는 의미다.

대부분의 프로그래밍 언어는 함수 몸체만이 아니라 모든 코드 블록(if, for, while 등)이 지역 스코프를 만든다. 이러한 특성을 블록 레벨 스코프block level scope라 한다. 하지만 var 키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다. 이러한 특성을 함수 레벨 스코프function level scope라 한다.

var x = 1;

if (true) {
	// var 키워드로 선언된 변수는 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다.
	// 함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역 변수다. 
	// 따라서 x는 전역 변수다. 이는 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언된다. 
	// 이는 의도치 않게 변수 값이 변경되는 부작용을 발생시킨다.
    var x = 10;
}

 console.log(x); // 10

렉시컬 스코프

동적 스코프dynamic scope : 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정
렉시컬 스코프lexical scope (=정적 스코프static scope) : 함수를 어디서 정의했는지에 따라 함수의 상위 스코프 결정

자바스크립트는 렉시컬 스코프를 따라 함수를 어디서 정의했는지에 따라 상위 스코프를 결정한다. 함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향을 주지 않는다. 즉, 함수의 상위 스코프는 언제나 자신의 정의된 스코프다.

이처럼 함수의 상위 스코프는 함수 정의가 실행될 때 정적으로 결정된다. 함수 정의(함수 선언문 또는 함수 표현식)가 실행되어 생성된 함수 객체는 이렇게 결정된 상위 스코프를 기억한다. 함수가 호출될 때마다 함수의 상위 스코프를 참조할 필요가 있기 때문이다.

모던 자바스크립트 Deep Dive #10 -2(함수)

재밌게 살고 싶은 초보 개발자 — Mon, 24 Jan 2022 16:08:44 +0900

함수 호출

함수는 함수를 가리키는 식별자와 한 쌍의 소괄호인 함수 호출 연산자로 호출한다. 함수 호출 연산자 내에는 0개 이상의 인수를 쉼표로 구분해서 나열한다. 함수를 호출하면 현재의 실행 흐름을 중단하고 호출된 함수로 실행 흐름을 옮긴다. 이때 매개변수에 인수가 순서대로 할당되고 함수 몸체의 문들이 실행되기 시작한다.

매개변수와 인수

함수를 실행하기 위해 필요한 값을 함수 외부에서 함수 내부로 전달할 필요가 있는 경우, 매개변수parameter(인자)를 통해 인수(argument)를 전달한다. 인수는 값으로 평가될 수 있는 표현식이어야 한다. 인수는 함수를 호출할 때 지정하며, 개수와 타입에 제한이 없다.

매개변수는 함수를 정의할 때 선언하며, 함수 몸체 내부에서 변수와 동일하게 취급된다. 즉, 함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 생성되고 일반 변수와 마찬가지로 undefined로 초기화된 이후 인수가 순서대로 할당된다. 매개변수는 함수 몸체 내부에서만 참조할 수 있고 함수 몸체 외부에서는 참조할 수 없다. 즉, 매개변수의 스코프(유효범위)는 함수 내부다.

함수를 호출할 때 매개변수의 개수만큼 인수를 전달하는 것이 일반적이지만 그렇지 않은 경우에도 에러가 발생하지 않는다. 인수가 부족해서 인수가 할당되지 않은 매개변수 값은 undefined다. 초과된 인수는 그냥 버려지지 않으며, 모든 인수는 암묵적으로 argument 객체의 프로퍼티로 보관된다.

인수 확인

자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않는다.
자바스크립트는 동적 타입 언어다. 따라서 자바스크립트 함수는 매개변수의 타입을 사전에 지정할 수 없다.

function add(x, y) {
	if(typeof x !== 'number' || typeof y !== 'number' {
    // 매개변수를 통해 전달된 인수의 타입이 부적절한 경우 에러를 발생시킨다. 
    throw new TypeError('인수는 모두 숫자 값이어야 합니다.');
    }
    return x + y;
}

console.log(add(2)); // TypeError: 인수는 모두 숫자 값이어야 합니다.
console.log(add('a', 'b')); // TypeError: 인수는 모두 숫자 값이어야 합니다.

따라서 자바스크립트의 경우 함수를 정의할 때 적절한 인수가 전달되었는지 확인할 필요가 있다.
또는 인수가 전달되지 않는 경우 단축평가를 사용해 매개변수에 기본값을 할당하는 방법도 있다.

매개변수의 최대 개수

매개변수는 최대 몇 개까지 사용하는 것이 좋을까?

매개변수는 순서에 의미가 있다. 따라서 매개변수가 많아지면 함수를 호출할 때 전달해야 할 인수의 순서를 고려해야 한다.

함수의 매개변수는 코드를 이해하는 데 방해되는 요소이므로 이상적인 매개변수 개수는 0개이며 적을수록 좋다. 매개변수의 개수가 많다는 것은 함수가 여러 가지 일을 한다는 증거이므로 바람직하지 않다. 이상적인 함수는 한 가지 일만 해야 하며, 가급적 작게 만들어야 한다. 따라서 매개변수는 최대 3개 인상을 넘지 않는 것을 권장하며, 만약 그 이상의 매개변수가 필요하다면 하나의 매개 변수를 선언하고 객체를 인수로 전달하는 것이 유리. (주의 : 함수 외부에서 함수 내부로 전달한 객체를 함수 내부에서 변경하면 함수 외부의 객체가 변경되는 부수 효과side effect가 발생)

반환문

함수는 return 키워드와 표현식(반환값)으로 이뤄진 반환문을 사용해 실행 결과를 함수 외부로 반환(return)할 수 있다.

function multiply(x, y) {
	return x * y; // 반환문
}

// 함수 호출은 반환값으로 평가된다. 
var result = multiply(3, 5);
console.log(result); // 15

함수 호출은 표현식이다. 함수 호출 표현식은 return 키워드가 반환한 표현식의 평가 결과, 즉 반환 값으로 평가된다.

반환문은 생략할 수 있다. 이때 함수는 함수 몸체의 마지막 문까지 실행한 후 암묵적으로 undefined를 반환한다.

반환문은 함수 몸체 내부에서만 사용할 수 있다. 전역에서 반환문을 사용하면 문법 에러(SyntaxError:Illegal return statement)가 발생한다.

function multiply(x, y) {
	//return 키워드와 반환값 사이에 줄바꿈이 있으면
    return // 세미콜란 자동 삽입 기능(ASI)에 의해 세미콜론이 추가된다.
    x * y; // 무시된다. 
}

console.log(multiply(3, 5)); // undefined

return 키워드와 반환값으로 사용할 표현식 사이에 줄 바꿈이 있으면 세미콜론 자동 삽입 기능에 의해 세미콜론이 추가되어 의도치 않은 결과가 발생할 수 있다.

* 반환문의 두 가지 역할

함수의 실행을 중단하고 함수 몸체를 빠져나감 (반환문 이후에 다른 문이 존재하면 그 문은 실행되지 않고 무시)
return 키워드 뒤에 오는 표현식을 평가해 반환 (return 키워드 뒤에 반환값으로 사용할 표현식을 명시적으로 지정하지 않으면 undefined가 반환)

참조에 의한 전달과 외부 상태의 변경

원시 값은 값에 의한 전달pass by value, 객체는 참조에 의한 전달pass by reference 방식으로 동작한다. 매개변수도 함수 몸체 내부에서 변수와 동일하게 취급되므로 매개변수 또한 타입에 따라 값에 의한 전달, 참조에 의한 전달 방식을 그대로 따른다.

// 매개변수 primitive는 원시 값을 전달받고, 매개변수 obj는 객체를 전달받는다. 
function changeVal(primitive, obj) {
	primitive += 100;
	obj.name = 'Kim';
}

// 외부상태
var num = 100; 
var person = { name: 'Lee' };

console.log(num); // 100
console.log(person); // {name: "Lee"}

// 원시 값은 값 자체가 복사되어 전달되고 객체는 참조 값이 복사되어 전달된다. 
changeVal(num, person);

// 원시 값은 원본이 훼손되지 않는다. 
console.log(num); // 100

// 객체는 원본이 훼손된다.
console.log(person); // {name: "Kim"}

원시 타입 인수는 값 자체가 복사되어 매개변수에 전달되기 때문에 함수 몸체에서 그 값을 변경(재할당을 통한 교체)해도 원본이 훼손되지 않는다. 다시 말해 외부 상태, 즉 함수 외부에서 함수 몸체 내부로 전달한 원시 값의 원본(100)을 변경하는 어떠한 부수효과도 발생하지 않는다.

하지만 객체 타입의 인수는 참조 값이 복사되어 매개변수에 전달되기 때문에 함수 몸체에서 참조 값을 통해 객체를 변경할 경우 원본이 훼손된다. 다시 말해 외부상태, 즉 함수 외부에서 함수 몸체 내부로 전달한 참조 값에 의해 원본 객체가 변경되는 부수 효과가 발생한다. 이처럼 함수가 외부 상태를 변경하면 상태 변화를 추적하기 어려워진다. 이러한 문제의 해결방법 중 하나는 객체를 불변 객체immutable object로 만들어 사용하는 것이다. 객체의 복사본을 새롭게 생성하는 비용은 들지만 객체를 마치 원시 값처럼 변경 불가능한 값으로 동작하게 만드는 것이다.

다양한 함수의 형태

즉시 실행 함수

함수 정의와 동시에 즉시 호출되는 함수를 즉시 실행 함수IIFE, Immediately Invoked Function Expression라고 한다. 즉시 실행 함수는 단 한 번만 호출되며 다시 호출할 수 없다.

function () { // SyntaxError: Function statements require a function name
 // ...
} ();

즉시 실행 함수는 반드시 그룹 연산자 ( ... ) 로 감싸야한다. 그렇지 않으면 에러가 발생한다.

function foo () {
 //...
}(); // SyntaxError: Unexpected token ')'

위의 상황에서도 세미콜론 자동 삽입 기능에 의해 함수 선언문이 끝나는 위치, 즉 함수 코드 블록의 닫는 중괄호 뒤에 세미콜론이 암묵적으로 추가되기 때문에 에러가 난다.

// 익명 즉시 실행 함수
(function () {
	var a = 3;
	var b = 5;
	return a * b;
} ());

즉시 실행 함수는 함수 이름이 없는 익명 함수를 사용하는 것이 일반적이다. 함수 이름이 있는 기명 즉시 실행 함수도 사용할 수 있다. 하지만 그룹 연산자 ( ... ) 내의 기명 함수는 함수 선언문이 아니라 함수 리터럴로 평가되며 함수 이름은 함수 몸체에서만 참조할 수 있는 식별자이므로 즉시 실행 함수를 다시 호출할 수는 없다.

재귀함수

함수가 자기 자신을 호출하는 것을 재귀 호출recursive call이라 한다. 재귀 함수recursive function는 자기 자신을 호출하는 행위, 즉 재귀 호출을 수행하는 함수를 말한다. 재귀 함수는 반복되는 처리를 위해 사용한다.

// 10부터 0까지 출력하는 함수
function countdown(n) {
	if (n < 0) return;
	console.log(n);
	countdown(n - 1); // 재귀호출
}

countdown(10);

재귀 함수는 자신을 무한 재귀 호출한다. 따라서 재귀 함수 내에는 재귀 호출을 멈출 수 있는 탈출 조건을 반드시 만들어야 한다. 탈출 조건이 없으면 함수가 무한히 호출되어 스택 오버플로stack overflow 에러가 발생한다.

중첩 함수

함수 내부에 정의된 함수를 중첩 함수nested function 또는 내부 함수inner function라 한다. 그리고 중첩 함수를 포함하는 함수는 외부 함수outer function라 부른다. 중첩 함수는 외부 함수 내부에서만 호출할 수 있다. 일반적으로 중첩 함수는 자신을 포함하는 외부함수를 돕는 헬퍼 함수helper function의 역할을 한다.

콜백 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수callback function라고 하며, 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차함수Higher-Order Function, HOF라고 한다.

고차 함수는 매개변수를 통해 전달받은 콜백함수의 호출 시점을 결정해서 호출한다. 다시 말해, 콜백 함수는 고차 함수에 의해 호출되며, 이때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.

순수 함수와 비순수 함수

순수 함수pure function

어떤 외부 상태에 의존하지 않고 변경하지도 않는 부수효과가 없는 함수
동일한 인수가 전달되면 언제나 동일한 값을 반환하는 함수
오직 매개변수를 통해 함수 내부로 전달된 인수에게만 의존해 반환값을 만듦

비순수함수impure function

외부 상태에 의존하거나 외부 상태를 변경하는 부수효과가 있는 함수
외부 상태에 따라 반환 값이 달라지는 함수

모던 자바스크립트 Deep Dive #10 -1(함수)

재밌게 살고 싶은 초보 개발자 — Wed, 19 Jan 2022 16:05:34 +0900

함수란?

함수는 자바스크립트에서 가장 중요한 핵심 개념으로 또 다른 핵심 개념인 스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this, 프로토타입, 모듈화 등이 모두 함수와 깊은 관련이 있다. 프로그래밍 언어의 함수는 수학의 함수와 같은 개념으로 일련의 과정을 문statement으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 입력을 받아서 출력을 내보내는데 이때 함수로 입력을 전달받는 변수를 매개변수parameter, 입력을 인수argument, 출력을 반환값return value이라 한다.

함수는 함수 정의function definition을 통해 생성한다. 함수 정의만으로 함수가 실행되는 것은 아니며, 수학의 함수처럼 미리 정의된 일련의 과정을 실행하기 위해 필요한 입력, 즉 인수argument를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시해야 한다. 이를 함수 호출function call/invoke이라 한다. 함수를 호출하면 코드 블록에 담긴 문들이 일괄적으로 실행되고, 실행결과(=반환값)를 반환한다.

// 함수 호출
var result = add(2,5);

// 함수 add에 인수 2,5를 전달하면서 호출하면 반환값 7을 반환한다.
console.log(result); // 7

함수를 사용하는 이유

코드의 재사용 : 함수는 필요할 때 여러 번 호출할 수 있다. 즉, 실행 시점을 개발자가 결정할 수 있고 몇 번이든 재사용이 가능하다. 동일한 작업을 반복적으로 수행해야 한다면 같은 코드를 중복해서 여러 번 작성하는 것보다 미리 정의된 함수를 재사용하는 것이 효율적이다.
유지보수의 편의성 & 코드의 신뢰성 : 함수를 사용하지 않고 같은 코드를 중복해서 여러 번 작성하면 그 코드를 수정해야 할 때 중복된 횟수만큼 코드를 수정해야 한다. 또한 사람은 실수하기 마련이므로 실수할 가능성도 높아진다. 코드의 중복을 억제하고 재사용성을 높이는 함수는 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높이는 효과가 있다.
코드의 가독성 : 함수는 객체 타입의 값이다. 따라서 이름(식별자)을 붙일 수 있다. 함수 이름은 변수 이름과 마찬가지로 함수 자신의 역할을 잘 설명해야 한다. 적절한 함수 이름은 함수 내부 코드를 이해하지 않고도 함수의 역할을 파악할 수 있게 돕는다.

함수 리터럴

함수는 객체 타입의 값이기 때문에 숫자 값을 숫자 리터럴로 생성하고 객체를 객체 리터럴로 생성하는 것처럼 함수도 함수 리터럴로 생성할 수 있다. 함수 리터럴은 function 키워드, 함수 이름, 매개변수 목록, 함수 몸체로 구성된다. 함수는 객체지만 일반 객체와는 다르다. 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다. 그리고 일반 객체에는 없는 함수 객체만의 고유한 프로퍼티를 갖는다.

// 변수에 함수 리터럴을 할당
var f = function add(x, y) {
	return x + y;
};

함수 리터럴의 구성 요소

구성요소	설명
함수이름	* 함수 이름은 식별자다. 따라서 식별자 네이밍 규칙을 준수해야 한다. * 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자다. * 함수 이름은 생략할 수 있다. 이름이 있는 함수를 기명함수named function, 이름이 없는 함수를 무명/익명함수anonymouse function라 한다.
매개변수 목록	* 0개 이상의 매개변수를 소괄호로 감싸고 쉼표로 구분한다. * 각 매개변수에는 함수를 호출할 때 지정한 인수가 순서대로 할당된다. 즉, 매개변수 목록은 순서에 의미가 있다. * 매개변수는 함수 몸체 내에서 변수와 동일하게 취급된다. 따라서 매개변수도 변수와 마찬가지로 식별자 네이밍 규칙을 준수해야 한다.
함수 몸체	* 함수가 호출되었을 때 일괄적으로 실행될 문들을 하나의 실행단위로 정의한 코드 블록이다. * 함수 몸체는 함수 호출에 의해 실행된다.

함수 정의

함수 정의란 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 그리고 반환할 값을 지정하는 것을 말한다.

함수 정의 방식	예시
함수 선언문	function add (x, y) { return x + y; }
함수 표현식	var add = function (x, y) { return x + y; }
Function 생성자 함수	var add = new Function('x', 'y', 'return x+y');
화살표 함수 (ES6)	var add = (x, y) => x+ y;

변수 선언와 함수 정의

변수는 '선언declaration'한다고 했지만 함수는 '정의definition'한다고 표현.

함수 선언문

// 함수 선언문
function add(x,y) {
	return x + y;
}

// 함수 참조
// console.dir은 console.log와는 달리 함수 객체의 프로퍼티까지 출력한다. 
// 단, Node.js환경에서는 console.log와 같은 결과가 출력된다. 
console.dir(add); // f add(x, y)

// 함수 호출
console.log(add(2,5)); // 7

함수 선언문은 함수 리터럴과 형태가 동일하다. 단, 함수 리터럴은 함수 이름을 생략할 수 있으나 함수 선언문은 함수 이름을 생략할 수 없다.

함수 표현식

// 함수 표현식
var add = function (x, y) {
	return x + y;
};

console.log(add(2,5)); // 7;

함수는 객체 타입의 값이다. 이처럼 값의 성질을 갖는 객체를 일급 객체라 한다. 함수가 일급 객체라는 것은 함수를 값처럼 자유롭게 사용할 수 있다는 의미다. 함수는 일급 객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. 이러한 함수정의 방식을 함수 표현식function expression이라 한다.

// 기명 함수 표현식
var add = function foo (x, y) {
	return x + y;
};

// 함수 객체를 가리키는 식별자로 호출
console.log(add(2,5)); // 7

// 함수 이름으로 호출하면 ReferenceError)가 발생한다.
// 함수 이름은 함수 몸체 내부에서만 유효한 식별자다.
console.log(foo(2,5)); // ReferenceError: foo is not defined

함수 리터럴의 함수 이름은 생략할 수 있다. 이러한 함수를 익명 함수라 한다. 함수 표현식의 함수 리터럴은 함수 이름을 생략하는 것이 일반적이다. 함수 선언문에서 살펴본 바와 같이 함수를 호출할 때는 함수 이름이 아니라 함수 객체를 가리키는 식별자를 사용해야 한다. 함수 이름은 함수 몸체 내부에서만 유효한 식별자이므로 함수 이름으로 함수를 호출할 수 없다.

함수 생성 시점과 함수 호이스팅

함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출할 수 있지만 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다. 이는 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성시점이 다르기 때문이다.

모든 선언문이 그렇듯 함수 선언문도 코드가 한 줄씩 순차적으로 실행되는 시점인 런타임runtime 이전에 자바스크립트 엔진에 의해 먼저 실행된다. 다시 말해, 함수 선언문으로 함수를 정의하면 런타임 이전에 함수 객체가 먼저 생성된다. 그리고 자바스크립트 엔진은 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당한다. 즉, 코드가 한 줄씩 순차적으로 실행되기 시작하는 런타임에는 이미 함수 객체가 생성되어 있고 함수 이름과 동일한 식별자에 할당까지 완료된 상태다. 따라서 함수 선언문 이전에 함수를 참조할 수 있으며 호출할 수도 있다. 이처럼 함수 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 자바스크립트의 고유한 특징을 함수 호이스팅function hoisting이라 한다. (함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.)

Function 생성자 함수

자바스크립트가 기본 제공하는 빌트인 함수인 Function 생성자 함수에 매개변수 목록과 함수 몸체를 문자열로 전달하면서 new 연산자와 함께 호출하면 함수 객체를 생성해서 반환한다.

생성자 함수constructor function

객체를 생성하는 함수

화살표 함수

ES6에서 도입된 화살표 함수arrow function은 function 키워드 대신 화살표fat arrow => 를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다. 화살표 함수는 항상 익명 함수로 정의한다. 화살표 함수는 생성자 함수로 사용할 수 없으며, 기존 함수와 this 바인딩 방식이 다르고, prototype 프로퍼티가 없으며 argumens 객체를 생성하지 않는다.

// 화살표 함수
const add = (x, y) => x + y;
console.log(add(2,5)); // 7;

모던 자바스크립트 Deep Dive #09 (원시 값과 객체의 비교 )

재밌게 살고 싶은 초보 개발자 — Sun, 16 Jan 2022 22:19:09 +0900

자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, 불리언, null, undefined, 심벌, 객체타입)은 크게 원시 타입promitive type과 객체 타입object/reference type으로 구분할 수 있다.

원시 타입의 값, 즉 원시 값은 변경 불가능한 값immutable value이다. 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값mutable value이다.
원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다.
원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달pass by value라 한다. 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달pass by reference라 한다.

원시 값

변경 불가능한 값

원시 타입primitive type의 값, 즉 원시 값은 변경 불가능한 값immutable value으로 한번 생성된 원시 값은 읽기 전용read only값으로서 변경할 수 없다.

먼저 변수와 값은 구분해서 생각해야 하는데 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이고, 값은 변수에 저장된 데이터로서 표현식이 평가되어 생성된 결과를 말한다. 변경 불가능하다는 것은 변수가 아니라 값에 대한 진술이다.

"원시 값은 변경 불가능하다"는 말은 원시 값 자체를 변경할 수 없다는 것이지 변수 값을 변경할 수 없다는 것이 아니다. 변수는 언제든지 재할당을 통해 변수 값을 변경(엄밀히는 교체)할 수 있다.

변수의 상대 개념인 상수는 재할당이 금지된 변수를 말한다. 상수도 값을 저장하기 위한 메모리 공간이 필요하므로 변수라고 할 수 있다. 단, 변수는 언제든 재할당을 통해 변수 값을 변경할 수 있지만 상수는 단 한 번만 할당이 허용되므로 변수 값을 변경할 수 없다. 따라서 상수와 변경 불가능한 값을 동일시 하는 것은 곤란하다. 상수는 재할당이 금지된 변수일뿐.

원시 값을 할당한 변수에 새로운 원시 값을 재할당하면 메모리 공간에 저장되어 있는 재할당 이전의 원시 값을 변경하는 것이 아니라 새로운 메모리 공간을 확보하고 재할당한 원시 값을 저장한 후, 변수는 새롭게 재할당한 원시 값을 가리킨다. 이때 변수가 참조하던 메모리 공간의 주소가 바뀐다. 값의 이러한 특성을 불변성immutability라 한다. 이는 데이터의 신뢰성을 보장한다.

문자열과 불변성

자바스크립트의 문자열은 원시 타입이며, 변경 불가능하다. 이것은 문자열이 생성된 후에는 변경할 수 없음을 의미한다.

유사 배열 객체array-like-object

유사 배열 객체란 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말한다. 문자열은 마치 배열처럼 인덱스를 통해 각 문자에 접근할 수 있으며, length 프로퍼티를 갖기 때문에 유사 배열 객체이고 for문으로 순회할 수도 있다.

var str = 'string'

// 문자열은 유사배열 객체이므로 배열과 유사하게 인덱스를 사용하여 각 문자에 접근할 수 있다.
console.log(str[0]); // s

// 원시 값인 문자열이 객체처럼 동작한다. 
console.log(str.length); // 6
console.log(str.toUpperCase()); // STRING

값에 의한 전달

var score = 80;
var copy = score;

console.log(score); // 80
console.log(copy); // 80

score = 100;

console.log(score); // 100
console.log(copy); // 80 ← 할당받는 변수에는 할당되는 변수의 원시 값이 복사

1. 변수에 원시 값을 갖는 변수를 할당하면 할당받는 변수에는 할당되는 변수의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달이라 한다.

var score = 80;

// copy 변수에는 score 변수의 값 80이 복사되어 할당된다. 
var copy = score;

console.log(score,copy); // 80 80
console.log(score === copy); // true

// score 변수와 copy 변수의 값은 다른 메모리 공간에 저장된 별개의 값이다. 
// 따라서 score 변수의 값을 변경해도 copy 변수의 값에는 어떠한 영향도 주지 않는다. 

score = 100;

console.log(score, copy); // 100 80
console.log(score === copy); // false

2. score 변수와 copy 변수는 숫자 값 80을 갖는다는 점에서는 동일하지만 score 변수와 copy 변수의 값 80은 다른 메모리 공간에 저장된 별개의 값이다. 따라서 score 변수의 값을 변경해도 copy 변수의 값에는 어떠한 영향도 주지 않는다.

(엄격하게 표현하면) 변수에는 값이 전달되는 것이 아니라 메모리 주소가 전달된다. 이는 변수와 같은 식별자는 값이 아니라 메모리 주소를 기억하고 있기 때문. 단, 전달된 메모리 주소를 통해 메모리 공간에 접근하면 값을 참조할 수 있다.

객체

객체는 프로퍼티의 개수가 정해져 있지 않으며, 동적으로 추가되고 삭제할 수 있다. 또한 프로퍼티의 값에도 제약이 없다. 따라서 객체는 원시 값과 같이 확보해야할 메모리 공간의 크기를 사전에 정해둘 수 없다.

변경 가능한 값

객체(참조) 타입의 값, 즉 객체는 변경 가능한 값mutable value이다.

var person = {
	name: 'Lee'
};

객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조 값reference value에 접근할 수 있다. 참조 값은 생성된 객체가 저장된 메모리 공간의 주소 그 자체다.

객체는 변경 가능한 값이기 때문에 객체를 할당한 변수는 재할당 없이 객체를 직접 변경할 수 있다. 즉, 재할당 없이 프로퍼티를 동적으로 추가할 수도 있고 프로퍼티 값을 갱신할 수도 있으며 프로퍼티 자체를 삭제할 수도 있다. 이때 객체를 할당한 변수에 재할당을 하지 않았으므로 객체를 할당한 변수의 참조 값은 변경되지 않는다.

객체를 생성하고 관리하는 방식은 매우 복잡하며 비용이 많이 드는 일이다. 다시 말해 메모리의 효율적 소비가 어렵고 성능이 나빠진다. 따라서, 메모리를 효율적으로 사용하기 위해, 그리고 객체를 복사해 생성하는 비용을 절약하여 성능을 향상시키기 위해 객체는 변경 가능한 값으로 설계되어 있다. 하지만 이러한 구조적 단점에 따른 부작용이 있는데, 그것은 원시 값과는 다르게 여러 개의 식별자가 하나의 객체를 공유할 수 있다는 것이다.

얕은 복사shallow copy와 깊은 복사deep copy

얕은 복사와 깊은 복사로 생성된 객체는 원본과는 다른 객체다. 즉, 원본과 복사본은 참조 값이 다른 별개의 객체다. 하지만 얕은 복사는 객체에 중첩되어 있는 객체의 경우 참조 값을 복사하고 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사해서 원시 갑처럼 완전한 복사본을 만든다는 차이가 있다.

const v = 1;

// "깊은 복사"라고 부르기도 한다.
const c1 = v;
console.log(c1 === v); // true

const o = { x: 1 };

// "얕은 복사"라고 부르기도 한다. 
const c2 = o; 
console.log(c2 === o); // true

참조에 의한 전달

var person = {
	name: 'Lee'
};

// 참조 값을 복사(얕은 복사)
var copy = person;

객체를 가리키는 변수(원본, person)를 다른 변수(사본, copy)에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라 한다. 이때 원본 person과 사본 copy는 저장된 메모리 주소는 다르지만 동일한 참조 값을 갖는다. 다시 말해, 원본과 사본 모두 동일한 객체를 가리킨다. 이것은 두 개의 식별자가 하나의 객체를 공유한다는 것을 의미한다. 따라서 원본 또는 사본 중 어느 한쪽에서 객체를 변경(변수에 새로운 객체를 재할당하는 것이 아닌 객체의 프로퍼티 값을 변경하거나 추가, 삭제)하면 서로 영향을 주고받는다.

결국 "값에 의한 전달"과 "참조에 의한 전달"은 식별자가 기억하는 메모리 공간에 저장되어 있는 값을 복사해서 전달한다는 면에서는 동일하다. 다만 식별자가 기억하는 메모리 공간, 즉 변수에 저장되어 있는 값이 원시 값이냐 참조 값이냐의 차이만 있을 뿐. 따라서 자바스크립트에는 "참조에 의한 전달"은 존재하지 않고 "값에 의한 전달"만이 존재한다고 할 수 있다.

모던 자바스크립트 Deep Dive #08 (객체 리터럴)

재밌게 살고 싶은 초보 개발자 — Fri, 14 Jan 2022 14:49:35 +0900

객체란?

자바스크립트는 객체object 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 "모든 것"이 객체다.

원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체.

원시 타입은 단 하나의 값만 나타내지만 객체 타입object/referenece type은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조data structure다. 또한 원시 타입의 값, 즉 원시 값은 변경 불가능한 값 immutable value이지만 객체 타입의 값, 즉 객체는 변경 가능한 값mutable value이다.

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키key와 값value으로 구성된다.

// 키 : 값 = 프로퍼티

var person = {
	name : 'Lee', 
	age : 20
};

자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 자바스크립트의 함수는 일급 객체이므로 함수도 프로퍼티 값으로 사용할 수 있는데, 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드method라 부른다.

// 객체의 프로퍼티와 메서드

var counter = {
	num : 0, // 프로퍼티
	increase : function () { // 메서드
    	this.num++;
    }
};

프로퍼티 : 객체의 상태를 나타내는 값(data)
메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)

객체와 함수 : 자바스크립트의 객체는 함수와 밀접한 관계를 가진다. 함수로 객체를 생성하기도 하며 함수 자체가 객체이기도 하다. 자바스크립트에서 함수와 객체는 분리해서 생각할 수 없는 개념이다. 즉, 객체를 이해해야 함수를 제대로 이해할 수 있고, 반대로 함수를 이해해야 객체를 정확히 이해할 수 있다.

객체 리터럴에 의한 객체 생성

C++나 자바 같은 클래스 기반 객체지향 언어는 클래스를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자consturctor를 호출하여 인스턴스를 생성하는 방식으로 객체를 생성한다.

인스턴스? 클래스에 의해 생성되어 메모리에 저장된 실체. 객체지향 프로그래밍에서 객체는 클래스와 인스턴스를 포함한 개념으로 클래스는 인스턴스를 생성하기 위한 템플릿의 역할을 한다. 인스턴스는 객체가 메모리에 저장되어 실제로 존재하는 것에 초점을 맞춘 용어이다.

프로토타입 기반 객체지향 언어인 자바스크립트의 다양한 객체 생성 방법

객체 리터럴
object 생성자 함수
생성자 함수
object.create 메서드
클래스(ES6)

리터럴literal 은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법. 객체 리터럴의 중괄호는 코드 블록을 의미하지 않는다는 점에 주의! 코드 블록의 닫는 중괄호 뒤에는 세미콜론을 붙이지 않는다. 하지만 객체 리터럴은 값으로 평가되는 표현식이므로 닫는 중괄호 뒤에 세미콜론을 붙인다.

프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다. 프로퍼티를 나열할 때는 쉼표(,)로 구분한다.

var person = {
	// 프로퍼티 키는 name, 프로퍼티 값은 'Lee'
    name : 'Lee',
    // 프로퍼티 키는 age, 프로퍼티 값은 20
    age : 20
};

프로퍼티 키와 프로퍼티 값으로 사용할 수 있는 값

프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값

프로퍼티 키는 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할을 한다. 하지만 반드시 식별자 네이밍 규칙을 따라야 하는 것은 아니다. 프로퍼티 키는 문자열이므로 따옴표(' ' , " ")로 묶어야 한다. 하지만 식별자 네이밍 규칙을 준수하는 이름, 즉 자바스크립트에서 사용 가능한 유효한 이름인 경우 따옴표를 생략할 수 있다. 반대로 말하면 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다.

// 식별자 네이밍 규칙을 준수하지 않을 경우 
// - 연산자가 있는 표현식으로 해석
var person = {
	firstName : 'Ung-mo',
	last-name: 'Lee' // SyntaxError: Unexpected token -
};

// 식별자 네이밍 규칙 준수
var person = {
	firstName : 'Ung-mo',
	'last-name': 'Lee' // SyntaxError: Unexpected token -
};

문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수도 있다. 이 경우에는 프로퍼티 키로 사용할 표현식을 대괄호 ( [...] )로 묶어야 한다.
빈 문자열을 프로퍼티 키로 사용해도 에러가 발생하지 않지만 키로서의 의미를 갖지 못하므로 권장하지 않는다.
프로퍼티 키에 문자열이나 심벌 값 외에 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다.
var, function과 같은 예약어를 프로퍼티 키로 사용해도 에러가 발생하지 않지만 예상치 못한 에러가 발생할 여지가 있으므로 권장하지 않는다.
이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다. 이때 에러가 발생하지 않으니 주의!

메서드

프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드method라 부른다. 즉, 메서드는 객체에 묶여 있는 함수를 의미한다.

var circle = {
	radius: 5, // 프로퍼티
    
	// 원의 지름
	getDiameter: functionc() { // 메서드
		return 2 * this.radius; // this는 circle을 가리킨다. 
    }
};

console.log(circle.getDiameter()); // 10

프로퍼티 접근

프로퍼티에 접근하는 방법

마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법dot notation
대괄호 프로퍼티 접근 연산자([...])를 사용하는 대괄호 표기법dracket notation

var person = {
	name: 'Lee'
};

// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); // Lee

// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); // Lee

대괄호 표기법을 사용하는 경우 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다. 그렇지 않으면 (자바스크립트 엔진은) 식별자로 해석한다.

var person = {
	name: 'Lee'
};

console.log(person[name]); // ReferenceError: name is not defined
// 따옴표로 감싸지 않았기 때문에 선언된 식별자 name을 찾았지만 찾지 못했기 때문

객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다. 이때 ReferenceError가 발생하지 않는 점 주의!

프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.

프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.

프로퍼티 삭제

delete 연산자는 객체의 프로퍼티를 삭제한다. 이때 delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 한다. 만약 존재하지 않는 프로퍼티를 삭제하면 아무런 에러 없이 무시된다.

ES6에서 추가된 객체 리터럴의 확장 기능

프로퍼티 축약 표현

객체 리터럴의 프로퍼티는 프로퍼티 키와 프로퍼티 값으로 구성된다. 프로퍼티 값은 변수에 할당된 값, 즉 식별자 표현식일 수도 있다. ES6에서는 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략property shorthand 할 수 있다. 이때 프로퍼티 키는 변수 이름으로 자동 생성된다.

let x = 1, y = 2;

// 프로퍼티 축약 표현
const obj = { x, y };

console.log(obj); // {x:1, y:2}

계산된 프로퍼티 이름

문자열 또는 문자열로 타입 변화할 수 있는 값으로 평가되는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수도 있다. 단, 프로퍼티 키로 사용할 표현식을 대괄호([...])로 묶어야 한다. 이를 계산된 프로퍼티 이름computed property name이라 한다.

메서드 축약 표현

ES6에서는 메서드를 정의할 때 function 키워드를 생략한 축약 표현을 사용할 수 있다.

모던 자바스크립트 Deep Dive #07 (타입 변환과 단축 평가)

재밌게 살고 싶은 초보 개발자 — Thu, 13 Jan 2022 16:45:38 +0900

타입 변환이란?

자바스크립트의 모든 값은 타입이 있으며 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환explicit coercion 또는 타입 캐스팅type casting이라 한다. 반대로 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 하는데, 이를 암묵적 타입 변환implicit coercion 또는 타입 강제 변환type coercion이라 한다.

명시적 타입 변환이나 암묵적 타입 변환이 기존 원시 값을 직접 변경하는 것은 아니다. 원시 값은 변경 불가능한 값immutable value이므로 변경할 수 없다. 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다. 즉, 암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하는 것이 아니다. 자바스크립트 엔진은 표현식을 에러 없이 평가하기 위해 피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다. 명시적 타입 변환은 타입을 변경하겠다는 개발자의 의지가 코드에 명백히 드러난다. 하지만 암묵적 타입 강제 변환은 자바스크립트 엔진에 의해 암묵적으로(드러나지 않게) 자동 변환되기 때문에 타입을 변경하겠다는 의지가 명백히 나타나지 않는다.

암묵적 타입 변환

자바스크립트 엔진이 표현식을 평가할 때 개발자의 의도와는 상관없이 모드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환(암묵적 타입 변환)한다.

문자열 타입으로 변환

1 + '2' // "12"

숫자 타입으로 변환

1 - '1' // 0
1 * '10' // 10
1 / 'one' // NaN
'1' > 0 // true

빈 문자열 (' '), 빈 배열 ([ ]), null, false는 0으로 true는 1로 변환된다. 객체와 빈 배열이 아닌 배열, undefined는 변환되지 않아 NaN이 된다.

불리언 타입으로 변환

if ('') console.log('1');
if ('true') console.log('2');
if (0) console.log('3');
if ('str') console.log('4');
if (null) console.log('5');

// 2 4

불리언 타입이 아닌 값을 Truthy (참으로 평가되는 값) 또는 Falsy 값 (거짓으로 평가되는 값) 으로 구분한다. 즉, 제어문의 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서 Truthy 값은 true로, Falsy 값은 false로 암묵적 타입 변환된다.

Falsy 값 외에 모든 값은 모두 true로 평가되는 Truthy 값이다.

Flasy 값

false
undefined
null
0, -0
NaN
' ' (빈문자열)

명시적 타입 변환

개발자의 의도에 따라 명시적으로 타입을 변경하는 방법은 다양하다. 표준 빌트인 생성자 함수(String, Number, Boolea)를 new 연산자 없이 호출하는 방법과 빌트인 메서드를 사용하는 방법, 암묵적 타입 변환을 이용하는 방법이 있다.

표준 빌트인 생성자 함수와 빌트인 메서드? 표준 빌트인bulit-in 생성자 함수와 표준 빌트인 메서드는 자바스크립트에서 기본 제공하는 함수다. 표준 빌트인 생성자 함수는 객체를 생성하기 위한 함수이며 new 연산자와 함께 호출한다. 표준 빌트인 메서드는 자바스크립트에서 기본 제공하는 빌트인 객체의 메서드다.

문자열 타입으로 변환

string 생성자 함수를 new 연산자 없이 호출하는 방법
object.prototype.toString 메서드를 사용하는 방법
문자열 연결 연산자를 이용하는 방법

숫자 타입으로 변환

Number 생성자 함수를 new 연산자 없이 호출하는 방법
parseInt, parseFloat 함수를 사용하는 방법 (문자열만 숫자 타입으로 변환 가능)
+ 단항 산술 연산자를 이용하는 방법
* 산술 연산자를 이용하는 방법

불리언 타입으로 변환

Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
! 부정 논리 연산자를 두 번 사용하는 방법

단축 평가

논리 연산자를 사용한 단축 평가

논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다. 이를 단축 평가short-circuit evaluation라 한다. 단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다.

// 두 개의 피연산자가 모두 true로 평가될 때 true 반환 (좌항 → 우항으로 평가)
// 논리 연산의 결과를 결정하는 두 번째 피연산자, 즉 문자열 'Dog'를 그대로 반환
'Cat' && 'Dog' // "Dog"

// 두 개의 피연산자 중 하나만 true라도 true 반환 (좌항 → 우항으로 평가)
// 논리 연산의 결과를 결정한 첫 번째 피연산자, 즉 문자열 'Cat'을 그대로 반환
'Cat' || 'Dog' // "Cat"

옵셔널 체이닝 연산자

옵셔널 체이닝optional chaining 연산자 ?. 는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

var elem = null; 

// elem이 null 또는 undefined이면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. 
var value = elem?.value;
console.log(value); // undefined

null 병합 연산자

null 병합nullish coalescing 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다.

// 좌항의 피연산자가 null 또는 undefined이면 우항의 피연산자를 반환하고, 
// 그렇지 않으면 좌항의 피연산자를 반환한다. 
var foo = null ?? 'default string';
console.log(foo); // "defalut string"

모던 자바스크립트 Deep Dive #06 (제어문)

재밌게 살고 싶은 초보 개발자 — Mon, 10 Jan 2022 16:58:10 +0900

제어문control flow statement 은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문) 할 때 사용한다. 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행한다. 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다. 하지만 코드의 실행 순서가 변경된다는 것은 단순히 위에서 아래로 순차적으로 진행하는 직관적인 코드의 흐름을 혼란스럽게 만든다. 따라서 제어문은 코드의 흐름을 이해하기 어렵게 만들어 가독성을 해치는 단점이 있다. 가독성이 좋지 않은 코드는 오류를 발생시키는 원인이 된다.

블록문

블록문block statement/compound statement은 0개 이상의 문을 중괄호로 묶은 것으로 코드 블록 또는 블록이라고 부르기도 한다. 자바스크립트는 블록문을 하나의 실행 단위로 취급한다. 블록문은 단독으로 사용할 수도 있으나 일반적으로 제어문이나 함수를 정의할 때 사용하는 것이 일반적이다.

문의 끝에는 세미콜론을 붙이는 것이 일반적이지만 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다는 것에 주의!

// 블록문
{
	var foo = 10;
}

// 제어문 
var x = 1;
if(x < 10) {
	x++;
}

// 함수 선언문
function sum(a,b) {
	return a + b;
}

조건문

조건문conditional statment은 주어진 조건식conditional expression의 평가 결과에 따라 코드 블록(블록문)의 실행을 결정한다. 조건식은 불리언 값으로 평가될 수 있는 표현식이다.

if...else문

if...else문은 주어진 조건식(불리언 값으로 평가될 수 있는 표현식)의 평가 결과, 즉 논리적 참 또는 거짓에 따라 실행할 코드 블록을 결정한다. 조건식의 평가 결과가 true일 경우 if문의 코드 블록이 실행되고, false일 경우 else문의 코드 블록이 실행된다. 조건식을 추가하여 조건에 따라 실행될 코드 블록을 늘리고 싶으면 else if문을 사용한다. else if문과 else문은 옵션으로 사용할 수도 있고, 사용하지 않을 수도 있다. if문과 else 문은 2번 이상 사용할 수 없지만 else if문은 여러 번 사용할 수 있다.

if (조건식1) {
	// 조건식1이 참이면 이 코드 블록이 실행된다.
} else if (조건식2) {
	// 조건식2가 참이면 이 코드 블록이 실행된다.
} else {
	// 조건식1과 조건식2가 모두 거짓이면 이 코드 블록이 실행된다.
}

대부분의 if...else문은 삼항 조건 연산자로 바꿔 쓸 수 있다.

// x가 짝수이면 result 변수에 문자열 '짝수'를 할당하고, 홀수이면 문자열 '홀수'를 할당한다. 
var x = 2;
var result;

if (x % 2) { // 2 % 2는 0이다. 이때 0은 false로 암묵적 강제 변환된다. 
	result = '홀수';
} else {
	result = '짝수';
}

console.log(result); // 짝수

// 삼항 조건 연산자
var x = 2;

// 0은 false로 취급된다. 
var result = x % 2 ? '홀수' : '짝수';
console.log(result); // 짝수

switch문

switch문은 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮긴다. case 문은 상황case을 의미하는 표현식을 지정하고 콜론으로 마친다. 그리고 그 뒤에 실행할 문들을 위치시킨다. switch 문의 표현식과 일치하는 case 문이 없다면 실행 순서는 default문으로 이동한다. default문은 선택사항으로 사용할 수도 있고 사용하지 않을 수도 있다.

switch (표현식) {
  case 표현식1:
    switch문의 표현식과 표현식1이 일치하면 실행될 문;
    break;
  case 표현식2:
    switch문의 표현식과 표현식2가 일치하면 실행될 문;
    break;
  default:
    switch문의 표현식과 일치하는 case문이 없을 때 실행될 문;
}

case문에 해당하는 문의 마지막에 break 문을 사용하지 않으면 값이 할당된 후 switch 문을 탈출하지 않고 연이어 재할당되는 폴스루fall through가 일어난다. break문은 코드블록에서 탈출하는 역할을 한다. break문이 없다면 case문의 표현식과 일치하지 않더라도 실행 흐름이 다음 case문으로 연이어 이동한다. default문에는 break를 생략하는 것이 일반적이다. (default문은 switch문의 맨 마지막에 위치하므로 default문의 실행이 종료되면 swtich문을 빠져나가기 때문에 별도로 break문이 필요 없다.)

반복문

반복문loop statement은 조건식의 평가 결과가 참인 경우 코드 블록을 실행한다. 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행한다. 이는 조건식이 거짓일 때까지 반복된다.

✔ 반복문을 대체할 수 있는 다양한 기능

배열을 순회할 때 사용하는 forEach 메서드
객체의 프로퍼티를 열거할 때 사용하는 for ... in문
ES6에서 도입된 이터러블을 순회할 수 있는 for ... of 문

for문

for문은 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행한다.

for (변수 선언문 또는 할당문; 조건식; 증감식) {
	조건식이 참인 경우 반복 실행될 문;
}

while문

while문은 주어진 조건식은 평가 결과가 참이면 코드 블록을 계속해서 반복 실행한다. for문은 반복 횟수가 명확할 때 주로 사용하고 while문은 반복 횟수가 불명확할 때 주로 사용한다.

while문은 조건문의 평가 결과가 거짓이 되면 코드 블록을 실행하지 않고 종료한다. 만약 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 강제 변환하여 논리적 참, 거짓을 구별한다.

var count = 0;

// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다.
while (count < 3) {
	console.log(count); // 0 1 2
    count++;
}

조건식의 평가 결과가 언제나 참이면 무한루프가 된다. 무한루프에서 탈출하기 위해서는 코드 블록 내에 if문으로 탈출 조건을 만들고 break문으로 코드 블록을 탈출한다.

do...while문

do...while문은 코드 블록을 먼저 실행하고 조건식을 평가한다. 따라서 코드 블록은 무조건 한 번 이상 실행된다.

break문

break문은 레이블 문label statement(식별자가 붙은 문), 반복문(for, for...in, for...of, while, do...while) 또는 swirch문의 코드 블록을 탈출한다. (레이블문, 반복문, swtich문의 코드 블록 외에 break문을 사용하면 syntaxError(문법 에러)가 발생한다.)

continue문

continue문은 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다. break문처럼 반복문을 탈출하지는 않는다.

모던 자바스크립트 Deep Dive #05 (연산자)

재밌게 살고 싶은 초보 개발자 — Thu, 6 Jan 2022 18:54:57 +0900

연산자operator는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산operation 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자operand라 한다. 피연산자는 값으로 평가될 수 있는 표현식이어야 하고, 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다.

산술 연산자

산술 연산자arithmetic operator는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능한 경우, NaN를 반환한다.

이상 산술 연산자 ( +, -, *, /, % )

이항binary 산술 연산자는 2개의 피연산자를 산술 연산하여 숫자 값을 만든다. 모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수 효과side effect가 없다. 다시 말해, 어떤 산술 연산을 해도 피연산자의 값이 바뀌는 경우는 없고 언제나 새로운 값을 만들 뿐이다.

단항 산술 연산자 ( ++, --, +, - )

단항unary 산술 연산자는 1개의 피연산자를 산술 연산하여 숫자 값을 만든다. 주의할 점은 이항 산술 연산자와 달리 증가/감소(++/--) 연산자는 피연산자의 값을 변경하는 부수효과가 있다.

var x = 1;

// ++ 연산자는 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
x++; // x = x + 1;
console.log(x); // 2

x--; // x = x - 1;
console.log(x); // 1

피연산자 앞에 위치한 전위 증가/감소 연산자prefix increment/decrement operator는 먼저 피연산자의 값을 증가/감소 시킨 후, 다른 연산을 수행한다.

피연산자 뒤에 위치한 후위 증가/감소 연산자posifix increment/decrement operator는 먼저 다른 연산을 수행한 수, 피연산자의 값을 증가/감소시킨다.

var x = 6, result; 

// 선할당 후증가 (postfix increment operartor)
rerult = x++;
console.log(result, x) // 5 6

// 선증가 후할당(prefix increment operator)
result = ++x;
console.log(result,x); // 7 7

숫자 타입이 아닌 피연산자에 +단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다. 이때 피연산자를 변경하는 것은 아니고 숫자 타입으로 변환한 값을 생성해서 반환한다. 따라서 부수 효과는 없다.

var x = '1';

// 문자열을 숫자로 타입 변환한다. 
console.log(+x); // 1

// 불리언 타입을 숫자로 타입 변환한다. 
x = true; // 1
console.log(x); // true

x = flase;
console.log(x) // false

// 문자열을 숫자로 타입 변환할 수 없으므로 NaN를 밴환한다. 
x= 'Hello'
console.log(+x) // NaN

문자열 연결 연산자

+ 연산자는 피연산자 중 하나 이상이 문자열일 경우 문자열 연결 연산자로 동작한다.

주목할 것은 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다는 것이다. 이를 암묵적 타입 변환implicite coercion 또는 타입 강제 변환typecoercion)

할당 연산자 ( =, +=, -=, *=, /=, %= )

할당 연산자assignment operator는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수가 할당한다. 할당 연산자는 좌항의 변수에 값을 할당하므로 변수 값이 변하는 부수 효과가 있다. 할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가된다.

var r;

// 할당문은 표현식인 문이다.
console.log( x= 10 ); // 10

비교 연산자

비교 연산자comparison operator는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다. if문이나 for문과 같은 제어문의 조건식으로 주로 사용한다.

동등/일치 연산자 ( ==, ===, !=, !== )

동등 비교 (==) loose equality 연산자와 일치 비교strict equality 연산자는 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다. 동등 비교(==) 연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적으로 타입 변환을 통해 일치시킨 후 같은 값인지 비교한다.

일치 비교(===) 연산자는 좌항과 우항의 피연산자가 타입고 같고 값도 같은 경우에 한하여 true를 반환한다. 암묵적 타입 변환을 하지 않고 값을 비교하기 때문에 비교가 쉽다.

주의할 것은 NaN이다. NaN은 자신과 일치하지 않는 유일한 값이다. 따라서 숫자가 NaN인지 조사하려면 빌트인 함수 isNaN을 사용한다. 숫자 0도 주의하자. 자바스크립트에는 양의 0과 음의 0이 있는데 이들을 비교하면 ture를 반환한다.

대소 관계 비교 연산자 ( >, <, >=, <= )

대소 관게 비교 연산자는 피연산자의 크리르 비교하여 불리언 값을 반환한다.

삼항 조건 연산자

삼항 조건 연산자ternary operator는 조건식의 평가 결과에 따라 반환할 값을 결정한다.

조건식 ? 조건식이 true 일 때 반환할 값 : 조건식이 false일 때 반환할 값

첫 번째 피연산자가 true로 평가되면 두 번째 피연산자를 반환하고, 첫 번째 피연산자가 flase로 평가되면 세 번째 피연산자를 반환한다. 즉 삼항 조건 연산자는 두 번째 또는 세 번째 피연산자로 평가되는 표현식이다. 물음표 앞의 첫 번째 피연산자는 조건식, 즉 불리언 타입의 값으로 평가될 표현식이다. 만약 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 암묵적 타입 변환된다. 이때 조건식이 참이면 콜론(:) 앞의 두 번째 피연산자가 평가되어 반환되고, 거짓이면 콜론(:) 뒤의 세 번째 피연산자가 평가되어 반환된다.

var x = 2;

// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다. 
var result = x % 2 ? '홀수' : '짝수';

console.log(result); // 짝수

삼항 조건 연산자의 첫 번째 피연산자는 조건식이므로 if...else 문을 사용해도 삼항 조건 연산자 표현식과 유사하게 처리할 수 있다. 하지만 중요한 차이가 있는데, 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이지만 if...else문은 표현식이 아닌 문이다. 따라서 값처럼 사용할 수 없다.

var x = 2, result;

// 2 % 2는 0dlrh 0은 false로 암묵적 타입 변환된다.
if ( x % 2 ) result = '홀수';
else         result = '짝수';

console.log(result); // 짝수

논리 연산자 ( ||, &&, ! )

논리 연산자logical operator는 우항과 좌항의 피연산자(부정 논리 연산자의 경우 우항의 피연산자)를 논리 연산한다.

|| : or > 하나라도 참이면 true를 반환
&& : and > 모두 참이어야 true 반환
! : not

쉼표 연산자

쉼표( , ) 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.

var x, y, z;
x = 1, y = 2, z = 3; // 3

그룹 연산자

소괄호 ('( )')로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 표현한다. 따라서 그룹 연산자를 사용하여 연산자의 우선순위를 조절할 수 있고, 그룹 연산자의 연산자 우선순위가 가장 높다.

type of 연산자

typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환한다.

"string" ,"number" ,"boolean", "undefined", "symbol", "object", "function" 7가지 문자열을 반환하며 "null"은 반환하지 않는다.

주의할 점은 null 값을 연산해보면 "object"를 반환한다는 점이다. 이것은 자바스크립트의 첫번째 버그지만 기존 코드에 영향을 줄 수 있기 때문에 아직까지 수정되지 못하고 있다. 따라서 값이 null 값인지 확인할 때는 일치 연산자(===)를 사용하자!

지수 연산자

EX7에서 도입된 지수 연산자는 좌항의 피연산자를 밑base으로 우항의 피연산자를 지수exponent로 거듭제곱하여 숫자 값을 반환한다.

2 ** 2; // 4
2 ** -2 // 0.25

연산자의 부수효과

대부분의 연산자는 다른 코드에 영향을 주지 않는다. 하지만 일부 연산자는 다른 코드에 영향을 주는 부수 효과가 있다.

할당 연산자 (=) : 변수 값이 변하여 변수를 사용하는 다른 코드에 영향을 준다.
증가/감소 연산자(++/--) : 피연산자의 값이 재할당되어 변경된다. 해당 변수를 사용하는 다른 코드에 영향을 준다.
delete 연산자 : 객체의 프로퍼티를 삭제하는 부수효과가 있다. 해당 객체를 사용하는 다른 코드에 영향을 준다.

연산자 우선 순위

우선순위	연산자
1	( )
2	new (매개변수 존재).. , [ ] (프로퍼티 접근), ( ) (함수호출), ?. (옵셔널 체이닝 연산자)
3	new (매개변수 미존재)
4	x++, x--
5	!x, +x, -x, ++x, --x, typeof, delete
6	** (이항 연산자 중에서 우선순위가 가장 높다)
7	*, /, %
8	+, -
9	<, <=, >, >=, in, instanceof
10	==, !==, ===, !==
11	?? (null 병합 연산자)
12	&&
13	\|\|
14	? ... : ...
15	할당 연산자 (=, +=, -=, …)
16	,

연산자 결합 순서

연산자의 어느 쪽 (좌항 또는 우항)부터 평가를 수행할 것인지를 나타내는 순서를 말한다.

결합 순서	연산자
좌항 → 우항	+, -, /, %, <, <=, >, >=, &&, \|\|, ., [ ], ( ), ??, ?, in, instanceof
우항 → 좌항	++, --, 할당 연산자 (=, +=, -=, …), !x, +x, -x, --x, typeof, delete, ? ... : ...

☕ 문벅스 카페 메뉴 앱 만들기 #02 (메뉴판 여러개 만들기)

재밌게 살고 싶은 초보 개발자 — Mon, 3 Jan 2022 20:53:04 +0900

1. 요구사항 분석

2. 로컬스토리지 개념

localStorage : 브라우저에 저장할 수 있는 저장소 (url 별로 저장 / key:value 형태로 저장)
setItem() : 저장
getItem() : 가져오기
JSON.stringify() : 로컬스토리지는 문자열로만 저장되기 때문에 객체 형태를 문자열로 저장
상태(=데이터)관리 : 변할 수 있는 데이터 > 변하기 때문에 관리를 해줘야 하는구나!

3. 메뉴상태 저장하여 관리 (추가, 수정, 삭제, 불러오기)

map() : 배열을 순회(리턴한 값으로 새로운 배열로 만듦)
join() : 문자열을 하나로 합쳐줌
상태 초기화를 해주는 이유 : 어떤 데이터를 넣을지 정의하고 관리하는지 명확히 알 수 있음
data- : html마크업에서 어떤 데이터를 저장하고 싶을 때 사용하는 속성 (dataset.xxx 으로 접근)
데이터 상태를 변경할 때는 최소한의 로직으로 만들어야 함
(ex. localStorage에 접근할 때 바로 접근하기 보다 변수에 담은 객체로 접근)
splice() : 배열의 특정 원소를 삭제
JSON.parse() : JSON 객체로 변환
Q. init 할 때 인스턴스로 띄워진다?
A. 함수가 하나 있다고 할 때, 그 함수는 하나밖에 존재하지 않는다. (하나만 선언했기에) 인스턴트 뉴로 만든다는 것은 함수를 모델로 새로운 객체들이 여러 개 만들어질 수 있는 것(=각각의 상태를 가질 수 있는 것)
(ex. 카카오 채팅방 여러개 띄우듯)

4. 카테고리별 메뉴 추가, 수정, 삭제

계속 재사용하는 코드들은 더 많이 쓸 수 있도록 고민하여 클래스명, 아이디명, 변수명 등 적절히 수정

5. 품절 상태 관리

여러 개의 if문 사용시 불필요한 연산이 수행되지 않도록 한개의 if문 끝날 때마다 return 해주는 습관!

간단하게 토글버튼처럼 true / undefined 오가기

this.menu[this.currentCategory][menuId].soldOut = 
   !this.menu[this.currentCategory][menuId].soldOut;

6. 리팩터링

이벤트리스너를 한 함수에 모아서 사용하면 간결!
한 파일에 객체는 하나만 있는게 좋음 (=>파일분리)

7. 회고

배운 점 & 느낀 점

리팩터링의 중요성을 많이 깨닫게 된 것 같다. 어딜가나 리팩터링이 중요하다고 하는데 나는 혼자 공부하는 데다 배운거 따라가기도 바쁘다 보니 그동안 제대로 된 리팩터링이란 걸 해본 적이 없었다. (사실 하는 법도 몰랐음) 그런데 리팩토링 파트 쭉 듣고 보니 어느새 엄청 간결해진 코드 (그리고 별 거 아닌 팁일 수 있는데 코드를 접어놓으니까 한 눈에 보기에 훨씬 좋더라!) 수업하는 내용을 엿듣는(?) 형식의 강의인데 이게 참 좋은 것 같다. 배우시는 분이 실시간으로 내가 궁금한 부분 물어봐주면 속이 다 시원하다가.. 너무 말을 똑부러지게 잘하시고 이해도 잘하셔서 괜히 나혼자 주눅 들었다가.. 나도 이렇게 누가 속시원히 가르쳐주면 좋겠다 싶은 부러운 마음도 들고ㅎㅎ; 이제 남은 강의는 서버랑 통신하는 부분인데 처음 해보는 거라 아마 엄청 돌려봐야될 것 같다.

두번째 보면서 느낀 점은 내가 객체나 배열에 관한 이해도가 아직 많이 떨어진다는 것ㅠㅠ 탭을 나누어서 데이터를 관리해야되다보니 엄청 헷갈렸다.. this..this... 하지만 편하게 상태관리하려면 꼭 알아야하는 부분이라는 것도 몸소 느꼈다. 몇번은 더 봐야 이해될듯^^;

✔ 아직 잘 모르는 부분 : 상태관리, this, 생성자

this를 이용해서 상태관리를 하는데 처음에 여기서 계속 오류가 났다!

이유를 찾아보니 맨 마지막에 생성자 함수를 생성해주지 않아서였음

강사님이 달아주신 this 참고링크

모던 자바스크립트 Deep Dive #04 (데이터 타입)

재밌게 살고 싶은 초보 개발자 — Mon, 3 Jan 2022 16:08:31 +0900

데이터 타입data type (줄여서 '타입')은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다.

구분	데이터 타입	설명
원시 타입	숫자number 타입	숫자. 정수와 실수 구분 없이 하나의 숫자 타입만 존재
	문자열string 타입	문자열
	불리언boolean 타입	논리적 참(true)와 거짓(false)
	undefined 타입	var 키워드로 선언된 변수에 암묵적으로 할당되는 값
	null 타입	값이 없다는 것을 의도적으로 명시할 때 사용하는 값
	심벌symbol 타입	ES6에서 추가된 7번째 타입
객체 타입		객체, 함수, 배열 등

예를 들어 숫자nunmer 타입의 값 1과 문자열string타입의 값 '1'은 비슷해 보이지만 전혀 다른 값이다. 숫자 타입은 주로 산술 연산을 위해 생성하고 문자열 타입은 주로 텍스트를 화면에 출력하기 위해 생성한다. 또한, 확보해야 할 메모리 공간의 크기도 다르고 메모리에 저장되는 2진수도 다르며 읽어 들여 해석하는 방식도 다르다.

숫자 타입

자바스크립트는 하나의 숫자 타입만 존재한다. 모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입integer type이 별도로 존재하지 않는다. 모든 수를 실수로 처리하기 때문에 정수로 표시된다 해도 사실은 실수라는 것을 의미한다. 따라서 정수로 표시되는 수끼리 나누더라도 실수가 나올 수 있다.

// 숫자 타입은 모두 실수로 처리된다
console.log(1 === 1.0); // true
console.log(4 / 2); // 2
console.log(3 / 2); // 1.5

+ 세가지 특별한 값 표현

infinity : 양의 무한대
-infinity : 음의 무한대
NaN : 산술 연산 불가 (not-a-number) / 자바스크립트는 대소문자를 구분case-sensitive하므로 주의!

// 숫자 타입의 세 가지 특별한 값
console.log(10 / 0); // Infinity
console.log(10 / -0); // -Infinity
console.log(1 * 'String'); //NaN

문자열 타입

문자열string 타입은 텍스트 데이터를 나타내는 데 사용한다. 문자열은 작은 따옴표(' '), 큰따옴표(" ") 또는 백틱(` `)으로 텍스트를 감싼다. 가장 일반적인 표기법은 작은따옴표를 사용하는 것이다. 자바스크립트의 문자열은 원시 타입이며, 변경 불가능한 값immutable value이다. 이것은 문자열이 생성되면 그 문자열을 변경할 수 없다는 것을 의미한다.

string = '작은따옴표로 감싼 문자열 내의 "큰따옴표"는 문자열로 인식된다.';
string = "큰따옴표로 감싼 문자열 내의 '작은따옴표'는 문자열로 인식된다.";

다른 타입과 달리 문자열을 따옴표로 감싸는 이유는? 키워드나 식별자 같은 토큰과 구분하기 위해서. 만약 문자열을 따옴표로 감싸지 않으면 자바스크립트 엔진은 키워드나 식별자 같은 토큰으로 인식한다. 그리고 만약 따옴표로 감싸지 않는다면 스페이스와 같은 공백 문자도 포함시킬 수 없다.

// 따옴표로 감싸지 않은 hello를 식별자로 인식한다.
var string = hello; // ReferenceError: hello is not defined

템플릿 리터럴

ES6부터 템플릿 리터럴template literal이라고 하는 새로운 문자열 표기법이 도입되었다. 템플릿 리터럴은 멀티라인 문자열multi-line string, 표현식 삽입expression interpolation, 태그드 템플릿tagged template 등 편리한 문자열 처리 기능을 제공한다. 템플릿 리터럴은 백틱(` `)을 사용해 표현한다.

불리언 타입

불리언 타입의 값은 논리적 참, 거짓을 나타내는 true, false 뿐이다.

undefined 타입

undefined 타입의 값은 undefined가 유일하다. var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화된다. 다시 말해, 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때까지 빈 상태(대부분 비어 있지 않고 쓰레기 값garbage value이 들어 있다)로 내버려 두지 않고 자바스크립트 엔진이 undefined로 초기화한다. 따라서 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined가 반환된다. undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값으로 변수를 참조했을 때 undefined가 반환된다면 참조한 변수가 선언 이후 값이 할당된 적이 없는 (=초기화되지 않은) 변수라는 것을 알 수 있다.

✔ 선언declaration과 정의definition

undefined를 직역하면 "정의되지 않은"이다. 자바스크립트의 undefined에서 말하는 정의란 변수에 값을 할당하여 변수의 실체를 명확히 하는 것을 말한다. 다른 프로그래밍 언어에서는 선언과 정의를 엄격하게 구분해서 사용하지만 자바스크립트의 경우 변수를 선언하면 암묵적으로 정의가 이뤄지기 때문에 선언과 정의의 구분이 모호하다. ECMAScript 사양에서 변수는 '선언한다'라고 표현하고, 함수는 '정의한다'라고 표현한다.

null 타입

null 타입의 값은 null이 유일하다. 프로그래밍 언어에서 null은 변수에 값이 없다는 것을 의도적으로 명시(의도적 부재intentional absence)할 때 사용한다. 변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더 이상 참조하지 않겠다는 의미이다. 이는 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것을 의미하며, 자바스크립트 엔진은 누구도 참조하지 않는 메모리 공간에 대해 가비지 콜렉션을 수행할 것이다. 또한, 함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 한다. (ex. HTML요소를 검색해 조건에 부합하는 HTML 요소를 검색할 수 없는 경우 에러 대신 null을 반환한다.)

심벌 타입

심벌symbol은 ES6에서 추가된 타입으로 변경 불가능한 원시 타입의 값이다. 심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다. 심벌 이외의 원시 값은 리터럴을 통해 생성하지만 심벌은 symbol 함수를 호출해 생성한다. 이때 생성된 심벌값은 외부에 노출되지 않으며, 다른 값과 절대 중복되지 않는 유일무이한 값이다.

객체 타입

자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든 것이 객체이다.

데이터 타입의 필요성

값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해
값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해

동적 타이핑

동적 타입 언어와 정적 타입 언어

C나 자바 같은 정적타입static/strong type 언어는 변수를 선언할 때 변수에 할당할 수 있는 값의 종류, 즉 데이터 타입을 사전에 선언해야 한다. 이를 명시적 타입 선언explicit type declaration 이라 한다. 정적 타입 언어는 변수의 타입을 변경할 수 없으며 변수에 선언한 타입에 맞는 값만 할당할 수 있다. 정적 타입 언어는 컴파일 시점에 타입 체크(선언한 데이터 타입에 맞는 값을 할당했는지 검사하는 처리)를 수행한다. 만약 타입 체크를 통과하지 못했다면 에러를 발생시키고 프로그램의 실행 자체를 막는다. 이를 통해 타입의 일관성을 강제함으로써 더욱 안정적인 코드의 구현을 통해 런타임에 발생하는 에러를 줄인다.

자바스크립트는 정적 타입 언어와 다르게 변수를 선언할 때 타입을 선언하지 않는다. 자바스크립트의 변수는 어떠한 데이터 타입의 값이라도 자유롭게 할당할 수 있다. 자바스크립트는 값을 할당하는 시점에 변수의 타입이 동적으로 결정되고 변수의 타입을 언제든 자유롭게 변경할 수 있다. 다시 말해, 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입 추론type inference)된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. 이러한 특징을 동적 타이핑dynamic typing이라 하며, 자바스크립트를 정적 타입 언어와 구별하기 위해 동적 타입dynamic/weak type 언어라 한다.

동적 타입 언어와 변수

동적 타입 언어는 변수에 어떤 데이터 타입의 값이라도 자유롭게 할당할 수 있다. 이는 굉장히 편리하지만 단점도 있다. 변수 값이 언제든 변경될 수 있기 때문에 복잡한 프로그램에서는 변화하는 변수 값을 추적하기 어려울 수 있다. 그 뿐만 아니라 값의 변경에 의해 타입도 언제든지 변경될 수 있기 때문에 변수의 값을 확인하기 전에는 타입을 확신할 수 없다. 더욱이 자바스크립트는 개발자의 의도와 상관없이 엔진에 의해 암묵적으로 타입이 자동으로 변환되기도 한다. 즉, 숫자 타입의 변수일 것이라고 예측했지만 사실은 문자열 타입의 변수일 수도 있다는 말이다.

안정적인 프로그램을 만들기 위한 변수 사용 시 주의사항

변수는 꼭 필요한 경우에 한해 제한적으로 사용한다.
변수의 유효 범위(스코프)는 최대한 좁게 만들어 변수의 부작용을 억제해야 한다.
전역 변수는 최대한 사용하지 않도록 한다.
변수보다는 상수를 사용해 값의 변경을 억제한다.
변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍 한다.

☕ 문벅스 카페 메뉴 앱 만들기 #01 (에스프레소 메뉴판 만들기)

재밌게 살고 싶은 초보 개발자 — Thu, 30 Dec 2021 18:52:27 +0900

☕ 블랙커피 Vanilla JS Lv1. 문벅스 카페 메뉴 앱 만들기

메이커준님 유데미 강의 시작!

강의도 여러개 끊어놓고 책도 읽고 있지만

그저 따라치고 뭘 어떻게 만들어야 할지 갈피를 잡지 못하던 나에게

딱 필요한 강의인 것 같아서 유데미 할인할 때 저렴하게 질렀다!!

~~(이렇게 산 것만 수두룩^^*)~~

강의 목적

바닐라 자바스크립트를 아는 걸 넘어 자바스크립트를 잘 사용하는 방법(사고하는 방법)
바닐라 자바스크립트로 상태관리가 가능한 애플리케이션 만들기

1. 요구사항 분석

요구사항의 목적을 명확히 체크 (기능 구현을 위한 필요한 지식과 개념이 무엇인지 파악)
기능을 세부적으로 쪼개서 (메뉴추가/수정/삭제) 순서대로 적어보기

※ 요구사항 예시 ※

에스프레소 메뉴에 새로운 메뉴를 확인 버튼 또는 엔터키 입력으로 추가한다.

메뉴가 추가되고 나면, input은 빈 값으로 초기화한다.

사용자 입력값이 빈 값이라면 추가되지 않는다.

꿀팁 : selector를 $ 하나로 가져올 수 있는 매직! 제이쿼리에서도 이런 식으로 사용되는가 보다!

const $ = (selector) => document.querySelector(selector);

2. 메뉴 추가하기

반복적으로 쓰이는 코드는 어떻게 줄일 수 있을지 고민해보기
insertAdjacentHTML("beforebegin", 추가하려는node) : 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가
- beforebegin : 태그 시작 바로 앞
- afterbegin : 태그 시작 바로 뒤
- beforeend : 태그 끝 바로 앞
- afterend : 태그 끝 바로 뒤

변수명 지을 때 html에서 사용한 id 값이나 class 값을 참고해서 지으면 다른 사람이 내 코드를 볼 때도 알기 쉬움
length는 객체, 배열의 길이뿐 아니라 html요소의 개수도 세어줌
❗ 내가 계속 헷갈리는 부분 : input값을 받고난 뒤 input을 비울 때 자꾸만 input값을 할당한 변수를 비우려고 해서 오류를 낸다 주의주의!!

3. 메뉴 수정하기

이벤트 위임 : 부모 요소에 이벤트를 지정하여 자식 요소를 컨트롤할 수 있음
장점 : 동적으로 추가되는 요소에도 사용, 코드의 간결
closest() : 자신부터 부모 요소 단위로 출발하여 각 요소가 지정한 선택자에 만족할 때까지 탐색한다(문서 루트까지 이동). 이 중 가장 가깝게 조건에 만족한 부모 요소가 반환되며, 조건에 만족한 요소가 없으면 null 값을 반환

4. 메뉴 삭제하기

confirm 은 보통 if문 안에 써서 true일 때 삭제, 아니면 취소

5. 리팩토링

나중에 보더라도 알아보기 쉽게 코드 정리 (일일이 읽어야되지 않도록 함수로 만들 수 있으면 만들자)
함수끼리 모아서 정리
일관된 이름으로 작성
수정한 뒤 바로 잘 동작하는지 확인
구현하는 부분 외의 기능은 접어두면 한눈에 큰 그림을 보기 쉬움

배운 점 & 느낀 점

요구사항을 보고 바로 코딩에 들어가지 말고 단계를 세부적으로 쪼개서 (ex. 메뉴이름>엔터키로 입력받기) 먼저 할 일을 적어보면 훨씬 코딩하기가 수월해진다! 그동안 코딩강의 보면서 제일 힘들었던 점 중 하나가 강의 볼 때는 다 알 것 같은데, 막상 혼자 해보려고 하면 손도 못 대는 상황의 반복이라 좌절감이 심했는데.. 이런 식으로 잘게 쪼개 보니 어디서부터 시작해야 할지에 대한 막연함이 훨씬 줄었다. (물론 쪼개는 것도 초보에겐 험난한 과정이고, 쪼갠다고 해도 다 뚝딱 만들어지는 것도 아니지만.. 흑흑..) step1에서 만든 결과물이 어떻게 보면 굉장히 단순하지만 현실적으로 많이 쓰이는 기능들이라 복습하고 제대로 익히면 다른 것도 만들 수 있을 것 같은 자신감이 뿜뿜!

✔ 아직 잘 모르는 부분 : 이벤트 위임(closeset 메서드 활용), e.target, insertAdjacentHTML

모던 자바스크립트 Deep Dive #03 (표현식과 문)

재밌게 살고 싶은 초보 개발자 — Thu, 23 Dec 2021 14:47:48 +0900

값

값value : 식(표현식expression)이 평가evaluate되어 생성된 결과.

평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다.

모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트bit의 나열로 저장된다.

값은 다양한 방법으로 생성할 수 있다. 식으로 생성할 수도 있지만 가장 기본적인 방법은 리터럴을 사용하는 것이다.

리터럴

리터럴literal : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법notation

표현식

표현식expression : 값으로 평가될 수 있는 문statement. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조

// 리터럴 표현식
10
'Hello'

// 식별자 표현식(선언이 이미 존재한다고 가정)
sum
person.name
arr[1]

// 연산자 표현식
10 + 20
sum = 10
sum !== 10

// 함수/메서드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()

문

문statement : 프로그램을 구성하는 기본 단위이자 최소 실행 단위.

문의 집함으로 이뤄진 것이 프로그램이며, 문을 작성하고 순서에 맞게 나열하는 것이 프로그래밍

문은 여러 토큰으로 구성되는데,

토큰token: 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소

(ex. 키워드, 식별자, 연산자, 리터럴, 세미콜론(;), 마침표(.) 등)

// 변수 선언문
var x;

// 할당문
x = 5;

// 함수 선언문 
function foo () {}

// 조건문
if (x > 1) { console.log(x); }

// 반복문
for (var i = 0; i < 2; i++) { console.log(i); }

세미콜론과 세미콜론 자동 삽입 기능

세미콜론은 문의 종료를 나타낸다. 즉, 자바스크립트 엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다. 따라서 문을 끝낼 때는 세미콜론을 붙여야 한다. 단, 0개 이상의 문을 중괄호로 묶은 코드 블록 ( {...} ) 뒤에는 세미콜론을 붙이지 않는다. (ex. if문, for문, 함수 등의 코드 블록 뒤)

문의 끝에 붙이는 세미콜론은 옵션으로 생략이 가능하다. 이는 자바스크립트 엔진이 소스코드를 해석할 때 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능 (ASI automatice semicolon inseertion)이 암묵적으로 수행되기 때문.

표현식인 문과 표현식이 아닌 문

표현식과 문은 비슷해서 구별하기 어렵다고 느낄 수 있다. 하지만 표현식과 문을 구별하는 방법은 의외로 간단하다. 변수에 할당해 보는 것이다. 표현식인 문은 값으로 평가되므로 변수에 할당할 수 있지만 표현식이 아닌 문은 값으로 평가할 수 없으므로 변수에 할당하면 에러가 난다.

// 표현식이 아닌 문은 값처럼 사용할 수 없다. 
var foo = var x; // SyntaxError : Unexpected token var

// 변수 선언문은 표현식이 아닌 문이다. 
var x; 

// 할당문은 그 자체가 표현식이지만 완전한 문이기도 하다. 즉, 할당문은 표현식인 문이다. 
x = 100;

// 표현식인 문은 값처럼 사용할 수 있다. 
var foo = x = 100;
console.log(foo); // 100

완료값

크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 언제나 undefined를 출력한다. 이를 완료값이라 한다. 완료 값은 표현식의 평가 결과가 아니다. 따라서 다른 값과 같이 변수에 할당할 수 없고 참조할 수도 없다.
크롬 개발자 도구에서 표현식인 문을 실행하면 언제나 평가된 값을 반환한다.

모던 자바스크립트 Deep Dive #02 (변수)

재밌게 살고 싶은 초보 개발자 — Thu, 23 Dec 2021 14:46:46 +0900

변수란 무엇인가? 왜 필요한가?

10 + 20

자바스크립트 엔진이 위 코드를 계산(평가evaluation)하려면 먼저 10, 20, +라는 기호(리터럴literal과 연산자operator)의 의미를 알고 있어야 하며, 10+20이라는 식(표현식expression)의 의미도 해석(파싱parsing)할 수 있어야 한다. 10+20이라는 식의 의미를 해석하면 + 연산을 수행하기 위해 먼저 + 연산자의 좌변과 우변의 숫자 값, 즉 피연산자operand를 기억한다. 사람이 뇌를 통해 계산과 기억을 하는 것처럼 컴퓨터는 CPU로 연산하고, 메모리를 사용해 데이터를 기억한다.

메모리memory는 데이터를 저장할 수 있는 메모리 셀memory cell의 집합체다. 메모리 셀 하나의 크기는 1바이트(8비트)이며, 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장write하거나 읽어read 들인다. 각 메모리 셀은 고유의 메모리 주소를memory address를 갖는다. 이 메모리 주소는 메모리 공간의 위치를 나타내며 0부터 시작해서 메모리의 크기만큼 정수로 표현된다.

컴퓨터는 모든 데이터를 2진수로 처리한다. 따라서 메모리에 저장되는 데이터는 데이터의 종류(숫자, 텍스트, 이미지, 동영상 등)와 상관없이 모두 2진수로 저장된다.

10 + 20을 성공적으로 연산을 끝내고 메모리에도 저장되었지만 재사용이 어렵다는 문제가 있다. 연산 결과 30이 저장된 메모리 공간에 직접 접근하는 것 외에는 방법이 없다. 하지만 이 방법도 치명적 오류를 발생시킬 가능성이 매우 높다. 그래서 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 매커니즘을 제공한다.

변수variable : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름. 값을 저장하고 참조하는 메커니즘으로, 값이 저장된 메모리 공간에 상징적인 이름을 붙인 것.
변수 이름(변수명) : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
변수 값 : 변수에 저장된 값
할당assignment(대입, 저장) : 변수에 값을 저장하는 것

변수에 여러 개의 값을 저장하는 방법

여러 개의 값을 저장하려면 여러 개의 변수를 사용해야 한다
배열이나 객체 같은 자료구조를 사용하면 관련이 있는 여러 개의 값을 그룹화해서 하나의 값처럼 사용할 수 있다

식별자

변수 이름을 식별자identifier라고도 한다.

식별자 : 어떤 값을 구별해서 식별할 수 있는 고유한 이름. 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보도 메모리에 저장되어야 한다. 값이 아니라 메모리 주소를 기억.

식별자라는 용어는 변수 이름에만 국한해서 사용하지 않는다.

변수 이름 : 메모리 상에 존재하는 변수 값 식별
함수 이름 : 메모리 상에 존재하는 함수(자바스크립트에서는 함수는 값)를 식별
즉, 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 부른다.

변수 선언

변수 선언variable declaration : 변수를 생성하는 것. 값을 저장하기 위한 메모리 공간을 확보allocate하고 변수 이름과 확보된 메모리 공간의 주소를 연결name binding해서 값을 저장할 수 있게 준비.

변수를 사용하려면 반드시 선언이 필요하다. 변수 뿐만 아니라 모든 식별자가 만약 선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러)가 발생한다. ReferenceError는 식별자를 통해 값을 참조하려 했지만 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러다.

var : 대표적 단점은 함수 레벨 스코프function-level scope를 지원한다는 것. 이때문에 의도치 않게 전역 변수가 선언되어 심각한 부작용이 발생하기도 한다. 이를 보완하기 위해 let과 const가 도입되었다. (var가 폐기deprecated 된 것은 아님. )
let
const

var score; // 변수 선언(변수 선언문)

var 키워드는 뒤에 오는 변수 이름으로 새로운 변수를 선언할 것을 지시하는 키워드다.

(키워드keyword : 자바스크립트 코드를 해석하고 실행하는 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어.)

변수를 선언한 이후, 아직 변수에 값을 할당하지 않았으므로 변수 선언에 의해 확보된 메모리 공간은 비어있을 것으로 생각할 수 있으나 확보된 메모리 공간에는 undefined 라는 값이 암묵적으로 할당되어 초기화된다. 이것은 자바스크립트의 독특한 특정이다. (undefined : 자바스크립트에서 제공하는 원시타입의 값crimitive value)

자바스크립트 엔진은 변수 선언을 다음과 같이 2단계에 걸쳐 수행한다.

선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림
초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화

일반적으로 초기화initialization란 변수가 선언된 이후 최초로 값을 할당하는 것을 말한다. var 키워드로 선언한 변수는 undefined로 암묵적인 초기화가 자동 수행된다. 만약 초기화를 거치지 않으면 확보된 메모리 공간에는 이전에 다른 애플리케이션이 사용했던 값이 남아 있을 수 있다. 이러한 값을 쓰레기 값garbage value이라 한다. 따라서 메모리 공간을 확보한 다음, 값을 할당하지 않은 상태에서 곧바로 변수 값을 참조하면 쓰레기 값이 나올 수 있다. 자바스크립트의 var키워드는 암묵적으로 초기화를 수행하므로 이러한 위험으로부터 안전하다.

※ 변수 이름은 어디에 등록되는가? 변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록된다. 실행 컨텍스트execution context는 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역. 변수 이름과 변수 값은 실행 컨텍스트 내에 키key/값value 형식인 객체로 등록되어 관리된다.

변수 선언의 실행 시점과 변수 호이스팅

console.log(score); // undefiend
var score; // 변수 선언문

변수 선언문보다 변수를 참조하는 코드가 더 앞에 있다. 따라서 참조 에러가 발생할 것처럼 보이지만 실제로는 undefined가 출력된다. 그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임runtime이 아니라 그 이전 단계에서 먼저 실행되기 때문이다. 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의 평가 과정을 거치면서 소스코드를 실행하지 위한 준비를 한다. 이때 소스코드 실행을 위한 준비 단계인 소스코드의 평가과정에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문 등)을 소스코드에서 찾아내 먼저 실행한다. 그리고 소스코드의 평가 과정이 끝나면 비로소 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다. 즉, 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다.

호이스팅variable hoisting : 모든 식별자(var, let, const, function, function*, class)가 코드의 선두로 끌어올려진 것처럼 동작하는 것

값의 할당

변수에 값을 할당assignment(대입, 저장)할 때는 할당 연산자 = 를 사용한다. 할당 연산자는 우변의 값을 좌변의 변수에 할당한다. 변수 선언과 값의 할당을 하나의 문statement로 단축 표현할 수도 있다.

var score; // 변수선언
score = 80; // 값의 할당

var score = 80 // 변수 선언과 값의 할당

변수 선언과 값의 할당을 나누어 표현한 코드와 단축 표현한 코드는 정확히 동일하게 동작한다. 이때 주의할 점은 변수 선언과 값의 할당의 실행 시점이 다르다는 것이다. 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다. (둘 다 변수의 선언과 값을 할당을 2개의 문으로 나누어 각각 실행한다. 따라서 변수에 undefined가 할당되어 초기화되는 것은 변함없음)

값의 재할당

재할당 : 이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것

변수에 값을 재할당하면 이전 값이 저장되어 있던 메모리 공간을 지우고 그 메모리 공간에 재할당 값을 새롭게 저장하는 것이 아니라 새로운 메모리 공간을 확보하고 그 메모리 공간에 값을 저장한다.

var score = 80; // 변수 선언과 값의 할당
score = 90; // 값의 재할당

재할당은 변수에 저장된 값을 다른 값으로 변경한다. 그래서 변수라고 하는 것이다. 만약 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수constant라 한다. 상수는 한번 정해지면 변하지 않는 값이다. 다시 말해 상수는 단 한 번만 할당할 수 있는 변수다.

cosnt 키워드 : ES6에서 도입된 const 키워드는 재할당이 금지된다. 단 한 번만 할당할 수 있는 변수.

가비지 콜렉터garbage collector : 애플리케이션이 할당allocate한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제release하는 기능. 더이상 사용되지 않는 메모리란 간단히 말하자면 어떤 식별자도 참조하지 않는 메모리 공간. 자바스크립트는 가비지 콜렉터를 내장하고 있는 매니지드 언어로서 메모리 누수memory leak를 방지한다. 단, 메모리에서 언제 해제될지는 예측할 수 없다.

식별자 네이밍 규칙

특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달로기호($)로 시작해야 한다. 숫자로 시작하는 것은 안됨.
예약어는 식별자로 사용할 수 없다.
대소문자를 구별한다. (ex. first 와 FIRST는 각각 별개의 이름)
변수 이름은 변수의 존재 목적을 쉽게 이해할 수 있도록 의미를 명확하게 표현해야 한다.
별도의 주석이 필요하다면 변수의 존재 목적을 명확히 드러내지 못하는 것이다.

네이밍 컨벤션naming convention

// 카멜 케이스 (camelCase)
var firstName;

// 스네이크 케이스 (snake_case)
var first_name;

// 파스칼 케이스 (PascalCase)
var FirstName;

// 헝가리언 케이스 (typeHungarianCase)
var strFistName; // type + identifier 
var $elem = document.getElementById('myId') // DOM노드
var observable$ = fromEvent(document, 'click'); RxJS 옵저버블

모던 자바스크립트 Deep Dive #01 (프로그래밍, 자바스크립트란?)

재밌게 살고 싶은 초보 개발자 — Thu, 23 Dec 2021 14:45:30 +0900

새로 시작한 책은 지금까지 읽었던 책 중에 가장 두껍다!!

그만큼 공부가 많이 되겠지?

자라나라 지식지식!! :)

프로그래밍이란?

컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션.

0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이며, 그 결과물이 바로 코드다.

우리는 문제 해결 방안을 고려할 때 컴퓨터의 입장에서 문제를 바라봐야 한다. 이때 필요한 것이 Computational thingking(컴퓨팅 사고)이다. 컴퓨터와 사람은 사고, 인지 방식이 다르기 때문에 컴퓨터의 관점에서 문제를 사고해야 한다. 여기는 논리적, 수학적 사고가 필요하며, 해결과제를 작은 단위로 분해하고 패턴화 해서 추출하며, 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의해야 한다.

프로그래밍 언어

사람이 이해할 수 있는 자연어가 아니라 컴퓨터가 이해할 수 있는 언어, 즉 기계어machine code로 명령을 전달해야 한다. 하지만 사람이 기계어를 이해해서 기계어로 직접 명령을 전달하는 것은 매우 어려운 일이다. 기계어로 직접 명령을 전달하는 것을 대신할 가장 유용한 대안은 사람이 이해할 수 있는 약속된 구문 syntax(문법)으로 구성된 "프로그래밍 언어 programming language"를 사용해 프로그램을 작성한 후, 그것을 컴퓨터가 이해할 수 있는 기계어로 변환하는 일종의 번역기를 이용하는 것이다. 이것을 컴파일러compiler 혹은 인터프리터interpreter라고 한다.

구문과 의미

문제 해결 능력을 통해 만들어낸 해결 방안은 프로그래밍 언어의 문법을 사용해 표현한다. 즉, 작성된 코드는 해결 방안의 구체적 구현물이다. 이것은 프로그래밍 언어의 문법에 부합하는 것은 물론이고 수행하고자 하는 바를 정확히 수행하는 것, 즉 요구사항이 실행(문제가 해결)되어야 의미가 있다.

결국 프로그래밍은 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후, 그 흐름을 제어하는 것이다.

자바스크립트란?

약 90%의 시장 점유율로 웹 브라우저 시장을 지배하고 있던 넷스케이프 커뮤니케이션즈Netscape communication는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결정한다. 그래서 탄생한 것이 브렌던 아이크가Brendan Eich가 개발한 자바스크립트.

자바스크립트의 표준화

넷스케이프 커뮤니케이션즈와 마이크로소프트는 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하게 되었고 이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했다. 이에 자바스크립트의 파편화를 방지하고 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트의 필요성이 대두되었다. 이를 위해 1996년 11월 넷스케이프 커뮤니케이션즈는 컴퓨터 시스템 표준을 관리하는 비영리 표준화 기구인 ECMA 인터내셔널에 자바스크립트의 표준화를 요청한다.

자바스크립트 성장의 역사

초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용되었다. 이 시기에 대부분의 로직은 주로 웹 서버에서 실행되었고, 브라우저는 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링하는 수준이었다.

※ 렌더링이란? HTML, CSS, 자바스크립트로 작성된 문서를 해석해서 브라우저에 시작적으로 출력하는것. 때로는 서버에서 데이터를 HTML로 변환해서 브라우저에게 전달하는 과정(SSR: Server Side Rendering)을 가리키기도 한다.

Ajax : 1999년, 자바스크립트를 이용해 서버와 브라우저가 비동기asynchronous 방식으로 데이터를 교환할 수 있는 통신 기능인 Ajax Asynchronous JavaScript and XML 가 XMLHttpRequest라는 이름으로 등장했다. 이전 웹 페이지가 html 태그로 시작해서 html로 태그로 끝나는 완전한 HTML 코드를 서버로부터 전송받아 웹페이지 전체를 렌더링 하는 방식으로 동작했다면 (화면 전환 시마다 새로고침하여 변경할 필요가 없는 부분까지 재렌더링하여 불필요한 데이터 통신 발생 및 성능 저하) Ajax의 등장 이후 변경할 필요가 없는 부분은 다시 렌더링 하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 한정적으로 렌더링 하는 방식이 가능해졌다.
jQuery : 2006년, DOM Document Object Model 을 더욱 쉽게 제어할 수 있게 되었고 크로스 브라우징 이슈도 어느정도 해결되었다.
V8 자바스크립트 엔진 : 2008년, 자바스크립트 엔진의 등장으로 자바스크립트는 데스크톱 애플리케이션과 유사한 사용자 경험(UX; user experience)을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착하게 되었다.
Node.js : 2009, 라이언 달 Ryan Dahl이 발표한 자바스크립트 런타임 환경. 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 브라우저에서 독립시킨 자바스크립트 실행 환경이다. 서버사이드 애플리케이션 개발에 주로 사용되며, 이에 필요한 모듈, 파일 시스템, HTTP 등 빌트인 API를 제공한다.
SPA 프레임워크 : 모던 웹 애플리케이션은 데스크톱 애플리케이션과 비교해도 손색없는 성능과 사용자 경험을 제공하는 것이 필수가 되었고, 더불어 개발 규모와 복잡도도 상승했다. 이러한 변화에 따라 많은 패턴과 라이브러리가 출현했으나 변경에 유연하면서 확장하기 쉬운 애플리케이션 아키텍처의 구축을 어렵게 했고, 필연적으로 프레임워크가 등장하게 되었다. 이러한 요구에 발맞춰 CBD Component based development 방법론을 기반으로 하는 SPA Single Page Application 가 대중화되면서 Angular, React, Vue.js, Svelte 등 다양한 프레임워크/라이브러리 또한 많은 사용층을 확보하고 있다.

자바스크립트와 ECMAScript

ECMAScript는 자바스크립트의 표준 사양인 ECMA - 262를 말하며, 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체standard built-in object 등 핵심 문법을 규정한다.

자바스크립트는 일반적으로 프로그래밍 언어로서 기본 뼈대core를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 WEB API 즉 DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web worker 등을 아우르는 개념이다.

자바스크립트의 특징

HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어
개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어interpreter language
- 인터프리터와 컴파일러의 장점을 결합해 비교적 처리 속도가 느린 인터프리터의 단점을 해결
  (인터프리터는 소스코드를 즉시 실행하고 컴파일러는 빠르게 동작하는 머신코드를 생성하고 최적화한다.
  이를 통해 컴파일 단계에서 추가적인 시간이 필요함에도 더욱 빠르게 코드를 실행할 수 있다. )
명령형imperative, 함수형functional, 프로토타입 기반prototype-based 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어
클래스 기반 객체지향 언어보다 효율적이면서 강력한 프로토타입 기반의 객체지향 언어

코어 자바스크립트 #08 (클래스)

재밌게 살고 싶은 초보 개발자 — Thu, 9 Dec 2021 14:01:55 +0900

드디어 마지막 장까지 끝냈다!!

사실 뒤에 클래스 상속 부분이 더 있었지만

아직 개념이 안 잡혀서 그런지 예제 부분이 전혀 이해가 안 되길래

(책에서도 다 이해하려고 애쓰지 않아도 된다고 했음.. 아무튼 그랬음....)

지금은 과감히 스킵하기로 했다!

책 한 권 다 읽은 거 뿌-듯 :)

다음 책에서 모르는 내용 더 배우고 돌아와서 다시 읽을 때 수정해야지!

클래스와 인스턴스의 개념 이해

클래스Class : 공통 속성을 지닌 집단을 분류하기 위한 개념

인스턴스instance : 어떤 클래스의 속성을 지니는 구체적인 개체

현실의 개념과 다르게 프로그래밍 언어상 인스턴스는 어떤 인스턴스가 다양한 클래스에 속할 수는 있지만 이 클래스들은 모두 인스턴스 입장에서는 '직계존속'이다. 다중 상속을 지원하는 언어이든 그렇지 않은 언어이든 결국 인스턴스를 생성할 때 호출할 수 있는 클래스는 오직 하나뿐일 수밖에 없기 때문. (클래스가 먼저 정의되어야 함)

자바스크립트의 클래스

생성자 함수 array를 new연산자와 함께 호출하면 인스턴스가 생성된다. 이때 array를 일종의 클래스라고 하면, array의 prototype 객체 내부 요소들이 인스턴스에 '상속'된다고 볼 수 있다. (엄밀히는 상복이 아닌 프로토타입 체이닝에 의한 참조) 한편 array 내부 프로퍼티들 중 prototype 프로퍼티를 제외한 나머지는 인스턴스에 상속되지 않는다.

프로토타입에 클래스 개념을 적용

인스턴스에서 직접 접근 가능한지 여부

클래스의 prototype 내부에 정의된 메서드를 프로토타입 메서드라고 하며, 이들은 인스턴스가 마치 자신의 것처럼 호출할 수 있다. 한편 클래스(생성자 함수)에 직접 정의한 메서드를 스태틱 메서드라고 하며, 이들은 인스턴스가 직접 호출할 수 없고 클래스(생성자 함수)에 의해서만 호출할 수 있다.