doeunn.log

Next.js 공식 홈페이지 Next.js by Vercel - The React Framework for the Web Used by some of the world's largest companies, Next.js enables you to create full-stack Web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds. nextjs.org 들어가보게 되면 웹을 위한 React 프레임워크라고 설명하고 있습니다. 또한 아래 설명으로는 일부 세계 최대 기업에서 사용하는 Next.js를 사용하면 최신 React 기..

🛫 타입스크립트 type과 interface 타입스크립트에서 type과 interface는 모두 타입을 정의하는 데 사용되는 기능입니다. 🪐 type type은 새로운 타입을 정의할 때 사용됩니다. type은 기존 타입을 확장하거나 별칭을 만들 수 있으며, 유니온 타입, 인터섹션 타입, 제너릭 등의 고급 타입 기능을 활용할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 // 유니온 타입 예시 type MyType = string | number; const myVariable: MyType = "Hello"; const myNumber: MyType = 42; // 인터섹션 타입 예시 type Fi..

▶프로젝트 기본 경로 설정 - 길어지는 상대경로를 간단하게 프로젝트를 진행하다보면 폴더안에 폴더를 굉장히 많이 생성하게 되는데요. 만약 TodoForm.js 파일에서 styles.폴더의 파일을 import 하려면 부모의 부모의... 계속 올라가서 다시 폴더를 찾아 파일을 찾아야 할 것입니다. 그런데 이러한 상대경로를 사용하는 것이 아니라 처음부터 src 폴더에서 styles 폴더에서 파일을 찾으면 굉장히 간단해 보입니다. 이렇게 사용하기 위해서는 말하지 않아도 src에서 찾도록 기본 경로를 따로 설정해 주어야 하는데요. 🔎 기본 경로 설정하기 - 여기부터 파일을 찾아 우선 최상단 폴더 안에 jsconfig.json 파일을 생성해줍니다. 📄 jsconfig.json 파일 { "compilerOptions"..

▶styled-components에서 속성값으로 스타일링 하기 이번 글에서는 styled-components에 속성값을 주면서 스타일을 속성값에 따라 다르게 주는 방법에 대해 알아보도록 하겠습니다. 🔎 이건 언제 사용? 우선 방법을 알아보기 전에 언제 사용할 수 있는지 예를 들어 이야기 해보겠습니다. 예를 들어 버튼을 눌렀을 때 컴포넌트의 background-color를 변경하고 싶을 때 많이 유용하다고 생각이 들었는데요. 이걸 모른다면 background-color 하나 때문에 스타일 컴포넌트를 하나 더 만들어야 할지도 모릅니다... 🔎 사용해보자 우선 기본적으로 코드를 아래와 같이 작성하였습니다. 단순하게 버튼을 클릭하면 form의 state를 '로그인' 또는 '회원가입'이 되도록 했습니다. impo..

▶RouterProvider로 라우터들을 효과적으로 관리하자 이번 글에서는 react-router-dom에 있는 RouterProvider를 이용하여 라우터들을 좀 더 가독성 있고 편리하게 관리하는 방법에 대해 알아보려고 합니다.

▶리액트 useRef 에 대해 알아보자 오늘은 프로젝트를 진행하면서 구글링을 하다가 처음으로 사용하게 된 useRef에 대해 먼저 자세히 알아보려고 합니다 :) 🔎 useRef ? useRef는 .current 프로퍼티로 전달한 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. - React 공식 홈페이지 useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 리액트 훅인데요. 여기서 Ref는 reference, 즉 참조를 뜻합니다. 우리가 자바스크립트를 사용할 때 특정 DOM을 선택하기 위해서는 querySelector 등의 함수를 사용했었죠? 예를 들어 어떤 DOM 요소를 선택해서 innerText ..