2월 오늘 배운 것들

AnSuebin·2023년 2월 22일

2월 TIL

[TIL] 오늘 배운 것들

목록 보기

1/2

2/21

리엑트는 무엇일까?
- A JavaScript library for building user interfaces
- 기존에 view를 설계하는 방식에서 문제 의식을 느끼는 것에서 시작했다
- 리엑트의 장점
1. 데이터 변경이 발생하면 리액트가 변경 지점을 어떻게 그릴 것인지 알아서 처리해주기 때문에, 선언적인 UI를 작성할 수 있다.
2. 컴포넌트 기반으로 애플리케이션을 운용할 수 있어 재사용성이 높아진다.
- 명령형과 선언형 차이
  - 명령형 프로그래밍: 무엇을 어떻게 할 것인가
  - 명령형 : 기존의 view는 컴퓨터의 모든 과정에 대한 명령을 내려야함
  - 선언형 프로그래밍: 무엇을 할 것인가
  - 선언형 : 내가 원하는 관심사만 선언하면 되도록 상세한 로직은 추상화되어 감춰져 있다는 특징을 가짐. UI외의 다른것은 리엑트에게 맡기면 되기 때문에 고민의 사이즈가 줄수 있음.
- 컴포넌트 : 그 자체로 완결성을 가지고 있기 때문에 재사용성이 쉬움
  - 확장성, 유지보수성
리액트 사용하기
- 상태와 컴포넌트를 정의하는 것
1. ui를 컴포넌트 계층 구조로 나누기
  - 단일 책임 원칙을 매 순간 염두
2. 상태 정의하기
  - 상태는 앱에서 동적으로 변경되는 값이고, 상태는 가급적 최소한으로 정말 필요한 정도만 가지고 있는 것이 좋음
    - 다른 상태로 충분히 계산 가능한 값인지
    - 시간이 지나도 변하지 않는 값인지
    - 부모로부터 props로 전달될 수 있는 값인지
3. 단방의 데이터 흐름 추가
  - 양방향 데이터 방식보다 데이터 흐름을 명시적으로 확인할 수 있고, 앱이 어떻게 동작하는지 쉽게 파악할 수 있음
참고
https://tecoble.techcourse.co.kr/post/2021-05-15-react-thinking/

2 / 24

js 작동원리
- 자바 스크립트는 싱글 스레드 언어입니다.
  - 싱글 스레드는 현재 실행하고 있는 함수가 있는 경우에 다른 일을 할 수 없고 블락되는 구조
  - 이에 따른 문제는 브라우저가 오래 걸리는 작업이 실행 될 경우 웹 페이지의 ui는 멈춰버리고, 사용자는 어떠한 행동도 할 수 없게 됨
  - 이때 사용하는 것이 비동기 콜백
- 자바스크립트 엔진은 메모리힙과 콜스택으로 이루어져있습니다.
  - 메모리 힙은 메모리 할당이 일어나는 곳
    - 선언한 변수, 함수 등이 담겨져 있음
  - 콜스택은 코드가 실행되면, 코드의 내부 실행 순서를 기록해 놓고, 하나씩 순차적으로 진행할 수 있도록 도와주는 곳
- callback 함수는 함수가 실행이 끝나면, 다음에 실행할 함수를 의미합니다.
  - setTimeout, Ajax, event
- web api는 브라우저에서 오래 걸리는 작업을 대신해주는 역할을 합니다.
  - DOM event, ajax request, setTimeout 등 비동기 이벤트를 처리
  - javascript 싱글 스레드 영향을 받지 않고 독립적으로 이벤트를 처리할 수 있음
- callback queue는 web api에 있는 event가 실행되고 나면 javascript에서 실행할 callback을 저장하고 있는 저장소입니다.
- event loop는 자바스크립트 내에서 효과적으로 일을 처리하기 위한 메커니즘 입니다.
  - call stack이 비어있는지 확인하고 timeout함수를 call stack으로 보냄
  - event loop는 call stack이 비어있는지를 주기적으로 확인하여, callback queue에서 callback function을 가져와 call stack에서 javascript 코드가 실행 될 수 있도록 돕는 역할
  - 반복적으로 call stack이 비어있는지 확인하는 것을 tick이라고 함
호이스팅
- 코드의 가장 위로 올려보내진 것 처럼 보인다는 의미를 가지고 있습니다.
- 런타임 이전에 자바스크립트는 실행 컨텍스트를 생성하는데, 실행 컨텍스트의 생성 단계에서 실행 할 코드를 읽어서 실행할 때 필요한 변수나 함수를 메모리에 등록
- 실행 코드가 실행 될 때 변수 선언이 어디에 존재하던지 상관없이 변수를 참조 가능
- 호이스팅의 단점은 결과가 어느 것일지 예측하기 어렵다는 점
- var의 키워드를 예로 들때, 호이스팅, 중복 선언 가능, 함수 레벨 스코프라는에서 생기는 문제를 해결하고자 let과 const가 출현
- let과 const는 선언 이전에 참조하려하면, 참조 에러가 발생. 호이스팅이 일어나지 않는 것 처럼 처리
클로저
- 함수와 그 함수가 선언됐을 때 렉시컬 환경과의 조합
- 클로저는 어떤 함수에서 선언한 변수를 참조하는 내부함수를 외부함수로 전달할 경우 함수의 실행 컨텍스트가 종료된 이후에도 해당 변수가 사라지지 않는 현상입니다.
- 이때, 내부함수를 외부함수로 전달하는 방법에는 함수를 return하는 경우 뿐만 아니라, 콜백으로 전달하는 경우 포함
- 클로저는 그 본질이 메모리를 계속 차지하는 개념이므로 더는 사용하지 않게 된 클로저에 대해서는 메모리를 차지하지 않도록 관리해줄 필요가 있음
- 클로저 활용 사례
  - 콜백 함수 내부에서 외부 데이터를 사용하고자 할때
  - 접근 권한 제어
    - 외부에서 제공하고자 하는 정보를 모아서 return 하고, 내부에서 사용할 정보들은 return하지 않는 것으로 접근 권한 제어 가능
  - 부분 적용 함수
  - 커링 함수 (redux-thunk)
다양한 환경에서의 this
- this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다.
- strict mode에서 this는 Undefined
- this 바인딩은 함수 호출 방식에 의해 동적으로 결정
  - 전역에서 선언된 함수 this는 window
  - 객체 소속의 메소드 this는 그 객체를
  - new 연산자를 사용하여 생성자 함수는 생성자로 만들어진 빈객체
  - apply,call을 이용하면 this 값 제어 가능
- 화살표 함수의 this는 선언시 정적으로 결정되며, 언제나 상위 스코프의 this를 가리킵니다.
js의 원시타입
- 자바스크립트는 크게 원시타입과 참조타입이 있습니다.
  - 원시타입의 변수들은 복사가 일어날 떄 메모리 공간을 새로이 확보하여, 독립적인 값을 저장
  - 참조 타입은 메모리에 직접 접근이 아닌 메모리의 위치에 대한 간접적인 참조를 통해 메모리에 접근하는 데이터 타입
- 원시타입은 string, number, bigint, boolean, undefined, symbol
- 원시타입은 불변성을 가지고 있음
- 메모리에 생성된 값들은 자체가 변경될 수 없고, 재할당 할때는 식별자와 연결되 있는 메모리가 바뀜
- 복사할 때는 마찬가지로 통째로 복사하여 변수의 메모리에 담음
참조

2 / 28

ui, ux에 대한 이해
- 디지털 분야의 디자인
- ui : user interface
- ux : user experience
ux는 경험, ui는 이를 실현시키는 수단
카카오톡 ux
- user flow
- 친구 검색
  - 이름으로 검색?
  - 전화번호
  - 카카오톡 id?
- 친구 추가
- 친구와 대화
카카오톡 ui
- visual design
- 어떤 폰트
- 어떤 컬러
- 어떤 레이아웃
ui와 ux의 연관성
- 복잡한 인증절차에서 나오는 나쁜 ux의 경우에는 아무리 이쁜 ui이어도 전체적인 사용 경험은 나쁨
- ui에서 컬러 contrast가 엉망이거나, 폰트가 나쁘거나 한다면, 좋은 ux라도 전체적인 사용 경험이 나쁘게 됨

AnSuebin

고객에게 명료한 의미를 전달하고, 명료한 코드를 통해 생산성 향상에 기여하고자 노력합니다.

다음 포스트

2월 오늘 배운 것들

[TIL] 오늘 배운 것들

3월 오늘 배운 것들

0개의 댓글