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

2025.02.10 1. 퇴직결정한달 반을 일을 해보았다. 사무실에 앉아서 이런저런 지시도 듣고 개발도 하고 싸우기도하고 웃기도하고 그런 시간이었다. 결국에는 그곳을 나와서 나는 다시 도서관 책상에 앉아 노트북을 켜두고 있다. 2. 회사생활에서 알게 된 것.8~9 시간 근무 + 점심시간(1) + 출퇴근(3시간)은 나의 인생, 루틴이 없어진다.나는 하루 두시간씩 운동을 하지않으면 우울증이 와서 죽는다. 일을 하면 개발과 독서가 재미없어진다. 이 두가지를 잃는 삶은 의미가없다. 3. 앞으로의 계획1. 루틴 시스템 재구축뒤척인다 - 기상 (3시)- 이불개기 - 108배(40) - 푸셥, 싯업 , 집나와서(다섯시) 걷거나 뛰기(40) - 헬스장 도착(6시)- 아무거나 무산소 세트(10회) 당 1000원 - 샤워..

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 에서 리소스는 보호된 정보를 의미함.인가 : 자원에 접근할 권한을 부여하는 과정. 인가가 완료되면 리소스의 접근 권한 정보가 있는 엑세스 토큰을 클라이언트에게 보내줌.엑세스 토큰 : 리소스 서버에서 리소스 소유자의 보호된 정보를 획득 할떄 사용하는 만료기간이 있는 토큰리프레시 토큰 : 엑세스 토큰이 만료되었을떄 갱신하는 용도로 사용하는 토큰. 액세스 토큰보다 만료..