[펌글] SASS 에서 미디어쿼리(media query)를 사용하여 기기(디바이스, device) 분기 처리(반응형, responsive)하는 샘플 코드

By | 2월 22, 2023
0 Comment

참고 원본 출처 – [SCSS(SASS)] 반응형 breakpoints 추가하는 방법 원본이 scss로 되어 있어서 sass로 변환해 봄 sass로 map 선언시, 개행하면 문법오류가 나서 map-merge를 사용했으나 별로 좋아보이지 않는다. sass의 한계인지? 샘플 소스 /////////////////////////////// 반응형 환경변수 정의 (S) /////////////////////////////// $breakpoints: ('mobile-extra-small': (min-width: 21.25rem)) // 340 $breakpoints: map-merge($breakpoints, ('mobile-portrait-only': (max-width: 29.9375rem))) // 479 $breakpoints: map-merge($breakpoints, ('mobile-landscape': (max-width: 51rem)))… Read More »

[typescript] object 내에 있는 key를 기준으로 object 내부를 정렬하기 (sort, order by…)

By | 2월 14, 2023
0 Comment

소스 /** * 인자로 받은 object를 key 기준으로 내부 정렬하여 리턴한다. * * – 한계점 * – 1depth 만 되는 것처럼 보인다. */ export const sortByKey = (unordered: any = {}) => { return Object.keys(unordered) .sort() .reduce((obj: any = {}, key: any) => { obj[key] = unordered[key]; return obj; }, {}); }; 참고 https://stackoverflow.com/questions/5467129/sort-javascript-object-by-key

[nginx] gzip 압축 설정 샘플

By | 2월 9, 2023
0 Comment

nginx.conf http { … gzip on; gzip_comp_level 6; gzip_min_length 5120; gzip_buffers 16 8k; gzip_proxied any; gzip_types text/plain text/css text/js text/xml text/javascript application/javascript application/x-javascript application/json application/xml application/rss+xml image/svg+xml; … } 참고 gzip_min_length 5120 은 적당히 생각해서 지정한 값임. https://extrememanual.net/10004

[typescript] 스프레드 연산자 (전개구문, 펼침, spread operator) 를 사용한 배열을 함수의 인자(인수, 매개변수, arguments)로 넘기고 싶을 경우

By | 2월 1, 2023
0 Comment

javascript 라면 그냥 사용하면 되는데, typescript 일 경우 아무 생각 없이 사용하면 다음과 같은 에러가 발생한다. A spread argument must either have a tuple type or be passed to a rest parameter function getObj(name: string, age: number) { return { name, age, }; } // 해결방안 1) as const를 사용하여 배열을 튜플(tuple)로 만든다. const result… Read More »

[react] 특정 html element의 값을 수동으로(programmatically) 셋팅 (el.value = newValue)하는 데 완벽하게 되지 않을 경우에 대한 해결 샘플.

By | 2월 22, 2023
0 Comment

개요 react로 wrapping한 메신저 라이브러리 (sendbird)의 메시지 입력창 (textarea)에 set value를 해야 하는 상황 textarea.textContent = newValue 식으로 값을 셋팅한 후 textarea.dispatch(new Event(‘input’)); => 처음 한 번은 잘 됨. 이후로는 계속 안됨. 검색 끝에 아래의 방법으로 해결함. 유틸함수 선언 const inputTypes = [ window.HTMLInputElement, window.HTMLSelectElement, window.HTMLTextAreaElement, ]; /** * 특정 html element의 value를 set 하는… Read More »

[react] input text – placeholder 처럼 생긴 레이블(label, 라벨)이 인풋박스의 좌상단으로 이동하는 애니메이션(animation) 기능 구현 샘플. (floating label)

By | 1월 31, 2023
0 Comment

repl 아래 참고 링크중 하나를 복붙하여 구현 참고 https://blog.stackfindover.com/animated-floating-input-labels-using-css/ https://dev.to/rafacdomin/creating-floating-label-placeholder-for-input-with-reactjs-4m1f https://jacobruiz.com/blog/2021/2/11/how-to-transition-placeholder-text-into-a-label-in-react-floating-label-inputs

[react] html 엘리먼트 (real dom element) 에 리액트 컴포넌트 (react component) 삽입(insert)하기

By | 1월 30, 2023
0 Comment

환경 react ^18.2.0 import React, { useEffect, useState } from "react"; import { createPortal } from "react-dom"; import TestExt from "./TestExt"; /** * TestExt 컴포넌트를 특정 DOM 노드에 선택적으로 삽입하기 위해 wrapping한 컴포넌트 */ const TestExtWrap = ({ isOpen }: { isOpen: boolean }) => { const wrap = document.getElementById("div-sample")!; return <>{isOpen && createPortal(<TestExt />,… Read More »

yarn dev로 서버를 띄워 브라우저로 테스트를 하는데, vite connected 상태에서 화면에 출력되지 않을 경우

By | 12월 26, 2022
0 Comment

환경 "vite": "2.9.15" "react": "^18.2.0" "typescript": "4.9.4" 현상 browser 콘솔(console) 에서는 ‘vite connected’ 상태 로딩중 동글뱅이 돌고 있음. browser network 탭을 보면 main.tsx 에서 대기(pending)중 해결 yarn build시 컴파일 오류가 나는 부분이 있었는데, 그 부분을 해결하니 다시 잘 됨.

[react] package.json 내의 라이브러리 버전 고정의 위험성

By | 12월 14, 2022
0 Comment

환경 vite 2.9.15 @mui/material ^5.10.5 @mui/material 의 버전업이 너무 빨라서 ‘되던 게 안되는 현상’ 이 발생하여 (minor version 변경임에도 props 구조가 변해 버림) 꺽쇠 ^를 사용하지 않고 버전 숫자만으로 지정하여 고정을 시도했으나, yarn build는 성공했는데 yarn dev 에서 알 수 없는 오류를 계속 뱉어내어 롤백을 했다.

[yarn berry] tsc (typescript compile) 명령시 로컬에서는 정상인데 서버에서만 컴파일 오류가 났던 경험 (ts error only server / aws codebuild)

By | 12월 14, 2022
0 Comment

로컬 환경 yarn 3.2.3 을 사용하여 라이브러리 설치, build 모두 수행 서버 환경 node 16 (aws codebuild) 항상 아무것도 없는 바닥에서 npm install 부터 시작함. install 시에는 yarn을 사용하지 않고 npm i –force 명령을 사용 (항상 새로 다운로드) build시에는 yarn 1.x 를 사용 이슈 서버 빌드시에만 타입스크립트 오류 발생 정확히 말하면 build 전 수행하는 tsc… Read More »

spring web 에서 파라미터를 전송할 때, 아무 이유 없이 파라미터 바인딩(parameter, bind, bound)이 되지 않았던 경우 (camel case, jackson)

By | 12월 13, 2022
0 Comment

전달되지 않은 파라미터 명: fInput 전달된 파라미터 명: ffInput ??? 원인 jackson이 java bean naming convention을 사용하는데, java 표준에는 ‘Don’t capitalize first two letters of a bean property name’ 라는 룰이 있다고 한다. 결국 jackson이 json parsing 하는 각 프로퍼티의 첫 두 글자는 무조건 소문자여야 한다는 것. 참고 https://stackoverflow.com/questions/30205006/why-does-jackson-2-not-recognize-the-first-capital-letter-if-the-leading-camel-c http://futuretask.blogspot.com/2005/01/java-tip-6-dont-capitalize-first-two.html