반응형

전체 글 57

2023 웹 개발 트렌드 10가지

원문 : https://www.robinwieruch.de/web-development-trends/ 1. (메타) 프레임워크 SPA(단일 페이지 애플리케이션) 및 해당 프레임워크(예: React.js, Vue.js, Svelte.js)는 다소 과대광고 주기를 거쳤으며 지금까지 몇 년 동안 사용되었다. 그러나 이러한 솔루션 위에 메타 프레임워크가 부상하면서 응용 프로그램이 클라이언트 측(CSR)에서 서버 측 렌더링(SSR)으로 이동하는 명확한 추세를 볼 수 있다. Next.js라는 가장 인기 있는 메타 프레임워크는 리액트 위에 있다. 핵심 React 개발자인 Andrew Clark은 2022년이 "진짜 React 18 릴리스"라고 말했다. 리액트 팀이 라이브러리의 하위 레벨에서 기본 구성 요소로 제공하는..

development 2023.02.05

트레일블레이저 vs 셀토스 비교

트레일블레이저와 셀토스 비교. 카랩 참고 1. 외관 & 크기 큰 차이는 없지만 트레일블레이저가 조금 더 큼 2. 트렁크 입구의 높이는 셀토스가 더 높음 3. 주행 - 시트포지션 : 트레일블레이저가 셀토스보다 조금 낮음 - 브레이크 페달 : 트레일블레이저가 셀토스에 비해 훨씬 높음 - 가속 : 비슷함 - 승차감 : 트레일블레이저 > 셀토스 - 연비 - 소음 : 트레일블레이저가 조금 더 조용함. 유리가 두껍고, 노이즈캔슬링이 있어서 조금 더 조용한 듯 4. 2열 공간 2-1) 크기 - 셀토스 : 무릎공간 주먹 2개 반. 머리공간 주먹 1개 - 트레일블레이저 : 무릎공간 주먹 2개 반. 머리공간 주먹 반개. 파노라마 선루프가 있어서 낮은 듯 2-2) 편의시설 - 셀토스 : A타입 USB 포트 - 트레일블레이저..

자동차 2023.01.15

중고차 구매 준비 기본

운전한 지는 10년 정도 되었지만 매번 렌트나 쏘카 같은 카 쉐어링만 이용했다. 이제 슬슬 내 차를 살 때가 되었다. 차알못이라 새 차는 아직 부담스러워서 중고차로 몇 년 굴릴 생각이다. 1. 사고싶은 차종 후보 일단 내가 사려고하는 차종은 SUV이다. 가격은 2천 이하 - 기아 셀토스 - 쉐보레 트레일블레이저 - 르노 XM3, QM6 - 현대 투싼 2. 구매처는 케이카로 결정 온라인 중고차 플랫폼을 이용할 예정이고, 나는 케이카를 이용하기로 했다. 먼저 엔카와 케이카의 가장 큰 차이는 아래 2가지이다. - 케이카는 직영이고, 엔카는 딜러 연결 플랫폼. 따라서 차알못이라면 케이카가 더 안전. 차잘알은 엔카가 더 유리 - 매물은 엔카가 압도적으로 많음 나는 차알못이라서 케이카를 이용하기로 결정하였다. 3...

자동차 2023.01.15

[Nuxt] Template not found: /node_modules/@nuxtjs/google-adsense/dist/templates/plugin.mjs

Nuxt에서 구글 애드센스 라이브러리 사용하여 추가 시, 에러 발생 에러 Nuxt에서 구글 애드센스 연동 시, 아래와 같은 에러가 발생하여 기동이 되지 않았음 FATAL Template not found: /node_modules/@nuxtjs/google-adsense/dist/templates/plugin.mjs 16:24:53 at normalizeTemplate (node_modules\@nuxt\kit\dist\index.mjs:71:13) at addTemplate (node_modules\@nuxt\kit\dist\index.mjs:55:20) at Object.addPluginTemplate (node_modules\@nuxt\kit\dist\index.mjs:425:93) at setup..

development 2023.01.01

셸(Shell)과 터미널(Terminal) 차이

텍스트를 사용하여 특정 작업을 수행하기 위한 명령어를 컴퓨터에 제공하는 경우 명령줄 인터페이스를 사용한다고 한다. CLI를 사용하는 경우 그래픽 사용자 인터페이스 대신 텍스트 명령을 사용하여 프로그램을 작동시킨다. CLI을 사용하는 것은 컴퓨터와 대화하는 다른 방법이다. Linux에서 CLI를 가리킬 때 대부분의 경우 bash 셸(Shell) CLI을 가리킨다. 그러나 많은 경우 우리는 터미널 에뮬레이터라고 불리는 셸과 상호 작용하는 프로그램을 사용한다. 셸과 터미널은 서로 다르지만 종종 같은 의미로 사용된다. 셸(Shell) 커널은 운영 체제의 가장 중요한 구성 요소이다. 커널은 컴퓨터 상의 모든 물리 하드웨어를 인식하여 각 컴포넌트가 서로 통신할 수 있도록 한다. 루트에서 커널은 전달된 명령을 잡고 ..

development 2022.12.13

vue 보안 취약점과 방지 방법

프론트엔드 프레임워크의 보안은 프레임워크와 프레임워크가 의존하는 기본 언어를 모두 커버하기 때문에 매우 광범위할 수 있다. 이 글에서는 애플리케이션을 취약하게 하는 vue 구현에 대해 설명한다. TL;DR vue 또는 기타 프론트엔드 프레임워크를 사용할 때 가장 기본적인 보안 규칙은 신뢰할 수 없는 콘텐츠를 컴포넌트 템플릿으로 사용하지 않는 것이다. 어떤 웹 애플리케이션이든 HTML, CSS 또는 자바스크립트로 검증되지 않은 사용자 제공 입력을 실행하는 것은 위험할 수 있으므로 가능한 한 피해야 한다. 1. HTML Content Injection VueJS는 원시 HTML을 렌더링 하기 위한 디렉티브 v-html를 제공한다. 디렉티브는 Vue에 의해 제공되는 특별한 속성이다. 임의의 HTML을 동적으로..

development 2022.12.11

k8s - 이스티오(Istio) 정리 #2

k8s 이스티오 정리 두 번째 - 이전 글 : k8s - 이스티오(Istio) 정리 #1 컨트롤 플레인 (Control plane) 사이드카와 게이트웨이는 컨트롤 플레인에 의해 설정 및 조정된다. 컨트롤 플레인은 마이크로 서비스 세트였지만, Istio는 몇 년 전에 큰 아키텍처 변경을 경험했다. Istio 블로그 게시물에서 논의되었으며, 11월에 그 일에 대해 이야기할 예정이다. 이 재설계 이후 컨트롤 플레인은 is tio-system 네임스페이스에서 실행되는 단일 파드(istiod)가 된다. 확장성 (Extensibility) 주목할 점은 데이터 플레인 동작의 일부는 Configuration으로 프록시에 제공되는 것이 아니라 Emissor의 WASM 지원을 사용하여 동적으로 주입되는 코드로 제공된다는 ..

development 2022.12.04

k8s - 이스티오(Istio) 정리 #1

이스티오(Istio)는 서비스 메시 패턴의 구현체이다. 서비스 메시가 더 복잡해지기 전에 이를 관리하는 기술이다. 연혁 (History) Istio는 구글에 의해 시작되었고 v0.1.0이 오픈 소스화 된 후 구글, IBM 및 기타 여러 회사에 의해 개발이 계속되었다. 2022년 4월 리눅스 재단의 일부인 독립된 조직인 CNCF(Cloud Native Computing Foundation)에 이스타오 라이선스권이 부여됐다. 실행 환경 (Execution Environment) 먼저 실용적인 세부사항부터 살펴보자. 구체적인 내용은 무엇이며 실행 장소는 어디일까? 서비스 메쉬는 컨트롤 플레인과 데이터 플레인으로 구성되어 있다. 컨트롤 플레인은 필요에 따라서 유저가 작성한 고도의 설정을 취해, 데이터 플레인(실..

development 2022.12.04

프론트엔드, 리액트 면접 인터뷰

프론트엔드, 리액트 개발자 면접 기본 질문들 정리 자주 물어보는 자바스크립트와 리액트 기본 질문들을 정리하였다. 이밖에도 프로젝트나 다양한 과제를 해결하기 위해 어떻게 접근했는지, 개발 과정에서 발생한 문제와 문제 해결 능력도 준비를 해야 한다. 1. array 관련 함수들 (map, forEach, filter, reduce) array 함수들과 polyfill 구현 방법 정리. 폴리필이란 네이티브로 구현되지 않은 오래된 브라우저의 최신 기능에 사용되는 코드 스니펫(JavaScript Web 아키텍처 관점)이다. 간단히 말해서, polyfill은 네이티브 자바스크립트 함수의 커스텀 구현이다. 1) map map() 메서드는 배열을 반복하고 맵 본체에 기입할 로직을 계산하여 새 배열을 반환한다. 아래는 ..

development 2022.12.03

타입스크립트(typescript) 클린코드

타입스크립트 클린코드 정리 1. 불필요한 컨텍스트 삭제 클래스/유형/객체명으로 선언한 값을 컨텍스트로 반복하지 않는다. 굳이 반복할 필요가 없다. type Car = { carMake: string; carModel: string; carColor: string; } function print(car: Car): void { console.log(`${car.carMake} ${car.carModel} (${car.carColor})`); } 아래처럼 컨텍스트를 빼고 사용 type Car = { make: string; model: string; color: string; } function print(car: Car): void { console.log(`${car.make} ${car.model} (..

development 2022.12.01
반응형