개발자R의 삶

이미지를 백엔드에서 presignedUrl을 만들어서 프론트엔드로 보내주고 화면에 뿌려주는 상황. 화면에서는 분명 이미지가 잘 보이는데 html2canvas, jspdf 를 사용해서 pdf로 다운받을 때에는 이미지가 보이지 않았다. 이미지 크기만큼 자리를 차지하는거 보면 분명 element를 인식을 하는 것 같았다. 그런데 어떠한 에러도 나지 않고 그냥 안보였음. 사진 설명과 함께 이미지가 아래에 나와야 했음. 근데 이미지 부분이 하얗게 나오는 현상.. 구글링 열심히 한 결과 S3 CORS의 문제였다는걸 알게되었음. https://github.com/eKoopmans/html2pdf.js/issues/141 위 url 참고 일단 S3에서 CORS 를 허용하도록 셋팅해야한다. 이건 내가 한건 아니라서 설명..

query param은 url에 그냥 넣어주면 되고, request param은 { params : { ....} } 형태로 넣어주면 된다. axios .get(`http://localhost:8080/api/v1/user/${USER_NO}/history`, { params: { history_type: value, start_date : .... .... }, }) .then((response) => { setHistoryList(response.data); }); request param이 없는 경우 아래처럼 하면 된다. axios .get(`http://localhost:8080/api/v1/user/${USER_NO}/history`) .then((response) => { setHistoryL..

mui 라이브러리를 사용하지 않고 처음부터 끝까지 AutoComplete 를 구현했다. 생각보다 신경쓸게 많았다. 제일 빡셌던건 방향키로 목록을 탐색할 때 스크롤을 자연스럽게 움직이게 하는 것이었다. 처음엔 자바스크립트 기본 함수인 scrollIntoView() 를 사용해볼까 했는데 내가 생각하는거랑 전혀 다르게 움직여서 그것까지 직접 구현했다. (그래서 코드가 좀 더러움;) AutoComplete.tsx import { useState, useRef, useEffect } from "react"; import { getLocalStorageValue } from "./utils/localstorage.util"; import styles from "./AutoComplete.module.css"; im..

Webpack Module Federation https://webpack.kr/concepts/module-federation/ - Type: Run-time - webpack 5 에서 제공 장점 가장 유명한 프레임워크인 Webpack 5로 빌드함. 라이브러리 중복을 막아주어서 번들 사이즈를 줄여줌 평범한 npm을 사용하는 것 처럼 보여서 개발자들에게 이질감 같은게 느껴지지 않음 단점 런타임에서 컴포넌트들이 다이나믹하게 통합되는게 리스크가 있음 타입스크립트 지원을 받으려면 추가적으로 뭘 해줘야함 Single-SPA https://single-spa.js.org/ - Type: Run-time Piral https://piral.io/ - Type: Run-time - senior 없어도 개발할 수 있을..

예를 들어 Container가 있고, 그 안에 Cart service, Products service들이 있다고 해보자. 1. Build-Time Integration 빌드타임 통합 (컴파일타임 통합) : 컨테이너가 브라우저에 로드되기 전에 다른 프론트서비스들의 코드에 접근할 수 있다. 예) Cart 를 npm package로 배포함 (어딘가에 저장되어있음) → Container 팀이 Cart 패키지를 dependency로 설치함 → Container 팀이 앱을 빌드함 → 번들 결과물은 모든 코드를 포함함 장점 : 셋업이 쉽고, 이해하기 쉬움 단점 : Cart 가 업데이트 될 때마다 Container는 재 배포 해야함. Container와 Cart가 넘 결합되어있음 2. Run-Time Integrati..

https://fabrity.com/blog/software-engineering/micro-frontends-pros-and-cons/ Micro frontends: pros and cons - Fabrity Software House Micro frontends can be an alternative to the frontend monolith architecture, especially for more complex projects. Read on to find out more. fabrity.com 글의 번역 글입니다. 웹앱이나 SPA 앱을 만들 때 정말 작은 프로젝트가 아니라면 통상 여러 개발자들이 하나의 나눌 수 없는 코드를 가지고 일을 한다. 왜냐하면 많은 프론트엔드 프레임워크들이 모놀리틱 ..

스벨트 프로젝트 시작 npm install -g degit npx degit sveltejs/template 프로젝트이름 cd 프로젝트이름 npm install npm run dev 라우터 사용 npm install --save svelte-spa-router App.svelte list.svelte 음악 차트 {dateString} setChartType("domestic")} class={currentType === "domestic" ? "selectedType" : ""}>국내 setChartType("overseas")} class={currentType === "overseas" ? "selectedType" : ""}>해외 {#each chartList as chartData, idx} {c..

index.html 음악차트 국내 해외 index.js window.onload = function(){ let today = new Date(); let date = '${today.getFullYear()}년 ${today.getMonth()}월 ${today.getDay()}일 ${today.getHours()}:00'; let p_date = document.getElementById("date"); p_date.append(date); let domestic = document.getElementById("domestic"); let overseas = document.getElementById("overseas"); domestic.addEventListener("click", function..

1. 날짜 Date() 활용하기 2. ajax 로 api 불러오기 list.html 음악 차트 국내 해외 detail.html

어떻게 검색을 해야하는 건지, 검색을 해도 잘 안나와서 어찌저찌 개발을 했다. 앱을 쓰다보면 상단 타이틀이 페이지마다 바뀌는 UI를 본적이 있을 것이다. 예를 들어 카카오톡 같은 경우에도 친구 / 채팅 / 뷰 이런식으로 현재 페이지 이름이 상단에 나와있다. 그런데... 레이아웃은 아래처럼 되어있다. 페이지는 여기만 바뀌는데 의 속성을 어떻게 바꿀 수 있지? {props.children} 열심히 생각하다가, react의 Context API를 사용해야하나, redux를 사용해야하나 고민을 했고 redux를 활용하기로 했다. 우선 store 폴더를 먼저 만들어주었다. store 폴더에 index.js 파일과 title.js 파일을 만들어준다. title.js는 state를 관리하는 곳이고, index.js는..