일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
- Next 팀 프로젝트
- 파이썬 slice
- 자바스크립트
- 파이썬 list
- useState
- 타입스크립트 리액트
- React Hooks
- 리액트 페이지 이동
- 파이썬 enumerate
- 내일배움캠프
- 파이썬 반복문
- typeScript
- 코딩테스트
- 파이썬 for
- 그리드 정렬
- 내배캠 프로젝트
- 파이썬 for in
- 리액트 팀 프로젝트
- JavaScript
- 리액트
- 리액트 훅
- 타입스크립트
- 프로그래머스
- REACT
- 한글 공부 사이트
- js
- 내일배움캠프 프로젝트
- 리액트 프로젝트
- 타입스크립트 props
- 내일배움캠프 최종 프로젝트
- Today
- Total
목록2024/03 (56)
aotoyae
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/2krPd/btsFPcmOD9Y/OTfmRsXSmVn8eQ2gmWi8KK/img.png)
💡 체크박스 에러 발견.. toggleTodohandler(todo.id, todo.isDone)} /> 체크박스에 이벤트를 onClick 으로 주었더니 에러가 떴다. onChange 를 쓰거나 readOnly 를 붙여주라고..! toggleTodohandler(todo.id, todo.isDone)} /> 바꿔주니 에러 없이 잘 동작한다. 🫠
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/1zqTu/btsFPa8M85m/quwncB6IUKmpIDY6y25jyK/img.png)
💡 jsx 에서 테이블을 만들어보자! title contents {todos.map((todo: Todo) => { return ( {todo.title} {todo.contents} ); })} 화면엔 잘 나오는데 에러가 떠서 🥲 찾아보니 HTML 에서의 table 은 tbody, thead 를 생략해도 tr/td, th 를 쓸 수 있지만 JSX 에선 반드시 tbody & thead 를 써줘야된다고 한다! DOM tree 가 잘 렌더되도록 더 안전하게 구분을 해 두는 것 같다. title contents {todos.map((todo: Todo) => { return ( {todo.title} {todo.contents} ); })} 🤤 🔗 https://velog.io/@dongdong98/React..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/kEYaA/btsFPrI8PtE/QUiKum7epimDvEkQsYSiWk/img.png)
💡 Image 컴포넌트에서 만난 오류.. db.json "companyInfo": { "name": "aotoyae's todo-list", "desctiption": "Next-todo-list Project Copyright 2024. aotoyae all rights reserved.", "image": "https://i.namu.wiki/i/d1A_wD4kuLHmOOFqJdVlOXVt1TWA9NfNt_HA0CS0Y_N0zayUAX8olMuv7odG2FiDLDQZIRBqbPQwBSArXfEJlQ.webp" }, AboutPage.json import Image from 'next/image'; const AboutPage = async () => { const response = await fet..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ysgbc/btsFOf3PQNW/gcD1kIUKpXpTK9YH77Eel0/img.png)
💡 Next.js 에서 리액트 쿼리 사용하기! 리액트에서와 별반 다르지 않다! 우선 프로젝트를 만든 후에 ~ yarn add @tanstack/react-query app/provider.tsx 생성 'use client'; // ** 필수! 클라이언트 컴포넌트에서만 사용 가능하다! import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const QueryProvider = ({ children }: React.PropsWithChildren) => { const queryClient = new QueryClient(); return ( {children} ); }; export default QueryProvider; 🚨 l..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bSDKC2/btsFKKwYagO/duJWVWY9uqh1fgjeX4mBK0/img.png)
💡 Next.js 에 폰트 설정을 해보자. layout.tsx import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'] }); export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', }; export default function RootLayout({ children, }: Readonly) { return ( // ... 기본 설정은 inter 폰트로 되어 있다. 🌀layout 과 같은 위치에 styles/fonts.ts 추가 import { Inter, Roboto_Mono ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dlb754/btsFJlW1XiD/IUodViWW4qX4hC07FlQ7M0/img.png)
💡 Next.js 를 배워봅시다 🥹 : 웹 개발을 위한 React 프레임워크! 개발에 필요한 다양한 기능과 구조를 제공한다. 다양한 렌더링 기법 : CSR, SSR, SSG, ISR 라우팅 : 파일(폴더) 기반 라우팅 Route Handler : 백엔드 가능 스타일링 : CSS, Sass, CSS-in-JS 최적화, 번들링 : 코드 스플리팅, 이미지 최적화(img 태그가 아닌 Image 컴포넌트), 웹팩 설정 등 👀 라이브러리? 프레임워크? 라이브러리: 개발자가 필요할 때 마다 설치, 혹은 호출함으로써 개발자가 능동적으로 사용하게 됨 프레임워크: 프로그램이 필요한것을 개발자에게 알려줌으로써 제어권을 역전 😲 코드 스플리팅 ? 코드 분할! 번들링된 파일을 잘라내 웹페이지 로딩 시간을 줄이는 방법! 런타임 ..
📝 문제 0과 1로 이루어진 어떤 문자열 x에 대한 이진 변환을 다음과 같이 정의합니다. x의 모든 0을 제거합니다. x의 길이를 c라고 하면, x를 "c를 2진법으로 표현한 문자열"로 바꿉니다. 예를 들어, x = "0111010"이라면, x에 이진 변환을 가하면 x = "0111010" -> "1111" -> "100" 이 됩니다. 0과 1로 이루어진 문자열 s가 매개변수로 주어집니다. s가 "1"이 될 때까지 계속해서 s에 이진 변환을 가했을 때, 이진 변환의 횟수와 변환 과정에서 제거된 모든 0의 개수를 각각 배열에 담아 return 하도록 solution 함수를 완성해주세요. 🫠 나의 풀이 function solution(s) { let count = 0; // 총 변환한 횟수 let zero ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/MBPeq/btsFDGg41NE/VKNMxU409LjD9hnqXjnDDK/img.png)
💡 타입 할당이 안된다는 error.. 해결.. deleteMutation.mutate(todo.id)} > delete 왜 그런가 보니.. id 타입을 옵셔널로 주고 있어서였다. const newTodo = { title, content, isDone: false, }; json 서버를 쓰고 있어서 투두를 생성할 때 id 값을 안써도 되니까 요렇게 썼었는데..! 🫠 그래서 id: string; 으로 바꿔주고, newTodo 에 id 값도 넣어줬다! npm install react-uuid yarn add react-uuid const newTodo = { id: uuid(), title, content, isDone: false, }; 🥲 메소드 타입 에러 TodoList.tsx const ongoin..