隣のプログラマー君

어디서 봤는데 TypeScript가 Front-End 개발자들이 사용하고 싶은 언어 1위라고 하더라. 근데 오히려 학원에서 한창 배울 당시에 코로나 걸려서 javaScript 스킵하다시피하고 회사와서 바로 TypeScript 쓰라길래 TypeScript쓴 내 입장에선 공부할 것도 없이 걍 익숙해져버린 언어라 제대로 공부해볼 생각조차도 안했던 것 같다. JavaScript도 그냥 코테 공부하려니 선택지가 그나마 열심히 써봤던 언어가 그것 뿐이라 골랐던거구.. 그러다보니 자연스레 공부하게 되었다는 느낌이 되어버렸다. 서론은 이제 끊고, TypeScript에 대해서 이야기를 해보자. 1. 타입스크립트란? TypeScript는 JavaScript에 Type을 부여한 확장판 같은 것이다. 그 콘솔겜 하다보면 확장..

우리가 일반적인 함수의 형태로 컴포넌트에 함수를 선언하게 되면 해당 컴포넌트가 렌더링 될때 (lifeCycle에 따라서) 일반적인 함수로 선언된 모든 함수가 새롭게 렌더링이 된다. 이는 사실상 쓸데 없는 메모리를 잡아먹는 행위이고, 이런 문제를 해결하기 위한 방법으로 React에서는 결과값 하나를 리턴해야하는 것의 경우에는 useMemo, 특정한 동작자체를 리턴해야한다면 useCallBack를 사용해 그 메모리 소모를 줄이는 방법이 있다. 대부분 구글링을 해봐도 콜백을 설명하는게 명확하지가 않고 진짜 애매모호하고 이해가 잘 안돼서 상당히 어려움을 겪었는데(이런 이유로 그냥 콜백 안썼다.) 콜백이라는 개념 자체를 제대로 이해하고, lifecycle에 대한 이해만 명확하다면 제대로 사용할 수 있게 된다. M..

오늘은 1급 객체에 대한 이야길 해볼건데, 이게 왜 중요하냐면 대부분 이 내용 때문에 현재 우리가 사용하고 있는 모든 코드들이 구현가능하기 때문이다. 결국 이 내용을 이해하면 지금 우리가 이렇게 쓴다라고 거의 대충 감으로, 혹은 애매모호하게 이해하고 있던 부분들이 퍼즐이 끼워맞춰지는 것처럼 줄줄이 이해가 될거기 때문에, 아주 도움이 될 거라고 생각한다. 1. 1급 객체란? 정의 : 다른 객체들에 일반적으로 적용가능한 연산을 모두 지원하는 객체를 가리킨다. -출처: 위키 백과 1급 객체가 되기 위한 조건. - 변수에 할당할 수 있다. - 다른 함수를 인자로 전달 받는다. - 다른 함수의 결과로서 리턴될 수 있다. 위의 이야기들을 모두 종합하면, 결국 데이터를 다루듯이 동일하게 다룰 수 있는 것들 그러니까,..

오랜만에 코딩테스트 글을 쓰는데 내가 푼 풀이가 맞는것 같은데 도저히 안풀려서 결국 찾아왔다. 답을 보니까 내가 한거에서 반복문 시작지점을 +1 해주는 식으로 풀었던데.. 내가 생각을 잘못하고 있었던건가? 난 중복되는 배열까지 다 찾은 다음에 중복제거에 고생을 했는데 정답은 애초에 지나간 번호는 아예 돌아보지도 않았음... 문제 설명 한국중학교에 다니는 학생들은 각자 정수 번호를 갖고 있습니다. 이 학교 학생 3명의 정수 번호를 더했을 때 0이 되면 3명의 학생은 삼총사라고 합니다. 예를 들어, 5명의 학생이 있고, 각각의 정수 번호가 순서대로 -2, 3, 0, 2, -5일 때, 첫 번째, 세 번째, 네 번째 학생의 정수 번호를 더하면 0이므로 세 학생은 삼총사입니다. 또한, 두 번째, 네 번째, 다섯 ..

저번 React Query에 이어서 Mobx를 가져와봤다. 솔직히 상태관리 도구 하나만 해도 써야할 얘기가 수두룩 빽빽한데 굳이 여러 개를 다 써두는 이유는, 다 써봐서 그렇다. 학원 수료하고 개발자가 커리어 시작하면 React할거라고 생각도 안했는데, 대뜸 첫회사에서 우리는 MSA로 React 개발한다. 이렇게 말을 할 줄은 나도 몰랐지. 거기다 하필 처음한 프로젝트가 Redux로 만들어진 Legacy 추가기능 개발, 그 다음 프로젝트가 React Query로 전환하는 첫 마루타일줄은 난 몰랐지. 그래서 진짜 초단기로 상태관리 툴 3개를 써버렸는데, 솔직히 하나만 주구장창 써온 나보다 더 경력 있으신 분들 생각하면 난 개똥이겠지만 그래도 괜찮다. 다양하게 얕게 아는거도 일단 당장 내가 할 수 있는 최선..

JS 관련 밈을 보면 JS가 어처구니 없는 결과 값을 보여주는 순간들이 있어서 웃긴 것들이 꽤 있는데, 그 중에 1.1+1.2 == 2.3 이 false라는 것도 심심찮게 보이곤 한다. 그걸 보다가 왜 저런 결과가 나오는건지 궁금해져서 조금 찾아보게 됐는데, 이는 비단 JS 만의 문제가 아니라 float, double 형을 쓰는 모든 언어들이 같은 문제를 겪는다고 볼 수 있다. 오늘은 이 이야기를 해보고자 한다. 컴퓨터는 기본적으로 이진법 즉, 0과 1로 모든 말을 알아듣는다. 당연히 실수를 저장할 때도 10진수로 표현된 수를 이진법으로 변환해서 저장을 할텐데, 이 때 소수점 아래 내용을 저장하는 방식이 여러가지로 쓰인다. 여기서는 일단 float, double형에서 사용하게 되는 부동소수점 방식을 다룰..

기본적인 상태관리에 이어서 상태관리 라이브러리에 대해서 이야기를 시작해보고자 한다. 상태관리 라이브러리라고 하면 React Query를 제외하고라도 상당히 종류가 많은데, 굳이 React Query로 상태관리 라이브러리에 대한 이야기를 시작하는 이유는 그냥 내가 가장 최근에 썼기 때문이다. 나는 다른 분들이 써둔 글처럼 공식 Doc에 근거하기 보다는 일단 내가 이해한 방식대로 정리를 할 예정인데 아마 무조건 틀릴거긴하다. 그래도 일단 기록은 남겨야지 이런 삽질을 했다~ 라는 느낌으로 다가. 1. React Query란? 캐싱 기반의 상태관리를 해주는 라이브러리다. (캐싱 이해 잘해야한다.) useQuery라는 hook을 통해서 querykey라는 고유값의 이름을 가진 글로벌 상태를 만들어두고, query..

코테 문제 풀다가 parseInt()의 제대로 된 사용법을 알게 돼서 작성한다. 일반적으로 parseInt()는 Number()와 같이 string 타입을 number 타입으로 변환시키는데 주로 사용하게 되는데, 이게 원래 용도가 진수 변환으로 쓰인다는 건 알았지만, 두번째 파라미터가 있다는 사실을 몰랐다. 그냥 당연히 10진법으로 가는건줄.. parseInt의 두번째로는 첫번째 파라미터로 넣은 인자의 진수를 써줄 수 있는데,parseInt(010101010101, 2) 이렇게 써주면 2진수를 10진수로 바꿔준다는 의미다. 문법 공부 착실히 좀 해야겠다. 다 안다고 생각했는데 생각보다 모름..

저번에도 똑같은 게시물을 쓴것 같은데 그때는 솔직히 대충 보고 넘어갔던거라, 이번에 제대로 이해하고 정리해두려고 글을 남긴다. 사실 제일 간단한 방법은 최대공약수를 구하려면 그냥 1부터 주어진 수 중 작은 수까지 있는 애들을 싹 다 나눠보고 나머지가 0인 애들 추린 다음에 그중 제일 큰거 꺼내면 된다. 근데 이렇게 하면 코드도 길어지고, 오류가 꽤 생긴다. 1은 무조건 나눠떨어지니 1이 계속 추가 된다던가 하는 문제가 생기는데, 그거 극복하려면 유클리드 호제법이라고 불리는걸로 계산 하는게 속편하다. 유클리드 호제법 작은 수를 큰 수로 나눠서 나머지가 0이 아니면 그 나머지로 큰 수를 나눈다. 이 과정을 반복하다가 나머지가 0이 되었을 때 큰 수가 최대공약수다. 말로 써두니까 상당히 복잡한 느낌이 드는데 ..

내가 너무 어렵게 생각하나보다. 그냥 심플하게 풀수 있는 문제도 괜히 꼬다가 문제 못품. 과하게 생각하지 말아야겠다... 문제 설명 머쓱이는 태어난 지 6개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음을 최대 한 번씩 사용해 조합한(이어 붙인) 발음밖에 하지 못합니다. 문자열 배열 babbling이 매개변수로 주어질 때, 머쓱이의 조카가 발음할 수 있는 단어의 개수를 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ babbling의 길이 ≤ 100 1 ≤ babbling[i]의 길이 ≤ 15 babbling의 각 문자열에서 "aya", "ye", "woo", "ma"는 각각 최대 한 번씩만 등장합니다. 즉, 각 문자열의 가능..