티스토리

느릿늘있
검색하기

블로그 홈

느릿늘있

jhon-kim93.tistory.com/m

느리지만 늘 있는 블로그

구독자
2
방명록 방문하기

주요 글 목록

  • [TypeScript] 포스텔의 법칙 In TypeScript (w. 이펙티브 타입스크립트) 이번에는 이펙티브 타입스크립트 4장에 나오는 " 포스텔의 법칙 IN TypeScript"라는 주제를 제 나름의 방식대로 해석하고 정리한 내용을 공유해보려고 합니다! 본 내용은 항해 플러스 프론트엔드 3기 토요 지식회에 발표했던 내용을 기반으로 작성하였습니다!  라는 책을 읽으면서 개발이라는 게 그냥 기능만 구현하는 것 너머에 이런 철학적인 바탕이 있을 수 있구나라는 것을 알게 되었습니다. 그러던 와중에 를 읽게 되었고 책에 나오는 이 29번 Item이 함수형 프로그래밍에서 그러한 철학 중 하나라고 느껴졌고 이에 매력을 느껴 깊게 공부해보게 되었습니다.  견고성의 원칙이라고도 불리는 포스텔의 법칙은 TCP 초기 모델을 구축한 Jon Postel이 남긴 말입니다. 자유도가 아주 높은 인터넷이라는 환경에서 견.. 공감수 1 댓글수 0 2024. 12. 17.
  • [React Hooks] useContext 이해하기 React에서는 다양한 Hooks를 사용해서 컴포넌트의 상태를 관리하는 패러다임을 제시합니다. 그 중 하나로 useContext라는 훅이 있는데요. 실무에서 자주 써본 것이 아니라면 그냥 전역 상태 관리를 할 수 있게 해주는 훅이다 정도로 알고 있을 겁니다. 저 또한 그랬기에 이번 기회에 useContext에 대해 공식 문서를 보면서 꼼꼼하게 정리해보려고 합니다!https://ko.react.dev/reference/react/useContext useContext – ReactThe library for web and native user interfacesko.react.dev  React의 공식 문서에는 useContext를 컴포넌트에서 Context를 읽고 구독할 수 있는 React Hook이라고.. 공감수 1 댓글수 0 2024. 10. 13.
  • 참조값의 깊이에 대한 고찰 (feat. 복사와 비교) 항해 플러스를 진행하면서 메모이제이션을 구현해보는 미션을 받았습니다. 객체를 비교함에 있어서도 얕은 복사(Shallow Copy), 깊은 복사(Deep Copy)와 마찬가지로 얕은 비교(Sallow Equals), 깊은 비교(Deep Equals)라는 용어를 사용한다는 것도 이번 과제을 진행하면서 처음 알게 되었는데요. 그런데 두 개념을 이해함에 있어서 깊이(Depth)라는 키워드가 약간 다르게 쓰이는 것 같아서 이번 기회에 깔끔하게 정리해보겠습니다.  보통 개발을 바닥부터 시작하게 되면 저처럼 얕은 복사와 깊은 복사에 대해서 먼저 접하게 되는데요. 제 기준으로는 비교에 대해서 먼저 짚고 넘어가는 게 이해하기가 더 수월하다고 생각이 듭니다! 그래서 비교에 대해서 먼저 정의를 해보겠습니다. 정말 간단한데요.. 공감수 3 댓글수 3 2024. 10. 12.
  • 브라우저 웹 스토리지와 인증 인증은 웹 개발의 기본이 되면서도 종류의 다양성과 보안의 정도에 따라 꽤 많은 케이스가 존재하기에 정답이 없다. 최근 회사에서의 신규 프로젝트와 몇 가지 토이 프로젝트들을 개발하면서 브라우저의 웹 스토리지와 인증을 하나로 엮어서 글로 정리해두면 기억하기 좋을 것 같다는 생각이 들어 이 주제로 글을 쓰게되었다.브라우저 웹 스토리지(+ 쿠키)와 인증  브라우저의 웹 스토리지 각각의 세부 내용과 사용법은 이 글의 목적이 아니다. 비교해서 기억하기 쉬운 형태로 각각의 주요 특징만 짚고 넘어가겠다.[ 로컬 스토리지 ]1. 브라우저를 종료해도 데이터가 유지된다. (로컬 - 유지)2. 서로 다른 도메인 간 데이터를 공유하지 않는다. (동일 도메인은 공유)3. 개발자 도구의 Application 탭에서 조회할 수 있다.. 공감수 2 댓글수 0 2024. 9. 18.
  • 우당탕탕 RUST 도전기 (2) FE 개발자의 막무가내 Rust 도전기완전제곱수[Bronze 2] (#1977)use std::io;fn main() { // 문자열을 저장할 mutable 변수 선언 let mut min_input = String::new(); let mut max_input = String::new(); // 표준 입력에서 한 줄 읽기 io::stdin().read_line(&mut min_input).unwrap(); io::stdin().read_line(&mut max_input).unwrap(); let min: i32 = min_input.trim().parse().unwrap(); let max: i32 = max_input.trim().parse().unwrap.. 공감수 0 댓글수 0 2024. 9. 18.
  • 우당탕탕 RUST 도전기 (1) FE 개발자의 막무가내 Rust 도전기8진수 2진수 (#1212)use std::io::{self, BufRead};pub fn main() { let mut input= String::new(); io::stdin().lock().read_line(&mut input).unwrap(); let input = input.trim(); let mut res = String::new(); let arr = ["000", "001", "010", "011", "100", "101", "110", "111"]; for o_num in input.chars() { res.push_str(change_o_to_b(o_num, arr)); } if res == "000" { println!(.. 공감수 0 댓글수 0 2024. 6. 23.
  • [TIL] Naver FE News 2024-02 [TIL] Naver FE News는 Naver FE 팀에서 매월 첫째주 수요일에 업로드하는 FE 관련 이슈들을 팔로우 하면서 관심있는 내용을 학습하고 정리하는 컨텐츠입니다. [ https://github.com/naver/fe-news ] 1. 2023 JavaScript Rising Stars https://risingstars.js.org/2023/en#section-framework 2023 JavaScript Rising Stars A complete overview of the JavaScript landscape in 2023: trends about frontend, fullstack and Node.js frameworks, React and Vue.js ecosystems, build .. 공감수 0 댓글수 0 2024. 2. 17.
  • [TIL] Naver FE News 2024-01 [TIL] Naver FE News는 Naver FE 팀에서 매월 첫째주 수요일에 업로드하는 FE 관련 이슈들을 팔로우 하면서 관심있는 내용을 학습하고 정리하는 컨텐츠입니다. [ https://github.com/naver/fe-news ] 1. What Every Developer Should Know About GPU Computing (foot translated) 1. 모든 개발자가 알아야하는 GPU 컴퓨팅 (발번역) https://codeconfessions.substack.com/p/gpu-computing What Every Developer Should Know About GPU Computing A primer on GPU architecture and computing codeconfe.. 공감수 1 댓글수 0 2024. 1. 31.
  • [TIL] Naver FE News 2023-11 [TIL] Naver FE News는 Naver FE 팀에서 매월 첫째주 수요일에 업로드하는 FE 관련 이슈들을 팔로우 하면서 관심있는 내용을 학습하고 정리하는 컨텐츠입니다. [ https://github.com/naver/fe-news ] 1. 클로저 컴파일러의 역사, 타입스크립트가 승리한 이유 https://ktseo41.github.io/blog/log/the-saga-of-the-closure-compiler-and-why-typescript-won.html 클로저 컴파일러의 역사, 그리고 타입스크립트가 승리한 이유 | bohyeon.dev ktseo41.github.io 클로저 컴파일러(Closure Compiler)란 과거 구글에서 개발한 대규모 자바스크립트 애플리케이션을 만들기 위해 사용하던.. 공감수 0 댓글수 0 2023. 12. 31.
  • [기록] Nest.js의 세부 동작 과정에 관한 좋은 글 https://blog-ko.superb-ai.com/nestjs-interceptor-and-lifecycle/ NestJS Interceptor와 Lifecycle Introduction 이번 글은 Superb AI가 NestJS Interceptor를 어떻게 쓰고 있고, 사용하면서 겪었던 이슈들에 대해 공유하려고 합니다. NestJS를 도입을 결정하고 나서, 어떻게 하면 Logger를 구현할 때 코드 중복 blog-ko.superb-ai.com 공감수 0 댓글수 0 2023. 10. 17.
  • [TIL] Naver FE News 2023-10 [TIL] Naver FE News는 Naver FE 팀에서 매월 첫째주 수요일에 업로드하는 FE 관련 이슈들을 팔로우 하면서 관심있는 내용을 학습하고 정리하는 컨텐츠입니다. [ https://github.com/naver/fe-news ] 1. BUN 1.0 https://bun.sh/blog/bun-v1.0#bun-is-an-all-in-one-toolkit Bun 1.0 | Bun Blog Bun 1.0 is finally here. Bun is a fast, all-in-one toolkit for running, building, testing, and debugging JavaScript and TypeScript, from a single file to a full-stack applicat.. 공감수 0 댓글수 0 2023. 10. 13.
  • [TIL] Naver FE News 2023-09 [TIL] Naver FE News는 Naver FE 팀에서 매월 첫째주 수요일에 업로드하는 FE 관련 이슈들을 팔로우 하면서 관심있는 내용을 학습하고 정리하는 컨텐츠입니다. [ https://github.com/naver/fe-news ] 1. 성능하면 빠질 수 없는 메모이제이션, 네가 궁금해 https://d2.naver.com/helloworld/9223303 메모이제이션 소개 메모이제이션은 함수 호출의 결과를 캐싱하고 요청 시 다시 불필요한 계산을 다시 하지 않고 캐싱된 결과를 반환하는 프로그래밍 기술이다. React에서는 useCallback 또는 useMemo와 같은 메모이제이션 훅이 있습니다. 하지만 메모이제이션은 특정한 값을 메모리에 저장하는 것이기 때문에 잘못 사용하면 메모리가 오히려 낭.. 공감수 0 댓글수 0 2023. 10. 10.
  • [기록] 온라인 컴파일러 Programiz https://www.programiz.com/python-programming/online-compiler/ Online Python Compiler (Interpreter) www.programiz.com 정처기 공부하면서 간단한 코드를 언어별로 컴파일 할 필요가 있어서 찾아본 온라인 컴파일 사이트이다. 파이썬, 자바, C, go 등 사용도가 높은 언어는 거의 다 지원한다. 심지어 SQL이랑 HTML/CSS 까지 지원한다. 공감수 0 댓글수 0 2023. 9. 30.
  • [WebGPU]에 대해서 Araboza...(4) 본 게시글은 W3C에 게시된 WebGPU Explainer 글을 학습을 위해 번역한 글입니다. 3.2 객체 유효성 및 파괴성 3.2.1 WebGPU의 Error Monad(단세포 생물) 일명 전염성 내부 무효성(Contagious Internal Nullability), 투명한 promise 파이프라인 WebGPU는 매우 chatty한(※ 수다스러운, 여기서는 요청이 많은) API입니다. 일부 프로그램은 복잡한 화면을 렌더링 하기 위해 프레임 당 수만 건의 호출을 요청합니다. 우리는 보안을 위해 해당 명령들의 유효성 검사를 해야했습니다. GPU 프로세스와 컨텐츠 프로세스에서 한 번에 두 번씩 검증하는 오버헤드를 피하기 위해, WebGPU는 Javascript 호출을 GPU 프로세스로 직접 전달하고 검증할.. 공감수 0 댓글수 0 2023. 7. 30.
  • [보안] 서드파티 API 보안 강화를 위한 5가지 원문 링크 : https://www.itworld.co.kr/news/295303 서드파티 API 보안을 강화하기 위한 5가지 베스트 프랙티스 API 보안에 대해 고려할 때 일반적인 기업은 내부에서 작성하는 API 보호에 초점을 둔다. 그러나 기업이 사용하는 모든 API가 내부적으로 개 www.itworld.co.kr 서드파티 API는 많은 편의성을 가져다 주지만 편의성에는 반드시 대가(trade off)가 따른다. 그 중 하나인 보안에 관한 글을 소개한다. 1. 서드파티 API가 포함된 API 인벤토리 유지 API 인벤토리라는 용어를 처음 들어봤고 구글에도 자세히 나오지 않는다... 그냥 API를 바로 사용하지 말고 검증할 수 있고 또 일괄적으로 처리할 수 있는 파일을 하나 구성해서 거쳐서 사용하라는 .. 공감수 1 댓글수 0 2023. 7. 27.
  • [TypeScript] 오버로딩(Overloading) 타입스크립트를 공부하면서 오버로딩이 조금 특이하게 동작하는 부분이 있는 것 같아서 정리 겸 공유를 위해 기록을 남겨본다. 우선, 자바스크립트는 함수의 매개변수와 리턴타입에 관대하기 때문에 오버로딩이 필요가 없다. function a (arg) { return arg }// 에러가 발생하지 않는다.a(true, 1) // truea("12", 123, true) // "12"a() // undefined  타입스크립트에서 타입을 설정하지 않으면 자바스크립트와 동일하게 동작할까?function a (arg){ console.log(arg) console.log(typeof(arg))}// 매개변수 갯수에 대해 엄격하게 체크한다.a(1, '2') // error : Expected 1 arg, bu.. 공감수 0 댓글수 0 2023. 7. 23.
  • [SW개념] 일급 시민 1. 함수에 전달 가능 : parameter로 넣을 수 있다. ex) function A(일급 시민){} 2. 함수로부터 반환 가능 : return 값이 될 수 있다. ex) function A(){return 일급 시민} 3. 변수에 할당될 수 있다. ex) const A = 일급 시민 위 세가지 조건을 충족하면 일급 시민이라고 부른다. 자바스크립트의 함수는 일급 시민이다. (일급 함수) 자바스크립트의 class는 일급 시민이다. 공감수 0 댓글수 0 2023. 7. 9.
  • [WebGPU]에 대해서 Araboza...(3) 본 게시글은 W3C에 게시된 WebGPU Explainer 글을 학습을 위해 번역한 글입니다. 3. 자바스크립트 API 이 섹션은 WebGPU JS API의 중요하고 특이한 면들에 관한 세부 내용을 다룹니다. 일반적으로 서브 섹션은 매칭되는 상위 섹션을 설명하기 위해 만들어졌지만 몇몇 서브 섹션은 이전 서브 섹션의 문맥을 참조하기도 합니다. 3.1 Adapter와 Device ※ Adapter와 Device는 WebGPU 코드 구현의 핵심이 되는 두 개념입니다. GPUAdapter란 시스템에서 특정 WebGPU 구현(implementation)을 식별하는 객체입니다. (ex. 통합 또는 개별 GPU에서 하드웨어/소프트웨어 가속 구현) 같은 페이지에서 두 개의 서로 다른 GPUAdapter 객체가 동일한 .. 공감수 0 댓글수 0 2023. 7. 4.
  • [GIT] commit message prefix GIT을 사용하면서 commit 메세지를 작성하는 단계에서 주로 제목에 prefix를 붙이는 편이다. 이렇게 하면 깃 히스토리도 깔끔해져서 가독성이 올라간다. 또한, 내가 한 작업이 정말 한 단위의 작업인지 다시 생각해볼 수 있다. 아래는 대표적인 prefix를 정리한 표이다. 각 팀의 상황에 맞게 변형 혹은 추가하여 사용하면 된다. no. prefix content 1 FEAT 새로운 기능 추가 2 DELETE 삭제 (상세 메세지 작성) 3 FIX 기능과 관련된 수정 4 STYLE 기능과 관련 없는 수정 5 REFACTOR 코드 리팩토링 작업 6 TEST 테스트 코드 관련 작업 7 CHORE 빌드 및 패키징 관련 작업, 잡다한 작업 8 DOCS 코드가 아닌 문서 수정 공감수 0 댓글수 0 2023. 6. 28.
  • [TIL] 하이럼의 법칙 API에 충분한 수의 유저가 있다면, 명세에서 지정된 것은 아무런 상관이 없다: 시스템에서 관측될 수 있는 모든 행동 양식은 다른 이들에게 달려있을 것이다. — 하이럼 라이트 구글의 개발자 하이럼 라이트가 명명한 법칙이다. API를 작성할 때, 명세에 쓸 내용은 절대로 API의 모든 것을 포함할 수 없다는 사실을 경고한다. API에 기대하는 내용을 문서에 정리하더라도 사용자가 많아질수록 기대하지 않은 방법의 활용이 발생할 것이고 이를 "암묵적인 인터페이스 규약"(되니깐 쓰는 기능)이라고 한다. 서비스가 커질수록 새로운 암묵적인 인터페이스 규약은 계속 생겨날 것이고 이를 (지속적으로, 적은 비용으로) 잘 관리할 수 있는 방법에 대해 고민해보아야 한다. 단순히 문서에 추가하겠다는 생각은 정답이 아니다. 공감수 0 댓글수 0 2023. 6. 21.
  • [WebGPU]에 대해서 Araboza...(2) 본 게시글은 W3C에 게시된 WebGPU Explainer 글을 학습을 위해 번역한 글입니다. 2. 추가 배경 지식 2.1. 웹 브라우저에 Sandboxed(격리, 은닉, 캡슐화 정도의 의미인 듯) GPU 프로세스 GPU-process 아키텍쳐에서 WebGPU는 반드시 구현가능하고 효율적이어야 합니다. GPU 드라이버는 웹 컨텐츠에 대한 접근보다 추가적인 커널 시스템 콜에 대한 접근을 더 필요로 합니다. 이로 인해 많은 GPU 드라이버들이 멈추거나 충돌하기 쉽습니다. 안정성(Stability)과 격리(sandboxing)를 향상시키기 위해서 브라우저는 다른 브라우저와 비동기 IPC(Inter Process Communication)로 통신하는 특별한 프로세스를 사용합니다. GPU 프로세스는 Chromiu.. 공감수 0 댓글수 0 2023. 6. 20.
  • [WebGPU]에 대해서 Araboza...(1) 본 게시글은 W3C에 게시된 WebGPU Explainer 글을 학습을 위해 번역한 글입니다. 1. 소개 WebGPU는 웹 페이지에서 시스템의 GPU를 사용하여 연산 및 복잡한 이미지 생성을 가능하도록 만들기 위해 제안된 Web API이다. 이는 기존에 WebGL이 제공하는 API와 그 목적이 유사하다. 하지만 WebGPU는 시스템 GPU(하드웨어)에 대해 한층 더 발전된 형태의 접근을 가능하게 한다. WebGL이 주로 이미지 생성과 관련된 기능을 제공하고 (엄청난 노력을 통해) 다른 종류의 연산 기능도 제공하게 된 반면에, WebGPU는 태생부터 시스템 GPU의 일반 연산 성능을 웹에서 지원하기 위해 개발되었다. 2. 이용 사례 WebGL vs WebGPU 비교 CAD 모델과 같은 다양한 객체를 매우 .. 공감수 0 댓글수 0 2023. 6. 13.
  • [ReactNative] Expo 쓰는 이유 Expo는 React Native 개발을 실시간으로 확인할 수 있게 해주는 테스팅 도구다. React Native가 앱으로 만들어지려면 JS, HTML, CSS 코드로 구성된 React Native JS Module들을 컴파일해서 Native 코드(*React Native 아님)로 동작하도록 만들어야 한다. 즉, React Native 자체는 OS와 다이렉트로 통신할 수 없기 때문에 Native 앱의 상태를 거쳐야 한다. 간단하게 적기는 했는데 핵심은 이러한 환경 설정을 학습하고 직접 구성하기까지는 시간이 많~이 걸린다는 얘기다. Expo를 쓰면 이 귀찮은 환경 설정에 대해 깊게 알 필요가 없다. 웹에서 브라우저의 도움을 받듯이 코드만 작성해서 바로 실행시키면 된다. Expo 자체가 코드를 제외한 Rea.. 공감수 0 댓글수 0 2023. 5. 27.
  • [TIL] Naver FE News 2022-02 [TIL] Naver FE News는 Naver FE 팀에서 매월 첫째주 수요일에 업로드하는 FE 관련 이슈들을 팔로우 하면서 관심있는 내용을 학습하고 정리하는 컨텐츠입니다. [ https://github.com/naver/fe-news ] 1. Web 3.0은 무엇인가? https://itnext.io/what-do-you-need-to-know-about-new-era-of-internet-web-3-0-as-a-frontend-developer-55e51f2cd03f 🔥What You Need to Know About the New Era of Internet Web 3.0 As a Frontend Developer What the future of Internet Web 3.0 looks like.. 공감수 0 댓글수 0 2023. 5. 20.
  • [SW_개념] 주니어 개발자가 이해한 동기/비동기 한 줄 정리싱크가 맞으면 동기(synchronous)고 싱크가 안맞으면 비동기(asynchronous)다. 동기/비동기 구분  동기/비동기 개념은 Javascript 개발자라면 무조건 들어봤을 개념이다. 많은 블로그에서 다루고 있는 주제이고 관련하여 많은 글들을 읽어 보고 나의 주관을 정리해 보았다. 반론은 언제나 환영이다.  사전적으로 보면 동기와 동시를 같은 개념으로 오해하기 쉽다. 이 두 단어의 차이를 설명하기 위해 비유를 하나 들어보겠다. 영상과 자막이라는 두 기능을 구현한다고 생각해보자. 이 때, 단순하게 생각해서 영상과 자막의 싱크가 잘 맞으면 동기고 싱크가 안 맞으면 비동기다. 이 비유에서 말하고자 하는 포인트는 영상과 자막이라는 두 기능이 동시에 동작하고 있느냐는 동기/비동기를 구분짓는 개.. 공감수 0 댓글수 0 2023. 5. 13.
  • [TIL] Naver FE News 2022-01 [TIL] Naver FE News는 Naver FE 팀에서 매월 첫째주 수요일에 업로드하는 FE 관련 이슈들을 팔로우 하면서 관심있는 내용을 학습하고 정리하는 컨텐츠입니다. [ https://github.com/naver/fe-news ] 1. 자바스크립트는 왜 프로토타입을 선택했을까 https://medium.com/@limsungmook/자바스크립트는-왜-프로토타입을-선택했을까-997f985adb42 자바스크립트는 왜 프로토타입을 선택했을까 프로토타입으로 검색하면 으레 나오는 서두처럼 저 또한 자바스크립트를 처음 접했을 때 가장 당황스러웠던 게 프로토타입이었습니다. medium.com JS는 왜 클래스가 아니라 프로토타입을 쓰는 걸까에 대한 의문 프로토타입을 이해하려면 클래스에 대해 우선 알아야 함.. 공감수 0 댓글수 0 2023. 5. 5.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.