IT's Time

그동안 애매하게 알았거나 잘 몰랐던 것들과 알아도 복습하자는 의미로 자주 사용했던 것들을 한번 정리해봤다. 1. useState : 동적인 값을 상태(state)라고 하는데 이를 관리해주는 함수다. 이 함수를 통해 컴포넌트에서 상태를 관리할 수 있다. import React , {useState} from 'react'; const [number , setNumber] = useState(0); 2. useRef : 자바스크립트에서 querySelector , getElementById 등을 통해 특정 DOM을 선택해주었다. React에서도 이 처럼 저장공간 또는 DOM요소에 접근하기 위해 사용되는 것이 바로 useRef이다. .current 를 붙여서 사용한다! => useRef로 관리하는 변수는 값이..

Next.js 세 번째 복습으로 react-query를 선택했다. react-query는 React에서 사용해본 경험은 있지만 Next.js에서 서버 컴포넌트와 클라이언트 컴포넌트에서 사용하는 방식이 달라서 이를 기록하고자 했다. 그 전에 React-Query를 사용 하는 이유에 대해 생각해보자. 1) 서버의 데이터를 가져오는 것 / 리덕스는 컴포넌트끼리 데이터 공유 할 때 사용 2) 캐싱이 가능해서 트래픽 줄여줌 3) query.getClient로 데이터 공유도 가능 4) React-Query로 캐싱 후 zustand로 데이터 공유 자주 사용 5) 로딩 , 에러 , 펜딩 , 성공 같은 인터페이스 표준화 지원 다음으로 Next.js에서 React-Query를 사용하는 방법은 크게 두 가지가 있다고 한다...

이 두 부분은 가장 어렵다고 느낀 부분이라 따로 적으려고 뺐다. 1. Parallel Routing (병렬 라우팅) : 동시에 또는 조건에 따라 동일한 레이아웃에서 하나 이상의 페이지를 렌더링 할 수 있게 해준다. 예를 들어 team과 analytics의 페이지를 동시에 띄어줄 수 있다. 즉, 동일한 URL에서 완전히 분리된 코드를 사용 가능하게 해준다. 방법은 슬롯이라고 불리는 @folder 컨벤션을 사용해서 구분해준다. 또 같은 수준의 레이아웃으로 props로 전달 한다. @folder 는 URL 구조에 영향을 미치지 않는다. export default function Layout(props: { children: React.ReactNode analytics: React.ReactNode team:..

이번 파이널 프로젝트 들어가기 전까지 Next.js에 대해 공부했다. 비록 파이널 프로젝트는 React를 사용하지만 그래도 Next.js는 알아야 한다고 생각했기에 제로초님 강의를 들었고 지금까지 배운 내용을 복습하고자 한다. 1. Next.js란? Next.js는 React의 프레임워크이다 반대로 React는 라이브러리인데 라이브러리는 어플리케이션을 만들 때 필요한 자원의 모임이고 프레임워크는 기본적인 틀을 제공해서 보다 효율적으로 어플리케이션을 만들 수 있도록 하는 소프트웨어 환경이다. Next.js는 서버사이드 렌더링(SSR) , 정적 사이트 생성(SSG)과 같은 기능들을 제공한다. 2. SSR과 SSG란? 1) SSR 웹 페이지를 브라우저에서 렌더링 하는 대신, 서버에서 렌더링 한다. 브라우저가 ..

이번에는 Redux와 더불어 자주 쓰이는 Recoil에 대해 알아보고자 한다. 1. Recoil Recoil은 Redux의 보일러플레이트 코드 단점 문제를 개선 한 라이브러리이다. Redux는 직관적이지만 하나의 상태를 관리하더라도 많은 코드가 필요하기 때문에 Redux Toolkit이 나왔지만 그럼에도 많은 코드의 소모를 가져왔고 이에 대한 하나의 대안으로 나온 라이브러리가 바로 Recoil이다. 0) 설치 $ npm i recoil @types/recoil // src/index.tsx import { createRoot } from "react-dom/client"; import { RecoilRoot } from "recoil"; import App from "./App"; const rootEl..

앞서 글에서 언급한대로 React에서는 상태(State)로 데이터를 관리하고 수정한다. 이렇게 상태를 다룰 때 가장 큰 문제점은 데이터가 많아질수록 관리해야 하는 상태가 늘어나고 컴포넌트끼리 props로 불필요한 상태 전달을 해줘야 하고 그로인해 상태 관리하기 힘들다는 점이다. React를 사용할 때는 이러한 문제점을 극복하기 위해 다양한 라이브러리를 사용한다. 그 중 Redux와 Recoil을 살펴볼 예정이다. 1. Redux Redux는 리액트에서만 지원하는 라이브러리는 아니지만 리액트에 특화된 전역 상태 관리 라이브러리이다. Flux 패턴 기반으로 단방향 데이터 흐름을 지향한다. state 들을 스토어(store)에 상태를 담고 이를 참조하게 하는 방식이다. . 이 스토어에서 관리되는 상태 값은 일..

평소 강의나 직접 했던 상태 관리였지만 머릿속에만 있던 것을 직접 정리하는 시간이 필요했기에 본격적으로 프로젝트 전에 정리하고자 한다. 1. 상태란? State 라고도 한다. React에서 상태란 데이터이다. 특히 변할 수 있는 데이터 혹은 값이라고 보면 될 것 같다. 예를 들면 로그인 유무 혹은 관리자 유무 등으로 나눌 수 있을 것이다. import react , { useState } from 'react' const page = () => { const [isSignIn , setIsSignIn] = useState(false) const [isAdmin , setIsAdmin] = useState(false) return ( { isSignIn ? 로그인 됐어요 : 로그인 해주세요! } ) } 2..

토이프로젝트를 진행하면서 로그인 정보 등을 저장했을 때의 어려움을 겪었는데 이를 복습하고자 한다. 1. 웹 스토리지 : 웹 브라우저에서 클라이언트 측에서 데이터를 저장하고 관리하기 위한 API이다. 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다. 웹 스토리지를 사용하면 사용자의 로컬 브라우저에 데이터를 저장하고, 필요할 때 이 데이터를 검색하거나 수정할 수 있다. 주로 웹 어플리케이션에서 설정, 세션 상태, 캐싱 ,로컬 저장 등 다양한 용도로 활용 된다. 또한 localStorage와 sessionStorage 이 두 가지 형태로 존재 한다. 웹 스토리지는 주로 다음과 같은 용도로 활용된다. 사용자 설정 및 환경 설정 저장 임시 데이터 저장 (예: 장바구니 데이터) 세션 관리 ..

props : properties를 줄인 표현으로 컴포부모 컴포넌트에서 설정할 수 있으며, 부모에서 자식으로만 데이터를 줄 수 있다. 그 반대는 안된다. 자식에서 부모로 전달 방법 : 함수를 이용한다. 부모가 함수를 넣어 props로 자식에게 넘겨주면, 자식이 데이터를 파라미터로 넣어 호출하는 방식이다. 방법 1. App.js /// App.js /// import logo from './logo.svg'; import './App.css'; import Fruits from './component/Fruits'; // 자식 컴포넌트 function App() { return ( 과일 : 갯수 // 자식 컴포넌트에 apple과 10이라는 데이터 전달 ); } export default App; 2. Fr..

이전 학기에 배운 시스템프로그래밍을 복습하는 시간을 가지고자 합니다. 1주차때는 주로 System Program 이 무엇인지에 대해 배우고 그 종류와 하드웨어의 구조에 대해 간략히 다루고 있습니다. 혹여 질문이 있으시거나 오류가 있으시면 댓글로 답해주시면 감사하겠습니다. 1. Computer Organziation 처음에는 컴퓨터의 구조에 대해 설명하고 있습니다. 위 그림이 잘 요약해주었지만 큰 축으로 하드웨어와 소프트웨어로 나뉘어지고 하드웨어는 CPU , 입출력장치 , Memory 로 구성되어지고 소프트웨어는 System program과 Application program(응용프로그램)으로 구성되어 있습니다. 2. Hardware components : PC 먼저 PC의 구성요소를 살펴보면 1) Inp..