TIL 30

[BE] dependency 확인, 오픈소스 라이선스 확인 with Maven

프로젝트에서 사용되는 라이브러리들의 라이선스를 확인하는 업무를 받았다. WAS는 Spring Boot로 구성되었으며, 패키지 관리자는 Gradle 을 사용한다. 라이브러리의 목록은 pom.xml에서 확인할 수 있다. IntelliJ를 사용하는 경우, 우측 'Maven' 탭에서도 편하게 확인할 수 있다. Maven을 사용하는 경우, Maven repository 에서 각 라이브러리의 라이센스 정보 등을 확인할 수 있다. https://mvnrepository.com/ swaggar ui를 예시로 찾았다. 아래 버전에서 현재 사용중인 버전을 클릭해 상세 정보를 확인할 수 있다.

TIL/Backend 2024.02.12

[FE] 사용 라이브러리의 버전별 라이선스 확인하기 with NPM

package.json 확인 NPM 소개 NPM 실습 버전별 라이센스 확인 프로젝트에서 사용중인 패키지들의 라이선스를 조사하는 업무를 맡았다. 현재 프로젝트에서 사용되는 라이브러리의 목록은 package.json에서 확인할 수 있다. FE에서 사용하는 패키지들의 경우, NPM.js 에서 패키지들의 라이선스 정보를 쉽게 확인할 수 있다. https://www.npmjs.com/ npm | Home Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development e..

TIL/기타 2024.02.08

[Vue2를 기리며] EOL, Deprecated 그리고…

Vue2가 마침내 Deprecated되었다. 개발 입문 이후로 꾸준히 Vue2를 사용했었기에 아쉬움이 크다. 관련 게시물들을 찾아보다 herodevs라는 서비스를 알게 되었다. 보안성 패치 뿐만 아니라 Vue2 주요 라이브러리에 대한 호환성도 유지시켜준다고 한다. 출처: Vue 2 NES Vue 2 - Never-Ending Support | HeroDevs After December 31, 2023, Vue.js v2 will be sunsetted. Use our Never-Ending Support services for Vue 2 and your projects will be supported & compliant forever. www.herodevs.com 오픈소스 프로젝트가 deprecate..

TIL/기타 2024.01.24

[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

[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