프로그래밍 8

전역 상태(zustand)에서 배열 concat의 side effect, 해결 방안 (feat. React Strict Mode)

문제 상황공공데이터 API에서 받은 하루 동안의 특정 경로의 고속버스 운행 리스트 데이터를 전역 상태인 useTowardBusListStore()에 Array concat으로 기존 배열 데이터 + 받은 데이터를 저장하고 있었다.zustand로 전역 store를 만들었으며, 아래에서 useForwardBusListStore의 concat 함수 코드만 보면 된다.concat 함수를 보면 원래 state list에 새로 들어온 list를 합치는 작업을 한다.forwardBusList: [...state.forwardBusList, ...newforwardBusList]import { create } from 'zustand';import type { ForwardBusListState } from './ind..

Vite Proxy with Base URL & CORS 해결

Vite에서 proxy를 쓰는데 github page 배포와 같이 base url이 필수적인 세팅에서는 어떻게 proxy 경로 구성해야 하는지 설명 찾기가 힘들어서 이번 기회에 글로 남겨놓으려 한다.배포 환경에서도 proxy를 이용하고 싶었는데 github page에서는 지원하지 않는 것인지 실패했고, vercel의 경우 vercel.json을 통한 추가 경로 설정으로 성공했다. (참고 : https://velog.io/@jeajea0127/Vercel에서-proxy-설정하기)netlify에서도 비슷한 추가 설정으로 가능한 것 같다 : https://github.com/vitejs/vite/discussions/17381#discussioncomment-9939768github page는 정적 페이지 배..

10분 만에 웹사이트에 PWA 적용해서 웹앱 만들기!

사실 처음 붙잡았을 때는 오류 해결하느라 1시간 정도 걸렸고, 글로 정리해서 작성하는 데는 미루다 일주일 넘게 걸렸다... 그래도 manifest.json 등록하는 것은 정말로 금방 할 수 있다!!PWA란?Progressive Web Apps 의 약자로 브라우저 기반의 웹을 앱처럼 바로 설치해서 사용 가능한 기술이다.윈도우라면 윈도우 프로그램처럼 설치되고 작업 표시줄에 등록도 가능하고, 모바일이라면 진짜 별도의 앱처럼 설치된다.브라우저에서 제공하는 기능이고, 캐시 정보 등은 브라우저에 저장되면서 설치되는 듯하다.아직까지 한글 정보는 많이 없고 설명이 적어 MDN 공식 문서가 가장 좋았다. MDN 문서 중에서도 번역되지 않은 부분이 많아 나중에 기여해보면 좋을 것 같다.https://developer.mo..

React Component와 객체지향의 차이에 관하여

소개글과연 객체지향, OOP에서 말하는 객체와 React Component를 동일선 상에 놓고 봐도 되는가?KUIT 교내 개발 동아리에서 WEB 파트장을 하다 이런 질문을 받게 되었다. 좋은 질문을 남겨준 이름 모를 부원 분께도 감사하며, 파트장을 하며 오히려 알아가는 것이 많아 힘들지만 재밌다.지금까지 받은 질문 중에서 가장 많이 찾아보고 고민했음에도, 아직까지 스스로 명확한 답을 내리지 못한 상태이다. 이 질문 덕에 React 공식 문서부터 각종 번역본, React 개발자 분의 블로그(overreact)까지 탐독하게 되었다.(이 글을 읽는 다른 개발자 분들의 의견도 매우 궁금한 상황이고 틀린 내용이 있다면 꼭 댓글 달아 주시면 정말 감사하겠습니다!!)JS Deep Dive 책을 다 읽고 이해한다면 더..

Fixed Menu, 메뉴 바 상단 고정 구현 시 content에 margin-top을 주면 위험한 이유 (feat. margin collapsing)

소개KUIT 교내 개발 동아리에서 WEB 파트장을 맡아 운영 중이다. WEB 파트 부원들에게 준 2주차 미션이 당근마켓 화면 HTML, CSS로 클론코딩하기였다.미션 결과물 코드리뷰를 하다 좋은 질문들이 많이 나와 공부가 많이 되었는데, 그 중에 fixed menu, 메뉴 바 상단 고정 구현 할 때 menu bar 아래 content에 margin-top을 주면 위험할수도 있겠다는 생각이 들었고, 그 이유에 대해서도 많이 찾아보게 되어서 글을 써보았다.질문코드와 함께 보는 것이 편할 수도 있을 것 같아 추가한 github discussion 주소이다.만들고자 하는 화면은 아래 이미지처럼 당근마켓의 한 화면을 구현하되, 스크롤을 내려도 맨 상단 바가 항상 위에 고정되도록 하는 것이었다. 일반적인 블로그나 ..

Asrock H110M-HDV 보드 + Linux Ubuntu 22.04 WOL (wake on lan) 설정하기

1. Asrock H110M BIOS 설정2. Ubuntu 22.04 WOL 설정안 쓰는 컴퓨터에 우분투를 깔아서 홈서버를 만든 적이 있다.문제는 24시간 동안 켜 놓으니 전기세나 발열은 둘째 치더라도 소음이 너무 커서 잠자기 힘들어서 해결할 방법을 고민했었다. 물론 구형 HDD에 구형 쿨러를 쓰는 탓도 있겠다.1. 쿨러교체 + HDD를 SSD로 교체, M.2 NVMe to SATA converter가 필요2. 본체를 바깥으로 빼고 벽단자 잘 찾아서 공유기 연결하기 or 선을 길게 빼기3. WOL 설정하고 필요할 때만 켜서 쓰기 or 취침 시간에 자동 종료, 자동 켜지게 구성하기1번은 소음 크기는 줄일 수 있어도 소음 자체는 줄이지 못하고, 2번은 사용 중인 것을 제외하고 살아 있는 벽단자가 없었다. 블..

[JavaScript, Node.js] 프론트엔드(JavaScript Runtime)에서의 Race Condition

JS와 관련해서 흥미로운 사실을 찾았다. 시스템프로그래밍이나 OS 수업에서 한 번쯤 들어봤을 race condition이 프론트엔드에서도 발생할 수 있다는 것이다. Race Condition? race condition은 두 개 이상의 프로세스, 스레드가 공유되는 자원(critical section)에 접근해서 값을 쓰려고 할 때 발생한다. race condition이 발생하면 공유 자원의 값이 의도치 않게 변경되는 문제점이 생긴다. 백엔드에서의 레이스 컨디션은 실제 바뀐 값으로 권한 상승 등이 일어날 수 있어 CTF에서도 종종 출제되고 보안적으로 상당히 심각하게 다뤄지는 문제이다. 반면 프론트엔드에서는 보여지는 화면만 바뀌는 것이니 그렇게까지 위험하지는 않을 것 같고, Race Condition이 발생..

[Git / Github] git submodule pull 받아오는 방법 및 용도

git submodule 사용 계기이번 ithome 프로젝트를 Next.js + TS 로 마이그레이션 하면서 git submodule 기능을 사용했다.기존에는 하나의 repository에 프론트, 백이 폴더로 구분되어 같이 들어 있었다.프론트만 환경을 Next.js로 바꾸면서 프론트 repo를 따로 만들었다.localhost에서 테스트할 때 편의성을 위해 백 repo를 포함시킬 필요가 있어서 submodule로 포함시켰다.## 기존 구조ithome---/frontend (React)---/backend (Nest.js)---docker-compose.yaml## 새로운 구조ithome-front (Next.js 메인)---/backend @ 8d972c3 (submodule)---/public---/s..

프로그래밍 2024.03.25