개발여행

Vite를 사용하지 않고 React만 단독으로 빌드하면 별도의 과정없이 svg를 컴포넌트로 사용할 수 있다.하지만 Vite를 함께 사용하는 경우 라이브러리를 추가로 설치해야한다. 그마저도 public 디렉토리에 저장한 svg를 사용하기 쉽지않고 src에 저장해야 간편하게(?) 쓸 수 있다. 우선 `vite-plugin-svgr`이라는 라이브러리를 설치해야 한다. 원하는 패키지 관리자로 설치하자.# npmnpm install --save-dev vite-plugin-svgr# yarnyarn add -D vite-plugin-svgr# pnpmpnpm add -D vite-plugin-svgr 아래의 라이브러리 페이지에서 사용법을 설명하고 있는데 이대로 사용한다면 svg를 사용할 순 있지만 props는 전..

// 1const backgroundColor = `bg-${isOn ? "blue-500" : "gray-700"}`;// 2const backgroundColor = `${isOn ? "bg-blue-500" : "bg-gray-700"}`; 테일윈드 CSS로 스타일을 적용할 때 동적으로 스타일을 할당해야 한다면 첫번째 방법이 아닌 두번째 방법처럼 클래스 명을 온전히 적어주어야 한다. 프로젝트를 빌드할 때 테일윈드 라이브러리에서 클래스명에 따라 CSS 파일을 생성하는데 첫번째 방법처럼 스타일 클래스명을 동적으로 작성할 경우 라이브러리에서 사용할 수 없는 클래스명으로 판단해서 CSS 파일에 해당 색상이 포함되지 않게 된다.

interface MyClassData { value: number; ... } class MyClass { ... getValue() { return this.value; } } class MyClassArray extends Array { constructor(myClassDatas: MyClassData[]) { const myClassArray = myClassDatas.map((data) => new MyClass(data)); super(...myClassArray); Object.setPrototypeOf(this, MyClassArray.prototype); } getValues(): number[] { return this.map((myClass: MyClass) => myClass.ge..

QTableWidget에서 입력을 받기 위한 간단한 작업을 하고 있었다. 더미 데이터가 필요해 입력하던 중 갑자기 메모리 오류로 프로그램이 종료돼버렸다. 그 당시엔 뭔가 잘못 눌렀겠거니 하고 넘어갔는데 다시 한번 같은 상황을 재현해보니 셀 선택 후 한글을 입력한 뒤 빠르게 영어나 숫자를 입력하면 프로그램이 종료되는 것이다. ?? 이게 뭔 상황이여 해당 에러 코드로 검색해봐도 당연히 유사한 문제는 찾을 수가 없었다. 문제를 해결하기 위해 이것저것 시도해 보다가 찾은 제일 괜찮은 방법은 셀 선택시 강제로 편집모드로 바꾸는 것이였다. def add_new_row(self): count = self.rowCount() self.insertRow(count) 기존에는 상단의 스크린샷처럼 add 버튼을 누르면 새로..

한 때 코틀린과 플러터를 같이 깨작거리며 공부해보던 적이 있었다. 코틀린은 비즈니스 코드(.kt)와 UI파일(.xml)이 분리되어 있어 UI는 UI대로, 코드는 코드대로 따로 설정할 수 있어서 간편하고, 플러터는 하나의 파일에서 UI와 코드를 모두 작성해야해서 이게 도대체 무슨 코드지라고 생각하며 코틀린이 낫다고 생각했었다. 그런데 프로젝트 규모가 점점 커지고 최근 들어 리액트도 접해보면서 어쩌면 한 파일에서 관리하는게 편할 수도 있겠다는 생각이 들고있었다. (xml 왔다갔다하기 넘 귀찮..) 그러던중 요즘 새로운 프로젝트를 시작하게 되면서 다시 기초를 훑어보고 있었는데 코틀린에서 Jetpack Compose라는 라이브러리로 리액트나 플러터처럼 한 파일에서 UI와 코드를 작성할 수 있다는 것을 알게됐다...

사용자에게 시간을 입력받아야 하는데 기본 timePickerDialog는 너무 안이뻐서 커스텀으로 만들어서 사용하려 했다. 그런데 웬걸, 시간이 안뜨네? themes.xml에서 속성도 변경해보고 별 짓을 다했는데 안보인다.. 돌고 돌아 지피티에게 물어보니 spinner 모드일 때는 스타일 지정을 해도 몇가지 속성은 적용되지 않는다고 한다 (ㅡㅡ) 불현듯 생각해보니 스피너모드에서는 드래그해서 시간을 선택할 수도 있지만 터치하면 수정할 수 있도록 editText 형식으로 구현되어 있다. 그리고 스쳐지나가는 또하나의 생각.. 앱 전체에 폰트를 적용하기 위해서 customViewFontStyle을 지정해놨었다. 에딧텍스트에 색을 지정해주니 타임피커의 글씨색이 변경되었다 또 예상치 못한곳에서 삽질을 했는데 검색해..

https://www.acmicpc.net/problem/9466 9466번: 텀 프로젝트 이번 가을학기에 '문제 해결' 강의를 신청한 학생들은 텀 프로젝트를 수행해야 한다. 프로젝트 팀원 수에는 제한이 없다. 심지어 모든 학생들이 동일한 팀의 팀원인 경우와 같이 한 팀만 있을 www.acmicpc.net 이 문제는 리스트를 순회하면서 몇명의 인원이 팀이 되었는지 (순환 싸이클이 완성되었는지) 판단하는 문제이다. for _ in range(int(input())): n = int(input()) arr = [0] + list(map(int, input().split())) visited = [0] * (n+1) visited[0] = 1 result = [] for v in range(1, n+1): i..

https://www.acmicpc.net/problem/1707 1707번: 이분 그래프 입력은 여러 개의 테스트 케이스로 구성되어 있는데, 첫째 줄에 테스트 케이스의 개수 K가 주어진다. 각 테스트 케이스의 첫째 줄에는 그래프의 정점의 개수 V와 간선의 개수 E가 빈 칸을 사이에 www.acmicpc.net 문제에서 제시된 이분그래프에 대한 설명은 아래 블로그에 이해하기 쉽도록 설명되어 있다. https://hongcoding.tistory.com/20 [백준] 1707 이분그래프 (Python 파이썬) www.acmicpc.net/problem/1707 1707번: 이분 그래프 입력은 여러 개의 테스트 케이스로 구성되어 있는데, 첫째 줄에 테스트 케이스의 개수 K(2≤K≤5)가 주어진다. 각 테스트..