Graph 공부하는 학생

이번에는 로그인을 해보겠습니다. 로그인 로그인과 관련된 메서드를 Service 인터페이스에 먼저 정의합니다. 아이디와 비밀번호가 필요하겠죠? SpringBoot Service public interface MemberService { Member login(String username, String password); } ServiceImplement 그리고 이 login 메서드에 대한 구현부를 정의합니다. 이 RequiredArgsConstructor를 사용하면 레포지토리와 인코더 등의 객체를 별도로 의존성 주입 없이 final로 선언해서 사용할 수 있다고 합니다. 유용합니다. @Service @RequiredArgsConstructor public class MemberServiceImpl imple..

로그인과 회원가입은 일상에서 자주 보는 화면이자 기능입니다. 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)를 만들겠습니다. 회원을 대..

이전 글에서는 리눅스 서버를 생성하고 로그인하는 과정을 심도있게 다루었습니다. 이번 글부터는 그 과정을 넘어가서 서비스 상품을 중점적으로 살펴보겠습니다. 도커 (docker) 도커는 컨테이너를 기반으로 만든 오픈소스 플랫폼입니다. Python 컨퍼런스에서 리눅스 컨테이너 세션에서 처음 소개되었다고 합니다. 편의성이 높아서 많은 개발자와 엔지니어에게 관심을 받았습니다. 클라우드에 올라가는 컨테이너 서비스를 소개합니다. 클라우드에도 컨테이너에 올려서 사용할 수 있습니다. 컨테이너 레지스트리(Container Registry) 최근 개발트렌드는 도커와 쿠버네티스와 같은 컨테이너 활용 방향으로 변하고 있습니다. 네이버 클라우드도 트렌드에 맞게 컨테이너 레지스트리, 쿠버네티스와 같은 서비스를 제공하고 있습니다. ..

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를 ..

네이버클라우드 1회 판교 소모임에 참여하게되었다. 장소는 판교 테크원 빌딩이다. 생각보다 사람이 많이왔고 다양한 사람들이 있어 각 분야별로 초점을 어떻게 맞춰서 진행할 지 궁금했다. 크게 2개로 나누어 진행했다. 모든 구성원의 자기소개를 바탕으로, Ncloud 서비스에 대한 강의 1부, 네트워킹 2부로 나누어 진행했다. 강의는 네이버클라우드 소개와 간단한 Terraform으로 시작하는 네이버클라우드 실습으로 구성했다. 관련하여 사이트를 정리했다. 이 사이트를 보면서 네이버 클라우드가 콘솔 뿐만 아니라 Terraform이라는 도구로도 네이버 클라우드에 접속하여 사이트를 구축할 수 있다. 먼저, Ncloud Provider라는 오픈소스 시스템이 있다. https://registry.terraform.io/p..

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가 있고, 렌더링 직..