처음으로해보는 React native 빌딩이다 보니 react 웹 빌딩 보다 속도가 더디고 배워야할게 많아서 프로젝트가 끝날때 까지는 집에 가지 못할거같다. 기능 선빌드를 해놔야 디자인 면이든 기획쪽이든 전체적인 디테일 Up이 가능할듯.

2. 예약시간 상태 bar 형태로 표현

세가지 bar를 정했다 . 그날의 00시부터 현재시간 까지 gray처리할 prefixbar 기본 배경이될 Fullstatusbar (파란색 , z-index : -1) 각각의 예약마다 그려질 Bar Full statusbar위에 prefixbar 와 Fullstatusbar 가 덮어씌워지도록

3. 로그아웃시 인트로 페이지로

순서 : AsyncStorage 에서 accesstoken을 지우고 await AsyncStorage.removeItem("accessToken"); 그후에 로그아웃 요청

4. Expo managed 아임포트 연동

2.0.0 버전 이후 부터 Expo eject 하지않아도 아임포트를 연동할 수 있다.

https://github.com/iamport/iamport-react-native/blob/main/manuals/VERSION.md

• 마커를 클릭했을때 차량 리스트가 나타나도록 -> handleToggle 함수를 마커의 온프레스

• simple-bottom-sheet 하단 드로우기능이 있는 시트 사용 - state로 시트가 열려있는지 닫혀있는지 상태판단하여 사용자가 구글맵 드래그하여 이동하면 드로어 닫기

• 안드로이드는 moveOnMarkerPress 가 기본으로 true 되어 false로 셋팅함 - 드래그 컴플릿이 원하지 않게 동작하므로

2. 인트로 페이지 교체

첫화면인 인트로페이지가 처음 만들땐 괜찮다고 생각했는데 목업이 80%정도 나온시점에서 다시보니 앱 디자인 통일성을 해친다 - 테마에 맞는 디자인으로 변경함

3. 관리자 페이지 제작 결정

사용자가 자신의 차를 렌트카로 등록했을때 그것을 승인해줄 관리자가 필요한데 이전까지 그 이전까지의 앱만 설계했다. 그러다보니 ERD도 엉성하고 서비스도 다리하나가 빠진느낌 - 간단한 관리자페이지를 그냥 만들기로 결정

구글맵 불러오기 매우간단하다. app.json에 구글맵 apikey 셋팅하고 아래 임포트하면 끝

json 파일안에 .env 어떻게 쓰지 ??... 알아봐야함 , api키 은닉

import MapView, { PROVIDER_GOOGLE } from "react-native-maps";

2. 구글비전 - 면허증 정보 OCR알고리즘 수정

알고리즘이라고 부르기도 민망한 .. 일정한 패턴으로 얻어지는 면허 정보 파싱 로직을 좀수정했다.

구형은 운전면허넘버에 하이픈이 2개고 -> 지역 13-123123-20 이런식으로 신형은 지역명 대신 지역넘버를 써서 하이픈이 3개

면허증이 아닌 다른것을 찍었을때 다시 찍어달라는 presenter 분기 에서 빈 스트링 = "" && 라고 처리하니 빈스트링이 린턴되고 그것이 렌더되는데 RN에서는 텍스트 (빈스트링) 이라도 Text 태그에 감싸져 있어야한다

3. RN drawer 사용

Drawer 헤더의 디폴트 햄버거 아이콘은 위치를 옮길수없다. 디폴트햄버거 아이콘은 끄고 커스텀 하여 headerRight에 ()=>햄버거()

4. 아이콘 , 스플래쉬 이미지 업데이트완료

프론트는 디자인능력이 있어야한다고 느낄수 있는 작업들.

웹에서처럼 쿠키에 리프레쉬 토큰을 받아와서 이용하는 방법은 x, 임시방편으로 accessToken 기한을 길게하고, AsyncStorage에 받고, 권한관련된 api에는 refreshToken을 빼는걸로

2. text , button 공통 컴포넌트화

외부폰트를 받아서 쓸때 안드로이드 폰트패딩을 풀어주기위해 일일이 쓰지말고 컴포넌트화 하기.

3일차 회고

2일차까지 기획의 전체적인 윤곽을잡았다고 생각했는데 3일차인 오늘 계속해서 추가 되었다. 금요일까지 80% 이상 목업 완료예정. 공통 컴포넌트 들이 대부분 작성되었으니, 가능할 것으로 보임.

피그마 , 기획서 , 플로우 차트를 보고 백엔드가 주체적으로 ERD를 작성하는데 이부분에서 프론트가 흐름을 지켜봐야한다. 서로 혼동되고 백엔드가 일 두번.

기획의 큰틀을 팀원들에게 명확히 인지시켜줘야한다. 서로 생각하는 프로덕트 모델이 조금씩 다르다보니 조율해야할 것들이 생기고 그 조율하는 시간이 꽤크다. (코드치는 시간이 줄어듬)

내일 구글지도 , 이미지픽커 , 정보수정 3페이지로 나눠서 페이지 작업을 바로 시작, 피그마 그리지말고.

박스를 4개로만들어서 조림하듯이 만들었다... div에 홀 뚫는 방법을 border raius로 줘서 하면 할수있을거같았는데 불가능 box shadow 9999 도 마찬가지 일단 ViewHeigth 측정해서 ios 일때, 안드로이드일때 계산해서 맞춰서 작성했음

2. 안드로이드 폰트패딩

안드로이드 폰트패딩 풀려면 includeFontPadding false 줘야하는데 styled 컴포넌트에서 eslint에 걸려서 계속 소문자로 바뀜 styled 컴포넌트에 설정해야 공통적으로 사용하는데 ... 해결예정

tsconfig "typescript-styled-plugin", 에 유효한 프로퍼티로 elevation 이랑 includeFontPadding 넣긴했어도 대문자 자동으로 소문자로 바꾸는건 아직 해결못함

3. 토큰 저장문제

로그인했을떄 토큰 AsyncStorage에 저장해놓고 쓰면 원하는대로 기능하게 할 순 있을텐데 이게 맞는지?

4. expo react-hook-form

엑스포 리액트 훅폼 사용불가 , expo 스낵 참고 코드 따라해도 useForm이 callable하지않다고 (onchange , 정규표현식 일일이 만들었음)

5. useEffect로 camera dom 죽이기

구글비전으로 ocr하는 과정중 camera 찍고 다시 되돌아가기하면 카메라 스크린 블랙화면 구글링해서 avigation.addListener 에 focus , blur 일때 state true false 설정해서 해결함

6. expo 에서 .env 쓰기

babel.config.js 에서 "module:react-native-dotenv", 플러그인 설정하고

import { API_KEY } from "@env"

git을 처음 써보는 입장에서 매니징하는 방법을 습득하는데 시간이 오래걸렸다. 서버의 업스트림 레파지토리를 작업자들이 각각 포크하여 그것은 (origin) push 용도로 사용하고, 업스트림 레파지토리의 develop branch에 머징되도록 관리한다. pull 받는것 업스트림 레파지토리

피그마 :

리액트처럼 컴포넌트화 하여 사용하는것 중요! 원본을 복사한 사본을 또 복사하지말고 원본 컴포넌트를 복사하여사용하자

short cut(mac기준)

cmd + option 누르면서 마우스 호버하면 사이간격 측정가능 shift + i : 필요한 컴포넌트 검색

expo icon , splash 등 제작에 유용한 템플릿 expo가 제공해준다 그것이용해서 splash , icon 만들고 구도잡자

ReactNative :

오늘 알게된것들

1. android 외부폰트 받아서 적용하면 패딩있다. style={{ includeFontPadding: false }} 로 패딩풀기

2. Navigator ios android 다름 , android 기본 goBack Arrow 있는데 ios 없음. platform.os로 검증한다음 ios , android 똑같이 적용될수있게 headerLeft 에 들어갈 컴포넌트를 따로만들었음

3. 내비게이터 이름 겹치지 않게하자, 내비게이터 스택안에 스택을 쌓는 구조도 있는데 별문제 없는것 같은데 혹시모르니 확인해봐야함

4. SVG 를 꽉채울려면 SVG 자체에서 width heigth 지우고 flex 1 하자, preserveAspectRatio="none" 도 적용

오늘 전체적인 흐름 , 기능 들 팀원들끼리 개념이 대략적으로 일치되었다. 앱의 피그마가 생각보다 빨리 그려지니 나는 개발먼저 치고나가야 한다고 생각했다. 팀원들이 리액트 네이티브 처음이기도해서 옆에서 막힐때 내가 모른는 부분에서 막히면 같이 찾아야하니 빨리빨리 찾아가고 있는중.

cookie?

Cookies are small files sent to your browser from websites you visit. These files track and monitor the sites you visit and the items you click on these pages.

쿠키(Cookie)란 사용자가 어떠한 웹 사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일이다.

쿠키 종류는 다음과 같다.

• Session Cookie : 만료시간(Expire date) 설정하고 메모리에만 저장되며 브라우저 종료 시 쿠키를 삭제한다.

• Persistent Cookie : 장기간 유지되는 쿠키파일로 저장되어 브라우저 종료와 관계없이 사용한다.

• Secure Cookie : HTTPS에서만 사용, 쿠키 정보가 암호화되어 전송한다.

• First-Party Cookie : 사용자가 방문한 도메인에서 설정되는 쿠키이다, 웹페이지의 오너가 이 쿠키들을 활용 분석한다.

• Third-Party Cookie : 사용자가 방문한 도메인이 아닌 다른 도메인에서 설정되는 쿠키이다. 주로 사용자의 정보들을 이용하여 광고에 활용한다.

Session

A web session is therefore the amount of time that a user spends browsing a given website: from the moment they arrive on the first page, to the moment they leave the site.

Session이란 단어는 영어에서 어떤 활동이 수행되는 동안의 구분된 시간을 말한다. 따라서 웹에서의 세션은 브라우저에서 사용자가 페이지에 도착해서 떠날때 까지를 말한다. 쿠키와 달리 세션은 브라우저에 저장 되지않고 서버에서 관리된다. 사용자는 세션 ID를 발급받고 그 ID를 쿠키에 저장한다.

Local Storage

localStorage is a way of saving the key-value pair in the web browser and the best part about it is that there is no expiration date meaning that data will still be there in the browser even if you reload the page.

local storage를 사용하면 브라우저에 key-value값을 저장할 수 있다. 세션과 달리 브라우저에 기한없이 저장되므로 비회원 장바구니와 같은 기능을 만들때 유용하다.

Js 문법으로는

• window.localStorage.setItem('key',value) 저장

• window.localStorage.getItem('key', value) 읽기

Domain?

A web domain is an actual presence on the Internet, such as a web page. Specifically speaking, a web domain name is a substitute that replaces the Internet Protocol (IP) address.

도메인이란 인터넷에서 사용자가 어려운 IP 주소대신 기역하기 쉬운 문자(영문,숫자 등)으로 만든 인터넷 주소를 말한다

from) https://xn--3e0bx5euxnjje69i70af08bea817g.xn--3e0b707e/jsp/resources/domainInfo/domainInfo.jsp

도메인 구입사이트: 가비아, 후이즈, 닷네임 등에서 원하는 도메인을 구매하여 사용할 수 있다.

DNS?

The Domain Name System (DNS) turns domain names into IP addresses, which browsers use to load internet pages.

DNS는 사용자가 도메인으로 접속하였을 때 해당도메인의 IP주소를 알려주고 그 주소에 접근할 수 있게해준다. 일종의 전화번호부라고 생각하면된다.(도메인과 해당도메인의 IP주소를 저장하고있는)

Hosting

When a hosting provider allocates space on a web server for a website to store its files, they are hosting a website.

호스팅이란 인터넷 접속 서비스 제공자가 서버를 임대해주는 서비스를 말한다. 예를들어 AWS가 제공해주는 서버대여가 호스팅 이라고 할 수 있으며, 사용자는 실물서버를 구축할 필요없이 서비스 제공자가 이용하는 플랫폼을 활용하여 웹서비스를 제작할 수 있다.

자바스크립트 내장객체 Object의 주요 메서드들 keys, values, entries, assign 에 대해 알아보자.

Object.keys()

Object의 keys() 메소드는 객체의 key값 들을 배열로 반환해준다.

Object.values()

Object의 values() 메소드는 객체의 value값 들을 배열로 반환해준다.

Object.entries()

Object의 entries() 메소드는 객체의 key,value 들을 배열로 묶은 이중배열로 반환해준다.

Object.assign()

Object의 assign() 메소드는 객체를 병합해준다. Object.assign(origin, source) origin과 source를 병합해준다.

*중복된 key값이 병할될 경우 병합하려는 data로 덮어씌워진다.

알아본 메소드 들은 객체를 iterable한 형태로 바꾸어 동작을 수행해야할 때 유용하다.

Regular expressions are a generalized way to match patterns with sequences of characters.

정규표현식(regular expression)이란 문자열에서 특정 문자 조합을 찾기위한 일종의 패턴이다. 특정 프로그래밍 언어에만 있는것이 아닌 대부분의 프로그래밍 언어가 지원을하는 형식 언어이다.

자바스크립트에서는 정규 표현식 문법을 ES3부터 도입하였다.

Syntax

정규표현식은 슬래시 / 를 사용하여 만들 수 있다. / 사이에 규정하고싶은 문자열 패턴을 작성하면된다. 플래그를 이용하면 정규표현식을 활용하여 검색할 때의 방식을 설정할 수 있다.

Pattern

정규표현식 기호 의미

• ^ : 문자열의 시작
• [...] : 문자의 집합 0-9 라고입력했으니 숫자 0~9 를 나타냄
• ➕ : 앞에 문자가 최소 한개이상. 갯수 제한없음을 의미
• $ : 문자열의 끝

다음과 같이 검증하고자하는 패턴으로 작성된 정규표현식을 활용하면 문자열의 규칙 준수여부를 확인할 수 있다.

이러한 정규표현식은 웹페이지에서 이메일 주소 검증 , 전화번호 검증 등에 활용된다.

flag

flag를 사용하면 검색 방식을 설정할 수 있다

• i (ignoreCase) : 영어 대소문자를 구분하지 않겠다는 의미이다.

따라서 i flag가 있는 regex는 대소문자를 구분하지 않으므로 대문자를 넣어도 결과가 true로 반환 되었다.

웹페이지에서 Yup과 같은 문자열의 패턴을 검증해주는 라이브러리도 있다. 정규표현식에 대한 기본 개념을 익히고 라이브러리를 통해 사용자의 입력값을 검증하는 기능을 활용해보자.

HTTP Status codes?

An HTTP status code is a server response to a browser’s request. When you visit a website, your browser sends a request to the site’s server, and the server then responds to the browser’s request with a three-digit code: the HTTP status code.

브라우저에서 서버로 요청을 보내면 요청에 대한 응답이 오게된다. 그 응답들을 3자리 숫자로 분류 되어있다.

Status code - first digit

• 1xxs – Informational responses: 서버가 요청을 수행하려함

• 2xxs – Success! 요청에 대한 반응이 성공적으로 수행되었으며 부라우저에 그 응답을 보내주었음

• 3xxs – Redirection: 서버가 요청은 받았지만 다른곳으로 리다이렉트됨.

• 4xxs – Client errors: 페이지를 찾을 수 없음

• 5xxs – Server errors: 클라이언트는 유효한 요청을 보냈지만 서버가 수행에 실패함.

Status code - important for SEOs

웹페이지가 검색엔진에서 쉽게 발견되게 만들지 못한다면 좋은 웹페이지라고 할 수 없다. 검색엔진최적화를 수행할때 고려해봐야할 상태코드들을 살펴보자

주요한 몇몇의 status 들을 살펴보자

301 – Permanent Redirect

301은 URL이 영구적으로 변경되었음을 나타낸다. 예를들어 웹사이트가 새로운 URL 구조로 개편했을 때 사용될 수 있다. 검색엔진이 301 요청을 만나면 URL이 영구적으로 변경 되었다고 판단한다. 따라서 검색엔진은 과거의 URL 페이지 랭킹과 평가점수를 새로운 URL로 이동시킨다.

302 - Temporary Redirect

302는 URL이 임시적으로 이동했음을 나타낸다. 즉 검색엔진이 기존 URL의 페이지 랭킹 점수를 유지하면서 컨텐츠만 새로운 URL에서 조회 할 수 있도록한다.

웹개발시 상태코드를 통해 자신이 만든 웹서비스의 장애가 무엇인지 판단할 수 있다. 또한 301, 302 stauts를 활용하여 양질의 검색최적화를 수행 할 수 있다.

302 코드 같은경우 페이지 점수가 높은 URL을 구매한다음 302를 적용하여 컨텐츠를 바꾸는 식으로 cheating할 경우 구글에서 높은 패널티를 준다고한다.

shallow copy

A shallow copy of an object is a copy whose properties share the same references (point to the same underlying values) as those of the source object from which the copy was made.

shallow copy란 같은 참조값을 가지는 객체를 복사하는 것을 말한다. 복사된 객체는 original 객체와 같은 주소값을 가지므로 복사된 객체에서 값을 변경한다면 그 변경된 결과는 original 객체에 반영이된다.

deep copy

A deep copy of an object is a copy whose properties do not share the same references (point to the same underlying values) as those of the source object from which the copy was made.

deep copy는 복사하려는 원본 객체와 똑같은 구조와 똑같은 값을 가진 객체를 새로 생성한는 것이라고 생각하면된다.

JSON.parse(JSON.stringify()) 를 사용하여 구조와 값은 같지만 다른 주소값을 가지고있는 새로운 객체를 생성한다면 deep copy한것이라고 할 수 있다.

copying - spread operator

spread operator 를 활용한 copy방법은 1 depth 까지만 deep copy가 된다. 그 아래로는 shallow copy가된다.

위사진에서 name 부분이 변경이 안된것으로 보아 객체의 1-depth 는 deep copy되었다 객체 안에 객체를 만들어 1-depth를 넘긴 값을 변경할 경우 원본에서도 그 값이 변경됨을 확인 할 수 있다. 즉 shallow copy된것이다.

쉽게말하자면 shallow copy는 원본과 같은 참조값을 가지는 객체를 생성하는것이며 deep copy는 원본과 형태와 값은 같지만 다른 주소값을 가지는 객체를 생성하는것이라고 생각하면 되겠다. spread 연산자를 활용한 복사방법은 1-depth 까지는 deep-copy 그 보다 아래 depth는 shallow-copy를 한다는것을 유의하자.

Primitive data type

In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods or properties. There are 7 primitive data types: string, number, bigint, boolean, undefined, symbol, and null.

Primitive type 원시타입이란 메소드나 properties가 없으며 순순히 데이터 값을 저장하는 타입이다. ** numbers, strings, booleans, null, and undefined** 등이 있다.

Reference data type

Most of them are considered as objects, and therefore have methods. Examples of such data types include arrays, functions, collections, and all other types of objects.

Reference type 참조타입이란 객체가 저장된 메모리의 주소를 저장하여 그 주소를 참조하는 방식으로 동작되는 타입이다. ** array, function, object ** 등이 있다.

Difference between Primitive and Reference

원시타입의 데이터는 콜스택에 저장되며. 콜스택 영역에 해당 데이터 값 자체가 저장됩니다. 변수에 재할당이 일어나면 메모리영역에 저장되어있는 값을 직접적으로 변경한다. 변수에는 값 자체가 저장 되기 때문에 같은 값을 가진 변수를 비교하면 같음 확인 할 수 있다.

참조타입의 데이터 값 자체는 힙메모리에 저장되며 변수에는 그 힙메모리를 가르키는 주소가 저장됩니다. 따라서 같은 데이터 구조와 값으로 이루어진 참조타입 데이터를 만들면 변수에는 주소가 저장되기때문에(각기다른) 비교를 해보았을때 다르다는 것을 알 수 있다.

Null?

Null means an empty or non-existent value. Null is assigned, and explicitly means nothing.

null은 변수가 선언되고 값이(Null , 빈값) 할당된 상태이다. null의 타입이 object로 표현되지만 이것은 사실 구현오류이다.

Undfined?

Undefined means a variable has been declared, but the value of that variable has not yet been defined.

undefined는 변수가 선언되었지만 값이 할당되지 않은 상태이다. null과는 다르게 undefined 타입이다.

결론

• null은 할당되는 값이고 아무값도 없음을 나타내기 위해 쓰인다.
• undefined는 선언은되었지만 아직 정의되지 않았음을 의미한다.
• null은 object type이고 undefined는undefined type이다

Debouncing and throttling are techniques in javascript to optimise the application and browser performance.

웹개발을 하다보면 네트워크 통신이라는 특수성 때문에 함수의 실행을 적절히 제어해야 할 때가 있다. 그럴 때 주요하게 사용되는 테크닉이 Debouncing 과 Throttling이다.

Debouncing

debounce() function forces a function to wait a certain amount of time before running again. The function is built to limit the number of times a function is called.

Debounce function은 함수가 호출되기전에 일정시간동안 기다리도록 강제한다. 쉽게생각하면 개발자가 delay time을 지정해놓고 delay time동안 그어떤 event가 발생하지 않으면 최종으로 함수를 실행한다고 생각하면된다.

위 와 같이 사용자의 입력값을 실시간으로 받아 검색된 결과를 반영하는 게시물의경우 아무런 제한을 걸어놓지 않는다면 타자 하나하나에 네트워크 요청이 들어가게 된다. 이는 매우 비효율 적이다. 따라서 JavaScript 내장함수 setInterval을 사용하여 직접 만들던지 혹은 lodash 라이브러리를 이용하여 일정시간 사이에 입력이 이루어지는경우는 네트워크 요청을 보내지않고 입력이 다끝나면 요청을 보내는 방식으로 만들어야 경제성있는 웹페이지를 만들 수 있다.

Throttling

To throttle a function means to ensure that the function is called at most once in a specified time period (for instance, once every 10 seconds).

Debouncing이 정해놓은시간 내의 입력의 유무 기준으로 함수가 호출되는 것이라면 Throttling function은 정해놓은 시간내에 반드시 한번 함수가 호출되는 것이다.

게시물의 바닥에서 스크롤하는경우 사전에 정해놓은 수 만큼 게시물을 받아오는 무한스크롤 동작에서 Throttling의 필요성을 알 수 있다.

브라우저의 스크롤이벤트는 아주 조금 휠을 밑으로 내려도 엄청나게 많은 이벤트가 발생한다. 이때 아무런 처리가 없다면 위의 사진과 같이 원하는동작(10개만 받아오려는 했음) 을 수행하기 힘들다. 이때 지정해놓은 시간동안에는(스크롤을 내리는 동안) 단 한번만 함수가 실행되도록 설정한다면 원하는 동작을 수행할 수 있다. 이것이 Throttling이다.

라이브러리를 사용하면 debouncing 을 쉽게처리할 수 있으며 무한 스크롤의경우도 라이브러리를 이용하면 별다른 처리없이 Throttling 처리가된 함수를 이용할 수 있다.

Node.js is an open source server environment Node.js is free Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) Node.js uses JavaScript on the server

Node JS

Node JS는 자바스크립트가 브라우저 밖에서도 실행될 수 있도록 만들어주는 런타임 환경이다. 이 Node JS는 아주많은 모듈들이 개발 되었으며 지금도 많은 라이브러리들이 개발 출시 되고있다. Node JS는 크롬(Chrome)브라우저와 같은 V8 엔진을 공유한다.

JavaScript

JavaScript는 스크립트 언어이다. 독립적인 언어가 아니었으므로 특정한 프로그램 안에서만 동작 할 수 있다. 크롬, 파이어폭스, 사파리, 익스플로러 와같은 웹브라우저에서만 사용할 수 있었지만, Node JS의 등장으로 다양한 활용이 가능해진 언어가 되었다.

한줄요약 : Node JS를 이용하면 JavaScript를 브라우저가 아닌 곳에서도 구동시킬 수있다.

One of the features that came with ES6 is the addition of let and const, which can be used for variable declaration.

ES6에서 새로 생긴 특징 중 중요한 한부분은 변수선언의 방법으로써 let 과 const가 등장 했다는것이다. 이것들이 생긴 이유가 있을텐데 ? 선언과 재할당 개념을 먼저 살펴보고 scope 와 hoisting 개념을 통해 그 이유를 알아보자.

redeclaration & reassign

• 이전 var의 경우는 변수의 재선언이 가능했다. 하지만 let과 const는 불가능하다.
• const의 경우 변수의 재할당또한 불가능하다.

Scope?

Scope in JavaScript refers to the current context of code, which determines the accessibility of variables to JavaScript. The two types of scope are local and global:

자바스크립트에서 scope이란 변수혹은 다른 표현식들(함수 , 클래스)등이 접근가능한 유효범위를 뜻한다. 전역에 쓰여진 변수는 코드스크립트의 전역스코프를 특정 지역안에 선언된 변수는 해당 지역 스코프를 갖는다.

기존의 var는 오직 함수의 지역안에서 선언된 것만 지역 스코프로 인정되었다. 위 예제를 살펴보자 함수만을 지역스코프로 인정하는 var는 if문안에 쓰일경우 전역변수로써 취급이된다. 반면에 let 혹은 const로 선언한 변수는 함수 , if , for , while , try/catch 등 지역적으로 쓰이는 모든 표현식에서 지역스코프를 가질 수 있다.

Hoisting?

Hoisting is a JavaScript mechani sm where variables and function declarations are moved to the top of their scope before code execution.

자바스크립트는 hoisting이라는 특징이있다. 코드가 실행되기전에 함수와 변수들의 선언이 코드 최상단으로 올라가는것이다. (자바스크립트는 스크립트언어이니 hoisting이 된다는것은 선언부분이 가장먼저 실행된다는것이다.)

let으로 선언한 변수는 초기화전까지 참조가 불가능한 TDZ(Temporal Dead Zone)구간에 존재한다

자바스크립트에서 호이스팅의 특징으로 변수 선언보다 실행되려고하는 스크립트가 먼저 등장하려고하면 var의 경우 undefined를 할당하여 동작하지만 let의경우 선언은 호이스팅으로 인해 최상단에 올라가지만 초기화단계는 올라가지 않으므로 변수에 접근할 수가 없다.

const로 선언한 변수는 선언 단계와 초기화 단계가 동시에 진행된다.

const로 선언한 변수는 선언 단계와 초기화 단계가 동시에 진행된다. 하지만 런타임 이전에는 이것들이 실행될 수 없기 때문에 const로 선언한 변수에도 접근할 수 가 없다.

let과 const덕분에 우리는 조금더 실수를 줄이수 있게 되었다. 자바스크립트의 제작자가 언어를 구상할때 이런부분까지 다 생각해서 만들려 했다면 JS는 세상에 나오지 못했을것이다. 이처럼 문제가 되는 부분들은 나중에라도 보완하면된다. 일단은 시작하여 만들어내는것이 완벽을 추구하는것보다 더 낫다.

ECMAScript 2015 was the second major revision to JavaScript. ECMAScript 2015 is also known as ES6 and ECMAScript 6. This chapter describes the most important features of ES6.

ES6란 2015년에 배포된 자바스크립트의 2번째 major 개정판 이다. 자바스크립트가 개정되면서 어떤점들이 바뀌었거나 추가되었는지 살펴보기전에 EMCA란 무엇인지 살펴보자

ECMA?

Ecma International (formally European Computer Manufacturers Association) is a non-profit organization that develops standards in computer hardware, communications, and programming languages.

ECMA란 European Computer Manufacturers Association의 약자로 컴퓨터의 하드웨어, 통신, 프로그래밍 언어와 같은 정보 통신 기술을 표준화 하기위해 설립된 단체이며 본부는 스위스 제네바에 위치해 있다.

ECMA script

ECMASciprt is a JavaScript standard meant to ensure the interoperability of web pages across different web browsers

ECMAScript는 ECMA 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어입니다. ECMA는 Javascipt의 사양서라고 생각해도 될 것 같다.

ES6 features

이전버전 ES5(2009) 와 가장큰 변화는 다음과같다.

arrow function

새로운 함수 표현식으로 화살표 함수라는 방버이 생겼다

template literals

백틱을 이용하여 변수를 문자열에 표현하기 편리해졌다.

Default Parameters

function fnName(param1 = defaultValue1, ..., paramN = defaultValueN) { ... }

es6에서는 함수의 매개변수 기본값을 설정해 줄 수있다.

destructuring assignment

배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용할 수 있는 표현식이다.

module

ES5 이전에는 JS 파일을 나누어 모듈화 하여 사용하는 것이 불가능했었다. ES5에서는 require을 통해 모듈화가 가능하다. ES6에서는 import / export로 간편하게 모듈을 사용 할 수 있게 되었다.

프로그래밍 언어또한 기술의 한 종류이다보니 끊임없이 개정판이 나오게 되며 이렇게 보완된 기능들을 거부감없이 습득하고 이전의 낡은 기술들은 과감히 버릴 수 있는것이 프로그래밍의 기본자세이라고 생각한다.

useEffect?

the hook that manages side-effects in functional React components.

useEffect 훅은 함수형 컴포넌트의 side-effect를 관리하기위해 사용됩니다.

side-effect?

Side effects are all the operations that affect your component and can’t be done during rendering.

리액트의 함수형 컴포넌트에서 side-effect란 렌더링중에는 완료되지 못하지만 컴포넌트에 영향을 미치는 작업을 말한다. fetching data manually chaning DOM 과 같은 작업이 대표적인 예이다.

useEffect()

useEffect(callback[, dependencies]);

useEffects는 콜백함수와 의존성 배열을 인자로가진다.

첫번째 인자 : 콜백함수는 돔에 변화가 push 되었을떄 실행된다. 두번째 인자 : depencies 는 의존성 배열이라고 불러지며 어떻게 작성되어있느냐에 따라 useEffect의 동작방식이 달라진다.

Dependencies argument

1. 의존성배열 없음: 리렌더링이 될때마다 콜백함수가 실행된다.

2. 의존성배열에 빈값: 컴포넌트가 마운트된이후 딱 한번만 콜백함수가 실행된다.

3. 의존성배열에 props 혹은 state: 컴포넌트가 마운트된이후 한번만 실행되며 그 이후에는 배열안의 값들이 변경될때만 콜백함수가 실행된다.

example

컴포넌트가 처음 마운트될때 useEffect의 콜백함수가 한번실행되고 그 이후에는 name state에 변경이 있을 때 마다 실행된다.

The equality operator in javascript is used to compare if two values are equal. The comparison is made by == and === operators in javascript. The main difference between the == and === operator in javascript is that the == operator does the type conversion of the operands before comparison, whereas the === operator compares the values as well as the data types of the operands.

자바스크립트에서 두 값이 같은지 비교할때 등호를 두개쓰거나 세개를 쓸 수 있다. 통산 ==을 느슨한 비교===을 엄격한 비교라고 한다.

==

느슨한 비교는 두 값이 같은지만 비교하며

===

엄격한 비교는 값과 Data type까지 같은지를 비교한다 모두 같으면 true, 하나라도 다르면 false를 반환한다.

위와같이 같은 1을 쓰더라도 number인지 string 인지 구별해주는것은 엄격한 비교이다.

What about Object

객체타입의 변수는 메모리의 주소를 참조한다 따라서 위 두 객체의 데이터 타입과 값이 같지만 서로의 메모리주소가 다르기 때문에 두 객체는 같지않다.

만약 새로운 C를 선언하여 B를 얕은 복사한다면? 이때는 같은 메모리 주소를 참조하므로 둘이 서로 같음을 알 수 있다.