23년은 나의 인생에 큰 변화의 바람을 불어넣었다.

대학생의 삶을 마치고, 일시적으로 백수 생활을 경험한 후, 직장인의 삶을 맛보았다. 그러나 그 직장인의 삶은 오래가지 않았다.

졸업, 이제 나의 길을 가야한다.

23년 3월. 대학생의 삶을 마치고 본인의 길을 개...

[23년 회고] 완벽하지 않았기에 소중했던 순간들

react-i18n-next

react-i18n-next는 next.js 환경 리액트 애플리케이션에서 다국어 지원을 위한 라이브러리이다. 이 라이브러리를 사용하면 웹 페이지의 언어를 동적으로 변경할 수 있으며, 언어에 따라 해당 부분만 리렌더링되어 효율적인 다국어 변...

다국어 변환 라이브러리 react-i18n-next

Redux란?

Redux는 JavaScript 애플리케이션에서 상태(state)를 관리하기 위한 예측 가능한(stateful) 컨테이너이다. Redux는 React, Angular, Vue.js 같은 뷰(View) 라이브러리와 함께 사용할 수 있으며, React와 가...

Redux toolkit이란?

이미지 최적화

next/image

블로그 에서 이미지 파일을 사용할 때, 기존에는 Chakra UI의 Image 컴포넌트에 CSS 스타일링을 직접 해주었었다. 그러나 이미지 파일이 로딩에 가장 많은 시간이 소요되는 것을 깨달았고, lazyLoading과 이미지 최적...

Next.js 블로그 개발하기 - 8 (최적화)

Notes 페이지에서의 문제

페이지 진입 시 모든 노트 데이터를 불러와 화면에 보여줬기 때문에 로딩 속도가 느려지는 문제가 발생했다.


이 문제를 해결하기 위해 페이징(Paging) 기능을 구현해야 했다. 페이징 기능은 데이터를 일정한 크기로 나누어서 특정 페이지에...

Next.js 블로그 개발하기 - 7 (Paging)

느낀 점

CRA부터 시작해서 Next.js 나 베이스로 나만의 블로그를 개발하는데 한 달이 넘게 걸린 것 같다. 클론 코딩도 좋지만... 내가 직접 만들면서 마주하는 문제들을 해결하는 게 정말 도움이 많이 된다.
Next.js는 정말 좋은 것 같다. React에 SS...

Next.js 블로그 개발하기 - 6 (END)

배포 후 문제점 확인

내 블로그 사이트를 Vercel로 배포해보고 지인들에게 피드백을 요청하고, 나 스스로 여러가지를 고민해보았다. 다음과 같은 문제들이 있었다.

내가 사용자라면?

1. 모바일 UI가 불편하다.



모바일 페이지 나는 잘 안쓰겠지만 개발자라면 만...

Next.js 블로그 개발하기 - 5 (배포 후 문제점 수정)

로딩 컴포넌트 구현

Chakra UI를 이용하여 로딩 컴포넌트를 구현할것이다.
useMediaQuery 훅을 사용하여 모바일 화면에서는 로딩 아이콘을 오른쪽 상단, 데스크톱 화면에서는 오른쪽 하단에 보여주도록 구현한다.
로딩 아이콘은 Spinner 컴포넌트를 사용하여...

Next.js 블로그 개발하기 - 4 (로딩 컴포넌트 구현)

useMediaQuery

모바일 컴포넌트를 구현하는 방법은 여러가지 있다. 나는 Chakra UI의 useMediaQuery를 이용하여 모바일 뷰인지 아닌지를 판단하여 화면에 맞는 컴포넌트를 렌더링해주는 방법을 선택했다.

우선, useMediaQuery hook을 ...

Next.js 블로그 개발하기 - 3 (모바일 화면 구현)

컬러테마 적용

Chakra UI는 컬러테마를 적용하는 것이 매우 간단하다는 큰 장점이 있다. 단순히 라이트모드와 다크모드만을 지원하는 것이 아니라, 테마에 맞는 다양한 컬러를 적용할 수 있어 사용자에게 더욱 풍부한 경험을 제공할 수 있다.

extendTheme

컬...

Next.js 블로그 개발하기 - 2 (컬러테마)

SSR

Next.js는 SSR을 쉽게 구현할 수 있는 프레임워크다. Next.js에서 SSR을 구현하기 위해서는 다음과 같은 작업이 필요하다.

라우팅 파일(pages 폴더)

pages 폴더는 Next.js에서 라우팅을 설정하는 곳이다. pages 폴더에 파일을 생...

Next.js 블로그 개발하기 - 1 (SSR & SEO)

Next.js 블로그 개발 목표

[CSR 블로그 개발일지]
(https://velog.io/@ou9999/%EB%B8%94%EB%A1%9C%EA%B7%B8-%EA%B0%9C%EB%B0%9C%ED%95%B4%EB%B3%B4%EA%B8%B0-END)

CSR블로그를 Ne...

Next.js 블로그 개발하기 - 0 (구상)

SEO 란?

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

Next.js SEO 설정

타입스크립트 오류

TypeScript: Expression produces a union type that is too complex to represent. ts(2590) Example:

npm run build로 배포를 하려했지만 타입스크립트에서 오류가 생겼다...

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

SSR을 위한 Next.js 시작!

[🛠️ 블로그 개발해보기 - END 🛠️]
(https://velog.io/@ou9999/%EB%B8%94%EB%A1%9C%EA%B7%B8-%EA%B0%9C%EB%B0%9C%ED%95%B4%EB%B3%B4%EA%B8%B0-END...

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

[블로그 링크]
(https://ou9999.github.io/my-first-blog)

느낀점

클론코딩이나 인강도 좋지만 나만의 프로젝트를 직접 만들면서 배우는것이 확실하게 머리에 들어온다.
만들어보기전에는 몰랐던 SSR과 SEO의 필요성을 느끼게 되었다. 역시 ...

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

Wrtie 구상

velog의 글작성 화면과 똑같이 만들예정
MarkDown 에디터,뷰어 기능 필요

MDEditor

Toast UI의 마크다운 에디터를 사용하고싶었지만 React 18에서는 지원하지 않기때문에.. @uiw/react-md-editor를 사용하였다. ...

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

Entry Footer 구상 🤔

Entry Footer 에선 카테고리의 다른 글들과 댓글들을 보여줄것이다.


Comment Input 컴포넌트를 만들어 댓글을 입력한다.


Entry page에서 가지고 있는 docId 값으로 글에 맞는 댓글들만 불러올것이다.

...

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

Entry 구상 🤔

Entry 페이지는 블로그의 글을 보여주는 페이지이다.
Entry 페이지는 Home의 Post 컴포넌트나 Notes의 NoteCard컴포넌트를 눌러야만 갈수있는 페이지다.

Firestore Database의 저장된 문서의 id를 :noteid로...

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

Notes 구상

카테고리별로 보여주기(첫 마운트 될때는 all 카테고리)
글을 카드 형식으로 보여줄것

카테고리 설정

Firestore Database에 Categorys 컬렉션을 만들어준다.

Categorys



category(카테고리)
createdAt(정...

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

Home 구상 - part2

홈화면에서는 이쁜 링크들과 글들을 불러올 예정이다.

Link



  const [show, setShow] = useState(false);
  return (
    <>
      <Box
        ...
        as=...

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

Home 구상 - part1

 

Home에서는 디자인 참고 블로그 와 같이 내가 좋아하는 영화,애니 사진들과
조금 오그라들수있는 감성적인 문구들을 번갈아가면서 보여줄 예정이다.

사진,문구 랜덤 설정

  const [backgroundImage, setBackgr...

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

구상

//index.tsx
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <HelmetProvider>
        <ChakraProvider theme={theme}>
          <ColorModeS...

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

구성



STACK

React,TypeScript를 사용할것이다.
백엔드는 Firebase의 Firestore Database를 이용할 예정이다.

UI 디자인은 Chakra UI를 사용할 생각이다. 
처음 써보는 거지만 공식문서를 보면서 하면 금방 늘것이다.

블...

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

개발 배경?

공부하면서 블로그는 필수!

공부하면서 블로그에 글을 작성하는 건 큰 도움이 된다, 글을 작성하면서 복습도 되고 자세하게 기억이 안 날 땐 내가 쓴 글을 보면서 다시 알 수 있기 때문이다.

이미 좋은 블로그 플랫폼이 많지만...

네이버 블로그, 티스토...

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

불-편

편-안



JSON (Java Script Object Notation)

JSON은 사람이 읽을 수 있는 텍스트 기반의 데이터 교환 표준입니다.

사람과 기계 모두 이해하기 쉽고 용량이 작아 많이 사용됩니다.

서버와 클라이언트 간의 교류에서 많이 사용되는...

JSON이란?

dotenv(.env)

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

.env 파일은 REACT_APP_ 접두사...

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

반응형 웹?

반응형 웹이란?

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

반응형 이어야 ...

반응형 웹

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

문제 설명

괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어

"()()" 또는 "(())()" 는 올바른 괄호입니다.
")()(" 또는 "(()(" 는...

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

안되는 이유

React의 useState 훅은 기능 컴포넌트에서 상태 관리에 사용됩니다. setState를 사용하여 상태 변수의 값을 업데이트하였지만, 변경 사항이 즉시 반영되지 않을 때의 원인은 다음과 같을 수 있습니다.

클로저 문제: 상태 변수를 직접 수정하지 ...

useState로 바꿨는데 바로 적용이 안될때

[ 프로그래머스 LV.2 ] 최솟값 만들기

문제 설명

길이가 같은 배열 A, B 두개가 있습니다. 각 배열은 자연수로 이루어져 있습니다.
배열 A, B에서 각각 한 개의 숫자를 뽑아 두 수를 곱합니다. 이러한 과정을 배열의 길이만큼 반복하며, 두 수를 곱한 값을 누...

[ 프로그래머스 LV.2 ] 최솟값 만들기 (JavaScript)

[ 프로그래머스 LV.1 ] 최대공약수와 최소공배수

문제 설명

두 수를 입력받아 두 수의 최대공약수와 최소공배수를 반환하는 함수, solution을 완성해 보세요. 배열의 맨 앞에 최대공약수, 그다음 최소공배수를 넣어 반환하면 됩니다. 예를 들어 두 수 3, 12의...

[ 프로그래머스 LV.1 ] 최대공약수와 최소공배수(JavaScript)

[ 프로그래머스 LV.2 ] JadenCase 문자열 만들기

문제 설명

JadenCase란 모든 단어의 첫 문자가 대문자이고, 그 외의 알파벳은 소문자인 문자열입니다. 단, 첫 문자가 알파벳이 아닐 때에는 이어지는 알파벳은 소문자로 쓰면 됩니다. (첫 번째 입출력 ...

[ 프로그래머스 LV.2 ] JadenCase 문자열 만들기(JavaScript)

1.

package.json 맨 끝단에



"homepage": `https://${깃허브아이디}.github.io/${repository이름}`

2.

"scripts" 안에 deploy와 predeploy 추가
gh-pages는 SPA를 지원하지 않기 때문에 ...

나만보는 CRA React 배포하기

[ 프로그래머스 LV.1 ] 직사각형 별찍기

문제 설명

이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다.
별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요.

제한 조건

n과 m은 각각 1000 이하인 자연수...

[ 프로그래머스 LV.1 ] 직사각형 별찍기 (JavaScript)

💻 next.js도 빨리 배우고싶어요 응애

react

이젠 vanilla JS 못써

npx create-react-app 내 앱 이름



typescript

타입 지정하는게 귀찮지만 자동완성 너무 편하고 다들 타입스크립트 써서 정보도 많이 찾을 수 있음

n...

React.js 초보자 개발환경

왜 콘솔로그가 두번 나오는거지?

코인 api 정보를 useEffect 로 확인하고 있었는데 두번 찍히는게 확인됐다. 구글링해서 정보를 더 알아보자.


useEffect 함수란?

  useEffect(<function>, <dependency>)

useEffect...

useEffect함수란..? / useEffect가 두번사용될때

[ 프로그래머스 LV.1 ] 행렬의 덧셈


문제 설명

행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요...

[ 프로그래머스 LV.1 ] 행렬의 덧셈  (JavaScript)

[ 프로그래머스 LV.1 ] 부족한 금액 계산하기

문제 설명

새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 ...

[ 프로그래머스 LV.1 ] 부족한 금액 계산하기 (JavaScript)

[ 프로그래머스 LV.2 ] 최댓값과 최솟값

문제 설명

문자열 s에는 공백으로 구분된 숫자들이 저장되어 있습니다. str에 나타나는 숫자 중 최소값과 최대값을 찾아 이를 "(최소값) (최대값)"형태의 문자열을 반환하는 함수, solution을 완성하세요.
예를들어 ...

[ 프로그래머스 LV.2 ] 최댓값과 최솟값 (JavaScript)

제네릭이란?

타입의 placeholder와 같습니다.
제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다
제네릭을 사용하게되면 따로 타입 변환을 할 필요가 없어서 프로그램의 성능이 향상되는 장점이 있습니다.
제네릭은 선...

타입스크립트 제네릭(Generics)

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

문제 설명

0과 1로 이루어진 어떤 문자열 x에 대한 이진 변환을 다음과 같이 정의합니다.

x의 모든 0을 제거합니다.
x의 길이를 c라고 하면, x를 "c를 2진법으로 표현한 문자열"로 바꿉니다.
예를 들어, x ...

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

타입스크립트에서 ! 란?

자바스크립트에서는 부정,false 를 뜻하지만
타입스크립트에서는 !는 무조건 값이 할당되어있다는걸 의미합니다.

!사용


위와 같이 코딩을하면 타입스크립트가 불평불만을 이야기 하지만 

!를 사용한다면 변수 n은 무조건 할당된다는것이기 때문...

OU9999