yehey's 공부 노트 \n ο(=•ω＜=)ρ⌒☆

Issue Input 컴포넌트를 styled-component로 커스텀하여 사용하는 중, input type='date' 를 사용하여 날짜를 선택할 수 있게 하려 했다. 데스크탑 웹에서 테스트 및 개발을 하고 있기 때문에 모바일로 확인해서 볼 기회가 없었는데, 최근 테스트를 하며 기대한 것과 다르게 input 의 width가 설정해둔 100%가 아닌 특정 값으로 고정되어있었다. (테스트 기기는 아이폰 13pro, safari, chrome 모두 동일하게 출력됐다.) 100%로는 지정되지 않는데, 정확한 값을 넣으면 또 되고,,, 그치만 내가 원하는건 반응형으로 딱 절반 크기의 width가 될 수 있도록 하고 싶었다. 우선 같은 이슈를 가진 사람들은 어떻게 해결했는지 찾아본 결과.. https://gith..

Background Typescript 기반으로 Next, styled-components 를 사용해서 개발 중 constant 값에 변수로 접근해야하는 경우가 있었다. 그런데 타입스크립트에서 object를 변수로 접근하려니 typescript warning? error 가 발생했다. Issue / Error 현재 color 를 정해놓고 color.ts 에 두고 필요한 곳에서 불러서 사용하고 있다. // color.ts export const WHITE = '#FFFFFF'; export const BLACK = '#000000'; export const GREY = { 100: '#B3B3B3', 200: '#4E4E4E', 300: '#..

Background icon을 추가하면서 기존에는 필요한 svg 파일을 다운받아 사용했는데, 이번 프로젝트에서는 정해진 아이콘 없이 이것저것 사용해보고 잘 맞는 아이콘을 적용하고 싶었다. 그래서 google 에서 지원하는 google material icon 을 사용하기로 했다. 현재 프로젝트는 Next.js Approuter 를 사용하고 있다. Contents https://fonts.google.com/icons Material Symbols and Icons - Google Fonts Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design v..

Background next js 를 app router 프로젝트로 시작했다. 그리고 styled-component로 스타일링 하는 것을 선호하기 때문에 설치 후 적용하면서 겪었던 모든 에러를 정리하고자... 쓴다.... (굉장히 다양하게 만남...^^) Issue 1 : use client 에러 // app/layout.tsx import styled, { ThemeProvider } from 'styled-components'; import { theme, GlobalStyle } from '@/styles'; import Header from '@/components/Header'; export default function RootLayout({ children }: { children: Reac..

Background 우선 spring에서 아키텍처를 어떻게 가져가야할 지 잘 모르겠어서 잘 정리된 포스팅을 참조해서 진행하고 있었다. 그치만 문제는 포스팅은 정말 간단한 예제였고, 내가 원하는 모든 기능이 나타나있지 않다는 점! (항상 그렇지만) DB 구조는 다음과 같다. 여기서 다룰거는 셀프 참조 혹은 관계에 관한 에러다. Issue / Error tag - type 관계에서 tag를 추가하고 싶은데, DTO 구성을 어떻게 해야하는지... tag 라는 테이블이 tag_id가 pk고 셀프 참조 해서 parent_id 필드가 있음 tag 테이블이랑 type 테이블이랑 연결되어잇는데(?) 여러 tag가 하나의 type을 가질 수 있음! type > tag 이런식이어서 JPA로 tag가 N이고 type이 1이..

react에서는 restful api를 주로 사용했기 때문에 graphql을 사용해서 프로젝트를 하는건 처음이고 그래서 이리저리 애를 많이 먹었다. useQuery의 경우에는 며칠 에러가 났었는데 provider를 전역으로 사용했더니 이상하게 문제가 발생하지 않았고 useMutation이 오늘 다뤄볼 에러,,, 아무리 시도를 하고 playground에서 테스트를 해봐도 잘 돌아가는 코드가 react native에서만 돌아가지를 않았다. 답답답답 원래 코드 위처럼 뮤테이션 코드를 작성했고 반환은 String이었기 때문에 따로 추가할 게 없었다. 이렇게 그대로 playground에서 테스트하면 진짜 잘되었는데... error는 submission error로 400코드가 떴음 아무리 찾아도 오류가 없어서 이..

React Native ios 개발을 하던 중 @react-navigation/native 와 같은 navigation 패키지를 다운받아 실행하려 하는데 다음과 같은 에러가 발생했다. ERROR Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager. RNSScreenStackHeaderConfig 를 UIManager에서 찾을 수 없다는 에러였고, pod install을 해도 해결이 되지 않았다. import React from 'react'; import {NavigationContainer} from '@react-navigation/native'; import {cr..

오늘의 에러 javascript 정확히 말하면 typescript 프로젝트를 진행하던 중 만나서 시간을 좀 많이 투자한 에러다. 특정 배열을 map 을 이용해서 새로운 배열로 생성했는데, map 안에서 비동기 함수를 사용했고 그 비동기 함수의 반환으로 이루어진 배열이 내가 필요해하던 배열이었다. 그런데 나는 값이 필요하지, Promise 들이 필요한건 아니었다. 근데 promise pending, 즉 초기상태로 아직 이행중이거나 시작을 하지 않아서 값이 없는 상태로 여기에 이제 값을 넣을거라는 약속 Promise를 주는 것이었다. 그래서 첫번째로 내가 await 해야하는 어딘가에 await을 하지 않은건가 라는 합리적인 의심을 하며 시간을 계속 보냈다. 진작 구글링을 이때부터 했어야했는데 이곳 저곳 aw..