Pay it forward

입사 후 첫 프로젝트를 진행하면서 typescript에 익숙하지 않아서 JS로 개발했던 내용을 TS로 마이그레이션 하면서 그간의 행적(?)을 다시 한번 보며 리팩터링을 진행했다. 소수점 숫자를 받아 0.5점 단위로 내림하여 별점을 찍어주는 함수를 개선한 내용 리팩토링 전 starCount는 0.5 단위로 내림 처리한 숫자 2를 곱하고 내림처리를 하고 2로 다시 나눠주면 0.5점 단위로 내림 scoreStarPrint함수는 별 svg 컴포넌트를 리턴하는 함수, 별을 count만큼 리턴하기 위해 for문을 돌면서 1부터 count까지 배열에 넣고 그 배열을 map 돌면서 별을 반복해서 보여줌 근데 starCount가 정수가 아닐때는 emptyStarCount가 하나 적어야 하므로 If문으로 starCount..

이미지 미리보기를 구현할 때 URL.createObjectURL 메서드를 이용해서 blob URL을 만들고 그 주소를 src에 입력해서 보여준다. base64와 blob의 차이점은 여기서! https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-Base64-Blob-ArrayBuffer-File-%EB%8B%A4%EB%A3%A8%EA%B8%B0-%EC%A0%95%EB%A7%90-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%84%A4%EB%AA%85 [JS] 📚 Base64 / Blob / ArrayBuffer / File 다루기 - 이해하기 쉽게 설명 웹 개발을 진행하다 보면 이진 데이터를 다루어야 할 때를 간혹 ..

회사에서 현업을 하다 보니 필히 과거에 전임자가 작성했던 코드를 보게 되고 발생하는 에러가 있으면 과거 코드를 보고 그 의미를 파악해서 수정하기도 한다. 다행히 전에 코드를 작성하신 분이 아주 잘 작성해주셔서 그 의미를 파악하는데 크게 어렵지 않게 작업하고 있다. 이번에 토스 결제 에러가 발생하면서 그 원인을 찾아 해결하기 위해 코드를 조금 수정하면서 이해되지 않았던 부분을 등산을 통해 이해하게 되어 기록을 남겨본다. 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?? 공부하기) 이 특징 때문에 얕은 복사는 참조 복사와 객체 복사라는 두 가지 특징? 경우?로 ..