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

ivory's DevLog

more

[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 0

useMemo, useCallback 파헤치기 - useCallback편

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

ivory's DevLog 2021.11.23 0

useMemo, useCallback 파헤치기 - useMemo편

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

ivory's DevLog 2021.11.10 0

왕초보와 ESLint 설정해보기

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

ivory's DevLog 2021.11.03 0

Redux의 흐름과 예제

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

ivory's DevLog 2021.09.28 1

ivory's DevStory

more

개발자로서의 삶, 1년

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

ivory's DevStory 2021.10.12 3

2020년 '하고 싶은 말'

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

ivory's DevStory 2020.12.20 0

개발초보의 인턴경험

개발자 인턴을 시작한 지 꽤 시간이 흘렀다. 긴 시간은 아니지만 지난 3개월 동안 경험했던 희로애락을 공유하고 싶어 글을 쓰게 되었다. 인턴을 시작하게 된 계기 협업을 나갔던 'onions'기업(이하 어니언스)에서 나를 포함해 동기 2명까지 총 3명이서, 인턴을 하게 되었다. 사실 기본적인 개발이론 지식과 취업준비를 하여 정직원 입사라는 선택지도 있었지만, 내 선택은 인턴이었다. 그것도 꽤 쉬운 결정이었다. 결정이 쉬웠던 이유는 간단했다. 내가 개발 경험이 아예 없었다는 것. 이 부족한 경험을 조금이라도 채워야 했었는데, 마침 어니언스 대표님께서 좋은 기회를 먼저 제안해 주셨다. 그리고 TypeScript, React Native 등 새로운 기술 스택을 접할 수 있는 좋은 기회가 생겨서 지원하게 되었다...

ivory's DevStory 2020.11.22 0
반응형