전체 글 86

[JS] 전역 객체 globalThis - global, window, self...

1. 알게 된 점 대규모 프로젝트에서 의사를 결정하는 과정 ECMAscript의 globalThis의 존재와 상세사항 2. 들어가며 JS 의 전역 This는 런타임에 따라 다른 객체를 가리킨다. Node런타임에서는 this == global이고, 웹 브라우저 환경에서 This === window 를 가리킨다. SPA(Vue 혹은 Node)에서 this 는 현재의 Vue 또는 React 컴포넌트에 자동으로 bind 된다. Framework 를 활용해 개발 하다 보면 이 정도의 지식만으로도 충분했다. 지난 시간 this 와 bind() 함수, Arrow function 에 대해 공부하다 globalThis 라는 스펙의 존재를 알게 되었다. globalThis는 JS의 모든 런타임에서 ‘전역 객체’에 접근할 ..

TIL/Frontend 2024.01.20

[JS] Switch-Case문 내부의 Scope, ESLint

1. 오늘 배운 점 Switch-Case 문의 Case내부는 별도의 scope를 생성하지 않는다. 따라서 Case문 내부에서 생성된 변수들이 Case문 외부에 영향을 끼칠 수 있다. Case문 내부에서 {}로 블록을 생성해 위의 상황을 막을 수 있다. 2. 문제 상황 Switch - Case문 내부에서 변수를 설정했다. 아래와 같은 에러가 발생했다. ESLint: Unexpected lexical declaration in case block.(no-case-declarations) 3. 기존에 알고있던 내용 Switch - Case문의 사용 지양 ‘클린 코드’ 에 따라 Switch case문을 지양했다. 하나의 함수가 한 가지 이상의 동작을 할 가능성이 매우 높아지기 때문이다. 또한 switch-cas..

TIL/Frontend 2024.01.17

2023년 회고

지난 5월, 입사 후의 삶이 단조로워질 것을 걱정했었다. 다행스럽게도 삶은 여전히 변화무쌍하고 즐거웠다. 1. 운동 1) 파워리프팅 작년 12월, 첫 파워리프팅 대회에 출전했다. 첫 번째 대회부터 다사다난했다. 염분/수분 조절도(Gut cut, Water cut) 해보고, 실격과 부상의 위기도 겪었고, 메달까지 땄다. 가장 자신있는 종목이었던 '데드리프트' 웜업을 하다 온 몸에서 경련이 났다. 아쉬웠다. 그래도 부상 없이 대회 완주할 수 있었던 점이 기쁘다. 다음 대회에는 무슨 일이 일어나더라도 당황하지 않을 자신이 있다. 2) 클라이밍 꾸준히 성장했다. 특히나 파워리프팅을 시작 이후 종합적인 등반 능력이 개선되었다. 전신의 근육이 골고루 발달해 부상 예방과 퍼포먼스 상승에 도움이 되었다. 3) 스쿠버 ..

회고 2024.01.15

[Javascript] This, 화살표 함수, 그리고 ES6 이전 (23.07)

나는 FE 개발 입문을 SPA 로 시작했다. 너무나 익숙하게 Arrow function과 this의 스펙을 활용하고 있다. 어느 날 갑자기 ES6 이전에는 비슷한 기능을 어떻게 구현했을지 궁금해졌다. 1. this: 알고있던 내용 호출한 대상을 가리킨다. 기본적으로는 전역 객체(Node 환경의 global, 웹 브라우저의 window) 를 가리킨다. 클래스나 메서드 등에서 호출될 시 ‘호출한’ 객체. this는 함수 호출 시 자동으로 bind됨. (ES6) this의 자동 bind 원하지 않을 시 Arrow function(화살표 함수) 를 사용할 것. 2. this: 궁금했던 내용 Arrow function(화살표 함수) 는 ES6 스펙이다. ES6는 ECMAscrpit 2015년 스펙이다. 2015년..

카테고리 없음 2024.01.12

[Server]gRPC와 Proto, Spring에서 활용

1. 어쩌다 쓰게 되었는가? 타 팀원이 개발한 gRPC 를 내가 개발중인 WAS에서 사용하게 되었다. gRPC 개발중인 Git repo와 내가 개발중인 Git repo는 별도로 분리되어 있다. 내가 개발중인 repo에서도 해당 gRPC를 사용하고 업데이트하기 위해 해당 gRPC를 proto 파일 형태로 관리하게 되었다. 2. 사용법 proto 파일을 적절한 위치에 배치 proto 파일 컴파일(with protoc) 컴파일된 gRPC를 서버 내에 적절히 import하여 활용 3. 실제 사용 환경: Spring Boot 기반의 서버. proto 파일의 개념과 사용법을 확인했다. pom.xml 파일을 확인함. 이미 WAS를 build할 때 Proto 파일을 컴파일하여 src 내의 적절한 위치에 컴파일하는 옵션..

TIL/Backend 2024.01.09

[CSS] 의사 클래스 hover, focus, active 차이점(23.12.22)

1. 찾아보게 된 이유 구현할 내용: 특정 객체에 mouse hover시 Bootstrap tooltip을 표시하는 기능 구현한 내용: 아래의 코드와 같이 구현. 버그: 클릭한 이후에도 tooltip 이 사라지지 않음. 2. 해결 tooltip의 옵션에 ‘hover’ 추가. 3. 배웠던 내용 의사 클래스들의 구체적인 사양 focus: 특정 html 요소가 focus 됨. 보통 요소가 클릭 or 탭 되었을 때. active: 특정 html 요소가 활성화 됨. 보통 사용자가 요소를 클릭한 이후 - 클릭 버튼 떼기 전까지. 4. 레퍼런스 의사 클래스: https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes :focus : https://developer.m..

TIL/Frontend 2023.12.26

5월 회고

I knew if I stayed around long enough, something like this would happen. 내 언젠가 이 꼴 날줄 알았다. 정규직으로 취직했다. 언젠가는 이렇게 될 줄 알았다. 이전보다 평탄하고 안정적으로 살게 될 것이다. 아쉬움이 크다. 그렇지만 반복되는 일상과 평온함 속에서도 또 다른 재미가 있으리라 믿는다. 1. 파워리프팅 1) PR측정 처음으로 세자릿수의 무게(102.5kg, 데드리프트)를 들었다. 야호! 2) 단기목표 / 중기 목표 / 장기 목표 (1) 단기 목표 [X] 세자릿수 무게 들기. [ ] 몸무게 넘는 중량 벤치프레스 하기 (2) 중기 목표 [ ] 3대 중량 몸무게 5배 이상 들기 [ ] 스쿼트 100kg 이상 들기 (3) 장기 목표 [ ] 전국 ..

4월 회고

1. 생산적인 일들 1) 구직 완료! 다음 달부터 출근합니다. 2. 내 이야기 1) 파워리프팅 (1) 입문 - 전신 협응력 및 스트렝스 전신 협응력과 스트렝스 상승을 위해 3대 운동을 배우려고 했다. 독학의 한계는 분명했다. 마침 멀지 않은 거리에 파워리프팅 짐이 있었다. 상담 후 PT에 등록했다. (2) 좋은 멘토 좋은 코치님을 만나 아주 잘 배우고 있다. 전문 지식 기반으로 체계적으로 알려주신다. 지금 충실히 배워두면 나중에 혼자서도 자세를 교정해가며 꾸준히 운동할 수 있을 것 같다. (3) 인체의 신비 인간의 몸은 경이롭다. 신체가 얼마나 복잡한지, 하나의 동작에 얼마나 많은 근육들이 다양하게 협응하는지를 알면 알수록 신기하다. 그리고 사람들은 이런 복잡한 동작들을 의식하지 않고 ‘자연스럽게’ 수행..

3월 회고 - 움직임의 재미

1. 생산적인 일들 1) 구직 (1) 전업 취준생 취준 기간의 우울함에 대해서는 익히 들었다. 기우였다. 아마추어 취준생 시절보다 더 많은 회사에 지원할 수 있다. 한 두개의 합불에 일희일비 하지 않을 수 있어 좋다. (2) 이력서 세 개의 반기동안 이력서를 썼다. 그 동안 1) 개발자로서 성장했고 2) 구체적인 성장 과정을 서술할 수 있게 되었고 3) 객관적인 증거도 확보했다. 경험과 문구들이 탬플릿화되어 보다 빠르고 편하게 이력서를 작성할 수 있다. (3) 코테 준비 코테 중 웹사이트 버그로 코드를 통째로 날렸다. 다행히도 빠르게 코드 복구 후 제출했다. 하지만 해당 웹사이트 환경에는 꼭 익숙해져야겠다 생각했다. 쉬운 문제를 많이 풀어보며 감을 찾는 중이다. (4) 면접 ‘왜 컴퓨터공학을 전공하지 않..