본문 바로가기

next+ts30

next+ts 4일차 first form 만들기 유튜브: https://www.youtube.com/watch?v=lu90np9hZVw 깃허브:https://github.com/qjawns0222/caremaker/tree/4%EC%9D%BC%EC%B0%A8-next+ts 오늘은 FirstForm 을 만들엇어요 이상태에서 조작할수 있는부분에 input태그로 변경해줄꺼에요 import { NextPage } from "next"; const FirstForm: NextPage = () => { return ( 노래방 가자 지도에 "노래방dasdsadsadsada" 검색해주세요 계획 어디서 만나서 뭐하고 놀자 놀자 놀자 놀자 ); }; export default FirstForm; 오늘은 특별한건느 html에 지도 넣는건데 html로 해서 특정 위치만 넣.. 2022. 4. 16.
next+ts 4일차 form 화면 만들기 유튜브: https://www.youtube.com/watch?v=8o12adBFbnk 깃허브:https://github.com/qjawns0222/caremaker/tree/3%EC%9D%BC%EC%B0%A8-form-%ED%8E%98%EC%9D%B4%EC%A7%80 오늘은 form화면을 만들었습니다. import { NextPage } from "next"; import Image from "next/image"; import Link from "next/link"; const make: NextPage = () => { return ( 원하는 양식을 선택해주세요 친구 약속 만들기 친구와 간단한 약속 설명보다는 한번의 링크로 해결하세요 친구 약속 만들기 친구와 간단한 약속 설명보다는 한번의 링크로 해.. 2022. 4. 15.
next+ts 3일차 유튜브: https://www.youtube.com/watch?v=gyvwrIV0NZk 깃허브: https://github.com/qjawns0222/caremaker/tree/next-ts-3 오늘은 _app.tsx 와 nav바 메인화면을 손봤습니다 app.tsx 에서 이렇게 작성해서 모든 페이지내용이 저기 compnent 에 들어가게 되어서 layout역할을 하게 됩니다. 즉 각 페이지 마다 페이지내용이 _app.tsx에 component로 전달이 됩니다. 그래서 layout역할을 하게 됩니다. 그것을 활용하여서 어짜피 모든 페이지가 _app.tsx를 활용해서 되니까 글로벌css를 저기다 적어서 모든것에 적용되도록 했습니다. 참고로 style은 저렇게 적으면 장점이 클래스이름마다 style.~이런식으.. 2022. 4. 14.
next+ts 2일차 깃허브: https://github.com/qjawns0222/caremaker/tree/2days 유튜브: https://www.youtube.com/watch?v=njrsELImYdo 오늘은 2일차로 [id]에 오류 나오는거 알아보면서 수정했고 페이지 구성바꾸거 container,component해서 정리정돈도 했습니다. 우선 오류 고친거부터 알아 보겠습니다. 객체 구조 분해할때 데이터 타입을 적을때는 대괄호 두개 써서 적어야된다는 것 발견해서 고쳤습니다. const id: String = params!.id as String; 이부분 보면 !이거는 undefined라고 하길래 undefined 아니라고 알려주는 역할이고 as는 any로 추정된다고 하길래 무조건 String이라고 알려주는겁니다 그리고.. 2022. 4. 13.

티스토리툴바