웹 개발/Frontend (10) 썸네일형 리스트형 Developer essentials: JavaScript console methods https://developer.mozilla.org/en-US/blog/learn-javascript-console-methods/ Developer essentials: JavaScript console methods | MDN Blog The JavaScript console is an essential tool for web development. Learn new and fun ways to use the console to display data and debug your code. developer.mozilla.org JavaScript로 개발할 때 console.log()는 반드시 쓰게 된다. 그동안 console.log, warning, info, error는 많이 써왔는데 이 글을 읽.. Naver FE News 2024-01) What Every Developer Should Know About GPU Computing: GPU의 작동원리와 배경지식 Naver FE News 원문 What Every Developer Should Know About GPU Computing A primer on GPU architecture and computing codeconfessions.substack.com 대부분의 개발자는 CPU 용 코드를 작성하면서 자랐기 때문에 CPU와 순차적 프로그래밍에 대해 잘 알고 있지만, GPU의 내부 작동 방식과 그 특별한 기능에 대해서는 잘 모르는 경우가 많다. 지난 10년 동안 GPU는 딥 러닝에 널리 사용되면서 그 중요성이 엄청나게 커졌다. 이 글은 GPU의 작동 원리에 대한 배경지식에 대해 소개한다. CPU vs GPU CPU와 GPU의 주요 차이점에 대해 소개한다. 첫번재 차이점, 설계 목표 CPU의 설계 목적은 순차.. Naver FE News 2024-01) It takes 23 mins to recover after an interruption: 작업 시 컨텍스트 전환의 장단점과 관리 전략 Naver FE News 2024-01 원문 It takes 23 mins to recover after an interruption It’s time to examine the good, the bad, and the very ugly elements of context switching. Even better, we’ll take a look at some strategies for managing it. addyo.substack.com 컨텍스트 전환은 생각 전환과 같다. 하지만 당신이 어떤 작업을 하다가 다른 작업을 할 때마다, 당신은 단지 또 다른 작업하는 행동을 취할 ㄷ뿐만 아니라 뇌의 주의와 집중력도 다시 구축하고 있다. 그래서 작업의 중단으로 인해서 인지적 부담이 꽤나 누적된다. 중단된 .. Frontend Tool) Vite(비트)란 무엇인가 🔹 vite (veet) : 프랑스어로 “빠르다” 🔹 vue를 개발한 Evan You 🔹 다양한 프레임워크 지원 (Vue, React, TypeScript, VanilaJS 등) 🔹 실제 프로덕션 제품의 성능을 향상시키는 것이 아니라 개발 속도를 향상시키는데 도움을 주는 툴 1. 배경지식 vite의 동작방식과 어떤 역할을 하는지 알아보기 전에 필요한 배경지식들을 공부하고 정리했다. 번들링 컴포넌트로 모듈화된 소스코드를 브라우저에서 실행할 수 있는 하나의 파일로 묶어 연결해주는 작업 대표적인 번들링 툴: webpack, rollup, parcel HMR(Hot Module Replacement) 앱을 종료하지 않고 갱신된 파일만 교체하는 방식 코드에 변경이 발생하면 모든 파일을 다시 번들링하지 말고 갱신된.. CSS) BEM convention의 개념과 사용시 유의사항 BEM convention 이란, CSS 방법론 중 하나로 지금 내가 팀에서 사용하고 있는 방법이다. BEM은 Block-Element-Modifier의 약자로 id나 class 명을 작성할 때 사용하는 규칙이다. B.E.M은 언더바 두개 (_ _)로 연결하여 표현한다. Block을 의미하는 이름_ _Element를 의미하는 이름--Modfier를 의미하는 이름 block, element, modifier은 다음을 의미한다. BEM Naming convention 소문자, 숫자만을 사용한다. 단어 여러개를 조합하는 경우에는 하이픈(-)으로 연결한다. Block 재사용 가능한 독립적인 HTML 컴포넌트를 의미한다. 형태가 아닌 목적에 맞게 결정한다. 예를 들어 red, active 등의 상태가 아닌 men.. 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 등과 같은 번들러가 등장했다. 여러 개의 모듈화된 파일들을 하나의 파일로 만들어준다. 다만 이 번들러들은 많게는 수십, 수백개의 파일들을 하나로 합치는 작업을 하기 때문에 프로젝트가 커질수록 빌드 속도가 아주 느려지는 문제가 발.. TypeScript) 타입스크립트 기초 이 글을 아래 링크를 참고하여 공부하며 정리한 자료입니다. https://www.samsungsds.com/kr/insights/TypeScript.html 활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트(TypeScript) 활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트(TypeScript) www.samsungsds.com 타입스크립트란? 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 타입스크립트의 특징 타입스크립트 : 정적 타입 컴파일 언어 -> 컴파일러 또는 바벨로 자바스크립트 코드로 변환되어 코드 작성 단계에서 오류 확인 가능하여 버그를 사전에 제거할 수 있고, 실행 속도가 매우 빠르다 (자바스크립트 : 동적 타입 인터프리터 언어 -> 런타임에 오류 발견 가능) 자바스.. 이전 1 2 다음
