2022.11.07 판교 아지트 건물 1층에 카카오프렌즈샵이 오픈했다. 헤이(hey.k)랑 긴 웨이팅을 뚫고 입장해서 사진도 찍고 스티커 구매해서 춘식이 풍선도 받았다. 2022.11.09 빼빼로데이라고 회사에서 나눠주신 간식상자 그런데 빼빼로는 없고 쿠키가 들어있었다..? 2022.11.25 점심먹고 웨인(wayne.kai), 그레이엄(graham.coxon)이랑 테크원 지하 백야드라는 곳에 갔다. 올드페리 도넛(크림브륄레)이랑 30분 무료 퍼팅을 즐기고 나왔다. 골프가 취미인 웨인의 도움을 받아서 골프채를 처음 잡아봤는데 재미있었다. 그런데 난 재능은 없는 것 같다! 2022.12.01 한 달 동안 열심히 만든 배당금 분석 서비스가 오픈했다. 인기있는 배당 종목을 가상으로 포트폴리오에 추가해볼 수 있..

2022.10.05 첫출근날!! 면접때도 봤지만 아지트 1층에 카카오 캐릭터가 여기저기 있다. 귀여운거 좋아하는편이라 구경하는 재미가 있었다! 🔗 카카오페이의 새로운 보금자리 재택과 출근을 섞어서 하고있는지라 우선 출근하신 팀원분들과 간단하게 인사하고 장비를 지급받았다. 우디(woody.island)가 초면에 인사하면서 수줍게 하리보 젤리를 준게 기억이 난다. ㅋㅋㅋ 점심은 다같이 춘식도락에서 먹었다. 판교 물가를 생각하면 나름 괜찮은 편이다. 2022.10.26 귀여워서 찍은 할로윈 춘식도락 여기 직원분들 기념일에 진심이신 것 같다. 2022.10.31 우리 팀원분들이 준비하신 조각투자 전시가 1층에서 열렸다. 점심 먹으러 내려가는 길에 다같이 구경했다. 내가 참여한 프로젝트는 아니지만 다들 고생하시는..

이벤트 등록 TEST var button = document.querySelector('button'); button.addEventListener('click', foo); function foo(event) { console.log('event'); } 위와 같이 addEventListener() 메소드를 통해 화면에 동적인 기능을 추가할 수 있다. 이벤트 버블링 (Event Bubbling) 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때, 상위 요소들로 전달되는 특성을 의미한다. * 상위 화면 요소 : HTML 트리 구조상 한 단계 위에 있는 요소. var divs = document.querySelectorAll('div'); divs.forEach(function(div) { div...

클로저(Closure) 클로저는 '포섭'이란 뜻으로, 독립적인(자유) 변수를 가리키는 함수이며 클로저 안에 정의된 함수는 만들어진 환경을 기억한다. 클로저 = 함수 + 함수를 둘러싼 환경(Lexical Environment) 예제 1 function outerFunc() { let outerVar = "outer"; function innerFunc() { console.log(outerVar); } return innerFunc; } var test = outerFunc(); // test 변수에 innerFunc 함수를 리턴함 // 유효범위의 어휘적 환경을 유지 test(); //리턴된 innerFunc 함수를 실행(outerVar 변수에 접근) test는 outerFunc이 실행될 때 생성된 inn..

호이스팅(Hoisting) 호이스팅은 '끌어올리기' 라는 뜻으로, 함수 또는 변수가 끌어올려져 최상단에 선언되는 현상을 말한다. function foo() { console.log('foo'); } foo(); // foo foo(); // foo function foo() { console.log('foo'); } Java와 다르게 함수 선언 자체를 나중에 해줘도 함수를 끌어올려서(Hoist) 갖고온다. 호이스팅은 JavaScript 엔진이 가지고 있는 특징이다. 함수표현식과 같이 에러가 발생하는 예외가 있기 때문에 신중히 사용해야 한다. 호이스팅이 발생하는 코드는 이해하기 어려워지고 > 유지보수가 힘들어지기 때문에 > 호이스팅 현상은 방지하는 것이 좋다. 호이스팅 적용 대상 호이스팅은 var 변수 선..

스코프(Scope) 스코프는 '범위'라는 뜻으로, JavaScript에서는 변수에 접근할 수 있는 범위를 뜻한다. 스코프에는 전역 스코프(Globap Scope)와 지역 스코프(Local Scope)가 있다. 전역 스코프(Global Scope) 변수가 함수 바깥이나 중괄호({}) 바깥인 전역에 선언되었다면 전역 스코프에 정의된 것이다. 전역 스코프는 어느 곳에서든지 해당 변수에 접근할 수 있다. 지역 스코프(Local Scope) 전역 스코프와 반대로, 변수가 함수 안이나 중괄호({}) 안에 선언된 경우 지역 스코프에 정의된 것이다. 지역 스코프는 해당 지역에서만 접근할 수 있다. 해당 지역을 벗어난 바깥에서는 접근이 불가능하다. JavaScript에는 블록 스코프, 함수 스코프 두 개의 지역 변수가 ..

2022.08.21 오픈소스 관련해서 공식적으로 액션을 취한것도 처음이고, GitHub에 Discussion을 올려본 것도 처음이다. 답변이 안달리까봐 전전긍긍했는데 답변이 달린 걸 오늘 확인해서 기쁜마음에 글을 적어본다. 😀 원티드 프리온보딩 챌린지에 참여해서 React Query로 상태 관리하는 Todo 앱을 만들고 있었다. 따로 정해진 UI가 없어서 내 마음대로 만들면 됐는데, 로그인과 투두 모두 Form 태그를 사용하면 적합할 것 같았다. 처음에는 내가 직접 이벤트 핸들러를 달아서 만들었는데, 다른 분들 repo를 살펴보니 대부분이 react-hook-form 이라는 오픈소스를 사용했다. 공식 사이트와 문서를 읽어보니 내가 만든 것 보다 좀 더 나이스한 코드를 구사할 수 있을 것 같아서, 나도 사..

2022.07.25 노트북 쓸 일이 생겨서 새벽에 작업하다가 자려고 덮었다. 그런데 묘하게 뚜껑(덮개)가 꽉 안닫히고 들떴다. 작업하느라 맥북에 열이 엄청 나고 있었고, 선풍기로 식혀도 소용이 없었다. 평소에도 팬에서 비행기 착륙하는 소리내면서 엄청 뜨겁게 달궈졌었어서 일단 그대로 두고 잠들었다. 다음날 아침에 번뜩 눈이 뜨였는데 순간 소름이 끼쳐가지고 맥북 들뜸 관련해서 이것저것 검색해봤다. 배터리 스웰링 현상이라는 제품 결함이며, 배터리가 터져서 내부에 침수되기전에 얼른 교체하는것이 좋다는 내용을 찾을 수 있었다. 덮개 확인 및 기기 수평 확인 구체적인 증상으로는 뚜껑이 제대로 맞물려서 닫히지 않으며, 네 개의 귀퉁이중 한 곳을 눌렀을 때 수평이 맞지 않는 증상이 있다. 알고나서 보니 확실히 트랙패드..

2022.06.02 소울메이트랑 제주도에 가서 뭘 할까 고민하다가 노형동에 넥슨 컴퓨터 박물관이라는 곳이 있어서 방문해봤다. 입장료는 성인 기준 8,000원을 지불했다. 공식 사이트에 상세한 금액과 할인정보가 나와있으니 참고하면 될 것 같다. 배찌가 날 배웅해줬다~ 같이 간 친구의 지인이 네오플에 재직중이라 인사할 겸 넥슨 컴퓨터 박물관에 방문했다. 중국에서 던전앤파이터로 엄청난 인기를 끌고있는 네오플은 박물관 바로 옆에 있었다. 만난 김에 지인분이 음료 사주셔서 나는 왼쪽의 녹차 라떼를 마셨다. 아니 제주도란 섬에 어떻게 이런 귀하신 물건들이..?? 기대를 안하고 가벼운 마음으로 왔는데, 전공책에서나 보던 옛날 물건들을 잔뜩 전시해놓아서 깜짝 놀랐다.. 특히 이 애플 컴퓨터 초기모델은 우측 shift ..

원티드 프리온보딩 프론트엔드 챌린지 (8월)에 참여하면서 프로젝트에 TypeScript를 적용했다. type 지정을 해주니 코드량이 점점 늘어났고 타입 지정을 도대체 어디까지 해야하는지 의문이 들었었다.. before) 원래 내가 작성했던 코드인데 signin, signup 메소드 안에 response를 보면 const response: AxiosResponse = axios.post(); 이렇게 좌측에도 response 변수의 type 지정, 우측에 post 에도 Generic에 type 지정을 해줬었다. 이것도 처음에는 어떻게 썼었냐면... const response: AxiosResponse = axios.post(); 이렇게 AxiosResponse 안에 Generic type까지 지정해줬었다 ㅋ..