print("Today-I-Learned")

const formattedNumber = (num: number) => { return num.toLocaleString(); }; 단위 구분 기호 나타낼 곳에 formattedNumber 씌워주기 !

파일 목록 조회, 업로드, 삭제 할 수 있는 type 파일과 서버액션, 서비스함수를 작성하고 해당 view에서 삭제 버튼을 클릭 해 삭제요청이 실행되도록 했는데 계속 응답으로 빈 객체가 나왔다,,(정상적으로는 true나 false 응답을 받아야함! 삭제 응답 API 타입이 boolean이기 때문)계속 이것 저것 해보다가 서비스파일에서 삭제 요청 경로를 console로 확인 해보니 이 부분이 문제였다. // /admin_api/children/:id/files/:objectKey 요청경로pathToUrl(CHILD_ADMIN_FILE_ROUTES.GET_CHILD_ADMIN_FILES, path) 여기서 path로 objectKey를 전달하는데 이 objectKey에 한글이나 특수문자가 포함된다.그리고 p..

Map(): key-value 쌍을 저장하는 자료구조. key의 삽입 순서를 기억하며(순서보장), 키 값에 제한이 없다..get(), .set(), .has(), .delete() 등의 메서드를 제공하며 key는 중복될 수 없다! .set() : key와 value를 추가하거나 갱신 set(key, value) .get() : Map 객체에서 특정 요소 반환. (get("이름") ➜ "John" 반환)get(key) .has() : Map 객체에 key의 존재 여부를 boolean 값으로 나타낸다has(key) .delete() : Map에서 특정 키 값을 제거delete(key) .entries() : key, value 쌍을 배열로 반환정확히는 Map 객체 내의 key-value 쌍을 포함..

const requestBody: AdminCreateChildRequestBody = { name: childInfo.name, phoneNumber: childInfo.phoneNumber, address: { (생략) }, parentId: guardianInfo.id, detail: { (생략), characteristic: { (생략) }, lifeProfile: extraInfo.lifeProfile || undefined, recordInfo: extraInfo.recordInfo || "", ..

npm verb node v20.11.0 npm verb npm  v10.2.4 npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: react-popper@2.3.0 npm ERR! Found: react@19.0.0 npm ERR! node_modules/react npm ERR!   react@"^19.0.0" from the root project npm ERR!   peer react@">=16.8.0" from @dnd-kit/accessibility@3.1.1 npm ERR!   node_modules/@dnd-kit/accessibility npm ERR!     @dnd-ki..

1. 속도 향상구글 웹 폰트를 import하는 방식은 CDN을 통해 폰트 파일을 로드해야하기 때문에 네트워크 상태에 따라 로드 속도가 영향을 받을 수 있다. => 로컬 파일을 사용하면 네트워크 요청이 줄어들어 속도 개선2. 사용자 경험 개선폰트 로딩 속도가 빨라지면서, FOIT(Flash of Invisible Text)나 FOUT(Flash of Unstyled Text) 현상이 줄어든다. 간단히 말하면 폰트가 로드 되지 않아서 텍스트가 보이지 않거나 다른 폰트로 보이는(대체폰트를 지정해놓지 않으면 굴림체로 보인다던가..ㅎ) 현상을 줄일 수 있다.3. 캐싱 및 오프라인 접근성프로젝트에 포함된 로컬 폰트 파일은 브라우저 캐시에 저장된다. 그 이후 방문 시에는 로컬 캐시에서 불러올 수 있어 성능 향상에 도..

📌 개발 진행 및 완료상황페이지 만들기 전에, 컴포넌트 먼저 만들자! 1. 체크박스 컴포넌트 만들기 (view파일 만들어서 테스트 해보기,,)[참고]수업 때 배운 modu-next 폴더의 views의 signUp.view와 components의 ClientCheckBox 2. 추천 검색어를 표시하는 재사용 가능한 칩스 컴포넌트 만들기 [이슈] App.tsx 파일에서 컴포넌트를 넣어주고 localhost에서 확인해보니 {term} 이라고 그대로 노출됨.. map부분 코드를 보니까 말도 안되게 label을 문자열로 쓰고 있었다 label까지 치고 엔터쳐서 자동완성 된 것 같다 😕 암튼 빼주니까 잘 나오는 걸 확인했고스타일도 적용까지 끝 ! 3. 탑탭(TopTab) 컴포넌트 만들기 [이슈] 클릭된 탭..

까먹을까봐 써두기 📝📝 맥북이나 아이맥 쓰면 안드로이드 버전으로도, ios 버전으로도 pc에서 시뮬레이터 확인이 가능하지만나는 노트북은 삼성, 폰은 아이폰 쓰고 있어서.....ㅎ 개발환경을 아이폰에서 expo 앱으로 볼 수 있는데 오히려 안드로이드화면을 확인 할 수 없었다. 안드로이드 스튜디오의 에뮬레이터 다운받고, 시스템 환경 변수 설정해주고 이런 것들은 다 블로그에 잘 정리되어 있다근데 난 이 모든걸 다 해줘도 안드로이드 에뮬레이터랑 expo 연결이 안됐었는데,, 방금 해결했다! npx create-expo-app 프로젝트명프로젝트 폴더 생성한 다음에cd 프로젝트명해당 프로젝트 폴더로 이동한 다음 npm run android해줬더니 너 지금 2.31.1 쓰고 있는데 51.0.0 다운 받는거 추천함..

ScrollView 대신에 FlatList 사용하기!return ( {props.data.map((item, index) => ( // key는 최상단에! ))} );이 부분을 FlatList를 사용해 구현하는데 FlatList에서는 keyExtractor로 키를 지정할 수 있다.그래서 ↓ 다음과 같이 작성했는데 keyExtractor부분에 에러가 발생함.. return ( index} ItemSeparatorComponent={ItemSeparatorComponent} renderItem={renderItem} /> );이 호출과 ..

수업에서 배운 storybook을 이용해 todo 컴포넌트를 만들어보자!공식문서에 친절하게 todo 컴포넌트를 만들어보는 튜토리얼이 제공된다. 그러나 jsx 파일이 기준이고, 이전 버전이라 최신버전과 tsx를 사용하고 있는 내 작업 환경에서는 수정해야하는 부분이 몇 가지 있었다,, 튜토리얼 참고https://storybook.js.org/tutorials/intro-to-storybook/react/ko/simple-component/ 1.  Task.tsx 와 Task.type.tsx 파일 생성// 공식문서 튜토리얼에서 알려주는 Task.jsx import React from 'react';export default function Task({ task: { id, title, state }, onAr..