FrontEnd Developer zeromountain

매몰되지 않는 개발자가 되자.

캐시 메모리 교체 알고리즘

INTRO 오늘 면접에서 캐시 메모리의 교체 알고리즘에 대한 질문을 받았다. 컴퓨터 구조에 대한 강의를 수강하고 있어서 자신있게 대답하려고 하는 순간 알고리즘의 이름이 생각나질 않았다. 머리 속에서 생각나는 단어를 끄집어 내다가 마지막으로 나온게 알고리즘이었다. 사실 이것도 정확하게 이라고 말한게 아니라, ‘알고리즘 명칭은 기억이 잘 안나는데 로빈슨 어…

함수에서 값의 복사

INTRO 오늘 면접은 진행한 회사에서 this에 관한 질문을 받았다. this에 대해서 블로깅을 하면서 정리한 내용을 바탕으로 설명을 마쳤는데, 면접관님이 call by value와 call by reference, call by sharing에 대해서 언급을 해주셨다. 내가 당황을 한 표정이어서 그것에 대한 꼬리 질문을 하지 않으셨던 것 같지만, ca…

this

INTRO 모의 면접을 진행하면서 this와 관련된 질문을 받았다. this가 동적으로 바인딩 되는 부분은 이해하고 있었지만, 함수의 선언과 호출 그리고 스코프와 this의 관계에 대한 이해가 부족하다고 느껴져서 this의 개념에 대해서 정리하려고 한다. 자기 참조 변수 THIS 먼저, Javascript에서 함수의 스코프는 정적 스코프(lexical s…

observer pattern

INTRO 최근에 옵저버 패턴을 구현하는 기업 과제를 진행하게 되었다. 옵저버 패턴이라는 것을 책이나 강의를 통해서 스쳐가면서 들었던 기억이 있어서, 옵저버 패턴이 이벤트 시점을 감시하는 감시자 패턴이라는 것은 알고 있었지만 구체적으로 어떻게 구현해야 할지는 막막했다. 결국에는 옵저버 패턴 구현을 깔짝 거리다 과제를 마무리했고, 과제가 끝나고서 옵저버 …

RTK Query - Cache Behavior

RTK Query 공식문서를 번역한 내용입니다. Cache Behvior (캐시 동작) RTK 쿼리의 주요 기능은 캐시된 데이터의 관리입니다. 서버에서 데이터를 가져오면 RTK 쿼리는 Redux 저장소에 데이터를 ‘캐시’로 저장합니다. 동일한 데이터에 대해 추가 요청이 수행되면 RTK 쿼리는 서버에 추가 요청을 보내는 대신 기존에 캐시된 데이터를 제공합니…

oauth

최근 많은 웹서비스들을 방문해 보면 이전에 이메일과 비밀번호를 사용한 로그인 방식 대신에 구글이나 페이스북과 같은 다른 서비스의 계정을 통한 로그인 방식을 많이 볼 수 있다. 이런 흐름의 변화에는 이전 방법의 문제를 해결하기 위함에 있으므로 이메일과 비밀번호를 사용하는 로그인 방식에 어떤 문제점이 있는지 알아보자. 기존 로그인 방식의 문제점 복잡한 회원가…

캔버스 기본 사용법

캔버스 기본 사용법 HTML 요소 기본 속성 width: 300px height: 150px 캔버스 요소는 CSS로 크기를 임의로 정할 수 있지만 렌더링하는 동안 이미지는 레이아웃 크기에 맞게 조정되며, 초기 캔버스의 비율을 고려하지 않으면 왜곡될 수 있다. 대체 콘텐츠 제공 가능 , , , 등등.. 대체 콘텐츠를 제공하는 것으로 캔버스 기능을 제공…

리렌더링 오류

INTRO 기업 과제를 진행하던 도중, 다음과 같은 에러가 발생했다. 리액트는 무한 루프를 방지하기 위해서 렌더 횟수를 제한하고 있는데, 제한 횟수를 넘어서는 리렌더링이 발생했다는 에러였다. 문제가 어디에서 발생했는지 찾아보기 위해서 코드를 찬찬히 살펴봤지만 역시나 문제점이 눈에 들어오지 않았다… Searching 해당 에러 문구를 그대로 구글에 검색을…

React의 동작 원리

리액트를 사용하면서 리액트가 어떻게 동작하는지에 대해서는 크게 생각하지 않고 사용한 듯 하다. 그래서 리액트가 어떻게 동작하는지 한번 정리해 보는 시간을 가지려고 한다. 제목은 거창하게 React의 동작 원리라고 적었지만, 거창한 제목을 내용으로 잘 채워나갈수 있을지 걱정이 되지만,,, 시작해 보겠다. React 어떻게 동작할까? 먼저 React가 어떻게…

React 사용자가 처음 Vue를 사용했을 때

원티드 프리온보딩 프론트엔드코스를 시작한지 1주차가 지났다. 2개의 기업 과제를 수행했는데, 첫번째 기업의 과제는 React를 사용해 익숙했기 때문에 그나마 작업이 수월한 편이었다. 하지만, 두번째 기업의 과제에서는 요구 조건에 기술 스택을 Vue로 정해주었기 때문에 실로 당황스럽기 그지 없었다. Vue라는 프레임워크에 대해서 React, Angular와…