다람쥐줘라줘

git init 부터 하고
git remote add [원격url] 원격 저장소 추가 or git clone으로 가져옴
git add . or [파일이름] 모두(파일이름) 커밋 대상에 추가하고
git commit -m '커밋메세지' 커밋 대상에 추가된 애들을 커밋한다
git pull origin 원격 저장소의 모든 데이터를 가져와 로컬저장소와 merge한다
git push origin 원격 저장소에 데이터를 보낸다.
git-hub 사이트에서 pull request를 통해 merge한다

Git flow전략의 정의는 '브랜치의 생성, 삭제, merge 등 git의 유연한 구조를 활용해 협업을 유연하게 하는 방법론' 정도이다.

그냥 어떻게 사용하고있는지 잘 사용하는 '사례'를 참고한다~ 라고 생각하자.

Git-flow전략이라고 하면 nive가 고안한 Git-flow가 가장 대표적인데 그건 재쳐두고

GitHub-flow와 GitHub-flow를 보완한 GitLab-flow를 정리해볼까 한다. 성격이 나한테 맞기도하고

GitHub-flow는 Git-flow의 복잡성을 들어냈다. 브랜치는 master 하나만 남겨두고 나머지 브랜치는 개발자 재량에 맡겨 사용하기 가볍다.

GitHub-flow 정책

1. master은 언제든지 배포 가능하다.

2. 새로운 프로젝트는 master를 기반으로 별도 브랜치를 생성하여 작업을 진행한다.

3. 브랜치는 로컬에 commit 하고, 정기적으로 원격 브랜치에 push 한다.

4. 피드백이나 도움이 필요하거나, 코드 병합 준비가 됐으면 pull request한다.

5. 다른 사람이 변경된 코드를 검토한 뒤 승인하면 master에 병합한다.

6. 병합된 master는 즉시 배포 할 수 있고, 실제로 배포한다.

GitHub-flow는 상시 배포 모델이다. 장기간 프로젝트와 핫픽스 등 유지보수 작업이 필요하면 Git-flow가 적합하지만,

상시 배포하는 팀은 간단한 GitHub-flow가 적합하다.

적다보니까 하던 작업만해서 지식이 부족하구만, 생활코딩 센세 강의 듣고 마저 작성하자~

https://www.youtube.com/watch?v=EzcF6RX8RrQ 

12/16 TIL

React_query를 배웠다. 뭔가 실전프로젝트 때 날 괴롭히던 녀석이라 그런지 언젠가부터 꽃 모양만 보면 '아, 리액트쿼리' 가 머리에 떠올랐다. 이틀에 거쳐 데이터 패칭이랑 캐싱 등 가지고 놀아보니 별거 아니었고 생각보다 api를 쉽게 사용해 주는 좋은 녀석이었다. 요새 이력서 안내고 면접 공부도 조금 뜸하게 하면서 타입스크립트랑 공부만하는게 왜 그른가~ 생각해보니까 그동안의 포트폴리오가 너무 아쉽다

지금 작성하는 코드가 전에 배포에 급급해서 작성하던 코드랑은 질이 다른걸 스스로 느끼고있어서 그걸 포트폴리오로 내고 싶지 않다- 는 생각이 좀 든다.(뭐 이런 생각하는거보니 아직 돈이 안 급한가보다..)  

노마드코더 강의 이제 1주일 정도면 완강할거 같은데 끝내고 개인 프로젝트 하나 1주일동안 만드는걸 끝으로 취업 전선으로 돌아가련다. (는 페이크고 1달째 포트폴리오 더 만들면서 공부중.. 하 NEXT.js 재밌잖어.. 1달동안 실력 엄청 늘었다 너..? _1월12일의 내가 12/16일의 나에게..)

Server Side Rendering은 서버에서 모든 데이터를 작성해서 클라이언트로 전송 -> 클라이언트는 해당 데이터를 웹사이트에 표시하는 방법의 웹 통신 방법입니다. 라고 하면 좀 관념적이니까

=>서버에서 페이지 내용을 다 그려서 브라우저로(클라이언트) 던져준다 고 생각하자.

장점으로는 HTML에 모든 내용이 담겨있어 효율적인 SEO(검색최적화)가 가능하고.

웹 사이트에 접속하면 서버에서 내용을 다 그려서 브라우저로 주니까 속도는 빠른데 HTML 파일만 가져온 상태고 자바스크립트는 다운받는데 시간이 조금 더 걸리게된다. 그래서 화면이 보여지는 시간(TimeToView)과 동작 시간(TimeToInteract) 이 달라 사용자가 버튼 같은거 클릭하면 작동 안하는 등 안좋은 사용자 경험이 있을 수 있다.

또, 랜더링의 많은 과정이 서버 사이드에서 일어나기 때문에 사용자가 많을 수록 서버 부담이 커진다.

렌더링 방법의 등장 순서

HTML을 이용한 웹이 시작되고 앵커 태그 <a href ="URL"/> 를 이용한 통신은 기본적으로 아래 과정을 거치는 정적 static sites 이었다. (서버와 클라이언트가 HTML파일을 주고받아 매번 페이지 전체가 새로고침됨.)

근데 쓰다보니까 새로고침이 사용자에게 많이 거슬려서 CSR -> SSR -> SSG이 나오게 됐다.

(CSR 개발을 위한 라이브러리로는 React, 프레임워크로는 Angular, Vue.js 등이 있다.)

(SSG 대표 라이브러리는 Gatsby, NEXT.js)

프로젝트에 SSR을 도입하려면 TTV와 TTI의 시간차이를 줄이기 위해 어떻게 할지 새로고침을 조금더 매끄럽게해서 더 나은사용자 경험을 하는데에 고민하는 것이 좋을듯하다.

추가

 React는 CSR에 최적화 되어있지만 Gatsby 라이브러리와 함께 사용하면 정적으로 웹페이지를 미리 생성해두고 서버에 배포할 수 있다. 이 웹사이트는 정적으로 보이지만, 추가적으로 서버에서 데이터를 받거나 동적으로 처리해야 하는 로직은 자바스크립트 파일을 함께 가지고 있을 수 있어서 동적인 요소도 충분히 추가 가능하다.

NEXT.js는 강력한 SSR을 지원하는 라이브러리였는데, 요즘에는 CSR과 SSR을 섞어서 목적에 맞게 사용할 수 있다.

12/15 

춥다  Winter is coming.. 아침부터 눈와서 마음이 꺾일뻔했다 스터디 카페에 도착하니 젖은 신발이 바닥을 검은 진흙으로 물들였다. 뭐 그것도 잠시고 커피마시면서 책좀 읽으니까 금방 평온해졌다. 1984 보고있는데 재미가 쏠쏠하다. '공산주의 멸망편'으로 과장스러운 장면도 많지만 과거 공산주의나 지금의 중국 북한과 크게 다르지 않은 생각도 들어 지금 커피마시면서 독서 할 수 있는 사실이 감사하게 느껴졌다.

연말이라 송년회 약속이 이것저것 잡혀있다. 간만에 얼굴 보느라 좋기는 한데 한편으론 좀 부담스럽다. 빨리 취업해야지

Q. RESTful 하다는 것은 어떤 건가요?

> REST를 잘 지킨 시스템입니다. RESTful의 목적은 이해하기 쉽고 사용하기 쉬운 REST API를 만드는 것 입니다.

 REST에 대해서 말씀드리면, 웹에서 데이터를 전송하고 처리하는 방법을 정의한 인터페이스입니다. 모든 데이터의 구조와 처리방식은 URI을 통해 정의되기 때문에 직관적으로 이해하기가 좋습니다.

REST의 아키텍쳐는 고유한 ID로 명시한 자원과 HTTP Method인 행위 Client요청에(request) 대한 CRUD 응답(response)인 표현으로 구성되어있습니다. 

특징은 서버 클라이언트 구조 / 무상태성 / 캐시 처리 가능/ 계층화 / 인터페이스 일관성이 있습니다.

순서대로 간략히 말씀드리면,

 1) 서버와 클라이언트의 역할을 확실히 구분시켜주어 서버 클라이언트 간 개발해야 할 내용이 명확해지고 서로 의존성이 줄어들게 됩니다. (서버는 api 제공, 클라이언트는 인증이나 컨텍스트(세션, 로그인 정보)등을 직접 관리)

 2) REST는 무상태성입니다. 작업을 위한 상태정보(세션정보나 쿠키 정보등)를 따로 저장하고 관리하지 않기 때문에 API 서버는 들어오는 요청(respones)만을 단순히 처리하면 됩니다. 그래서 서비스의 자유도가 높아지고 구현이 단순해집니다.

 3) 캐싱기능은 HTTP 웹 표준을 그대로 사용하기 때문에, HTTP 프로토콜 캐싱 기능인 Last-Modified 태그나 E- Tag를 이용하면 캐싱 구현이 가능합니다.

 4) 계층화는 REST는 다중 계층으로 구성될 수 있습니다. 보안, 로드 밸런싱, 암호화 계층을 추가해 구조상의 유연성을 만들 수 있고 PROXY, 게이트웨이 같은 네트워크 기반의 중간매체를 사용할 수 있습니다.

 5) 마지막 특징 인터페이스 일관성은 HTTP 표준만 따르면 안드로이드,IOS 플랫폼 등등 특정 언어나 기술에 상관없이 모든 플랫폼에서 사용할 수 있습니다. 

단순히 하나의 브라우저만 지원하던 이전과 달리, 최근 서버 프로그램은 여러 웹 브라우저와 아이폰, 안드로이드 등 다양한 애플리케이션과 통신할 수 있어야합니다. 이런 상황에 범용적이고 쉽게 사용 가능한 REST API 방식이 생겨났고 지금까지 해당 방식이 많이 쓰이고 있습니다.

그럼에도 몇몇 단점이 있어 이를 보완하기 위해 GraphQL이 등장했고 프로젝트 성격에 따라 어느 방식을 사용하는 것이 좋은지 고려하는것이 좋다고 생각합니다. 

12/9 TIL

진~짜 간만에 TIL! 요새 너무 바빴당 아침부터 밤까지 공부하고 취준하고 운동하고 책읽고 열심히 사는중.

git에 잔디 쌓이는 재미가 쏠쏠하당 자바스크립트로 게임 만드느라 3일정도 홀라당 코딩하고 간만에 책읽는 재미 붙어서 11월에만 5권은 읽은거 같다. 뭐 요번주부터는 진짜 취업해야지.. 생각들어서 이력서 적당히 내면서 개인프로젝트 하고 있는데 노마드코더강의 들은거 진짜 잘한거 같당 그동안 머리박으면서 코딩했던거 개념 차근차근 알려주고 꿀팁 알려줘서 아 이렇게 하면 컴팩트하게 코드 작성 하겠구나~ 싶어서 지금 단계에 맞는 강의를 찾은듯.

뭐 공부하고 운동하고 재미없게 살아서 스페셜한 일은 없었는데, 우리 월드컵16강 진출한거 띠용해서 16강전 친구네 놀러가서 같이 본거 정도? 아니 포르투갈 이기고 우르과이가 가나 2골차이로 이겨서 16강 진출한거 진짜 에바아님? 드라마도 스토리 이정도면 짜친다는 소리 들을거 같은데, 증말 중요한건 꺾이지 않는 마음이었나보다. (유투브에 ㅈ만쳐도 '중요한건 꺾이지 않는 마음'이 뜬다 올해 슬로건..)

물론 새벽4시에 일어나서 본 브라질 전은 4대1로 떡실신 당하긴 했지만 거기까지 간 스토리만으로도 충분히 감동적이고 대단했고 인터뷰에서 오히려 져서 죄송하다고 사과하는 선수들을 보며 전혀 그렇게 생각 안한다고 말해주고 싶었당

그리고 후반전은 너무너무 잘했음 국대들 짱짱맨..bb

Q. Async/Await와 Promise의 차이

⇒비동기 처리를 다룰 수 있는 방법이다. (+ Callback 도 있음)

차이점

1) 에러 핸들링

Promise를 활용할 시에는 .catch() 문을 통해 에러 핸들링이 가능하지만,

async/await 는 에러 핸들링 할 수 있는 기능이 없어 try-catch()문을 활용해야 한다.

2) 코드 가독성

Promse의 꼬리를 무는 .then() 지옥의 가능성

async/await는 비동기 코드가 동기 코드인 것처럼 흐름을 이해하기 쉽다. 코드가 길어질 수록 promise보다 가독성이 좋다.

정의

Promise

⇒자바스크립트 비동기 처리를 할수 있게 해주는 객체

대기/ 이행/ 실패 3가지 상태가 있다.

비동기 처리가 완료 되지 않았다면 대기(Pending), 완료 되었다면(Fulfilled), 실패하거나 오류가 발생하였다면 Rejected 상태를 갖는다.

async / awiat

⇒ 최근 문법으로 callback 이나 Promise의 콜백 지옥 단점을 보완한다.

await는 async함수 안에서만 동작한다.

Q. useEffect와 useLayoutEffect 차이에 대해 설명해주세요

차이점

1) 컴포넌트 랜더링

useEffect의 경우 컴포넌트 랜더링 -> 화면이 먼저 업데이트 된 후 useEffect를 실행하고

useLayoutEffect는 컴포넌트 랜더링 -> useLayoutEffect 실행 후 화면이 업데이트 됩니다.

2) 동기 / 비동기

useEffect는 비동기적으로 실행하고

useLayoutEffect는 동기적으로 실행합니다. => 로직이 복잡할 경우 시간이 오래 걸림.

useLayoutEffect 사용 이유

=> useEffect는 DOM이 화면에 그려진 이후에 useEffect 함수를 호출합니다. 화면이 복잡해지면 느려지는 것을 체감할 수 있을정도로 렌더링 시간이 증가하게 됩니다. 그러면 state 초기값을 보게 되버립니다.그래서 useLayoutEffect를 써서 화면에 DOM이 그려지기 전에 호출해서 초기값을 보는 문제 등을 방지 합니다. 

Q. Closure 란?

클로저는 자바스크립트 고유 개념이 아니라, 여러 함수형 프로그래밍 언어에서 공통적으로 발견되는 특성이다.

따라서 각기 다른 방식으로 설명하니 정의를 암기하기보다 사례를 이해하고 나만의 정의를 내리는것이 좋다.

⇒ 일단 사전적 정의는 외부함수에 접근할 수 있는 내부 함수 or 이러한 개념.

아래 코드와 같이 함수가 함수를 감쌀때의 외부함수와 내부함수인데 이때 fn3() 엔 l3의 변수 밖에 없지만 콘솔엔 l0, l1, l2, l3가 잘 찍힌다.

-> fn3()실행시에 로컬 스코프엔 변수는 l3 밖에 없지만 closure라는 개념으로 외부함수에서 선언한 변수를 땡겨왔다.

function fn1(){
    function fn2(){
        function fn3() {
            let l3 = 'l3';
            console.log(l0, l1, l2, l3) // l0, l1, l2, l3   <--breakpoint
        }
        let l2 = 'l2';
        console.log(l0, l1, l2)
        fn3();
    }
    let l1 = 'l1';
    console.log(l0, l1);
    fn2();
}
fn1();

디버거로 console.log(l0, l1, l2, l3)에 브레이크포인트를 걸었을 때 스코프는 다음과 같다.

closure라는 개념으로 l2와 l1의 변수를 땡겨오는 모습.

(자바스크립트 변수 가져오는거(객체 prototype과 동일) local 없으면-> script 없으면 -> global인데 Closure있으면 local 다음에 끼어든다)

다우기술 이력서 내느라 일기를 안썼넹 이것저것 하느라 면접준비 자꾸 뒷전이라 큰일.. 뭐 강의도 듣고있고 1일1커밋 중인데 잔디 채워지는게 생각보다 쏠쏠하다 자바스크립트랑 리액트 이론 공부할 때마다 느끼는데 머리박으면서 코드부터 짜서 이론 진짜 부족한거같당ㅋㅋㅋ그래도 재밌게 시작했으니 후회는 없어..☆

요새 책 1시간씩 보고있는데 너무 재밌당 내가 '싫고 좋고 이상하고' 읽고 나서 세상 이슈에 대해 더 알고 싶어졌고 '다정한 것이 살아남는다' 보고 인류학 관련된 책을 더 찾아보고 싶었고 지금은 '정의란 무엇인가' 보면서 독서 뽕맛 제대로 느끼고있다. 마이클 샌델 천재아님? 철학적인 주제들을 이렇게 재밌게 풀어내는거 할아버지 폼 미쳤음 진짜 꼭보세요 추천..b 

(잠깐 찾아보니까 진짜 천재 맞네요 27세 최연소 하버드 교수되셨네ㅎㅎ)

며칠 좀 오락가락 하는중이다 나같은 고민 하는 사람 많을거 같은데, 지금 이 시점에 강의를 듣는게 맞는지 블로그 쓰는게 맞는지 책을 읽고있는게 맞는지 궂이 지금 이시점에 해야하는건지 뭐 그런 쓸데없는 생각? 극 S라 별 고민 안하고 한가지 씩 하는 성격인데 뭐 이력서 슬슬 공장처럼 던져야되는데 좀 더 준비하고 있으니까 잡 생각이 끼어드는거 같다. 뭐 다우기술 자소서 작성하면서 좀 리뉴얼했으니까 월요일부턴 던져보자...ㅎ 

Q. var, let, const의 차이에 대해 알려주세요.

이건 전에 변수 생성 3단계랑 좀 겹치는거 같긴한데 그래도 다시 정리해봅시당

차이는 크게 변수 선언 방식,  스코프(Scope), 호이스팅이 있다.

1. 변수 선언 방식

 1) var 중복 선언 가능

var name = '이름1'
console.log(name) // 이름1

var name = '이름2'
console.log(name) // 이름2

var로 선언한 변수는 동일한 이름으로 중복 선언이 가능함.

변수를 유연하게 사용할 수 있는거 같지만 변수가 변하면 생각지 못한 오류가 발생해 이를 보완하기 위해 ES6부터 

let 과 const 변수가 추가되었습니당.

 2) let 중복 선언 불가능, 재할당 가능

let name = '이름1'
console.log(name) // 이름1

let name = '이름2'
console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared

name = '이름3';
console.log(name) // 이름3

var 과 달리 대 선언 불가 but 재할당은 가능!

3) const 중복 선언 불가능, 재할당 불가능

const name = '이름1'
console.log(name) // 이름1

const name = '이름2'
console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared

name = '이름3';
console.log(name) // Uncaught TypeError: Assignment to constant variable

=> let 과 const 차이점은 불변(immutable) 여부!

but. const도 재할당은 불가하지만 배열과 오브젝트 값을 변경하는 것은 가능  

그래서 어떤 변수 사용해?

const 를 기본으로 사용하여 불필요한 변수의 재사용을 방지하고, 재할당이 필요한 경우 let을 사용하는 것이 좋음!

(execute context 측면으로 봐도 var은 변수를 전역 변수에 할당 할 수도 있어서 최대한 지양하는것이 좋다)

2. 스코프 (Scope)

스코프란 유효한 참조 범위를 뜻함.

 1) var 함수 레벨 스코프

function var(x) {
	if (x) {
		var a = 1;
        console.log(a) // 1
    }
    console.log(a) // 1
}

var(); // 1
console.log(a); // ReferenceError: a is not defined

함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없음.

함수 내부에서 선언한 변수는 지역변수이고

함수 외부에서 선언한 변수는 모두 전역변수 취급!

 2) let, const 블록 레벨 스코프

function const(x) { // let 동일
	if (x) {
		const a = 1;
        console.log(a) // 1
    }
    console.log(a) // ReferenceError: a is not defined
}

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

함수, if문, for문, while문, try/catch문 등의 모든 코드 블록({ }) 내부에서 선언 된 변수는 코드 블륵 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없음. 즉, 코드 블록 내부에서 선언한 변수는 지역변수 취급

3. 호이스팅

함수 내부에 있는 선언들을 모두 끌어올려 해당 함수 유효 범위의 최상단에 선언하는것을 말함. (자바스크립트 parser가 함수 실행 전 해당 함수를 한번 훑는 과정에서 내부적으로 끌어올려 처리하는 것을 뜻함)

 1) var, 함수선언문 : 호이스팅이 발생함

//변수 호이스팅
console.log(a) // undefined

var a = 1;
console.log(a); // 1

//함수 호이스팅
var(); // 1

function var() {
	console.log(1)
}

변수 a가 선언되기 전에 참조됐는데 에러가 발생하지 않음.

=> 자바스크립트 내부에서 코드 실행 전에 미리 변수를 선언하고 undefined로 초기화함. 

     함수선언문 또한 동일하게 선언되기 전 호출됨에도 에러가 발생하지 않음.

 2) let, const, 함수표현식 : 호이스팅이 발생하지만, 다른 방식으로 작동됨

/* 변수 호이스팅
console.log(a) // ReferenceError: a is not defined

let a = 1;
console.log(a) // 1

/* 함수 호이스팅
함수표현식(); // error

let 함수표현식 = function() {
	console.log("함수표현식");
}

=> 변수 a가 선언되기 전에 참조하니 에러가 발생. 호이스팅은 발생했지만 변수 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간인 TDZ(Temporal Dead Zone)에 빠졌기 때문

=> 함수 표현식을 사용하거나 let 또는 const로 변수를 선언하는 경우, 자바스크립트 내부에서는 코드 실행 전 변수 선언만 해둘 뿐 초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행함. 그래서 호이스팅은 발생하지만, 값을 참조할 수 없어서 동작하지 않는것처럼 보임!

갑자기 예정에없던 강남에 왔습니당 항해99 칭구들 모여서 스터디한다길래 취업 준비 어떻게들 하고있나~ 궁금하기도 해서 갔는데 다들 열심히 하고있군..ㅎ 취업준비 진짜 빡세게 이력서 100개씩 날렸던 칭구들은 벌써 입사하고 면접 보러 댕기고있길래 조금 뒤쳐졌나 생각도 들었다. 뭐 나도 열심히 하고 있고 급하게 이력서 막 날리는 것보다 조~금 시간두면서 천천히 자소서 첨삭하고 공부 하면서 이력서 내용 보충하고있는데(아직 모아뒀던 돈이 좀 있어서 안 급한가..?) 그래도 칭구들 보면서 의욕 생겨서 좋았음

특히, 친구들 블로그 구경했는데 한명이 엄~청 내용 알차고 꾸준히 작성한거 보고 나도 좀 본격적으로 작성해야겠다, 싶었다.. 보고 내 블로그랑 비교해보니까 항해99 카테고리는 거의 노션에 작성해놔서 내용도 별로 없고 TIL 도 너무 면접 내용 + 일기인가 싶기도 하넹 그래도 기술 적인 내용은 git에 하고있긴한데, 뭐 남에꺼 좀 참고해서 더 잘 작성해봅시다~

+ 스터디 끝나고 곱도리탕에 소주 한잔하고 파했는데,

꾸역꾸역 집에 안가고 스터디카페로 왔다... 휴, 2시간만 타입스크립트 조지고 간다 화이팅...! 

Q. 버츄얼 돔과 리얼 돔의 차이를 설명해주세요

노드가 변경되어 레이아웃을 변경 할 때, DOM은 변경 될 때마다 레이아웃을 다시 구성하나,

가상 DOM은 컴포넌트가 업데이트 될 때, 레이아웃을 한번만 계산합니다. 리액트는 가상DOM의 얕은 비교와 일괄 돔 업데이트 방식을 이용해 성능을 향상시켰습니다.

⇒ 버츄얼 돔(가상 돔 || Virtual DOM) 이란?

가상돔은 실제 DOM에서 처리하는 방식이 아닌 가상돔과 메모리에서 미리 처리하고 저장한 후 실제DOM과 동기화하는 프로그래밍 개념입니다. 해당 DOM을 컴포넌트 단위로 쪼개 HTML 컴포넌트 조립품 처럼 다루는 개념입니다.

⇒ DOM 이란?

DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게 브라우저가 트리구조로 만든 문서 객체 모델을 의미합니다.

여기서 문서 객체란 html, head, body(h1, p, ul태그 등) 과 같은 JS가 이용할 수 있는 객체를 의미합니다.

(JS는 Document 라는 전역 객체를 통해 html에 접근해 태그들을 조종합니다. Ex⇒ document.getElementById() 등)

Q. useRef 란?

특정 DOM을 가리킬 때 사용하는 Hook 함수.

(ex, 포커스 설정, 특정 엘리먼트 크기/ 색상 변경 등)

사용법

1) Focus

리액트에서 특정 DOM을 선택해야 하는 상황에 useRef를 사용한다.

useRef() 를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해서 사용하면 된다.

 2) 변수 관리

useRef 특정 DOM을 선택하는 용도 외에 Component 안에서 변수 관리하는 용도로도 사용합니다.

useRef를 이용해 변수를 업데이트하면 해당 Component가 리렌더링이 되지 않아 리렌더링이 필요없는 변수를 관리할 때 useRef 사용이 효율적입니다. (굳이 useRef사용 시 리 렌더링을 원한다면 callback ref 사용)

⇒ useRef로 변수 관리 예시

• setTimeout, setInterval을 통해 만들어진 id
• scroll의 위치
• 배열에 새 항목이 추가 될 때 필요한 고유 key값
• 외부 라이브러리를 사용해 생성된 인스턴스

import React, {useRef} from 'react'; 
import UserList from './UserList';

const App = () => { 
const users = [ 
    {id:1, name: '김채원'}, 
    {id:2, name: '푸푸'}, 
    {id:3, name: '쌈무'} 
];
const nextId = useRef(4); 
const onCreate = () => { // 배열에 항목 추가하는 부분 생략 
	nextId.current += 1; 
}; 

return <UserList users={users}/>; 
}

export default App;

Q. useEffect의 실행 순서

useEffect는 컴포넌트가 랜더링이 된 후에 실행되는데 하위에 있는 컴포넌트의 useEffect가 먼저 실행이 된다.

(Bottom → Top 방식으로 작동)

useEffect 사용법

⇒ dependency배열 x

useEffect(() ⇒ {
});		//컴포넌트 랜더링 시 마다 실행

⇒ dependency배열에 빈 값 전달

useEffect(() ⇒ {
}, []);		// 컴포넌트가 마운트될 때 한번만 실행

⇒ dependency배열에 변수 전달

useEffect(() ⇒ {
}, [value]);	// 컴포넌트가 마운트될 때 한 번 실행 + ‘value’ 값이 변경 될 때 실행

Q. Scope란?

자바스크립트에서 Scope는 변수에 접근할 수 있는 범위이다.

크게 global(전역)스코프, local(지역)스코프 2가지가 있다.

전역 스코프는 전역에 선언되어 있어 어느 곳에서나 해당 변수에 접근할 수 있고, 

지역 스코프는 해당 지역에서만 접근할 수 있다.

JS에서 함수도 지역 스코프에 해당한다.

함수를 선언하면 선언할 때 마다 새로운 스코프를 생성하고 이를 '함수 스코프' 라고도 한다.

(그냥 지역 = 함수 스코프라고 봐도 되는 부분인듯)

아래 예를보면,

var a = 1; // 전역 스코프

function print() { // 지역(함수) 스코프
 var a = 123;
 console.log(a);
}

console.log(a); // 1
print(); // 123;

  (scope를 더 정확하게 이해하려면 이전 글에 있는 실행 컨텍스트(execute context) 내용을 선행해야 하는 부분인듯)

console.log(a) 가 1 인건 동의 할 거고 

print() 가 123인건 (JS 엔진이 실행 컨텍스트에서 객체를 생성해) 변수 a를 먼저 지역 스코프에 있나 확인해보고 있으면

지역 스코프의 값 a = 123을 할당하고

변수 a를 print 함수 안에서 선언하지 않았다면(Scope Chain에 의해)

전역 스코프에 있는 a = 1;을 할당했을거다.

기존 var의 경우 함수 스코프를 가졌기 때문에 함수 내에서만 지역변수가 유지되는 문제가 있었는데,

ES6에서 let, const 키워드가 추가되면서 함수가 아닌 일반 블록 { var a = 123; } 에서도 지역변수를 선언할 수 있게됨 

추가 단어 설명!

실행 컨텍스트 란(execute context)

=> 자바스크립트 코드가 실행되고 연산되는 범위를 나타내는 추상적인 개념

 우리가 코드를 작성하고 실행한다면 실행 컨텍스트 내부에서 실행되고 있는 것. 즉, 코드들이 실행되기 위한 환경이자 하나의 박스 컨테이너라 볼 수 있음!

스코프 체인Scope Chain 이란

유효 범위를 나타내는 scope는 scope 프로퍼티로 각 함수 객체 내에서 연결리스트 형식으로 관릳뢰는데,

이 scope 간의 상하관계를 스코프 체인이라 한다.

오늘은 '다정한 것이 살아남는다' 읽을 거지롱 오늘부터 무신사 블프하넹.. 돈도 없는데 흙흙ㅠ

TypeScript 공부하고 면접 질문지 작성하다보니까 책 거의 못읽음~! 요새 자꾸 배나오는거 같아서 다시 헬스 열심히 가려고 한다. 저번주에 3번갔는데 너~~무 오랜만에 가서 첫날하고 3일동안 근육통이 좀 있어서 괴로웠다.. 이번주부터는 주 5일 뿌셔야지. 아니 밥먹는시간이 너무 애매해 스터디카페에서 공부하니까 집 왔다갔다 하면 1시간30분 홀랑이넹 밥차리고 설거지하고 하니까 금방이여 증말.. 그래서 당분간 저녁 스킵하고 공부하다가 바로 헬스장 가는 걸로! 여기 커피랑 후레이크 믹스 같은거 있어서 너무 좋음 최고최고b

Q. 실행 컨텍스트 란(execute context)?

JS에서 실행 컨텍스트는 엄청 중요하다는데 비전공자로 막 깨지면서 코딩을 해와서 사실 잘 느낌은 안온다.

뭐 중요하다니까 알아보자.

1. Execute Context 란?

=> 자바스크립트 코드가 실행되고 연산되는 범위를 나타내는 추상적인 개념

 우리가 코드를 작성하고 실행한다면 실행 컨텍스트 내부에서 실행되고 있는 것. 즉, 코드들이 실행되기 위한 환경이자 하나의 박스 컨테이너라 볼 수 있음!

2. 자바스크립트 코드 실행에 필요한 정보

 1) 변수 (전역 변수, 지역 변수, 매개 변수, 객체의 프로퍼티)

 2) 함수 선언

 3) 변수의 유효범위

 4) this

3. 실행 컨텍스트 종류

 1) Global Execute Context

 =>  기본 실행 컨텍스트로 global object를 생성하며 this를 global object로 설정함. JS 에서 global object는 우리가 많이 사용하는 window 객체이다. (전역 컨텍스트는 Call Stack에 가장 먼저 추가되며 앱이 종료 될 때 삭제됨)

여기엔 엄~청 복잡하고 많은 함수들이 많아서 여기다 변수를 선언하는 변수를 쓰지않고 선언 & var를 통한 선언은 안 하는게좋음.

 2) Functional Execute Context

함수가 실행 될 때 마다 정의되는 context이다. 실행시마다 정의되며 함수 실행이 종료(return) 되면 call stack 에서 제거됨. 

 3) Eval Functional Execute Context

 보안상의 문제로 eval은 잘 사용되지 않아서 이름만 알고 넘어가자.

4. Execution Stack 

 => 다른 프로그래밍 언어의 호출 스택(call stack)이랑 동일. 스택은 LIFO(Last in, First out) 구조 형태.

JS 엔진은 script 요소를 처음 만날 때 [global execution context]를 생성하고 [execution stack]에 push 한다.

그리고 엔진이 함수 호출을 찾을 때 마다 해당 함수에 대한 새로운 실행 컨텍스트를 생성해 [execution stack]의 맨 위로 push 한다.

JS 엔진은 실행 컨텍스트가 스택 맨 위에 있는 함수를 실행한 뒤 함수가 종료되면 스택에서 제거하고 호출 스택은 최신화 된 스택에서 맨 위의 컨텍스트를 이전과 동일한 로직으로 접근함.

5. Execution context 생성 로직

 위의 과정은 자바스크립트 엔진에서 어떻게 실행 컨텍스트를 관리하고 동작하는지였다.

 이번에는 자바스크립트 엔진이 실행 컨텍스트를 만드는 과정임!

 2 단계로 Creation Phase, Execution Phase 과정을 거친다-  는 다음 시간에...

똑딱 코드 쳐서 실행시키기만 했지 1도 몰랐었네 안에서 갱장한 과정을 거치고 있었구낭ㅎㅎ

간만에 독서좀 하려고(개발 관련 외의 글자를 읽고 싶어서) 동생 방에서 몇권 훔쳐왔다. 그 중에 만만한 얇은 책을 며칠 읽었는데 제목은 '나는 내가 싫고 좋고 이상하고' 산문이고, 대충 중간쯤부터 읽었는데 내용이 산만하고 여러 주제를 산발적으로 쏘아대서 오히려 잘 읽혔다(?) 뇌를 비우고 읽다가 그래도 내용이 그렇게 흥미롭진 않은뎅 하면서 1페이지부터 잠깐 읽어봤는데 같은 작가가 맞나 싶을정도로 주제도 통일화되고 내용에 깊이가 있었다. 여성 차별에 대한 내용이었는데 한창 문단 내 성범죄가 SNS을 통해 드러날 무렵 저자도 함께 용기를 내어 글을 적었고 사실이었을 일들이 적나라했고 충격적이었고 그동안 내가 너무 모르고 살았구나 느끼고 반성했다. 읽으면서 계속 든 생각인데 작가가 이렇게해도 되나 싶을 정도로 솔직하다. 본인의 어렸을 때 가정폭력 당한 이야기, 강간을 당할 뻔 한 이야기, 성폭행 당한, 가스라이팅 당한, 이혼에 관한, 우울증에 관한, 스무살이 되기까지 사람을 잔인하게 죽이는 글을 쓰며 즐거워한 내용이 서술된다. 연민을 바라지 않는 볼테면 봐라는 문체는 더욱 와 닿았고 여성으로 살아간다는게 너무너무너무 힘들구나 생각됐다. 조금더 귀 기울이고 미약하게나마 내 주변 지인들에게라도 더 잘해야겠다는 생각도.