IT LAB

1. Vite란?프론트엔드 개발을 위한 빌드 도구이자 개발 서버✅ 기본 구조 잡아줌✅ HMR: 코드 수정 시, 전체 페이지를 다시 로드하지 않고 바뀐 부분만 즉시 반영해줌✅ 모던 브라우저 환경 최적화: ES Module 기능을 적극적으로 활용 (불필요한 번들링을 줄이므로 더 빠르게 동작함)✅ 빌드 도구 포함: 개발용 서버 뿐 아니라 배포용 파일 생성 가능 셋팅npm create vite@latest -- --template react-ts 2. 주요 디렉토리/파일파일/디렉토리역할알아야 할 점src/애플리케이션 소스 코드대부분의 개발이 여기서 이루어짐src/main.tsxReact 앱 시작점보통 건드릴 일 거의 없음src/App.tsx첫 화면 컴포넌트React 공부 초반에는 거의 여기만 수정public/..

1. 기본 타입stringnumberjavascript에는 정수와 실수를 구분하는 타입이 없음 booleanArray배열 안에 어떤 타입의 값이 들어가 있는지 표현함 예시더보기let numbers: number[] = [1, 2, 3];let names: string[] = ['Alice', 'Bob'];let numbers: Array = [1, 2, 3];let names: Array = ['Alice', 'Bob'];type User = { id: number; name: string;};const users: User[] = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' },]; 2. 타입 확인확인 대상코드stringtypeof s === 'stri..

1. 배경Javascript의 성장처음에는 웹페이지에 간단한 상호작용을 넣기 위한 작은 스크립트 언어였음현재는 프론트엔드 뿐 아니라 백엔드, 큰 규모의 앱에서도 사용됨⚠️ 앱이 커질수록 실행 전에는 발견하기 어려운 타입 관련 오류가 많아짐 목표Javascript 코드를 실행하기 전 타입이 맞는지 검사하는 역할✅ Javascript 문법을 그대로 쓰며, 거기에 Typescript의 타입 시스템이 추가됨 2. 타입값이 할 수 있는 동작과 능력 Type Annotation변수, 함수 파라미터, 반환값 등에 타입을 직접 적는 문법타입을 지정할 대상 뒤에 타입을 적음 Object Type객체가 어떤 속성을 가지고 있고, 각 속성이 어떤 타입인지 표현함 예시더보기function printCoord(pt: { x: ..

1. React화면을 만들기 위한 Javascript 라이브러리✅ state나 props가 바뀌면 컴포넌트를 다시 렌더링하고, 변경된 부분만 화면에 반영해줌 2. 컴포넌트재사용 가능한 UI 조각 (화면을 컴포넌트라는 단위로 나누어 구성함)✅ JSX를 반환하는 JS 함수✅ 중첩할 수 있음 예시) 컴포넌트더보기컴포넌트 이름은 대문자로 시작함 예시) js 함수더보기function Button() { return 저장;}html 태그는 소문자로 시작함 예시) 중첩 가능더보기export default function MyApp() { return ( Welcome to my app );}export default는 대표 컴포넌트를 의미함 JSXHTML처럼 생겼음 (실제로는..

1. navigation 채팅이 내가 있는 방에 도착하게 될 경우 네비게이션 오른쪽 상단의 messenger icon에 빨간색 원을 그려줌 처음 componenet가 렌더링 될 때, dispatch() 함수를 호출하여 client값을 store에 save함 로그인 성공 이후 localstorage에 저장된 email을 가지고 사용자 정보를 서버에 요청하며 로그아웃 시 email 값이 remove되므로 userdata가 undefined일 경우 login 창으로 redirect 시켜 로그인하도록 함 const Navigation = () => { const email = localStorage.getItem("email"); const { data: userData, error, revalidate, mu..

/messenger path로 오게될 경우, 서버와의 stomp handshake가 이루어진다. navigation 컴포넌트에서 최초의 핸드쉐이크 요청을 하며, 이후 채팅방에서 채팅을 하게 될경우도 핸드쉐이크 후 반환받은 stomp client를 재사용하여 채팅하는데 사용한다. 이를 위해 컴포넌트간 전역적으로 stomp client 객체를 공유하여 사용한다. 컴포넌트간 전역적 공유 방법에는 여러가지 방법이 있다. 현재 사용하고 있는 swr을 비롯하여 redux 등이 대표적이다 프로젝트간 사용하고 있는 모듈로 진행하는 방식이 일관성있고 좋다. 하지만 stomp client는 단순 데이터가 아니여서 localstorage에 보관하는 방식이 적절하지 않고 json 데이터로 다시 불러오는데도 함수속성을 읽는데 ..

1. Cookie universal-cookie 모듈을 사용하여 브라우저의 쿠키 값을 key-value 형식으로 가져오고 지우는 커스텀 함수를 export 하였음 oauth 로그인 성공 시에 로그인 email을 쿠키에 저장한 후 swr 모듈로 사용자 정보를 요청하여 컴포넌트간 전역적인 접근을 위해 사용될 것임 로그아웃 시 removeCookie() 함수로 email 값을 지워 관리할 것 import Cookies from "universal-cookie"; const cookies = new Cookies(); export const getCookie = (name) => { return cookies.get(name); } export const removeCookie = (name) => { retu..

1. db.ts 타입스크립트를 사용하므로 채팅 서비스에서 사용될 타입들을 정의해두는 파일 IChatUser 채팅방에 있는 사용자들의 정보를 받을 타입입니다 채팅방 정보 요청시 채팅방 멤버들의 정보를 리턴받게 되는데, 위의 정보만을 서버에서 내려주므로 이렇게 구성하였습니다. export interface IChatUser { userId: number; nickname: string; email: string; profileImage: string; } IChatMessage 채팅 메시지 타입 export interface IChatMessage { // DM 채팅 chatMessageId: number; authorId: number; // 보낸 사람 아이디 message: string; createdA..

1. useInput useState 의 기능을 활용하여 email, password 등의 입력란에 값이 적혀질 경우 렌더링 되도록 useCallback 함수로 메모이제이션한 handler 함수를 리턴하는 hooks를 정의함 input 태그의 onChange 속성에 대입하여 사용함 type ReturnTypes = [T, (e: ChangeEvent) => void, Dispatch]; const useInput = (initialData: T): ReturnTypes => { const [value, setValue] = useState(initialData); const handler = useCallback((e: ChangeEvent) => { setValue((e.target.value as u..

1. login SWR 원격상태와 (리액트의) 로컬상태를 하나로 통합해주는 모듈 적절한 타이밍에 지속적으로 원격서버에 데이터를 fetch하므로 최신데이터가 갱신됨 또한 컴포넌트간 swr의 키값이 같을경우 캐싱된 값을 전달하므로 데이터의 전역적인 공유가 가능해짐 프로젝트에서는 로그인 성공시 validate() 함수를 호출하여 swr이 서버에 사용자정보를 로그인 과정에서 인증에 성공한 이메일을 가지고 사용자 정보를 요청하게 된다 사용자 정보 요청이 성공하게 될 경우 localStorage 에 성공 이메일을 저장하고 다른 컴포넌트에서 해당 이메일을 가져와 사용자정보를 swr로 요청함 이러한 경우 요청한 사용자 정보의 데이터가 일치하면 캐싱된 데이터만 반환하므로 트래픽 과중에 대한 우려가 사라지게 됨 Login..