개발자 도담씨

최근 이직준비를 하며 코테를 풀어나가고 있는 도중, javascript에서 this의 개념에 대해 한번 더 생각하게 해준 문제를 하나 다뤄보려고 합니다. 해당 문제는 leetcode의 javscript - medium 레벨의 2693. Call Function with Custom Context 문제입니다. (아직 무료 버전을 사용중이라 디버깅을 node환경에서 돌려보고 있는점 참고부탁드립니다.).../** * @param {Object} context * @param {Array} args * @return {null|boolean|number|string|Array|Object} */Function.prototype.callPolyfill = function(context, ...args) { ..

주말에 홈페이지 접속이 안된다며 계속해서 울렸던 알람, 우선은 당장 운영이 되어야 했기에 노트북을 챙겨다녀야 했고 모니터링하며 주말을 보냈는데요😭 그리고 다음날 출근하여 원인을 분석하기 위해 확인중일때 또 같은 현상이 발생하기 시작했습니다....문제 발생 초기 당시...주말에 해당 문제가 발생했을 당시 AWS에 접속하여 인스턴스와 데이터베이스를 확인해보았는데 데이터베이스쪽 세션이 가득차있는 상태로 있는 것을 확인했습니다. 당시 지표를 잠깐 참고하자면 커넥션이 확 오른 상태였는데요.RDS의 성능 개선 도우미쪽을 확인해보았는데 이벤트 조회 쿼리의 호출이 많이 보였고 이벤트 오픈 기간이다 보니 접속이 몰리면서 문제가 되었으려나 추측을 했었습니다. 따라서 우선 일시적으로 DB성능을 올려둔 상태로 주말을 모니터..

여태 쉬는 시간없이 회사를 다닌지 5년 8개월만에 퇴사를 하고 쉬는 시간이 생겼습니다 :)바로 구직 활동을 할까 고민을 하다 한번 끝까지 쉬어보라는 회사분의 말씀을 듣고 쉼, 을 선택하기로 했어요.쉬는 것도 연습이 필요한지.. 일주일정도 집에 있는 중인데 잘(?) 쉬어보자는 다짐이 무색하게 쉬는것도 어려운 것 같습니다.(물론 중간중간 자꾸 찾는 연락이 계속 되고 있지만...😅)성격상 가만히 시간만 흘러가는게 너무 아까워서 결국 이력서 정리를 해두고 멘토링도 신청해보고  코딩 테스트 문제도 한번씩 푸는데 나름 재미있습니다! 소프트 스킬이라는 개발자 관련 책과 심심풀이용 62가지 심리실험이라는 책도 읽어보고 있는데 여태 책을 안읽은게 후회가 되기도 합니다.날씨가 조금 시원해지면 해외를 조금 돌아다니며 시야..

참고 React 문서: https://ko.legacy.reactjs.org/docs/lists-and-keys.html 리액트를 사용하다보면 반복문을 사용할때 자식 컴포넌트에 대해 key값을 지정해달라는 console log를 본적이 많습니다.리액트 문서에서 적혀있듯 순서가 바뀔 수 있는 경우 key값으로 index값을 사용하지 않는 것을 권장하고 있습니다. 리액트는 가상의 DOM을 두는데 실제 DOM과 가상의 DOM을 순회하다차이가 있다면 변화를 적용하고 있습니다.  first second first second third 위의 코드를 보면 하단에 자식 끝에 엘리먼트를 추가할 경우 first와 second는 변화하지 않고끝에 third만 추가해주면 됩니다.그런데 만약 가장 상단에 추가하게 될..

최근 새 프로젝트의 시작과 함께 디자이너와 협업을 시작했는데익숙하지 않다보니 아쉬운 부분이 생겨 정리해두려고한다. 디자인을 보고 퍼블리싱을 진행하는 과정에서 묘하게 정리되지 않은 부분들이 많았는데,내가 잘못하고 있는 부분인가 하면서 억지로 맞춰 넣었더니 조금씩 탈이 나기 시작했다. 초반에 공통적인 부분에서 디자이너와 개발자간의 대화가 필요해보이고,이번엔 특히 디자인에서 line-height가 뒤죽박죽인 부분때문에 문제가 많이 발생했다.추후엔 line-height도 확인하는게 좋을 것 같다. +) line-height문제가 아니라 디자이너분이 height를 직접 수정했던것...😭

나의 개발 환경은 Next.js, Typescript를 사용중이다. 데이터베이스를 이용하기 위해 Prisma를 사용하기로 했고 필자는 우선 sqlite를 이용할 예정이다. 1. 프로젝트에 Primsa 설치하기 yarn add prisma 또는 npm i prisma 2. prisma init npx prisma init 초기화시 /prisma/schema.prisma가 자동으로 생성 되고, 우리가 사용할 데이터 베이스에 접근하기 위해 .env 파일에 DATABASE_URL 값을 저장해주어야한다. ⭐️ 이때 .env파일은 꼭 gitignore에 추가해주기! 3. 사용할 데이터베이스 종류와 URL 설정 나는 sqlite를 이용하여 로컬파일로 관리하기를 원해 다음과 같이 수정해주었다. ## .env DATAB..

ES6의 reduce함수와 태그 함수 그리고 정규식을 이용해서 숫자 포맷을 깔끔하게 적용하는 멋진 코드를 하나 기록해두려 한다. function tag (str, ...arg) { return arg.reduce((p, c, i) => { return p + str[i] + String(c).replace(/\d{1,3}(?=(\d{3})+(?!\d))/g) }); } console.log(tag `사과는 ${3000}원 이고, 포도는 ${5000}원 입니다.`);

어우 올게 왔다 실행 컨텍스트.. 여기서 출발하는 많은 개념들이 초면은 아니지만 아직도 만날때마다 매번 정의를 딱 내리기 어려운것 같다. 간단하게 메모형으로 남겨놓으려고한다. Excution Context :: 함수를 실행할때 필요한 환경 정보를 담은 객체 :: 전역공간, 함수, module, eval 이 Excution Context의 내부를 들여다보면 아래와 같이 생겼다. VariableEnviroment enviromentRecord outerEnviromentReference LexicalEnviroment: 실행 컨텍스트를 구성하는 환경정보들을 모아 사전처럼 구성한 객체 enviromentRecord: 현재 문맥의 식별자 정보 - 호이스팅 outerEnviromentReference: 외부 식별..

최근 기초의 심화 과정이라고 해야할까... 읽고 까먹고 읽고 까먹고 했던 부분을 상기시키는 시간을 가지고 있다. 기초가 제일 어려워 🫨 Javascript의 데이터 타입에 대해 정리하려고 한다. 단순히 string, number, array 하나씩 이건 이겁니다 하는것은 아니고 크게 Primitive Type(원시타입)과 Reference Type(참조타입)에 대해 보려고한다. Primitive Type :: Null, Undefined, Number, String, Boolean, Symbol, BigInt ... Reference Type :: Object, Array, Function ... Primitive Type의 변수는 크기가고정되어 있기때문에 스택 메모리에 저장되게 된다. 아래와 같은 코드..

:: 설치 환경 yarn berry next.js vscode typescript 강의들으면서 따라하는데 강의는 npm을 사용했고 나는 이제 yarn berry에 익숙해져 보려고 혼자 yarn berry로 셋팅했다. 그런데 자동으로 import가 안된다. ( 필자는 vscode 사용중, 패키지 찾는거 조차 못함 바보 쨔석..! ) @type/react를 설치해봐라 tsconfig.json 파일을 수정해보라는 답변들은 다 소용없었다!! 확인해보니 기존 node_modules에서 패키지를 읽어오는 방식과 달리 yarn berry에서는 PnP 방식에 zip 아카이브를 사용하고 있어서 vscode가 못 불러오는 듯 하다. 그래서 별도의 확장 프로그램 설치 및 에디터 설정이 필요했다. vscode extensio..