ivory's Log
그게 무엇이라도 항상 쉬운 일이다.
반응형

Til 20

[JavaScript] - Closure

일전에도 언급했지만 내가 JavaScript를 처음 공부할 때, 가장 어려워했고 이해하기 힘들어했던 개념 중 하나가 바로 이 실행 컨텍스트(Execution Context)였다. 실행 컨텍스트는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 오늘은 내가 미루고 미뤘던 Closure(이하 클로저)에 대해 정리해보려고 한다.(꽤 오랫동안 미뤄왔다... 그만큼 바빴다!!) Closure의 개념 외부 함수의 변수에 접근 가능한 내부 함수 클로저는 한 마디로 쉽게 정의하면 외부 함수의 변수에 접근 가능한 내부 함수이다. 예시 코드와 함께 좀 더 구체적으로 정리해보겠다. example code 1 // example 1 const o..

ivory's DevLog 2021.12.01

useMemo, useCallback 파헤치기 - useCallback편

useCallback 메모이제이션(Memoization) useCallback은 useMemo와 아주 비슷하다. 특히 둘 다 메모이제이션을 한다는 공통점이 있다. 지난 포스팅에서도 언급했었지만, 너무나도 중요한 개념이니 다시 한번 짚고 넘어가 보자!! 참고로 useCallback도 useMemo처럼 React의 렌더링 성능 최적화를 위해 사용하는 hook이다. 메모이제이션이란 프로그래밍을 할 때 반복되는 결과를 메모리에 저장해 두고, 다음에 같은 결과가 나올 때 다시 계산할 필요 없이 빨리 실행하는 기법이다. 일종의 캐싱과 같다. 🆘 캐싱(Caching) 캐싱이란 캐시(Cache)라고 하는 좀 더 빠른 메모리 영역으로 데이터를 가져와 접근하는 방식을 말한다. 캐싱은 오랜 시간이 걸리는 작업의 결과를 저장..

ivory's DevLog 2021.11.23

useMemo, useCallback 파헤치기 - useMemo편

나는 종종 개인 프로젝트, 실무업무를 할 때, 상태 값 확인과 혹시 모를 오류를 대비하기 위해 console.log()를 자주 찍어두는 습관이 있다. 그러던 어느 날, 여느 때처럼 상태 값 확인을 위해 함수에서 console.log()을 출력하다가 불필요한 렌더링이 된다는 사실을 발견하였다. 처음엔 큰 오류도 없고 별 탈없이 state 값을 변경시킨다고 생각하여 괜찮다는 생각도 순간 했었다. 하지만 다시 냉정히 되돌아서서 고민해봤다. - ‘a만 바꾸고 싶은데, 필요 없는 부분도 리렌더링 되는 게 과연 효율적이고 좋은 렌더링 과정인가?’ - ‘이런 코드가 티끌 모아 태산이 되어버린다면? 혹시 성능에서도 문제가 발생하진 않을까?’ - 'React 프로젝트에서 최적화를 하려면, 어떤 방법이 있을까?' 위의 고..

ivory's DevLog 2021.11.10

왕초보와 ESLint 설정해보기

최근 개인 공부와 사이드 프로젝트를 기획 및 제작을 시작하면서, 개발 초기 세팅을 직접 해보고 있다. 매번 CRA로 자동으로 적용되는 설정만 사용해왔었고 실무 환경에서도 이미 생성되어 있는 프로젝트에서 기능 추가, 유지보수 혹은 정말 작은 프로젝트만 해왔기에 초기 세팅을 직접 적용해본 경험이 없었다. 그래서 이번 프로젝트를 통해 초기 세팅도 해보고 새롭게 습득하는 지식을 차근차근 공유해볼 계획으로 포스팅을 시작해봤다. ESLint ES + Lint 개념부터 빠르게 짚고 가자. ES는 ECMAScript의 약어로써 ECMA에서 만든 Script인 표준 Javascript를 의미한다. Lint 또는 Linter라고 불리는 이 개념은 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체..

ivory's DevLog 2021.11.03

Redux의 흐름과 예제

Redux의 3가지 원칙 1. 하나의 애플리케이션 안에는 하나의 스토어만 사용하자. 특정 업데이트가 빈번하게 일어나거나, 애플리케이션 특정 부분을 분리시키게 되면, 여러 개의 스토어를 사용할 수 있다, 하지만, Redux는 하나의 애플리케이션에서 여러 개의 스토어 사용을 권장하지 않는 이유는 개발 도구를 활용하지 못하게 되어 디버깅이 어려워지기 때문이다. 그러니 하나의 스토어만 사용하여 디버깅을 용이하게 하고, 서버와의 직렬화를 통해 클라이언트에서 데이터를 쉽게 받아올 수 있도록 한다. 2. state는 읽기 전용이다. Redux는 state를 변경할 때, 기존 값은 건드리지 않고, action을 일으켜 새로운 state를 생성하여 업데이트해주는 방식이다. 이것은 Redux 고유의 불변성을 지키고, st..

ivory's DevLog 2021.09.28

Redux

Redux란? A ➡️ B ➡️ C ➡️ D ➡️ E의 순서로 연결되는 컴포넌트들이 있다고 생각해보자. 만약 A에서 E로 접근하여 state값을 사용하려 한다면, A부터 E로 접근했다가 다시 E에서 A로 차례대로 돌아와야 하는 굉장히 비효율적인 패턴을 반복하게 된다. 이런 상황에서 Redux는 상태 관리 라이브러리로 복잡한 컴포넌트 구조속에서 간편하게 전역에서 state를 쉽게 공유할 수 있게 해준다. 키워드부터 정리하고 가자 액션(Action) state에 어떤 변경이 필요할 때, 액션이라는 객체를 발생시킨다. 단어 뜻 그대로 어떤 동작에 대해 선언된 객체라고 생각하면 된다. 액션은 반드시 type을 가지며, 그 외의 값들은 자유롭게 넣어줄 수 있다. 아래의 코드 예시를 참고해보자!! // action..

ivory's DevLog 2021.09.27

Next.js를 사용하는 이유

이 글은 'Next.js를 사용하는 이유'에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! Next.js SSR을 쉽게 구현하도록 도와주는 프레임워크 Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크다. 그렇다고 React에서 SSR이 불가능하다고 묻는다면, 대답은 'React에서도 구현 가능하다'이다. 하지만, React로 개발환경을 구현하는 것은 굉장히 복잡한 일이었다.(React와 Next.js의 차이를 경험해보기 위해 사전에 예제 코드를 적용하며 경험해 보았다...) 이런 문제를 해결하기 위해 등장한 것이 바로 Next.js 되겠다. 아래의 글에..

ivory's DevLog 2021.03.03

인증(Authentication)과 인가(Authorization)

이 글은 인증(Authentication)과 인가(Authorization)에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! 인증과 인가는 API에서 자주 구현되는 기능이다. 물론 Private API, Public API에서도 구분 없이 모두 기본적인 인증과 인가를 요구한다. 인증 Authentication 인증은 사용자가 누구인지 확인하는 절차다. 회원가입, 로그인 과정이 인증의 대표적인 예시다. 회원가입, 로그인 과정을 예시를 살펴보자. 회원가입 과정 1. 아이디, 비밀번호를 생성한다. 2. 비밀번호를 암호화하여 DB(데이터베이스)에 저장한다. 로그인 과정 1. 등록된 아이디와 비밀번호를 입력한다. 2. 암호화되어 ..

ivory's DevLog 2020.12.22
반응형