Front-end/TIL

Disney Plus 를 가볍게 클론코딩한 프로젝트로 Firebase를 통한 인증을 연습하는데 도움이 된 프로젝트였다. 사용자 인증을 통해 받아온 데이터를 로컬 스토리지에 저장하고 가져오도록 설정되어 있었는데 이번에 해당 데이터를 Redux를 이용해서 관리하도록 수정해보기로 했다. 이때 문제가 발생했다. Redux는 새로고침이 발생하면 저장된 state가 리셋되는 문제가 있었다. 로그인 정보를 관리하는 경우 state가 유지되어야할 필요성이 있었다. 이럴 때 redux-persist를 활용하면 문제를 해결할 수 있다. 사용 방법 1 )Install npm i redux-persist yarn add redux-persist TypeScript npm i redux-persist @types/redux-p..

작업하던 프로젝트에서 성능 최적화를 위한 코드를 작성하고 실제로 리랜더링되는 컴포넌트들을 살펴보는 중에 문득 Styled-Components로 작성된 컴포넌트들이 반복적으로 랜더링되는 것을 목격했습니다. 수치로 따지자면 랜더링 되는데 0.1 ms미만으로 매우 짧은 시간을 차지하고 있긴하지만 이러한 컴포넌트가 수백개 수천개 쌓인다면 문제가 될 것이 당연해보였습니다. 특히 현재 작업 중인 프로젝트에서는 스크립트를 계속해서 업데이트하며 화면에 표시하는 방식을 사용하고 있기 때문에 다음 문장이 실행될 때마다, 한글자 한글자 업데이트될 때마다 리랜더링이 발생하는 것이 너무나 못마땅했습니다. CSS in JS가 나쁘다는 것은 아니지만 JS가 적으면 웹사이트가 빨라지는 것은 당연한 일입니다. 자료를 조사하던 중 CS..

게임을 하다가 발견한 문제가 마침 CS 지식을 요구하는군요. Bitburner라는 게임인데 광기에 물든 개발자들이 즐기는 게임인 것 같습니다. 게임을 처음 시작하면 Sector-12라는 곳에서 게임을 시작하게 됩니다. 이곳 저곳 서버를 돌아다니면, contract 파일을 발견할 수 있는데 이 파일을 열어보면 다양한 문제가 등장합니다. 처음 발견한 문제가 아래의 해밍 코드를 활용한 문제입니다. 총 10번의 기회가 있다는군요. 해밍 코드를 이용해서 오류를 고치고 십진수 값을 구해달라고하네요. Hamming Codes: Encoded Binary to Integer You are attempting to solve a Coding Contract. You have 10 tries remaining, after..

문제 숫자를 넣었을 때, 3자리 수마다 콤마 ','가 찍히는 input을 구현하는 중에 느닷없는 도전과제가 발생했다. 일반적으로 사용하는 수는 16자리 이내이기 때문에 아래의 코드로도 충분히 동작하지만 아래 코드는 치명적인 문제가 하나 있었다. 입력된 숫자의 길이가 16을 넘어가면 값이 뭉개지는 문제가 있다. 지수형 값으로 변환되어 발생하는 것으로 예를 들어 “1234567890123456789” 라는 숫자를 입력한 경우 “1,234,567,890,123,457,000”로 출력된다. // 값이 변경되면 저장하는 함수, 천단위마다 ','를 입력함 const priceChangeHandler = function (event) { let inputPrice = event.target.value.replace(..