JS&TS8 Node.js 버퍼를 이용하여 이미지를 만들어보자 이미지를 브라우저에 보여주거나 저장하거나 가공할 때가 있다. 그렇지만 이미지를 컴퓨터가 어떻게 이해하는지, 색상 데이터에 어떤 정보를 추가해야 완전한 이미지 파일이 되는지 모르고 있었다. 이 글은 이미지를 잘 이해하기 위해 또 이미지를 직접 가공해야 할 때를 대비해 코드로 이미지를 만들며 학습한 기록이다. Table Of Contents - Node.js에서 이미지를 읽어보며 버퍼 이해해보기 - 비트맵 이미지를 만들어보며 이미지 파일의 구성요소 알아보기 - 사용하기 쉬운 인터페이스를 고민하며 npm에 패키지 배포하기 이미지를 읽어보자. const fs = require('fs'); fs.readFile('./asset/groot.png', (err, data) => { if (err) { console... 2023. 7. 11. 상태관리 (관찰자 클래스 방식과 createStore 방식 비교해보기) 상태 관리를 어떻게 하면 좋을지는 프로젝트를 시작할 때, 혹은 상태 관리가 포함된 코드를 리뷰할 때 자주 나오는 주제이다. 라이브러리를 잘 사용하는 것도 중요하지만 결국 상태가 무엇이고 어떻게 상태관리하면 좋을지 이해한다면 능동적으로 라이브러리를 활용하거나 직접 구현하여 상태관리할 수 있을 것이다. 상태를 다루는 일반적인 방법을 살펴본 후 이를 옵저버 패턴을 이용하여 개선해 보자. 또 옵저버 패턴을 이용하여 관찰자 클래스 방식과 createStore 방식을 바닐라 JS로 구현해 보고 비교해 보자. 프론트엔드에서 상태란 이 글에서 다룰 상태는 값의 변함에 따라 화면에 반영돼야 하는 값으로 정의한다. 그렇다면 프론트엔드에서 상태의 예로는 무엇이 있을까? 이러한 탭바에서 상태는 내가 무슨 탭을 보는지(현재는 .. 2023. 5. 25. VanillaJS로 가상돔 구현해보기 (JSX 문법 적용시키기) 가상돔은 무슨 문제를 해결하는가? 가상돔은 렌더링 성능 문제를 해결한다. 가상돔이 어떻게 렌더링 성능 문제를 해결하는 지 함수형 컴포넌트들을 만들어보며 확인해보자. 이번 글에서는 가상돔이 동작하는 환경을 조금 더 간결하게 만들기 위해 JSX문법을 적용시켜 가상돔을 리턴하는 함수를 만들어 사용할 수 있게끔 해보자. JSX가 무엇이고 왜 사용하는가? JSX는 자바스크립트를 확장한 문법이다. 리액트 공식문서에 있는 활용을 살펴보면 const element = Hello, {name}; 이런 식으로 HTML 템플릿을 하나의 값으로 사용할 수 있게 해준다. 사용이유는 문법의 간결함 마크업과 로직을 포함하여 관심사를 분리하기 위함 가상돔을 이용한다면 사실상 객체인 템플릿을 html문법으로 표현할 수 있다. 문법이 .. 2022. 10. 21. Typescript만으로 SPA 라우터 만들기 (라이브러리 x) 이 글에서는 다른 라이브러리 없이 typescript를 이용하여 SPA 라우터를 만드는 것을 다룹니다. 시작 전에 SPA가 무엇인가? SPA는 하나의 페이지를 동적으로 바꾸어가는 어플리케이션이다. 하지만 같은 url이면 사용자들끼리 링크를 공유했을 때 모두가 다른 화면을 볼 것이다. 그래서 url은 달라지지만 다시 get요청을 받는 것이 아닌 같은 index.html에 DOM을 동적으로 바꿔주는 라우터가 필요하다. 그래서 SPA에서 라우터는 무엇을 해결하는가? SPA에서는 페이지 이동 시 Dom을 다시 그려주어야한다. MPA: 새로운 html SPA: 같은 html 내부를 갈아끼우기 페이지 바뀜을 의도한 이벤트를 인식해야한다. 그러면 라우터의 역할은 무엇인가? 라우터의 역할은 정하기 나름일 것 같지만 내.. 2022. 9. 30. 클로저 (부제: 결국은 스코프) 클로저는 아무도 듣는 사람 없이 쓰러진 숲 속의 나무와 같다. - You Don't Know JS(카일 심슨) JS 코드 얘기를 할 때 제일 헷갈리는 얘기 중 하나가 클로저였다. 클로저를 공부하다보니 결국 내가 필요한 건 클로저의 정의를 이해하고 어떤 상황을 클로저라고 말하는 지 인지하는 거였다. 공부하며 얻게 된 인사이트를 공유하고 싶어 글을 적는다. You Don't Know JS에 적힌 클로저의 정의는 함수가 속한 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 하는 기능 정의를 이해하기 위해 렉시컬 스코프를 알아야한다. 렉시컬 스코프가 렉시컬 스코프인 이유 컴파일러 이론에서 배우는 렉서 가 키워드다. 자바스크립트가 동작할 때 엔진, 컴파일러, 스코프.. 2022. 9. 23. 3d Carousel 구현하기 아래 gif처럼 원근감이 느껴지는 캐루셀을 만들기 위해서는 크기를 다르게 하는 방법도 있겠지만 css에 transform-style: preserve-3d; 를 이용하여 전체 이미지 리스트를 3d로 바꿔줄 수 있다. 그리고 이제 js를 활용하여 버튼 클릭 이벤트 시 회전할 수 있게 해준다. 일단 prev버튼을 클릭할 시 생기는 이벤트를 정리해주면 center에 있는 이미지와 왼쪽 이미지를 특정한다. 왼쪽에 있는 이미지를 가운데에 보내주고 가운데에 있는 이미지는 오른쪽으로 보내준다. 그에 맞게 다른 이미지들도 한칸씩 원주를 따라 돌려준다. 또 next버튼을 클릭할 시 생기는 이벤트를 정리해주면 center에 있는 이미지와 오른 이미지를 특정한다. 오른에 있는 이미지를 가운데에 보내주고 가운데에 있는 이미지.. 2022. 8. 25. 이전 1 2 다음
