공부

JWT 구조, access_token, refresh_token

JWT JWT란 Json Web Token의 약자로 어쩌고저쩌고... 이런 내용은 다른 블로그에 많으니 생략하고 일단 JWT는 토큰이고 토큰을 사용하는 이유는 간단하다 회원가입과 로그인이 필요한 서비스에서 쿠키와 세션을 대신해서 사용자를 인가, 인증해야 하기 때문 토큰의 장점으로는 서버가 아닌 클라이언트에 저장되기 때문에 메모리나 스토리지 등에서 관리하는 다른 방법보다 서버의 부담을 덜 수 있고 JWT의 장점으로는 토큰 자체의 사용자의 정보 같은걸 직접 담을 수 있어 클라이언트와 백엔드가 통신할 때 단순히 HTTP 헤더에 토큰을 첨부하는 것만으로도 데이터를 주고받을 수 있다. JWT의 구조 JWT의 구조도 검색하면 쉽게 나온다 헤더에는 해당 토큰의 타입과 해시 알고리즘, 페이로드에는 해당 토큰에 담을 정..

flask 기본 게시판 만들기 -1

Flask는 파이썬으로 웹 애플리케이션을 구현할 때 사용되는 프레임워크다. 공식 홈페이지에 나와있는 설명으로는 micro web framwork 즉 군더더기가 없는 아주 가벼운 웹 프레임워크라는 이야기이다. 파이썬 웹 프레임워크에는 Django등 다른 여러 프레임워크가 있다. 하지만 플라스크(Flask)는 학습 곡선(learning curve)이 낮아 비교적 쉽게 배워서 사용할 수 있다. 플라스크는 파이참을 이용해 쉽게 실행할 수 있다. 단순 엔드포인트 구현 ㅇ]엔드포인트란 단순하게 설명하자면 API서버가 제공하는 통신 채널 혹은 접점이라고 할 수 있다. 프론트엔드 서버 등의 클라이언트가 백엔드 API서버와 통신할 때 엔드포인트에 접속하는 형태로 통신하게 된다. 각 엔드포인트는 고유의 URL 주소를 가지..

Querydsl 공부 <기본 문법>

Querydsl공부를 하며 잊지않게 기록하는 게시글 입니다. 테스트 기본 코드 @SpringBootTest @Transactional public class QuerydslBasicTest { @Autowired EntityManager em; JPAQueryFactory queryFactory; @BeforeEach //테스트 전 데이터 세팅 public void before() { queryFactory = new JPAQueryFactory(em); Team teamA = new Team("teamA"); Team teamB = new Team("teamB"); em.persist(teamA); em.persist(teamB); Member member1 = new Member("member1", ..

리액트 공부4. 리액트 라우터

기존에는 페이지 나누려면 html 파일을 여러개 만들어서 하나하나의 페이지로 사용했는데 리액트에서는 html 파일 하나만으로 그것이 가능하다. 누가 다른 페이지를 요청하면 내부에 있는 만 갈아치워서 보여주면 되기 때문, 이런 행위를 쉽게 해주는 것이 리액트 라우터 라이브러리다. 외부 라이브러리는 구글에 라이브러리 이름 검색해서 홈페이지가서 그대로 따라하면 되는데 라우터같은경우는 터미널에 npm install react-router-dom@6 를 입력하면 된다. 그 후 index.js파일로 가서 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); ro..

리액트 공부3. 부트스트랩, 이미지넣기,

이번엔 새로운 프로젝트를 만들어서 해보겠다 부트스트랩 사용하기 리액트도 리액트 부트스트랩이라는것이 있다. 구글에 React-Bootstrap을 설치하면 이 주소를 터미널에 입력하여 부트스트랩 라이브러리를 설치한다. 또한 Bootstrap Css파일을 요구하는 경우가 있기 때문에 이 링크를 index.html의 에 넣어주거나 App.js에 import 'bootstrap/dist/css/bootstrap.min.css'; 이런식으로 추가해도 된다. 만약 무언가 필요한게 있다면 검색창에 검색하여 그 부분을 복사해오면 된다. 만약 상단 바가 필요하다면 navbar라고 검색하여 나오는 코드를 가져오면 된다. import {Button, Navbar, Container, Nav} from 'react-bootst..

리액트 공부2. 동적 UI (if사용), 반복문(map()사용), 입력

동적인 UI 만들기 (모달창 만들기) 저번 게시글에서 만들었던 모달창을 기능부여를 해보자 (평소엔 숨겼다가 클릭하면 보이는 방식) 동적인 UI만드는 step HTML CSS로 미리 디자인 완성 UI의 형재 상태를 state로 저장 state에 따라 UI가 어떻게 보일지 작성 (조건문 등) 1. 은 저번 게시글에서 만들었고, 아래 코드는 2번이다. let [modal, setModal] = useState(false); html 중간에 조건문을 만들때 삼항연산자를 사용해야한다. { 조건식 ? 참일때 실행할 코드 : 거짓일 때 실행할 코드 } 위는 삼항연산자의 사용방법이고 아래 코드처럼 사용하면 된다. html에서 아무것도 안보여주고싶을때는 null을 이용한다. { modal == true ? : null ..

Vue 기초 공부

1. 데이터바인딩 뷰에서 데이터를 가지고 다니기 위해서는 script 부분에 데이터 보관함을 먼저 만들어야 한다. 데이터는 오브젝트 형식으로 저장해야 한다. {자료이름 : 자료내용} XX 원룸 {{ price1 }} 만원 //중괄호 두개 안에다가 데이터의 변수명을 넣어줌 데이터바인딩을 하는 이유는 리액트와 같다. 웹앱 즉 실시간 데이터 반영을 하기위해. HTML이 변경되면 새로고침을 해야 값이 변경되는데 데이터바인딩을통한 변경은 데이터가 바뀌면 재랜더링 즉 새로고침없이 값이 변하게 된다. 만약 HTML의 속성의 값을 데이터바인딩을 하고싶다면? data() { return { price1 : 60, price2 : 70, 스타일 : 'color : blue', } XX 원룸 속성값 앞에 :를 붙여주면 된다..

뷰 인텔리제이 프로젝트 생성

먼저 노드를 설치해야하는데 리액트찍먹을 할때 이미 설치했으므로 생략 우선 플러그인에서 Vue.js를 설치해야한다 그 후 프로젝트 생성으로 넘어가서 vue 프로젝트 생성 참고로 인텔리제이 유료버전을 쓰기때문에 무료버전과 생성 과정이 다를 수 있다. 생성이 다 된 이후의 모습 안에는 HTML을 만들고 안에는 js를 짜고 안에는 css를 짜면 된다. App.vue는 메인페이지 여기에있는 코드들을 HTML로 바꿔서 public/index.html로 옮겨서 브라우저에 띄워줌 node_modules : 프로젝트에 쓰는 라이브러리들 src : 실제로 코드를 짜는 공간 public : html파일, 기타파일 보관 package.json : 라이브러리 버전, 프로젝트 설정

리액트 공부1. 기초 JSX 사용법 (리액트의 자바스크립트)

1. 태그에 class를 주고싶으면? //App.js 개발 Blog //App.css body{ font-family: 'nanumsquare'; } .black-nav { background: black; width: 100%; display: flex; color: white; padding: 20px; font-weight: 600; } 일반 HTML과 CSS와 비슷하게 작성 가능하다. 2. 리액트에서 데이터 바인딩 쉽게하는 법 데이터 바인딩 : 서버에서 데이터를 가져와서 들고다니는 것 기존 방식 document.getElementById().innerHTML = ''? //이런식으로 데이터를 가져오거나 let posts = '고기 맛집 리스트'; //이런식으로 변수를 지정 리액트 앵귤러 뷰등을 사..

리액트 인텔리제이 프로젝트 생성

먼저 리액트를 사용하기전에 nods를 설치해야한다 node.js를 설치하는 이유는 노드의 create-react-app 라이브러리를 사용하기 위해 설치를 한다. node.js를 설치하면 npm이라는 툴을 사용할 수 있는데. npm은 라이브러리들을 쉽게 설치할 수 있게 도와주는 툴이다. IDE로는 대부분 vsc를 사용하지만 나는 인텔리제이 유료버전을 사용하는게 아까워서 인텔리제이로 사용한다 유료버전 사용시 React를 고르면 자동으로 리액트 세팅을 해준다 자바스크립트를 사용하는 이유는 HTML과 상호작용하기 위해서 즉 HTML의 Elemenet들을 JavaScript를 통해 변경하고 읽을 수 있다. App.js는 메인페이지를 짜는 곳, public/index.html은 실질적인 html파일 태그를 통해 A..