☘️ 시작하기 앞서 티스토리 블로그는 사용자가 자유롭게 커스텀할 수 있다는 장점이 있다. 그래서 티스토리 블로그의 기본 글씨체 폰트를 본인이 원하는 대로 수정을 해보겠다. ☘️ 폰트 선택하기 먼저 사용할 폰트를 선택해야 한다. 나는 주로 눈누 라는 사이트를 사용하며 프로젝트를 진행할 때에도 주로 눈누에 있는 폰트를 사용한다. 눈누 상업용 무료한글폰트 사이트 noonnu.cc 다양한 폰트들이 있는데 거기서 원하는 폰트를 골라준다. 나는 오뮤 다예쁨체 를 선택하였다. 라이선스 사용하기 앞서, 먼저 이 폰트가 웹 사이트에서 사용할 수 있는지 라이선스를 확인해야 한다. 다행히 이 폰트는 웹 사이트에서 사용 가능한 폰트이다. 웹 폰트 티스토리 블로그에 사용하기 위해 오른쪽에 있는 웹폰트로 사용 안에 있는 내용들을..

Q. 질문CSS의 Cascading에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #1) A. 답변CSS 를 적용하다보면 겹치는 속성이 발생할 수 있다. 개발자 도구를 사용해 임의로 코드잇 페이지에 있는 컴포넌트의 배경 색상을 blue 와 red 로 변경하여 속성이 겹치도록 하였다.그렇다면 화면에서는 blue 와 red 중에 어떤 것이 반영이 될까? 바로 이러한 상황에서 CSS 규칙들을 어떻게 합쳐 줄지 정해주는 방식을 CSS 의 Cascading 이라고 한다.  Cascading 이란?그렇다면 Cascading  는 정확히 무엇일까?  그 전에 CSS 의 약자는 Cascading Style Sheets (CSS) 이다.  이를 한국말로 직역하자면 계단식 스타일 시트 라는 의미이다. 즉, CS..

현재 나의 상황내 블로그를 대충 보면 알겠지만 나는 React 는 당연히 할 줄 알고 프로젝트도 여러 번 진행해 봤다. (곧 서비스 출시 예정!)하지만 프로젝트를 진행할 수록 주변에 너무 잘하시는 개발자분들도 계셨다.. 부족한 기초 지식나는 3학년을 마치고 좋은 기회를 통해 교수님 회사에 입사하게 되었는데 거기서 HTML, CSS, Javascript 를 하나도 모르는 상태에서 프론트엔드 개발을 시작하였다. (학교에서 C언어, 매트랩 이런 것만 해서 몰랐음)그러다 보니 개발은 할 수 있지만 기초지식이 부족해 매번 Chat GPT 에 의존하다 보니, 다시 기초부터 공부하고 싶은 생각이 들었다. (그런데 안 함.. 어려운 내용을 더 알고 싶어서..ㅠㅠㅋㅋ) 취업 준비그리고 올해 2월에 대학교를 졸업해서 이제..

시작하기 앞서...최근 진행했던 프로젝트에서 편지 글 쓰기 페이지 를 구현을 했는데 이를 구현하기 위해 React-Hook-Form 을 사용하고 있다.그런데 개발하면서 정말 좋고 편리한 기능이 있어 이렇게 글을 작성하게 되었다.  실제로 개발을 하다보면 여러 컴포넌트가 생기게 된다.이럴 때 매번 props 로 컴포넌트간 데이터를 다 전달하기엔 너무 복잡하고 힘이 든다. (prop drilling 이 발생)이러한 상황에서 쉽게 폼 데이터를 사용하는 방법이 바로 FormProvider 이다!!!!!!!    또한 개발을 할 때, 폼에 제출할 내용이 input, textarea, select 이런 태그가 아닐 때도 발생한다. 아래 사진은 내가 현재 구현한 페이지인데 슬라이더를 통해 나이 값을 선택하고, 칩 버..

☘️ fork 하기 productive-box 에서 fork 를 한다. GitHub - techinpark/productive-box: Are you an early 🐤 or a night 🦉? Let's check out in gist Are you an early 🐤 or a night 🦉? Let's check out in gist - techinpark/productive-box github.com fork 하는 방법 해당 레포지토리 상단에 Fork 버튼을 클릭하여 Create fork 버튼을 클릭한다. 그러면 내 레포지토리로 Fork 하게 된다. ☘️ gist 생성하기 깃허브 상단에 있는 + 버튼을 클릭해 New gist 를 클릭한다. 아무런 내용을 입력하고 하단에 있는 초록색 버튼을 Creat..

Zod 에 대해서Zod 정의Zod 란 무엇일까? ZodTypeScript 기반의 스키마(데이터 유형) 선언 및 유효성 검사 라이브러리Zod 의 목표는 유형 선언의 중복을 제거하는 것이며, Zod 을 사용하면 한 번 유효성 검사기를 선언하고Zod 이 정적 TypeScript 유형을 자동으로 추론한다[출처] 공식문서 GitHub - colinhacks/zod: TypeScript-first schema validation with static type inferenceTypeScript-first schema validation with static type inference - colinhacks/zodgithub.com Zod 장점공식문서에 따르면 장점은 다음과 같다.의존성 없음Node.js 및 모든 최..

협업 프로젝트를 하다보면 깃허브 이슈를 생성하여 어떤 작업을 할 것인지 팀원들에게 알려야 한다.그래서 깃허브 이슈를 생성하는 방법에 대해 알아 볼 것이다. +) 깃허브 이슈 템플릿 만들기 [GitHub] 깃허브 이슈(issue) & PR(Pull Request) 템플릿 만들기☘️ 시작하기 앞서 깃허브로 협업을 하기 위해서 이슈와 PR 이 필요하다. ☘️ 이슈 템플릿 만들기 1. 레포지토리의 Settings 창에 들어온다. 이슈를 생성할 레포지토리의 오른쪽에 있는 Settings 를jjang-j.tistory.com 이슈 생성하기먼저 깃허브 레포지토리의 Issues 버튼을 클릭한다.그리고 오른쪽에 있는 New issue 버튼을 눌러준다. 이슈 작성하기이슈 내용 작성본인이 작업할 내용에 대한 이슈를 작성한다..

시작하며...React 에서 다른 컴포넌트로 데이터를 전달하기 위해 props 를 사용한다.그러나 React 의 상태인 state 는 자식 컴포넌트한테만 전달할 수 있어 만약 컴포넌트가 많고 잘 분리되어 있을 경우state 를 전달하는데 매우 복잡하고 해당 state 를 사용하지 않는 컴포넌트로 받게 되어 비효율적인 코드가 되어 버린다. 그래서 이러한 경우를 해결하기 위해 상태 관리 라이브러리를 사용하며 그 종류로는 Redux, Recoil, Mobx, Zustand 등이 있다.나는 그 중에서 Zustand 에 대해 알아 볼 것이다. ZustandZustand 란 무엇일까? 독일어로 상태 라는 뜻을 가지고 있다.Zustand 는 패키지 크기가 작으며 사용하기 쉽다는 장점을 가지고 있다. 직접 사용하면서 ..

☘️ 시작하며...React 18 의 기능으로 Suspense 가 있다. 그러면 Suspense 가 무엇일까? Suspense하단에 있는 일부 컴포넌트가 아직 렌더링할 준비가 되지 않은 경우 로딩을 나타낼 수 있도록 해주는 것[출처]: 공식문서이러한 Suspense 를 서버 상태관리 라이브러리인 TanStack Query(React Query) 와 함께 안정적으로 사용할 수 있다. 그래서 어떻게 사용하지는 지 알아볼 예정이다. ☘️ Suspense만약 TanStack Query 에 대해 잘 모를 경우 해당 게시물에서 이에 대한 내용을 확인할 수 있다. Suspense 세팅React 에 내장된 Suspense 을 import 해주고import React, { Suspense } from 'react';Su..

시작하며...내 블로그에 [React] 리액트 쿼리(React-Query) 사용 방법 이런 게시물이 있다.그리고 당시 했던 프로젝트를 보니깐 React Query 의 버전이 3이었다. 그러나 현재 V5 까지 있으며, React 이 외에도 Vue 등에서도 사용이 가능해지면서 TanStack Query 로 이름을 바꿨다고 한다. 그래서 더 자세히 공부할 겸 새로운 내용들을 알기 위해 글을 작성하기로 했다. TanStack Query V5정의TanStack Query 란 무엇일까? TanStack Queryit makes fetching, caching, synchronizing and updating server state in your web applications a breeze.웹 애플리케이션에서 서버..