전체 글

[Document] Welcome Remix Docs

in this session, we will focus on user-created interfaces and learn about Remix, which provides a fest,flexible, and resilient environment. The parts described in the Remix offical document are as followers. Remix is a full stack web framework taht lets you foucs on the user interface and work back through web fundamentales to deliver a fast, slick, and resilient user experience, People are gonn..

[TIL] 2022년 02월 16일 - 로그인 Validataion

이번 시간에도 인증 토큰에 내용의 연속으로 인증 부분을 배웠다. 커리큘럼 useQuery를 axios 처럼 사용할 수 있다! => useApolloClient 헉?! 폼을 자동으로 만들어준다고?! => React-Hook-Form Validataion 라이브러리가 따로 있다 => Yup 재사용을 위한 공통컴포넌트를 만들어보자! => Common-Component 우리가 그동안 useQuery를 단독으로 사용해서 학습하였는데 이것을 useQuery보다 한단계 더 높은 최적화 방식의 useApolloClient를 사용할 것이다. useQuery와 useLazyQuery useApollo의 차이점을 알아보면 useQuery는 내가 실행하고 싶을때 실행할 수 있다. useLazyQuery는 내가 실행하고 싶을때..

[TIL] 2022년 02월 15일 - withAuth와 SessionStorage / Cookie

이번시간에는 로그인을 구현할떄 기록하는 Stoarge / Cokie의 관해서 배웠다. 쿠키란? 인터넷에 사용자가 어떤한 웹사이트를 방문한다면 그 사이트가 사용하는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 말한다. 이전에 배운 refeshToken도 쿠키쪽에 저장해주는 방식이다. localStorage는 영구 저장 브라우저를 종료해도 살아있다. sessionStorage는 브라우저가 종료되는 즉시 사라진다. 프론트엔드는 화면을 미리 그려보고 브라우저로 보내주는데 그냥 그대로 보내주는 것이 아닌 프론트와 브라우저에서 그려준 것을 비교 diffing을 한 다음 최종적으로 반영해주는 하이드레이션이라 부른다. 그래서 localStorage에서 정의되지 않았다고 나온다. HOC HOC란..

[TIL] 2022년 02월 14일 - 로그인의 역사

커리큘럼 로그인을 이해하려면 역사를 알아야해!!! => Login JWT 토큰?? 이건 또 뭐시여?? => JWT 암호화 방식은 2가지가 있다?? 알고 있었나?? => Encrypt / Hash 로그인 인증 토큰은 어디에 저장해?? => Context-API 우리가 로그인에 대해 알아보기전 어떠한 방식으로 로그인이 이뤄지는지에 대해 알아보아야 한다. 먼저 우리는 브라우저라는 하나의 웹에서 백엔드가 요청을 보내게 된다. 프론트엔드에서 백엔드에게 로그인에 대한 정보를 넘기고 백엔드에서는 그에 대한 정보를 DB에 저장해준다. 저장해 준뒤에는 각각의 상태가 존재하는데 먼저 statful상태와 stateless 상태가 있는데 현재 백엔드에서 상태가 없는 상태로써 여러개의 테이블로 수평 확장이 가능하였다. 하지만 ..

[TIL] 2022년 02월 11 - Global-State

커리큘럼 글로벌 스테이트 ? props가 필요없다! => Context-API / Apollo-Client 로그인에도 역사가 있다? => AcessToken / RefreshToken 잠깐?! 이것 먼저 실행시켜줘 => Clousre / HOC / HOF Next.js 렌더링에 이런 원리가 있다 ? => Diffing / Hydration 헉?! 폼을 자동으로 만들어준다!? => React-Hook-Form 배울 내용 함수형 컴포넌트는 진짜 함수다 => Functional-Component el,prev,props에는 공통점이 있다 ? => Parameter 뭐? Rest와 Grapql에 차이가 또 있다고 ? => Under-Fetchting / Over-Fetching 이건 데이터 검사할때 사용하면 좋..

쿠키, 세션, 캐시, 로컬스토리지 정리

Cookie vs LocalStorage vs SessionStorage 1.Cookie(쿠키) 쿠키는 클라이언트에 대한 정보를 이용자의 PC에 있는 하드디스크에 보관하기 위해 웹사이트에서 클라이언트 웹 브라우저에 전송하는 정보이다. 1-1. Cookie의 특징 쿠키를 웹 사이트 koras02.tistory.com 이전 시간에 정리한 블로그 글은 업데이트 한다는 마음으로 다시한번 개념에 대해 정리해보는 시간을 가지려 합니다. 우선 이것들을 알아보기전에 HTTP의 개념부터 알아봐야 하는데요. 간단하게 설명하자면 HTTP는 상태가 없는(Stateless) 프로토콜이기 때문에 사용자가 웹 브라우저를 통해서 특정 웹사이트에 접속하게 될 경우에 어떤 사용자가 접속을 했는지에 대한 정보를 파악할 수 없습니다. 따라..

[TIL] 2022년 02월 09일 - 검색기능 추가, 쓰트롤링 디바운싱

이번시간에는 전반적인 Freeboard의 검색기능을 추가하는 방법과 쓰트롤링과 디바운싱에 대해 배웠다. 커리큘럼 검색을 이해하려면 다양한 DB를 알아야 한다 => Database 검색 결과를 페이지 네이션과 연결해야 한다 => Search / Pagenation 검색하기 버튼 없이 검색하는 법 => Debouncing / Trotthring 검색에 대해서 알기위해 프론트엔드 백엔드 브라우저가 어떤 방식으로 검색을 이루는지 알아야 한다. 브라우저에서 프론트에드에게 search를 보내주는데, 그리고 브라우저는 백엔드에서 만든 DB에게 요청된 검색단어를 보내주고 그 DB에서는 표형태로 되어있는 검색 내역의 표를 브라우저에게 보내준다. 검색 내역의 표안에는 각각의 토큰이 존재하는데 그것을 Redis라는 비관계형..

[React] React 상태관리에 대해 알아보자 -context api, redux, mobx, swr

React에서는 전역상태를 관리하는 라이브러리들이 상당히 존재합니다. 제일 유명한 상태관리 라이브러리로는 Redux(리덕스)라는 라이브러리가 존재합니다. 하지만 이 Redux를 포함한 여러가지의 상태관리 라이브러리가 존재하는데 오늘은 그것을 알아보려고 합니다. 1. 전역상태에 대한 정의 상태관리 라이러리를 소개하기 전에 먼저 전역상태가 무엇인가라는 것을 정의해보도록 하겠습니다. 우리가 다루어야할 상태가 무엇이 있는지를 정의하고 이를 구분할 수 있어야 함 어떤 상태가 들어가야하는자 기획을 생각하고 파악해볼 필요가 있음 상태를 나눌 필요가 없다면? 굳이 상태관련 라이브러리를 사용해야 하는가? 2. 글로벌 상태 관리란? 전역 상태관리를 사용하면 여러 구성 요소간에 데이터를 쉽게 전달/조작할 수 있습니다. (영..

[TIL] 2022년 02월 07일 - firebase

이번시간에는 백엔드에 조금더 가까워질 데이터베이스에 대해 배웠다. 데이터베이스는 컴퓨터에 34.64.187.2 라는 ip 형태로 그려져있다. 이 컴퓨터안에는 약 300개 정도의 프로그램이 생성되어있고 그것을 port 번호로 나눠서 사용하고 있다. 백엔드에서 연결을 통해 연결되어있는 것을 볼 수 있다. HTTP의 개념과는 다르다. HTTP와 다른 점은 백엔드는 한번 연결해놓으면 계속해서 연결 상태를 유지한다. 백엔드에서는 내컴퓨터가 localhost환경일때 브라우저에서 백엔드로 요청할 수 있게 접속문을 열어서 24시간 동안 대기해야한다. 이런것들을 추가해주기 위해서는 대부분 사용하는 것들이 express 혹은 koa등등이 있는데 graphql로 연결하고 싶다면 프론트엔드에서는 apollo-client 백엔..

[Javascript] 정규표현식 - 정규표현식이란? RegExp 와 플래그

알고리즘에서 문자열관련 코딩 테스트를 풀다보니 정규표현식이라는 개념이 나왔습니다. 물론 정규표현식을 사용하지 않더라도 다양한 메서드를 통해 문제를 풀어나갈 수 있지마 언젠가는 이런 문법이 필요해지는 경우가 올 것이기 때문에 이전에 정리한 정규표현식을 업그레이드 한다는 마음으로 포스팅을 작성해보겠습니다. 1. 정규표현식 이란? 정규표현식이란 무엇인가 부터 알아볼 필요가 있을 것 같습니다. MDN에서는 다음과 같이 정의하고 있습니다. "정규 표현식은 문자열에 나타내는 특정 문자 조합과 대응시키기 위해 사용되는 패턴이다. 자바스크립트에서, 정규 표현식 또한 객체이다." 간단히 말해 문자열에서 특정한 문자를 찾아내기 위해 사용되는 하나의 패턴이라고 볼 수 있습니다. 자바스크립트에서는 이 뿐만 아니라 프로그래밍 ..

[React] useRef 란?

이번시간에는 React에 상태를 제어하는 useState를 이어서 useRef라는 것을 배워보도록 하겠습니다. useRef란? useRef는 특정 DOM을 가리킬 때 사용하는 Hook함수 입니다. useRef를 사용하는 예로는 대상에 대한 포커스 설정, 특정 엘리먼트의 크기나 색상을 변경할 때 사용합니다. ref ref 자체의 뜻을 설명하자면 ref는 Javascript의 getElementById() 처럼 컴포넌트의 어떤 부분을 선택할 수 있게 해주는 방법입니다. DOM에 접근 할 수 있도록 하는 기능을 가진 hook이라고 보면 됩니다. 리액트에 있는 모든 컴포넌트는 reference element(래퍼런스 엘리먼트)를 가지고 있어서 어떤 컴포넌트에 ref={변수명}을 넣어준다면, 리액트에서 해당 컴포..

[React] useEffect란 ?

이번시간에는 React에서 제공하는 Hooks중 하나인 useEffect에 대해서 알아보도록 하겠습니다. 1.UseEffect란? useEffect Hook을 이용하여 우리가 React에게 컴포넌트가 렌더링 된 이후에 어떤일을 수행할지 정해줄 수 있습니다. useEffect는 기본적으로 몇 가지 조건에 의해 작동합니다. 페이지가 처음 렌더링 되고 난후 useEffect는 무조건 한번 실행됩니다. useEffect에 배열로 지정한 useState 값이 변경될 때 실행되게 됩니다. 즉 React에서는 우리가 작성한 함수를 기억했다가 DOM 업데이트 수행 이후에 이를 불러내서 실행해주게 됩니다. UseEffect를 컴포넌트 안에서 부르면? useEffect를 컴포넌트 내부에 두어 effect를 통해 앞전에 나..