일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 내일배움캠프 최종 프로젝트
- 파이썬 list
- React Hooks
- Next 팀 프로젝트
- 내일배움캠프
- 리액트
- 코딩테스트
- 타입스크립트
- 내일배움캠프 프로젝트
- 리액트 훅
- 파이썬 반복문
- 파이썬 slice
- 리액트 팀 프로젝트
- 한글 공부 사이트
- 리액트 페이지 이동
- 파이썬 for
- 파이썬 enumerate
- 자바스크립트
- 내배캠 프로젝트
- js
- 프로그래머스
- 그리드 정렬
- 리액트 프로젝트
- 타입스크립트 리액트
- useState
- typeScript
- JavaScript
- 타입스크립트 props
- REACT
- 파이썬 for in
- Today
- Total
목록분류 전체보기 (198)
aotoyae
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Il7x6/btsFQdefNHw/gPyknRisp0JKRqlwmuWNW0/img.png)
😦 Next.js 투두리스트 과제를 하다 생긴 에러.. 고쳐보자! 삭제 버튼 이벤트를 수정하다 타입 에러가 떴다. 똑같이 타입을 준 토글 이벤트는 잘 되는데 대체 왜?! 하다가 블로그를 찾아보니 어딘가에서 타입을 잘못 주었을 것이라고.. 해서 다시 코드를 보니! useMutation 에 타입을 안줘서였다.. 그럼 안 준 곳에 에러 표시해주지 😔 const deleteTodoMutation = useMutation({ mutationFn: async (id: string) => { 뮤테이션에도 타입을 지정해주니 에러가 사라졌다! 🔗 https://velog.io/@qhflrnfl4324/string-%ED%98%95%EC%8B%9D%EC%9D%98-%EC%9D%B8%EC%88%98%EB%8A%94-...-..
![](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 ..