본문 바로가기

웹 개발

 (97)
Next.js) Server Component vs Client Component Server Component와 Client Component 가 뭔 차이인지 알아보기 위해 본 영상에서 중요한 내용을 정리한 글이다. Server components 서버 컴포넌트로 만드는게 좋은 컴포넌트들의 특징 데이터 fetch를 하는 컴포넌트 DB에 직접 접근하는 컴포넌트 민감 정보 (접근 토근이나 API 키 값은거) 의존성이 강한 것 Client components 클라이언트 컴포넌트로 만드는게 좋은 컴포넌트들의 특징 사용자 상호작용이 많은 것들, 이벤트 리스너가 많은 것 state와 lifecycle effect를 사용하는 것들 브라우저 api만 사용하는 것들 커스텀 Hook react class 컴포넌트 클라이언트 컴포넌트 만들 때는 서버랑 똑같은데 위에 파일 최상단에 'use client'..
Biome) zero-dependency tool chain | Formatter, Linter https://biomejs.dev/ Biome Format, lint, and more in a fraction of a second. biomejs.dev eslint 설정하기도 어렵고 prettier랑 충돌하는 부분도 어려웠는데 얼마전 기술 공유 시간이 Biome이라는 것을 알게 돼서 써봤다. 특별히 추구하는 컨벤션이 없어서 직접 eslint rule을 정의하고자 하는 욕심도 없어서 제로 디펜던시라는 이것을 linter, formatter로 사용해보기로 했다. 아쉽게도 vue, astro 등등은 지원하지 않아서 nextjs 프로젝트에 적용해보려고 한다. 설치 bun add --dev --exact @biomejs/biome bunx @biomejs/biome init 이렇게 하면 이런 json 파일..
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) 앱을 종료하지 않고 갱신된 파일만 교체하는 방식 코드에 변경이 발생하면 모든 파일을 다시 번들링하지 말고 갱신된..
UX) Modal & Nonmodal Dialogs: When (& When Not) to Use Them 이 글을 번역 및 정리한 글입니다. 모달을 언제 사용해야 하는지에 대한 글 Modal형 Dialog는 사용 흐름에 끼어들어 특정 작업을 요구한다. 따라서 특정 정보로 사용자의 주의를 끌어야 하는 경우 사용하는 것이 적절하다. Dialog와 Modal dialog (대화 상자) dialog는 두 사람 간의 대화를 의미한다. UI에서는 시스템과 사용자 간의 대화로 시스템이 필요한 정보를 사용자에게 입력 받는 등의 상호작용을 dialog라고 할 수 있다. mode 하나의 시스템에서 약간 다른 형태의 UI를 의미한다. 약간 다른 형태를 예를 들면 Caps lock이 켜져 있는 상태나 MS Word에 Track changes 모드가 켜진 상태가 있다. Modal Dialog Modal Dialog는 메인 콘텐츠를..
UX) 텍스트 가독성 Text Legibility 이번에 간단한 시스텝을 ionic + vue로 개발하고 있는데 기획도, 디자인도 제대로 없다. 난감하지만 오히려 내 마음대로 UI/UX를 만들 수 있어서 재미있는 업무인 것 같다. 시간이 좀 촉박하긴 하지만 기존보다 사용성을 좀 더 높이고 예쁘게 만들고 싶다는 욕심이 생겼다. 그래서 UX를 많이 생각하고 공부하고 있다. 기특해 이 글은 이 글을 공부하면서 번역/의역한 글이다. 텍스트 가독성 Text Legibility 색상은 가독성에 큰 영향을 미치는 요소이다. 가독성 표준 Legibility standards WCAG standards 모든 텍스트는 읽기 쉽고 접근성 표준에 부합해야 한다. WCAG(The Web Content Accessbility Guidelines 웹 콘텐츠 접근성 가이드라인) l..

티스토리툴바