profile
응애 나 애기 개발자 꿈나무
post-thumbnail

Next.js Vercel 배포 에러 Next.js 500 error,TypeScript 에러

타입스크립트 오류 나의 경우에는 Chakra UI를 Next.js 13에서 사용하고 있었다. 13버전에서는 타입스크립트의 버전이 5.0.2여야 한다. Next.js 500 error

3일 전
·
0개의 댓글
·
post-thumbnail

Next.js SEO 설정

SEO, 한국말로 검색 엔진 최적화라고 불리는 이 단어는 Search Engine Optimization의 줄임말이다. 이는 쉽게 말해 검색 결과에서의 상위 노출을 의미한다. 내가 온라인으로 사업을 한다거나 많은 사람들에게 구글 검색으로 노출시키려면 매우 중요한것이다.

3일 전
·
0개의 댓글
·
post-thumbnail

Next.js 13 app/Directory 사용해보기!

🛠️ 블로그 개발해보기 - END 🛠️에서 CSR,CRA 블로그를 만들었으나, 블로그의 seo를 위해서라면 Next.js를 사용해야했다. CSR 홈페이지의 장단점을 몸소 익혀봤으니 이제 SSR의 장단점을 몸소 익혀볼때다.나는 Next.js를 처음 공부해본다.이왕이면

3일 전
·
0개의 댓글
·
post-thumbnail

🛠️ 블로그 개발해보기 - END 🛠️

블로그 링크클론코딩이나 인강도 좋지만 나만의 프로젝트를 직접 만들면서 배우는것이 확실하게 머리에 들어온다.만들어보기전에는 몰랐던 SSR과 SEO의 필요성을 느끼게 되었다. 역시 직접 겪어봐야 와닿는다.Next.js 13으로 다시 개발할것이다. 아직 Next.js를 잘

6일 전
·
0개의 댓글
·
post-thumbnail

🛠️ 블로그 개발해보기 - 8 (Write) 🛠️

velog의 글작성 화면과 똑같이 만들예정MarkDown 에디터,뷰어 기능 필요Toast UI의 마크다운 에디터를 사용하고싶었지만 React 18에서는 지원하지 않기때문에.. @uiw/react-md-editor를 사용하였다. 화면 좌측에는 제목 input, edit기

6일 전
·
0개의 댓글
·
post-thumbnail

🛠️ 블로그 개발해보기 - 7 (Entry - part2) 🛠️

Entry Footer 구상 🤔 Entry Footer 에선 카테고리의 다른 글들과 댓글들을 보여줄것이다. Entry page에서 가지고 있는 docId 값으로 글에 맞는 댓글들만 불러올것이다 > ### Comments 익명 작성을 위해 작성자 이름과 비밀번호를 입

6일 전
·
0개의 댓글
·
post-thumbnail

🛠️ 블로그 개발해보기 - 6 (Entry - part1) 🛠️

Entry 구상 Entry 페이지는 블로그의 글을 보여주는 페이지이다. Entry 페이지는 Home의 Post 컴포넌트나 Notes의 NoteCard컴포넌트를 눌러야만 갈수있는 페이지다. Firestore Database의 저장된 문서의 id를 :noteid로 할것이

2023년 3월 24일
·
0개의 댓글
·
post-thumbnail

🛠️ 블로그 개발해보기 - 5 (Notes) 🛠️

카테고리별로 보여주기(첫 마운트 될때는 all 카테고리)글을 카드 형식으로 보여줄것Firestore Database에 Categorys 컬렉션을 만들어준다.category(카테고리)createdAt(정렬을 위한 제작 시간 필드)Categorys는 Notes페이지에서 불

2023년 3월 24일
·
0개의 댓글
·
post-thumbnail

🛠️ 블로그 개발해보기 - 4 (Home - part2) 🛠️

Home 구상 - part2 홈화면에서는 이쁜 링크들과 글들을 불러올 예정이다. Link framer motion에는 onHoverStart와 onHoverEnd 라는 매우 유용한 props들이 있다. 카드에 커서를 올리면 show를 true로 만들어준뒤, show

2023년 3월 23일
·
0개의 댓글
·
post-thumbnail

🛠️ 블로그 개발해보기 - 3 (Home - part1) 🛠️

Home 구상 Home에서는 디자인 참고 블로그 와 같이 내가 좋아하는 영화,애니 사진들과 조금 오그라들수있는 감성적인 문구들을 번갈아가면서 보여줄 예정이다. 사진,문구 랜덤 설정 사진,문구 배열을 만들어 준 뒤, useEffect를 사용하여 mount 될때 한번

2023년 3월 23일
·
0개의 댓글
·
post-thumbnail

🛠️ 블로그 개발해보기 - 2 (Header && Footer) 🛠️

전역 상태관리를 위한 Recoil 동적 head를 위한 React-HelmetChakra UI 테마 저장createBrowserRouterHelmet은 head 제목을 설정해준다.Header와 Footer는 어떤 페이지를 라우팅하든 계속 보여야 하는 컴포넌트이다. 그

2023년 3월 23일
·
0개의 댓글
·
post-thumbnail

🛠️ 블로그 개발해보기 - 1 (구상) 🛠️

구성 STACK React,TypeScript를 사용할것이다. 백엔드는 Firebase의 Firestore Database를 이용할 예정이다. UI 디자인은 Chakra UI를 사용할 생각이다. 처음 써보는 거지만 공식문서를 보면서 하면 금방 늘것이다. 블로그인데

2023년 3월 22일
·
0개의 댓글
·
post-thumbnail

🛠️ 블로그 개발해보기 - 0 🛠️

🤔 개발 배경? 고민하고 망설일 시간에 그냥 하자 CRA,gh-pages,파이어베이스를 사용한다고 문제가 될까?

2023년 2월 27일
·
0개의 댓글
·
post-thumbnail

SSR과 CSR? 정적 웹 사이트와 동적 웹 사이트?

SSR과 CSR은 모두 웹 애플리케이션에서 클라이언트 측에서 렌더링되는 방식을 의미합니다.SSR 는 전통적인 PHP, JSP, ASP 혹은 최근에는 Next.js 등을 사용하여 서버 단에서 HTML/CSS 를 생성하여 사용자에게 그 결과물만을 전달하는 방식이다.SSR(

2023년 2월 27일
·
0개의 댓글
·
post-thumbnail

[ 프로그래머스 LV.2 ] 이진 변환 반복하기 (JavaScript)

\[ 프로그래머스 LV.2 ] 이진 변환 반복하기0과 1로 이루어진 어떤 문자열 x에 대한 이진 변환을 다음과 같이 정의합니다.x의 모든 0을 제거합니다.x의 길이를 c라고 하면, x를 "c를 2진법으로 표현한 문자열"로 바꿉니다.예를 들어, x = "0111010"이

2023년 2월 23일
·
0개의 댓글
·
post-thumbnail

[ 프로그래머스 LV.2 ] 올바른 괄호 (JavaScript)

\[ 프로그래머스 LV.2 ] 올바른 괄호괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어"()()" 또는 "(())()" 는 올바른 괄호입니다.")()(" 또는 "(()(" 는 올바르지 않은 괄호

2023년 2월 23일
·
0개의 댓글
·
post-thumbnail

[CSS] px 대신 rem 과 em?

CSS 를 이용해 폰트나 마진, 패딩 등의 크기를 지정할 때 정확한 px 로 지정할 수도 있지만, 상대적인 값을 표현해주는 단위인 rem 이나 em 을 사용하기도 합니다.CSS에서 em과 rem은 상대적인 길이 단위입니다. 두 단위는 서로 비슷하지만 조금 다릅니다.em

2023년 2월 21일
·
0개의 댓글
·
post-thumbnail

[React] 반응형 웹

반응형웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 모바일, 태블릿 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말합니다.대부분의 사람들이 스마트폰,태블릿 PC를 이용합니다

2023년 2월 21일
·
0개의 댓글
·
post-thumbnail

[React] dotenv(.env) 로 환경변수 관리하기

React에서 .env 파일을 사용하면, 애플리케이션에서 환경변수를 설정할 수 있습니다. .env 파일은 React 프로젝트 루트 디렉토리에 위치하며, 환경에 따라 다른 변수값을 설정할 수 있습니다..env 파일은 REACTAPP 접두사가 붙은 변수만 인식합니다. 이유

2023년 2월 15일
·
0개의 댓글
·
post-thumbnail

[TypeScript] Partial이란?

Partial은 TypeScript에서 제공하는 타입 유틸리티 함수로, 주어진 타입의 모든 프로퍼티를 optional하게 만들어주는 기능을 제공합니다. 즉, 주어진 타입의 각 프로퍼티에 ?를 붙여서 각 프로퍼티를 optional하게 만든 새로운 타입을 만들어줍니다.예를

2023년 2월 8일
·
0개의 댓글
·