분류 전체보기95 [React] React Hook Form 1. React Hook Form_① React Form 예제 (간단한 To Do List)_② React Form 예제 2 (React Hook Form update)2. React Hook Form, APIs1. React Hook FormReact Hook Form은 React에서 'form'을 좀 더 사용하기 편하게 해주는 라이브러리로의 상태 state와 유효성 검사를 처리하기 위한 간편한 방법을 제공해 주는 라이브러리다. React Hook Form은 아래 명령어를 입력해서 설치할 수 있다.npm install react-hook-form 백문이 불여일견, 기존에 React에서 form을 다루던 방식을 아래 예제를 통해서 복습해 보자.① React Form 예제 (간단한 To Do List) .. 2024. 8. 26. [React] Toggle Button 구현하기 0. 개요최근에 Toy Project에 '라이트/다크' 모드로 전환하는 Toggle Button을 구현해야 할 일이 생겼다.다만 Toggle Button을 한 번도 구현해 본 적이 없기 때문에 다른 개발자분이 작성해둔 소스코드를 많이 참고하면서 구현을 진행하였다.1. 소스 코드import {styled} from "styled-components";import {useState} from "react";interface I_Toggle { toggle: boolean;}const Wrapper = styled.div` width: 300px; height: 300px; padding: 5px; background-color: ${(props) => props.toggle ? ".. 2024. 8. 7. [React Query] useQuery() 0. React Query란?React에서 비동기 로직을 좀 더 편하게 다룰 수 있게 도와주는 라이브러리로기존에 개발자가 구현하기 까다로웠던 isLoading, isError 등과 같은 기능들을 자체적으로 제공을 해준다. 이번 게시글은 React Query에 대해 이제 막 맛을 본 입장에서 React Query에 강의에서 배운 내용과 개인적으로 찾아서 공부한 내용을 정리해서 작성하였다. 따라서 이론적으로 정확하지 않은 내용이 대다수일 것 같은데이러한 내용은 나중에 React Query에 대해 좀 더 깊게 파고든 뒤에 보완하도록 하겠다.1. 간편한 데이터 관리- 데이터를 가져오고, 캐싱, 동기화 및 업데이트 처리를 간편하게 할 수 있게 해줌2. 실시간 업데이트 및 동기화- 실시간 데이터 업데이트 및 자동 .. 2024. 8. 3. [Node.js] npm install 1. npm install 동작 npm install 명령어로 개발에 필요한 패키지를 설치하는데해당 명령어를 통해 패키지를 설치할 때는 아래 두 가지로 나뉜다. 1. 패키지 명을 별도로 명시해서, 특정 패키지를 설치하는 형태2. 패키지 명을 별도로 명시하지 않고, package.json 파일에 의존성을 설치하는 형태 예를 들어서 npm install styled-components를 입력하면styled-components라는 패키지가 설치가 되고, npm install만 입력하면, package.json에 포함된 패키지들이 일괄적으로 설치가 된다. 노트북으로만 작업했던 프로젝트를 집에 있는 PC으로 작업하고 싶어서git clone을 통해서 프로젝트를 데스크탑에 설치를 진행하고 react, react-do.. 2024. 7. 18. [크롬 시작화면] 스타일 설정 및 구조 변경 프로젝트 명: 나만의 크롬 시작 화면📆 작업 기간: 2024.06.05 ~ (진행 중)💻 Tech Skill- 💻 Skill: TypeScript, React- 🖌 Style: styled-componentsGithub Repository: https://github.com/Rayched/MyChrome_custom_page1. 작업 내용① styled-components 선정 이유 북마크 바 구현을 좀 수월하게 진행하기 위해서, 크롬 시작화면에 CSS Style을 설정하기로 했다.처음 프로젝트를 계획했을 때는 웹 페이지의 스타일을 css 파일로 통합 관리하려고 했었지만 예전에 주간 박스오피스를 보여주는 웹페이지 개발을 진행하면서전체적으로 코드가 한눈에 보이지 않고, '. jsx' 파일과 'sty.. 2024. 6. 29. [styled-components] styled-components 1. styled-components란 무엇인가?https://styled-components.com/docs/basics#motivation styled-components: BasicsGet Started with styled-components basics.styled-components.com 공식 문서에 따르면, styled-components는 React Component의 CSS Style 설정을 좀 더 편하게 하기 위해서 고안된 라이브러리라고 한다. React 컴포넌트의 스타일을 css 파일을 통해서 설정하는 방식과 styled-components 사용해서 스타일을 지정하는 방식은 무슨 차이가 있을까? 아래 예제를 통해서 이 둘의 차이를 한 번 비교해 보자. ① css 파일을 통해서 sty.. 2024. 6. 26. [JavaScript] null 병합 연산자 1. null 병합 연산자 Nullish coalescing operatornull ?? "Right";undefined ?? "Right";"Left" ?? "Right";"Left" ?? undefined; null 병합 연산자, '??'는 좌측의 피연산자가 null 또는 undefined일 때 우측 피연산자의 값을 return 하고그렇지 않은 경우에는 왼쪽의 피연산자의 값을 return 하는 논리 연산자이다. 상단의 예제 코드를 실행해 보는 것으로 null 병합 연산자가 어떻게 동작하는지 파악해 보자.예제 코드를 실행하면, 좌측의 피연산자의 값이 null 또는 undefined인 경우우측 피연산자인 문자열 "Right"라는 값이 return 되는 것을 확인할 수 있고 반대로 좌측 피연산자의 값이 n.. 2024. 6. 21. [크롬 시작화면] 2일차: 검색창 구현하기 프로젝트 명: 나만의 크롬 시작 화면작업 기간: 2024.06.05 ~ (진행 중)사용 스킬: TypeScript, ReactGithub Repository: https://github.com/Rayched/MyChrome_custom_page1. 작업 내용이번에는 크롬 시작화면의 검색창을 구현하는 작업을 진행하였다.먼저 'SearchBar.tsx' 파일을 생성하고, 본격적으로 검색창 Component의 구현을 시작하였다.① 검색어를 Console에 출력하기상단의 이미지는 작년에 개발을 완료하고, 현재 사용 중인 크롬 시작화면의 검색창이다. 기본적인 알고리즘은 검색창에 검색어를 입력하고, 키보드의 Enter 키를 누르면해당 검색어에 대한 구글 검색 결과를 보여주는 식이다. 이를 구현하려면 제일 먼저 검색.. 2024. 6. 11. [TypeScript] 객체 타입 1. 객체 타입 / 비원시 타입① objectJavaScript의 객체 Object의 정의에 맞게 대응되는 타입'any' 타입과 유사하게 모든 타입 값을 유동적으로 할당할 수 있음const player : object = { name: "홍길동", age : 25, isMarried: false}; player 객체의 타입을 object로 지정하고, 이후 name, age, isMarried 속성을 추가하였다.다만 이 방식은 객체 속성의 타입을 지정할 수 없다는 특징을 가지고 있다.② '{ }' JavaScript에서 객체를 생성할 때는 'new Object()' 혹은 '{ }' (객체 리터럴) 방식을 사용한다.이와 마찬가지로 TypeScript에서 변수 타입을 object로 지정할 때o.. 2024. 6. 10. 이전 1 2 3 4 ··· 11 다음
