ivorycode

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

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

디자이너의 삶을 뒤로하고, 개발자로 전직한 지 벌써 1년이란 시간이 지났다. 정말 순식간이었던 지난 1년 동안 나는 어떻게 살아왔고, 개발자로서의 첫 경험은 어땠는지, 1년 동안 내가 어떤 생각과 고민을 했는지 기록해보려고 한다.(글 쓰는 재주가 없어 두서없이 기록하니 양해 바랍니다.) 첫 직장 첫 직장에 합격했을 때가 가장 먼저 기억이 난다. 회사마다 이력서를 따로 준비하고 경험 삼아 많은 회사를 돌아다니며 면접 질문을 포함한 여러 데이터도 쌓아보고, 혼자 '면접 오답노트'를 만들어서 스스로 피드백하며 합격을 위해 철저하게 준비했었다. 그렇게 해서 총 14군데의 회사에 최종 합격하였다. 하지만, 내가 바라던 프론트엔드의 포지션을 제안한 곳은 단 한 곳뿐이었고 그 회사에 입사를 하게 되었다. 일단 개발자..

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

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

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

2021년까지 열흘 정도 남은 시점에, 2020년을 마무리하는 글이 조금 뜬금없지만 한 해를 마무리하는 소감을 딱 쓰기 좋은 시점이라 생각하여 좀 이른 회고록(?)을 작성하게 되었다. 인턴 종료와 함께 찾아온 식중독 인턴계약이 종료된 지 벌써 1주일이 돼간다. 인턴을 종료하고 1주일은 푹 쉬겠다고 다짐했지만, 계약 종료 5일 전부터 식중독에 감염되면서 응급실에 실려가고, 혹시 몰라 자가격리까지 당해 엄청 고생을 했다. 이 식중독 때문에 회사에 제대로 된 마지막 인사도 못하였고, 블로그 포스팅은커녕 컴퓨터 앞에 앉아 있지도 못했다. 시작이 중요한 만큼 끝도 중요하다고 했는데, 마지막이 너무 허접했다. 설상가상 4개월 동안 몸을 담았던 회사에 정규직 전환 지원도 탈락해서 심적으로도 아팠던 기간이었다. 아쉬움..

이 글은 JWT(JSON Web Token)에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! 토큰 인증과 인가에 대해 공부하다가, JWT까지 오게 되었다. 갑자기 내용이 심화되어 많이 어렵고 당황스러웠으며, 포스팅하는 지금도 아직 헷갈린 부분이 많다. 하지만, 훗날 뼈와 살이 되고...(?) 반드시 알아둬야 할 개발 지식이기에 미리 정리를 해보았다. 부족한 글이므로 언제나 태클은 환영이다. JWT JSON Web Token JWT란 JSON 포맷을 이용하여 사용자에 대한 속성을 저장하는 클레임(Claim) 기반의 Web Token이다. JWT의 특징은 가볍고, 토큰 자체를 정보로 사용하는 자가 수용적인(Self-Conta..