Wani.dev

Written by@Wani

공부하고 경험한 것을 기록하는 공간, 훈수 쌉가능🤗

(번역) 리액트 폴더 구조의 진화와 기능별로 바로 그룹화하는 이유

리액트 폴더 구조는 서로 다른 접근 방법 때문에 수년간 논쟁 되고 있습니다. 그로 인해 개발자들은 “파일을 어디에 넣어야 할까?” “코드는 어떻게 정리하지?”라고 의문을 가집니다. 리액트 프로젝트를 구성하는데 가장 유명한 방법은 다음과 같습니다: 컴포넌트, 컨텍스트, 훅과 같은 파일 유형별로 그룹화 컨텍스트, 훅 등을 위한 전역 폴더와 페이지별로 그룹화 …

원티드 프리온보딩 챌린지 - CSR / SSR with Next.js 사전과제

원티드 프리온보딩 챌린지 - CSR / SSR with Next.js Assignment) 개인 블로그에 아래 질문에 대한 포스팅을 하고 링크를 제출해주세요. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. CSR이란 클라이언트에서 웹 페이지에 필요한 소스 코드를 다운 받아 클라이언트에서 계산하여 화면을…

NFT Collection 만들기

블록체인을 제테크의 개념보다 기술적인 호기심이 생겨서 직접 NFT 컬렉션을 만들고 발행할 수 있는 DApp을 만들어 봤습니다. 만드는 과정에서 기술적 가치에 한 번 놀라고 DApp이 생각보다 많은 생태계를 형성하고 있는 점에서 또 한 번 놀랐습니다. 저처럼 웹 프론트엔드 개발만 해오던 사람이 맨땅에 헤딩으로 DApp을 개발하신다면 이 글이 큰 도움이 되기…

웹 워커를 실무에 적용하면서 고민한 내용...

실무에서 웹 워커를 적용하면서 고민했던 내용을 기록합니다. 실무 프로젝트에서는 환경으로 구성되어 있는 점 참고 바랍니다. 웹 워커를 적용한 이유 실시간으로 대용량의 데이터를 차트, 그리드로 렌더링하는 과정에서 성능 이슈가 발생하여 도입하게 되었습니다. 적용하면서 고민한 내용은: 토큰 관리는 어디서 해야할까? Vuex를 이용한 상태관리패턴을 유지할 …

Vue Suspense - 당신이 알아야할 모든 것

더 좋은 사용자 경험을 위해 Vue 3를 이용해서 Suspense 기능을 구현해보고 싶었습니다. 도입하면서 생각보다 고민해야할 부분이 많아 기록으로 남기게 되는데요, Vue Suspense를 도입하려는 다른 분들께 도움이 되었으면 합니다. Suspense는 언제 사용해야할까? Suspense는 비동기 처리동안 렌더링 준비가 되지 않았을 때 로딩 화면을 제…

Evan You의 신년사로 보는 Vue의 2023년은?

얼마 전 유튜브 채널 조승연의 탐구생활에 을 봤다. 신년사를 통해서 각 나라의 목표를 알 수 있는 좋은 영상이었는데 문득 vue의 2023년을 알고싶다면 에반 유의 신년사를 보면 되지 않을까 생각이 들어서 찾아보게 되었다. 해당 글은 나의 어줍짢은 번역 실력과 주관이 담긴 글이다. 정확한 정보를 보기 위해서는 원문을 보는 것을 추천한다. 2022년 리뷰 …

Vue에서 웹 워커에 데이터를 넘길 때 주의사항

웹 워커에 Proxy 객체를 전달할 수 없다 웹 워커에 데이터를 전달할 때에는 메서드를 사용한다. 유의사항으로는 메서드에는 아무 데이터나 다 전달할 수가 없는데, 그 중에서도 Proxy 객체를 전달할 수가 없다. 그게 vue랑 무슨 상관인데? 라고 생각할 수 있다. 하지만 vue에서는 데이터를 감지하여 화면을 리렌더링하는 원리에서 Proxy 패턴을 사…

웹 워커 통신 방법 - 메시지 패싱

지난 글에서는 웹워커의 종류와 특징들을 찍먹하는 내용을 작성했는데요 이번에는 웹워커가 실제로 메인 쓰레드와 어떻게 데이터를 주고 받는지에 대해 작성하겠습니다. 제가 처음 웹워커를 개발했을 때 저만의 규칙을 만들어서 메인 쓰레드와 웹워커 간의 메시지 패싱을 구현했는데 구조도 별로고 다른 사람이 보기에도 어렵더라구요. 무엇보다 찝찝한 건 저만의 규칙이라는 것…

웹 워커 종류

실무 적용을 위해 브라우저에서 제공하는 멀티스레딩 API 인 웹 워커를 정리한 글 입니다. 웹 워커는 CPU 부하량이 높은 작업을 별도의 스레드에서 처리할 수 있다는 장점이 있습니다. 그러면 메인 쓰레드는 UI 렌더링에 더 집중하여 안정적인 FPS(Frame Per Second)를 유지할 수 있습니다. 결과적으로 사용자에게 더 좋은 웹 페이지 경험을 제공…