Graph 공부하는 학생

로그인과 회원가입은 일상에서 자주 보는 화면이자 기능입니다. SpringBoot와 React 어플리케이션으로 간단히 구현해보겠습니다. 완성할 화면은 아래와 같습니다. 사전 작업 먼저 JWT에 대해 정리한 글을 잠시 보고 오겠습니다. https://graph-dev.tistory.com/64 [React] JWT와 CORS JWT JWT는 JSON Web Token(JSON 웹 토큰) 의 약자로, 정보를 JSON 형식으로 안전하게 전송하는 방법입니다. 이 정보는 토큰 자체에 포함된 플레임 기반의 토큰이며, 일반적으로 인증과 권한 처리에서 주로 graph-dev.tistory.com 회원가입 Controller Boot에서 사용할 api를 활용한 회원 컨트롤러(controller)를 만들겠습니다. 회원을 대..

JWT JWT는 JSON Web Token(JSON 웹 토큰) 의 약자로, 정보를 JSON 형식으로 안전하게 전송하는 방법입니다. 이 정보는 토큰 자체에 포함된 플레임 기반의 토큰이며, 일반적으로 인증과 권한 처리에서 주로 사용합니다. 그러면 이 정보는 일종의 자격 정보라고 생각해야겠네요. 인증 값은 Bearer Base64라는 방법으로 인코딩된 값을 토큰으로 만들고, 이를 전송하게 됩니다. 다음은 토큰의 형식을 보여줍니다. 당연하게도 JSON 형태를 가집니다. { //header //토큰방식 "typ": "JWT", //암호화 알고리즘 방식 "alg": "HS512" }, { //payload //토큰의 주인, 유일한 식별자 "sub": "코드 값", //토큰 발행 주체 "iss": "백엔드 프로젝트명..

context API 맥락 API가 무엇일까요? react 앱을 만들게 되면 가장 중요한 것은 상태 값을 관리하는 것입니다. 컴포넌트가 많아지고 그 사이에 관계가 많아지면 구조가 복잡해집니다. 이 때, 전역(global)하게 상태를 관리해주는 API가 필요합니다. 그 역할을 해주는 것이 context API입니다. context API 예제 //createContext() 메소드를 이용해서 context를 생성 const context명(컴포넌트처럼 사용하기 때문에 첫글자를 대문자로) = createContext(context의 초기값); createContext(context의 초기값); //Provider로 context의 데이터를 제공 //Consumer로 제공받은 데이터 사용 //context를 ..

Immersion(불변성) 세상에 불변하는 것이 있을까요? 아마도 없을 겁니다. 아주 긴 시간 속에서는 조금이라도 변하기 마련이죠. React는 불변성이라는 개념을 가져왔습니다. 긴 시간이 아니랑 원본데이터를 보호하고, 복사를 통해 원본을 건드리지 않고 작업하도록 만든 개념입니다. 불변성이라는 것은 원본데이터의 변경을 금지하는 것 입니다. 이를 지키고자 React에서는 기존 원본데이터를 직접 수정하지 않고 새로운 데이터를 만들어서 사용합니다. const numArr = [1, 2, 3, 4, 5]; //스프레드 문법을 통한 새로운 배열 생성 const newNumArr = [...numArr]; const obj = { num1: 1, num2: 2, num3: 3 }; const newObj = { ...

Component Styling Component Styling(컴포넌트 스타일) 컴포넌트에 스타일을 입히는 방식은 4가지 방식이 있습니다. 먼저, 일반적인 CSS 방식(외부 스타일 시트, 내부 스타일 시트, 인라인 스타일 시트)를 사용하는 방식이 있습니다. 그 외에 SASS(Syntactically Awesome Style Sheet) 방식, CSS 모듈 방식, styled-component 방식을 주로 사용합니다. 조금 더 자세히 살펴보겠습니다. 일반적인 CSS 방식은 Html 문서에서 사용하는 Css방식과 동일한 방식으로 외부에 Css파일을 만들어서 참조하거나 인라인 스타일을 지정하거나 변수로 스타일을 지정해서 넘길 수도 있습니다. 일반적인 SASS 방식 다음으로, SASS 방식에는 CSS 전처리기..

useCallback useCallback은 렌더링 성능을 최적화할 때 사용하는 Hook이라고 할 수 있습니다. 컴포넌트에 정의해놓은 메소드를 렌더링될 때마다 재생성되는데 useCallback을 이용하면 메소드들이 재생성되는 것을 방지합니다. 또한, useCallback 정의해놓은 메소드의 재사용성을 높일 수 있으며, 메소드가 생성되는 시점을 정할 수 있는 장점이 있습니다. const 메소드명 = useCallback(() => { //메소드의 동작 구현 //최초 렌더링 시에만 메소드 생성, 상태변수 값을 줘서 상태변수가 변할 때마다 메소드를 재생성 }, []); useMemo useMemo는 연산을 최적화해주는 Hook입니다. 상태값이 변할 때만 연산이 이뤄지도록 지정할 수 있어서 불필요한 연산이 일어..

Hooks 여러분 후크 선장을 아십니까? 뜬금없지만 가끔 후크하면 피터팬에 나온 해적 선장이 떠오르곤 합니다. 손에 달린 갈고리 같은 것을 장착한 후크 선장을 생각해봤습니다. 거기에 s가 붙어있네요. 여러개의 갈고리로 생각해보고 접근해보겠습니다. 기존 react에서는 클래스형 컴포넌트로 개발이 주로 이루어졌습니다. 함수형 컴포넌트에는 state, props, ref 등의 생명주기를 관리할 수 있는 기능이 없었습니다. 그런데, Hooks라는 기능이 등장하면서 함수형 컴포넌트에서도 state, props, ref 등의 생명주기를 관리할 수 있는 기능이 추가되었죠. 현재는 대부분 함수형 컴포넌트 위주의 개발을 하게 됩니다. 이 Hooks는 컴포넌트의 상태관리 변수를 생성하는 useState가 있고, 렌더링 직..

Component 컴포넌트는 react에서 화면을 구성하는 하나의 요소입니다. 헤더, 메인, 메뉴바, 기사목록 등 화면을 하나의 컴포넌트로 구성할 수 있습니다. 무자비하게 마구 분리한다면, 너무나 많은 파일이 만들어지므로 적당하게 크기를 잡고 컴포넌트를 지정하는 게 필요합니다. 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트 두 종류가 있습니다. 현재는 함수형 컴포넌트를 사용하도록 권장하고 있습니다. https://react.dev/reference/react/PureComponent#migrating-from-a-purecomponent-class-component-to-a-function PureComponent – React The library for web and native user inter..

리액트(React) 기존 HTML로 구성된 화면은 페이지를 이동하거나, 데이터가 변경되면 새로운 HTML 파일을 불러와서 화면에 표출하는 방식으로 MPA 기반입니다. MPA(Multi Page Application) 이에 반해 react는 SPA(Single Page Application) 방식입니다. HTML 파일은 하나만 사용하고 페이지를 이동하거나 데이터가 변경되면 HTML 파일에 있는 태그를 삭제하고 새로운 태그를 렌더링하는 방식을 사용합니다. react는 앞서 사용한 HTML, CSS, JS의 사용은 편하게 하고 오직 화면단만 신경쓸 수 있도록 돕는 프론트엔드 라이브러리 입니다. 또한, 사용하기에 앞서 Html, Css, Javascript는 기본적으로 숙지가 되어있어야 합니다. 왜 그런지는 아..

리액트라는 프로그램에 대해 강의를 듣고 간단히 복습했습니다. 실행하는 방법에 대해 설명해보겠습니다. 먼저, node js를 설치합니다. https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 가능하다면 LTS(Long Term Support) 버전으로 설치하는 것이 좋습니다. 가장 안정적으로 오랫동안 지원되는 버전이기 때문입니다. 설치를 하고 나면, 윈도우의 경우 명령 프롬프트 창, Mac은 터미널을 실행합니다. 그리고 명령어를 통해 node와 npm 버전을 확인합니다. C:\Users>node -v v18.16.1 C:\Users>npm -v 9.5.1 이..