React8 React / typescript 카카오 지도 api 사용 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 1. 위 사이트에서 시작하기 → 카카오 로그인 → 애플리케이션 추가하기 → 앱 이름 / 사업자 명은 적고 싶은데로 적어준다. 2. 만든 내 애플리케이션에서 위 사진처럼 앱 키를 볼 수 있다. - 해당 키는 본인만 알고 있어야한다. - Git에 올려야되는 경우라면 해당 키를 변수명으로 만들어서 사용하고 키는 .gitignore로 git에 올라가지 않게 해주자 3. 만든 react 프로젝트에서 public → index.html에서 head칸 안에 .. 2023. 4. 18. React 토큰 로그인 유지 설정을 따로 해주지 않으면 브라우저를 껐다가 다시 접속할 시 로그인은 풀려있으나 쿠키는 남아있게 된다. → 1. 브라우저를 끄면 쿠키도 같이 날리기 → 2. 쿠키가 남아있으면 브라우저를 꺼도 로그인이 유지되게 해주기 아래는 2번 방법으로 App.tsx에서 실행 ... const getUser = (accessToken : string) => { axios.get(GET_USER_URL, authorizationHeader(accessToken)) //? header에 토큰 날려서 보냄 .then((response) => getUserResponseHandler(response)) .catch((error) => getUserErrorHandler(error)); } const getUserResponse.. 2023. 3. 29. React / Spring 통신 앞서 React로 만들어 놓았던 웹 페이지와 Spring의 통신 react 파일에 설치 npm install axios axios → node기반 js 프로젝트에서 http 통신시켜줌 npm install react-cookie cookie 로그 남길 때 이전에 만들어 둔 회원가입 페이지 연동 console.log('axios 이전☆') // js는 비동기 처리 → 작업 중 대기 시간을 기다리지 않고 따로 작동시켜놓고 다음 작업으로 넘어감 // 통신을 위한 axios, post : backend의 주소 담기, then : 작업 처리, catch : 에러 처리 //? 1. 비동기 처리 (then 방법) axios.post(SIGN_UP_URL, data) .then((response) => { const .. 2023. 3. 27. [공부] Hook 함수 Hook ㅡ State와 React 기능을 관리하는 메서드 ㅡ 함수형 컴포넌트에서만 동작한다. * 클래스형 컴포넌트 / 함수형 컴포넌트 클래스 : state, lifecycle 기능 사용 가능 / 메모리 자원을 상대적으로 함수형보다 더 사용 / 임의 메서드 정의 가능 함수형 : state, lifecycle 기능 사용 불가하나 Hook을 통해 해결 / 메모리 자원을 클래스보다 덜 사용 / 선언 편함 Hook 함수의 규칙 1. 함수형 컴포넌트 내에서만 호출할 수 있다. 2. 함수형 컴포넌트 최상단에서만 호출할 수 있다. 3. 조건부로 호출 불가 함수형 컴포넌트 안에서 함수로 Hook 사용은 불가하나 use를 붙여서 CamelCase로 이름 지어서 사용하면 Custom Hook으로 사용 가능하다. const.. 2023. 2. 23. [공부] JSX와 TSX JSX : Javascript 기반, JS를 확장한 문법 JS에서 HTML 문법을 사용 가능, React에서 에러, 경고 메세지를 표시해준다. JS를 JSX내부에서 사용할 땐 중괄호 사용 → TSX도 마찬가지 TSX : Typescript 기반, React Component를 사용할 때, React에서 TS로 HTML을 사용할 수 있도록 해주는 파일 TypeScript XML XML : eXtensible Markup Language 파일 확장자가 TS면 HTML 기능 사용 불가 1. TSX 파일에서 작성된 TS Component 함수는 return의 ()안에 HTML 태그를 포함할 수 있음 return안에서 HTML을 표기하려면 ()로 묶여있어야 한다. return() 안에는 최상위 부모 태그가 무조건.. 2023. 2. 21. [공부] 타입스크립트 문법 및 개념 ES6 TypeScript 1. 변수 선언 - ES6 → let 변수명; // ES6는 JS의 버전을 의미한다. - TS → let 변수명 : 데이터 타입; let integer; let integer2 : number; 2. 상수 선언 - ES6 → const 상수명 = 초기값; - TS → const 상수명 : 데이터 타입 = 초기값; const INTEGER = 5; const INTEGER2 : number = 10; # TS의 경우 변수 혹은 상수를 선언과 동시에 초기화하면 해당 변수 혹은 상수의 데이터 타입을 자동으로 추론한다. * tyopeof(변수) → 해당 변수의 타입을 문자열로 나타냄 console.log(typeof(변수)); console.log('야호'); 3. 데이터 타입 TS → string, numbe.. 2023. 2. 21. 이전 1 2 다음
