Pay it forward

회사에서 현업을 하다 보니 필히 과거에 전임자가 작성했던 코드를 보게 되고 발생하는 에러가 있으면 과거 코드를 보고 그 의미를 파악해서 수정하기도 한다. 다행히 전에 코드를 작성하신 분이 아주 잘 작성해주셔서 그 의미를 파악하는데 크게 어렵지 않게 작업하고 있다. 이번에 토스 결제 에러가 발생하면서 그 원인을 찾아 해결하기 위해 코드를 조금 수정하면서 이해되지 않았던 부분을 등산을 통해 이해하게 되어 기록을 남겨본다. const tossPayments = window.TossPayments( process.env.NEXT_PUBLIC_TOSS_CLIENT_KEY ); tossPayments .requestPayment(PaymentTypes[paymentType], order) .catch((error:..

현업 투입 후 첫 게시글. 배울게 정말 많고 정신도 없었다! 회사에 프로젝트가 여러 개인데 계정 관련된 통합 로그인이 따로 있다. 그 통합로그인 페이지는 iframe width100% height 100%을 사용해서 연동되어 있다. iframe안에서 링크를 연결했는데 모든 링크가 그 iframe안에서 발생하고 만약 다시 iframe을 실행하면 또 중첩이 될 것이다. 이로 인해 없었던 스크롤이 생기는 에러가 있었다. (iframe안에 생긴 스크롤이겠지?) 처음에는 단순히 window.parent.location.href를 작성해서 부모 window의 url을 변경시켜 이동시킬 생각이었다. 하지만 iframe의 도메인과 부모 window의 도메인이 다르기 때문에 보안 문제로 에러가 발생. 이런 경우에 if..

1.실행컨텍스트 실행컨텍스트는 실행할 코드(대부분 함수 블록)에 제공할 환경 정보(변수, arguments 등)를 모아놓은 객체 실행컨텍스트를 구성하는 방법에는 전역 공간, eval()함수, 함수 가 있는데 전역공간은 자동으로 생성되는 거니까 제외하고 eval()은 보안 문제 등 여러 문제로 인해 사용하지 않으니까 제외하고 '함수'가 우리가 실행컨텍스트를 구성하는 방법이다. 실행컨텍스트는 VariableEnvironment, LexicalEnvironment 그리고 ThisBinding으로 이루어져 있는데 VariableEnvironment는 처음 생성할 때 생겼다가 대부분 LexicalEnvironment를 통해 코드를 진행하므로 LexicalEnvironment에 대해서 주로 공부하게 된다. Lexi..

얕은 복사에 대해 벌써 세 번 정도 글을 남깁니다.. 리덕스의 불변성이 궁금할 때, useState가 어떻게 상태를 변화시키는지 궁금할 때, 그리고 오늘 얕은 복사에 대해 대충 알고 넘어갔다가 결국 면접 자리에서 이상한 대답을 한 후에 제대로 공부하게 되었습니다. Javascript의 자료형은 크게 원시자료형과 참조자료형으로 나눌 수 있습니다.(검색 원시자료형, 참조자료형) 원시자료형은 고정된 저장공간을 사용하므로 변수에 데이터를 바로 저장할 수 있습니다. 반면 참조자료형은 저장공간이 유동적으로 변할 수 있다는 특징 때문에 heap이라는 메모리 공간에 저장하고 변수에는 "참조 주소 값"만 할당합니다.(heap?? 공부하기) 이 특징 때문에 얕은 복사는 참조 복사와 객체 복사라는 두 가지 특징? 경우?로 ..

캐시의 cs적인 부분으로 들어가면 시간적 지역성, 공간적 지역성, 파레토 법칙 등의 개념이 나오는데 오늘은 프론트엔드 개발자가 캐시를 어떻게 하면 조금 더 섬세하게 다룰 수 있는지 알아보고 그 와중에 클라우드프론트(CDN)의 역할은 무엇인지 알아보자. 캐시는 웹의 성능을 높이기 위해 사용된다. 단, 잘못 관리하면 원하는 시점에 캐시가 사라지지 않아서 업데이트된 파일을 보여주지 못할 수도 있고 필요 이상의 http요청이 발생하기도 한다. 그래서 캐시와 관련된 여러 기능을 알아두고 섬세하게 조절하는 것이 필요하다. 일단 각 개념과 기능을 알아보고 토스에서는 이를 어떻게 활용하는지 배움으로써 맛보기를 해보자 캐시가 없을 때 브라우저에서 http요청을 보내고 오리진 서버는 html, css, js, 이미지 등 ..

화살표함수는 단순히 함수를 간결하게 쓰기 위해 사용되지 않는다. 지금까지 화살표함수에 대해 자세히 모르고 사용했었는데 이번 기회에 조금 더 알아보자. 화살표 함수와 함수의 가장 큰 차이는 this바인딩의 차이 일반 함수의 경우 함수의 호출 방식에 따라 this에 바인딩할 객체가 동적으로 결정된다. 이 말을 이해하려면 this에 대해 먼저 배우고 돌아와야 한다. this 클로저에 대해 공부할때 실행컨텍스트 내부를 보면서 실행컨텍스트가 생성되면 this를 바인딩하는 것도 배웠었다. this바인딩이란 this가 어떤 특정 객체에 연결되는 것을 말한다. 근데 이 this가 일반함수, 메소드, 생성자 함수, call, apply 등을 통한 호출 방식에 따라 동적으로 결정된다.(매번 다르다) this는 기본적으로 ..