웹 개발 (97) 썸네일형 리스트형 Vue.js) Nuxt.js 란 무엇인가 작년 6월에 어떠한 계기(?)로 급하게 이직 준비를 하고 8월에 새로운 회사로 이직했다. 그동안 배우고 활용했던 React 개발자를 채용하는 자리였기 때문에 순탄하게 이직할 수 있었던 것 같은데 신기하게도 업무는 vue.js로만 하게 되었다. 그래서 불만이라기 보다는 새로운 걸 배워서 오히려 좋아~ 상태이다, 바쁘기도 하고 급하게 이직하면서 쉬지 않고 달리는 기분이었는데 새 직장 6개월차인 지금은 많이 적응을 해서 요즘에는 김영하 작가의 낭독회 영상들을 보며 글쓰기에 다시 흥미가 생겼다. 주절주절 말이 많지만 이번 글은 나의 사수님이 요새 공부를 해야한다고 자극을 준 Nust.js라는걸 월말 오프가 된 기념으로 좀 찾아보면서 정리하려고 쓰는 것이다. 박찬호된 기분. Nust.js란 무엇인가 React 에.. Vuepress란 무엇인가 1. SSG (Static Site Generator)이란? JAM stack Javascript + APIs + Markup 자바스크립트: 클라이언트 요청 처리관리 APIs: 데이터베이스, 서버 관련 기능 처리 마크업: SSG 등으로 마크업을 미리 만들어내는 것 장점 백엔드 기술을 API로 분리하여 보안 취약점을 줄일 수 있다. CDN을 통해 웹 성능이나 속도를 높일 수 있다. 잼스택 생태계가 커져가면서 정적 사이트 생성기 즉, SSG도 함께 성장하였다. SSG의 개념 정적 페이지 기반 웹사이트를 만들어주는 도구 콘텐츠와 파일을 읽어 이를 HTML로 적절히 변환해주는 기술 마크다운으로 작성 → html로 만들어줌 → 서버로 올림 → 서버에서 전달 빠르다! Static page vs Dynamic pag.. Frontend) Git-husky가 무엇인가 1. Git Hooks이란? 특정 상황에 특정 git 커맨드를 실행할 수 있는 기능 따로 설치할 필요는 없고 .git/hooks/ 파일에 들어가면 .sample 확장자로 되어 있는 파일들이 git 에서 지원하는 hook 들이다. 여기서 .sample 이라는 확장자를 지우면 각 상황에 hook들이 적용된다고 한다. hook 종류는 다음과 같다. 2. Git Husky를 사용하는 이유 위에서 소개한 git hooks 는 .git/hooks/에 저장되어 있는데 이는 git의 버전 관리 대상이 아니기 때문에 로컬에서만 적용되고 remote에 공유할 수가 없다. 이를 가능하게 하기 위해 husky를 사용할 수 있다. 내가 속한 팀에서도 여러 개발자가 협업하는 프론트 프로젝트에 이를 도입해서 eslint 룰 관련 .. Frontend) Vite란 무엇인가 매우 빠른 웹 번들러 툴 1. 등장 배경 자바스크립트의 기능과 규모가 확대됨에 따라 모듈화를 하기 시작했다. ESM (ECMAScript Module)이라는 것이 등장해서 자바스크립트 자체에서 모듈화를 지원하기 시작했다. 코드에서 빠질 수 없는 import, export 구문이 바로 이 문법이다. 모듈화된 여러 개의 파일들을 비동기 로딩하는데 특정 파일이 너무 큰 경우 로딩이 지연돼서 전체 성능이 저하하게 되는데 이 문제를 해결하기 위해 webpack, parcel, rollup 등과 같은 번들러가 등장했다. 여러 개의 모듈화된 파일들을 하나의 파일로 만들어준다. 다만 이 번들러들은 많게는 수십, 수백개의 파일들을 하나로 합치는 작업을 하기 때문에 프로젝트가 커질수록 빌드 속도가 아주 느려지는 문제가 발.. Vue.js) vue-router parameter로 객체 전달하기 내가 봐야돼!!! https://empty-castle.tistory.com/8 Vue.js) vue-router 이동시 새탭으로 열기 router.push 또는 replace 등으로 이동하는데 새탭으로 열고 싶을 때 이렇게 하면 된다. const routeData = router.resolve({ name: 'route-name', params: { ... } }); window.open(routeData.href, '_blank'); References https://stackoverflow.com/questions/40015037/can-vue-router-open-a-link-in-a-new-tab SpringBoot) ThreadPoolExecutor 기본 개념 ThreadPool 서버가 어플리케이션에서 발생하는 모든 요청에 대해 매번 쓰레드를 생성하면 스레드를 생성하는 과정과 다수의 스레드를 스케줄링하느라 CPU가 바빠져 메모리 사용량이 늘어난다. 이는 전체적인 시스템 성능 저하를 초래하고 자원이 고갈되어 메모리풀로 서버가 다운 될 수 있다. 그래서 쓰레드풀을 사용한다. 쓰레드풀은 쓰레드를 미리 만들어 두고 재사용하는 방식으로 일정 수의 작업을 동시에 처리하도록 한다. 이때 사용될 수 있는 쓰레드 개수를 제한해놓고 작업 큐에 들어오는 작업들을 하나씩 쓰레드에 할당한다. 그리고 쓰레드가 한 테스크를 끝내면 다음 대기 1순위 태스크가 그 쓰레드를 재사용하는 방식으로 쓰레드의 전체 개수에는 영향을 주지 않고 쓰레드를 운영하여 시스템 성능 저하를 방지한다. 자바는 스.. React) 새로고침 감지하기 원래는 window.performance.navigation으로 접근했는데 그건 deprecated 됨. 아래 방법도 임시방편같은데 일단 되긴 하지만....... 다른 방법을 찾아봐야할 듯 useEffect(() => { if (window.performance) { if(window.performance.getEntriesByType("navigation")[0].type==="reload"){ // 새로고침 감지한 뒤 해야할 이벤트 } } },[]) References https://stackoverflow.com/questions/58652880/what-is-the-replacement-for-performance-navigation-type-in-angular 이전 1 2 3 4 5 6 ··· 13 다음
