리액트서버 API와 hydration이 뭔데?

WHY? 요새 대체 SSR과 Hydration이 뭔지는 알고는 있지만 정확하게 어떻게 돌아가는지 몰라서 이 글을 작성하게 됐습니다.React Server API리액트에서는 서버 환경(node) 에서 사용할 수 있는 API가 존재합니다. 이를 통해 서버환경에서 리액트를 렌더링할 수 있습니다.왜 이게 나왔을까요 ??- 클라이언트에서 모든 렌더링을 해결하는(CSR)은 여러 단점이 존재했습니다.- SEO, 보안문제, 더 늦은 초기 로딩 속도 등등 ..- 따라서 서버에서 리액트를 서버렌더링을 해줘야하는 상황이 필요해져서 그렇습니다. 그렇다면 어떤 API들이 있을까요 ?renderToStringReact Tree를 string으로 변환해줍니다.import { renderToString } from 'react-do..

2025.02.20

리펙토링부터 검색어 추천 기능 및 무한 스크롤 기능 구현 하기

기업 과제를 진행하면서 배운 내용들을 과제에 적용해보았다. 깃허브 링크 : https://github.com/wanted-frontedend-team5/pre-onboarding-10th-4-5 리팩토링 1. Js → Ts로 migration 타입스크립트 도입 이유 타입을 정적으로 제한하여 더 안정적이고 예측 가능한 코드 작성이 가능 컴파일 시간에 타입 오류를 확인함으로써 버그를 사전에 찾아 생산성 향상 및 유지보수가 용이함 의존성 설치 react/typescript 개발에 필요한 의존성 추가 "devDependencies": { "@types/react": "^18.2.6", "@types/react-dom": "^18.2.4", "typescript": "^5.0.4" } tsconfig.json 추..

2023.05.18

React Redux 파헤치기

Design Pattern 디자인패턴 : 소프트웨어를 설계하면서 자주 발생하는 문제에대한 모범답안 애플리케이션 전체를 다루기 위한 디자인 패턴들은 통상 여러 작은 범위의 디자인 패턴들을 함께 사용해서 만들어지기에 복합패턴이라고도 부름. → 그 중 모든 복합 패턴의 근간이라고 부를수 있는 패턴은 mvc 패턴 MVC MVC 패턴은 애플리케이션을 Model, View, Controller 세가지 구성요소로 나눠서 설계하는 패턴입니다. 구성요소들의 역할은 아래와 같습니다. Model: 데이터의 형태를 정의하고, 데이터를 수정하는 역할을 담당 Controller: 유저의 입력을 받아서 애플리케이션 내에서 어떻게 처리할지 판단 및 가공해서 모델 또는 뷰를 조작 View: 모델을 UI로 표현, 사용자의 입력을 받아서..

2023.05.18

컴포넌트 작성 피드백 및 리액트에서 렌더링 및 UseEffect 파해치기

컴포넌트 작성 피드백 코드/함수는 단순하고 한가지 일만 해야한다. 컴포넌트가 한가지 일만 하게..? 조건식 단순하게 만들기 분기가 생기는 순간 코드 읽기가 복잡해진다. → 최대한 보기 좋게 처리하는것이 좋다. 내가 처리하기 제일 편한 자료구조를 가져오는것이 기본 → 웬만하면 자료구조 선에서 처리되는게 훨씬 좋다. https://medium.com/javascript-scene/nested-ternaries-are-great-361bddd0f340 컴포넌트가 너무 많은 요소들에 의존하고 있음 컴포넌트의 해야하는 역할을 잘 생각해보자 한 컴포넌트가 2가지 일을 처리하고 있는건 아닌지 생각을 해보자 컴포넌트에 의존되는 값이 있는지 잘 생각해보고 거기에 예상되는 효과가 있는지 잘 생각해보기 자주 쓰는 strin..

2023.05.18

JWT토큰 인증 방식 로그인

날짜: 2023년 3월 9일 태그: 교육, 원티드 프리온보딩 ❔ 토큰이란 사전적 정의 토큰은 화폐 대신 사용할 수 있는 동전처럼 생긴 주조물을 말한다. 현실세계에서 토큰을 사용하는 경우는 꽤나 있다. 지하철 티켓… 놀이공원 자유이용권… 조건을 확인할 수 있는 경우에 주로 사용한다. 기술적 정의 그럼 디지털 세상에서 토큰이란? 로그인을 하는방법, 이유와 일치 한다. 토큰 기반 인증이란 사용자가 자신의 아이덴티티를 확인하고 고유한 액세스 토큰을 받을 수 있는 프로토콜을 말합니다. (출처 : https://www.okta.com/kr/identity-101/what-is-token-based-authentication/) 로그인에 토큰을 사용하는 이유 토큰을 사용하지 않는 경우 유저는 로그인을 통해 신원확인을..

2023.03.14

로그인 개념과 어플리케이션 구조 알아보기

날짜: 2023년 3월 6일 태그: 교육, 원티드 프리온보딩 로그인 개념과 어플리케이션 구조 알아보기 로그인의 기본적인 개념과 왜 로그인을 하는지 로그인이란게 대체 뭘까? 컴퓨터 보안에서 로그인(영어: login, 문화어: 등록가입)과 로그아웃(영어: logout)은 접근 허가 증명을 얻기 위해 사용자 인증으로 개인이 컴퓨터 시스템에 접근하는 작업을 말한다. 컴퓨터 보안에서 중요한 역할을 담당한다. 사용자 자격 증명은 일반적으로 사용자이름과 그에 일치하는 비밀번호 형태를 이루며[1] 이를 기반으로 사용자는 액세스 하기 위해 시스템에 로그인할 수 있으며 더 이상 필요하지 않을 때 로그아웃할 수 있다. ( 출처 : 위키 백과 ) 정의를 살펴 보면 다음과 같은 단어들이 있다. 접근 허가 증명 사용자 인증 시스..

2023.03.07