드리프트의 뉴 코딩 이야기

안녕하세요?개인적으로 자바스크립트 공부할 때 보는 유용한 코드 모음집입니다.** 목 차 **문자열을 배열로 분해문자열의 for...of첫 글자를 대문자로, 나머지를 소문자로 변환indexOf를 사용한 문자열의 출현 횟수 카운트문자열을 Unicode 정규화normalize 메소드의 구문NaN의 비교Number 타입의 포맷min ~ max의 난수배열에서 임의의 요소를 가져오기월의 마지막 날날짜 차이날짜/시간 값을 문자열로 변환Date 타입의 포맷레이블 문법의 break배열의 인덱스끝에서 요소를 가져오기배열의 요소 가져오기배열에 여러 요소 추가/교체/삭제splice 메소드의 구문요소 추가요소 교체요소 삭제배열의 모든 요소 위치 검색중첩 배열 평탄화flat 메소드의 구문다차원 배열의 요소 수 얻기배열 내의 요소..

** 목 차 **atomic.Value 소개Go 언어의 포인터와 interface{}atomic.Value의 구현Value 구조체 선언ifaceWords 구조체 선언값 읽기 (Load 함수)값 추가 (Store 함수)atomic 패키지의 사용과 안전한 구현Go 언어의 포인터에 대한 이야기를 atomic.Value의 구현을 통해 살펴보겠습니다. atomic.Value는 무엇일까요? 이것은 Go 1.4부터 추가된 기능입니다. Go의 공식 문서에서는 "메모리를 공유하여 통신하지 마라."라는 말이 자주 등장합니다. 그러나 여러 Goroutine에서 하나의 변수를 참조하거나 업데이트하는 것은 표준 패키지를 살펴보면 꽤 자주 나타나는 패턴입니다. 이때 sync 패키지 등을 사용하여 값의 race condition을..

Go 서버 모니터링Go로 서버 프로그램 작성하기Go에서는 서버 프로그램을 작성하기 위한 유틸리티가 풍부하게 준비되어 있으며, 고루틴이나 채널을 활용하면 고성능이 요구되는 환경에서도 충분한 성능을 발휘할 수 있습니다. 언제였는지 기억나지 않지만 '그것은 HTTP 서버를 작성하기 위한 언어입니다'라는 이야기를 어떤 엔지니어로부터 들었던 적이 있습니다. 예를 들어 'Hello, World!'만 반환하는 HTTP 서버라면 표준 라이브러리인 net/http를 사용하여 아래와 같이 작성할 수 있습니다. hello_server.gopackage mainimport ( "fmt" "net/http")func handler(w http.ResponseWriter, r *http.Request) ..

안녕하세요? 프론트엔드 디벨로퍼가 되기로 마음먹었을 때부터 생소한 웹 관련 용어 공부하면서 정리해 보았습니다.1. 웹이란 무엇인가1.1. 웹의 용도1.2. 웹을 지탱하는 기본적인 3가지 기술1.3. 웹의 특징2. 웹의 역사2.1. 웹 이전2.2. 인터넷2.3. 하이퍼미디어2.4. 분산 시스템2.5. 웹의 탄생2.6. 웹의 표준화2.7. 웹 API를 둘러싼 논쟁 'SOAP VS REST'2.8. 그리고 현재2.9. 부연설명: 하이퍼미디어 포맷의 역사3. REST4. REST라는 아키텍처 스타일4.1. REST에서 중요한 '리소스'라는 개념4.2. REST를 구성하는 특징5. URI5.1. URI의 포인트5.2. URL과의 차이(URI와 URL과 URN)5.3. 구성6. HTTP의 기본6.1. HTTP란6...

** 목 차 **Promise의 코드화Promise를 사용하는 방법(약속을 지킨 경우)Promise를 사용하는 방법(약속을 지키지 않은 경우)Promise의 상태란 무엇인가?Pending 상태란 무엇인가?Promise를 어떻게 사용하는가?"Promise를 반환한다"는 것은 무엇을 의미하는가?Promise를 연결하는 방법8.1. 두 개의 Promise를 연결간단한 함수를 사용하여 여러 Promise를 연결하는 예를 들어보겠습니다.안녕하세요? JavaScript의 Promise를 사용해보신 분들 중에도 실제로 어떻게 작동하는지 이해하지 못하고 계신 분들이 계실 것입니다. 또한 JavaScript를 처음 배우시는 분들 중에는 Promise라는 용어를 들어보셨지만 그게 무엇인지 잘 모르시는 분들도 계실 것입니다..

이번에는 webpack과 Babel에 대해 배운 것을 글로 정리해 보려고 합니다. 왜 처음에 webpack과 Babel에 대해 배우려고 했는지는, 지금까지 TypeScript, React 등을 사용하여 다양한 애플리케이션을 개발해 왔지만, webpack과 babel에 대한 지식이 모호한 상태에서 개발만을 계속하고 있었습니다. 어쩐지 “그냥 변환해 주는 것” 정도의 지식밖에 없었기 때문에, 제대로 이해하려고 생각했습니다. 그런 상황에서 webpack과 babel의 필요성을 배우면서 JavaScript의 역사를 이해하면 더 쉽게 이해할 수 있을 것 같아서, JavaScript의 역사에 대해서도 다루어 보려고 생각했습니다.JavaScript의 탄생JavaScript는 1995년에 Netscape의 기술자인 B..

안녕하세요? React를 사용하면서 느끼는 의문이 있었는데요. 바로 “named export와 default export 중 어느 것을 사용하는 것이 좋을까?”라는 생각이었습니다. 그래서 여러 가지 생각나는데로 적어보았습니다. 개인적인 해석이므로, 오류가 있을 수 있으니 참고 바랍니다.Default exportdefault export의 예제입니다.// default exportexport default function sampleFunc() { return "hoge";} 그리고 import 할 때 사용하는 방법은 아래와 같습니다.import sampleFunc from "./path";Named exportnamed export 입니다.export function sampleFunc() { ret..

안녕하세요? 오늘은 최근 구글링 하다가 보게된 새로운 프로그래밍용 폰트를 소개하고자 합니다. 이름도 특이한 "0xProto" 폰트인데요. 당연히 프로그래밍용 폰트라서 모노스페이스 폰트입니다. 모노스페이스(monospace)라는 말을 한국말로 번역하면 한자를 이용해서 아마도 "등폭 글꼴"이라고 번역할 수 있을 거 같네요. Github에 공개되어 있는 무료 프로그래밍 글꼴입니다. 본격적인 폰트 소개를 이어나가 보도록 하겠습니다. “0xProto” 폰트는 프로그래밍을 위한 폰트로, 문자의 가독성을 중점으로 설계되었습니다. 처음 릴리즈는 2023년 5월이었고, 그 이후로 몇 번의 업데이트가 있었습니다. 1.000: 2023년 5월 1.300: 2023년 10월 1.500: 2023년 12월 1.601: 2024..

안녕하세요? 우연히 Zod 관련 튜토리얼을 구글링 하다가  github 페이지를 봤는데요. 원래 Matt Pococok 님의 totaltypescript에서 무료 강의 해주고 있는 내용입니다. Zod 관련 총 14가지 문제를 vitest를 이용해서 테스트하고 설명까지 해주고 있는데요. 관련 튜토리얼 공유하면 좋을 거 같이 이렇게 한국어로 번역 또는 제 생각을 적어 보았습니다. ** 목 차 **Zod란기본 타입의 검증 (튜토리얼 01)객체의 검증 (튜토리얼 02)배열의 검증 (튜토리얼 03)스키마로부터 타입 생성 (튜토리얼 04)옵셔널 (튜토리얼 05)기본값(default 값) 설정 (튜토리얼 06)유니온 타입의 검증 (튜토리얼 07)특정 조건 검증 (튜토리얼 08)스키마의 확장 (튜토리얼 09)값을 검..

안녕하세요? 오늘은 취미로 React와 Next.js를 사용하고 있지만, "RSC, App Router, Suspense 등에 대해 전혀 모르겠다." 이런 분들을 위해 제가 공부한 내용을 정리해서 적어보려 합니다. 조금 두서없이 글을 써서 그런지 지저분한데요. 조금이나마 도움이 됐으면 하네요. ** 목 차 **React와 Next.js에 대해React 렌더링에 대해2.1. 렌더링 트리거 감지2.2. 브라우저 렌더링 콘텐츠 결정2.3. 변경사항을 DOM에 적용Next.js 렌더링에 대해Next.js Pages Router 렌더링에 대해하이드레이션(Hydration)이란 무엇인가?Next.js Pages Router 렌더링 유형에 대해6.1. SSR(Server-side Rendering)6.2. SSG(S..