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

기업 과제를 진행하면서 배운 내용들을 과제에 적용해보았다. 깃허브 링크 : 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

react router v 6.4 체험기

날짜: 2023년 2월 25일 생성일: 2023년 2월 25일 오후 5:12 태그: 프론트 엔드 원티드 프리온보딩 사전 과제를 하면서 react router v6.4에서 좀 많이 바뀐듯한 react router를 사용해봤다. https://reactrouter.com/en/main Home v6.8.1 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com r..

2023.02.27