ksw_devlog

Next.js Manual Setup Install next, react and react-dom in your project: npm install next react react-dom # or yarn add next react react-dom # or pnpm add next react react-dom Open package.json and add the following scripts: "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" } These scripts refer to the different stages of developing an application: ..

프로젝트 - YourRanking https://your-ranking-video.vercel.app/ React App your-ranking-video.vercel.app KPT 회고 Keep : 깃 브랜치를 기능별로 세세하게 나누어서 작업하다보니 충돌에러가 거의 나지 않았었다. 다음 프로젝트에서도 이 방법을 유지하면 좋을 것 같다. Problem : 새로운 라이브러리를 사용해보느라 추가기능을 해보지 못하였다. 구글링한 코드도 이해하는데 오래 걸렸었던거 같고 사용하는 코드를 어떤식으로 써야하는지 이해하는 게 중요한 것 같다. Try : 다음 프로젝트부턴 타입스크립트를 제대로 써볼 생각이다. Feel : 프로젝트를 하면서 기초가 많이 부족하다고 느껴지는 것 같다. 브라우저가 어떻게 작동되는지에 대해 이..

https://your-ranking-video.vercel.app/ React App your-ranking-video.vercel.app 이번 프로젝트에서 만든 웹사이트이다. 게시글 작성, 수정 기능을 맡았다. 작성 폼을 만들 때 react hook form이라는 새로운 라이브러리를 사용해보았고 파이어베이스말고 json서버를 이용하여 작성, 수정 기능을 구현하였다. 생각보다 여유있을 줄 알았는데 새로운 라이브러리를 공부하는데 하루정도를 할애했고 구글링한 내용을 이해하는데도 시간이 많이 걸렸다. 아무래도 기초가 좀 부족해서 코드를 이해하는데 시간이 걸린 느낌이다. js문법 공부를 꾸준히 해야할 것 같다.

useQuery로 받아온 데이터를 navigate를 통해 props를 전달해주는 코드를 짰다. 추후에 다시 정리해서 설명예정... import axios from "axios"; const BASE_URL = 'http://localhost:3001'; export const videoApi = axios.create({ baseURL: BASE_URL, headers: { 'Content-type': 'application/json', } }); // export const createVideo = async () => { // // const response = await videoApi.post('/videos'); // const response = await axios.post('http://l..

어제 보았던 react hook form을 이용하여 게시글 작성 기능을 구현하였다. import styled from 'styled-components'; import { useForm } from 'react-hook-form'; import { useMutation, useQueryClient } from 'react-query'; import { v4 as uuidv4 } from 'uuid'; import axios from 'axios'; import { useNavigate } from 'react-router-dom'; import { authService } from '../common/firebase'; export default function PostPage() { const quer..

React Hook Form react-hook-form https://www.react-hook-form.com/ Home React hook for form validation without the hassle www.react-hook-form.com React에서 기존 사용자입력값을 관리하려면, useRef나 useState를 이용해야했지만, React Hook Form을 이용하면 간단하게 처리할 수 있다. 아래는 공식홈에 있는 예제코드이다. 예제코드 import React from "react"; import { useForm } from "react-hook-form"; const Example = () => { const { handleSubmit, register, formState: { ..

Type script를 배우는 주간이었다. 기본 타입부터 union, any, unknown, void Narrowing, Assertion, type alias, interface 등을 배울 수 있었다.

Generic 적용한 함수만들기 함수에 이런 괄호를 열면 파라미터를 또 입력할 수 있습니다. 근데 여기 안엔 타입만 입력할 수 있습니다. 타입파라미터 문법임 function 함수(x: MyType[]) :MyType { return x[0]; } let a = 함수([4,2]) let b = 함수(['kim', 'park']) 그럼 이제 함수를 사용할 때도 안에 파라미터처럼 타입을 입력할 수 있습니다. 그럼 님들이 이제 함수( ) 이렇게 쓰는 순간 MyType 이라는 변수에 number 라는게 들어간다고 보시면 됩니다. 그럼 이제 함수( x : number[] ) :number { } 이거랑 똑같이 동작합니다. 그럼 뭐가 좋겠습니까. 아까 unknown 가득한 예제와는 다르게 return 되는 타입이 n..