log4me

결국 선형대수는 포기하고 나머지 세과목만 풀고 왔다. 진짜 지지리도 공부 안했지만 무난히 보고 왔다. 확실히 시간이 지날 수록 학교 공부도 쉬워지는 느낌이다. 내가 아는 게 많아진 건지 아니면 꾸준히 요령만 느는 건지... 근데 컴퓨터과학개론 2지선다 실화? 그냥 시험이 쉽게 나온 거 같기도 하고. 아무튼 계속 시험 끝나고 생각하느라 집중 못해서 혼났다. 기말고사까지 끝나면 또 냅다 던져버리고 누워서 빈둥대는 게 국룰이긴 한데ㅋㅋㅋㅋ 그래도 이번엔 기필코! 곧 새해이지만 1월로 미루지 않고 지금부터 시작해서 새해 버프까지 받아 꾸준히 하고야 말겠다!! ☝️ 투두리스트 대외 활동 아티클(+발표) 스터디 지원 -> 11/28 결과 멘토링 신청 프리온보딩(12.4 ~ 12.17) 비즈니스 로직 완전 정복 wi..

1년만인가? 놀랍다! 시간이 벌써 이만큼이나 지난 게. 그리고 1년이나 지났는 데도 기어코, 꾸역꾸역 여기를 다시 들어와 글을 쓰고 있다는 게. 진짜 대박인 건 놀아도 논 게 아니고 쉬어도 쉰 게 아니던 지난 1년 동안 고민하던 문제들의 답을 방금 찾아버렸다는 거다. 이 얘기는 잠시 뒤로 밀어두고... 내가 그동안 어설프게 시간만 축내며 괴로워하던 이유를 정리해보려 한다. 1. 이직 후 다음 목표, 방향 상실 2. 개발자로서의 자신감, 자존감 상실(이직하면서 멘탈나간 게 아직도 회복이 안됨) 3. 내가 꿈꾸는 개발자로서의 모습과 진짜 나 사이의 괴리감에서 오는 딜레마 4. 그 와중에 이직한 회사에 대한 실망 뭐 글로 옮겨놓고보니 그다지 특별할 것도 없는 이유들인 것 같기도 한데, 하여튼 나는 이로 인해 ..

참조(이미지 포함): Do You Really Know These 6 TypeScript Utilities? 1. Pick Pick을 사용하면 주어진 타입에서 원하는 키들을 골라 새로운 타입을 만들 수 있다. interface User { id: number; firstName: string; lastName: string; age: number; phone: string; } type UserName = Pick; /* (위와 동일) interface UserName { firstName: string; lastName: string; } */ const userName: UserName = { firstName: 'Gildong', lastName: 'Hong' } 2. ..

참조(이미지 포함): When to useCallback & useMemo hooks ? 이 글은 [React] 똑똑하게 useCallback 사용하기에서 이어지는 글이다. 리액트의 성능 최적화에 대한 이야기와 useCallback 훅을 사용해 최적화 한 예시를 보고 싶다면, 위 글을 먼저 보고 오기를 추천한다! useMemo란 useMemo는 재사용된(memoized) 값을 반환하는 훅이다. 이 훅은 데이터의 많은 가공이 필요할 때 적합하다. 예를 들면, 복잡한 수학적 계산이 사용되는 경우나 계산하는데 오랜 시간이 걸리는 로직을 다루는 경우가 이에 해당된다. 먼저 이 함수는 컴포넌트의 첫 렌더 때 실행되고, 이후 리렌더가 될 때마다 캐시된 데이터를 반환해 보여준다. 매번 함수를 실행해서 내부 로직을 다..

이 글은 3 Ways To Create HTML Element In JavaScript을 참고하여 작성된 글입니다. 자바스크립트를 통해 아래와 같은 구조를 갖는 DOM을 만드는 방법 3가지를 알아보자. Click Me! 1. createElement() 사용하기 먼저 body에 app 요소를 추가한다. const app = document.createElement('div'); app.id = 'app'; document.body.appendChild(div); 그리고 app에 button 요소를 추가한다. const button = document.createElement('button'); button.id = 'button'; button.i..

이 글은 When to useCallback & useMemo hooks ? 의 번역글입니다. (이미지 포함) 개발자의 숙명, 어플리케이션 성능 최적화 성능 최적화는 개발자라면 누구든 어플리케이션 빌드 이후 마주하게 되는 흔한 이슈이다. 하지만 개발할 때는 완벽하게 동작했던 시스템이 배포 후 운영 시에 더 느려지는 느낌이 드는 건 단순한 착각일까? 개발 모드일 때 더 빠르게 느껴지는 이유 어플리케이션이 개발 모드일 때는 모든 파일들이 로컬 머신 즉, 내 컴퓨터를 통해 로컬 포트 3000번(React 기준)에 호스팅이 된다. 로컬에서 개발을 하기 때문에 인터넷 속도에 그다지 영향을 받지 않는 경우, 번들 파일들을 다운로드 받는 것은 굉장히 효율적이며 빠르게 동작한다. 하지만 운영 시에는 인터넷이 굉장히 느..

{} 을 타입으로 사용하지 않기 빈 객체에 {} 타입을 지정하면 @typescript-eslint/ban-types 경고가 발생한다. {} 타입은 null이 아닌 모든 값이라는 뜻이기 때문에 타입을 지정했음에도 컴파일 때 이 값이 객체인지 뭔지 알 방법이 없게 된다. 따라서 상황에 따라 구체적으로 타입을 지정해줄 필요가 있다. 정말로 빈 객체인 경우 Record 프로퍼티 값에 never를 지정함으로써 어떤 값도 담기지 않을 빈 객체임을 나타낸다. 객체인 경우 Record 프로퍼티 값에 unknown을 지정함으로써 모든 타입의 값이 할당될 수 있는 객체임을 명시해준다. 값인 경우 unknown 객체가 아닌 어떤 값이든 할당될 수 있다는 걸 의미한다.

react-youtube react-youtube는 YouTube IFrame Player API를 리액트 컴포넌트로서 구현한 패키지이다. 사용법은 너무나 간단하니 공식 문서를 참고하자. videoId가 바뀌어도 영상이 변경되지 않는다? 빠르게 유튜브 플레이어를 서비스에 포함시키고자 사용했는데, 몇 가지 이슈가 있었다. 그 중에 하나는 props로 내려받은 videoId에 따라 영상이 업데이트 되지 않는다는 거였다. 이해를 돕기 위해 공식 문서의 예제를 가져왔다. 여기서 우리는 videoId가 변경되면 Example 컴포넌트가 리렌더 되면서 영상이 변경될 것으로 예상할 수 있다. 하지만 영상이 변경되지 않았다! import YouTube from 'react-youtube'; functio..

클로저란 반환되는 함수가 반환시킨 함수의 변수 환경을 묶어서(closing) 기억하고 있는 개념을 말한다. 일반적인 경우 함수의 실행이 종료되어 콜 스택에서 제거되면 해당 함수 내부에 선언된 변수에 접근할 수 있는 방법이 없다. 하지만 반환된 함수는 자신을 반환시킨 함수가 콜 스택에서 제거되어도 여전히 그 스코프에 접근하여 변수를 참조할 수 있게 된다. 이는 반환된 함수는 자신이 호출될 때가 아니라 선언될 때의 환경(Lexical Environment)을 기억하고 클로저 스코프를 갖기 때문에 콜 스택에 반환시킨 함수가 없더라도 스코프 체인을 통해 변수를 참조할 수 있게 되는 것이다. 이해를 돕기 위한 간단한 예제이다. // inner 함수를 반환시키는 함수 function outer() { const o..

호이스팅이란 코드 실행 전에 변수나 함수의 선언문이 해당 스코프의 가장 위로 끌어올려지는 것을 말한다. 따라서 변수가 선언되기도 이전에 변수를 참조하여 사용할 수 있는 일이 가능하게 되지만, 이는 예상치 못한 에러를 발생할 수 있어 권장되는 방식이 아니다. 변수 호이스팅 원리 먼저 간단한 예를 보며 호이스팅이 되는 과정을 이해해보자. console.log(amIHoisted); // undefined var amIHoisted = true; console.log(amIHoisted); // true 논리적으로 생각했을 때 첫번째 줄에서 에러를 뿜어내야할 것 같지만 그렇지 않다. 왜냐하면 두번째 줄의 amIHoisted 변수 선언문이 가장 위로 호이스팅 되기 때문이다. 게다가 var 키워드로 선언된 변수는..