3.2 테일윈드 css 리액트 프로젝트 만들기1. tailwind CSS 사용(1) postCSS, autoprefixer, 테일 윈드 설치✅ 2025.2월 18일 더이상 tailwind v4 는 init 명령이 존재하지 않는다. 이전 버전을 설치해야.bin 에 tailwind 가 생긴다.참고 npx tailwindcss init -p를 실행할 수 없습니다 - "실행할 실행 파일을 결정할 수 없습니다 npm install -D tailwindcss@3 postcss autoprefixernpm install -D postcss autoprefixer# npm install -D tailwindcss @tailwindcss/vitenpm 할때마다 package.json 에 잘설치됬는지 확인 필요 postc..

🚶‍♂️ Vite + react + Tailwindcss 4 Setting2025.1.22 일 이후 tailwind 4.0 이 발표되면서 설치와 실행이 매우 간단해졌다. (1) vite 프로젝트 생성, tailwind 설치## basic setting check node -v # 22.14.0npm -v # 10.9.2## npm create vite@latest my-tailwind-app --templatecd my-tailwind-appnpm install tailwindcss @tailwindcss/vite아직 npm run dev 를 하면 안된다..(2) vite.config.js 에 플러그인 추가vite.config.jsimport { defineConfig } from 'vite'impor..

chapter 03 컴포넌트 css 스타일링CSS 를 사용한 리액트 컴포넌트 스타일링 방법컴포넌트 스타일링리액트 컴포넌트는 어떤 시점에서 html 요소로 바뀌므로 컴포넌트의 스타일링 또한 CSS를 사용해야함.index.html 파일에 html 코드를 작성하고 script 태그안에 자바스크립트 코드를 작성하는 일반적인 웹 프런트 엔드 개발과 다르지 않음.부트스트랩 사용css 는 부트스트랩과 같은 css 프레임워크를 사용할 때가 많음.http://getbootstrap.comcss 경로js 경로npm installnpm install bootstrap@5.3.3public/index.html 부트스트랩 컴포넌트 구현부트 스트랩 구문 > Forms > Overview > html 코드 복사 > Boots..

chapter 13 웹소켓을 사용한 실시간 채팅 구현웹소켓은 서버도 클라이언트의 요청없이 응답을 줄 수 있음.grk 플랫폼 내부 채팅기능은 어디에서 사용되어야 하는가?project? task? project 내부에서만 채팅이 이루어지도록 해볼까? 13.1 웹소켓 소개폴링 방식 : 주기적으로 요청을 보내서 응답을 받음롱폴링 방식 : 클라이언트와 서버간의 커넥션을 유지한 상태로 응답을 주고 받는 방식요청한 데이터에 변화가 있을떄 응답을 보냄.롱폴링은 요청을 보낸후 응답 대기 후 응답이 옴ㄴ 바로 다시 요청을 보냄. 웹소켓하나의 tcp 커넥션으로 서버와 클라이언트간에 양방향 통신을 할 수 있게 만든 프로토콜 대부분의 웹브라우저에서 안정적으로 사용. (IE9 오래된 웹브라우저는 지원불가)실시간 네트워킹 구현에 ..

11. OAuth 를 사용한 구글 로그인 인증OAuth(open Authorization ) 개방형 인가 표준 OAuth 는 인증이 아니라 인가의 관점에서 보아야함. 소셜 로그인 후 팝업이 뜨면서 권한을 요청하는 화면 OAuth 1.0, 2.0, 2.1 중 2.0 을 가장 많이 사용 인증: 리소스에 접근 자격이 있는지 검증하는 과정 ,OAuth 에서 리소스는 보호된 정보를 의미함.인가 : 자원에 접근할 권한을 부여하는 과정. 인가가 완료되면 리소스의 접근 권한 정보가 있는 엑세스 토큰을 클라이언트에게 보내줌.엑세스 토큰 : 리소스 서버에서 리소스 소유자의 보호된 정보를 획득 할떄 사용하는 만료기간이 있는 토큰리프레시 토큰 : 엑세스 토큰이 만료되었을떄 갱신하는 용도로 사용하는 토큰. 액세스 토큰보다 만료..

10.6 패스포트와 세션을 사용한 인증 구현2025.1.27서버에서 인증을 하고 해당 정보를 서버의 특정공간에 저장.(세션 이용)쿠키는 세션을 찾는 정보만 저장(세션의 아이디값) 중요 정보는 세션에 모두 넣음. 세션은 서버의 자원을 사용하여 서버에 부하를 주지만 위조,변조,탈취가 불가능하여 보안적임. 가드하나로 로그인과 인증 모두 사용했지만 가드 두개와 인증 처리를 하기위한 파일을 여러개 만들것. 로그인에 사용할 가드. 인증 로직 구현 부분은 패스포트 라는 인증 로직을 쉽게 분리해서 개발하는 라이브러리 사용 패스포트 사용시 인증 로직은 스트래티지 파일을 생성해서 사용. 패스포트는 인증 로직 수행을 담당하는 클래스를 의미함. 다양한 인증을 위한 스트래티지 패키지를 같이 설치해 인증을 쉽게 구현가능. 가드 ..