공부기록용 썸네일형 리스트형 [ React ] 카카오 api로 사용자 정보 받아오기 ***개인적인 공부 기록용이라 두서없고, 정신없이 기록오늘의 수확: 인가코드 발급받기, 액세스토큰 발급받기, 액세스토큰으로 사용자 정보 접근하여 받아오기 Kakao 소셜 로그인으로 사용자 정보 가져오기 먼저 React 프로젝트 만들기 1. 새로운 리액트 프로젝트를 만들 폴더 안에서 터미널 열고, npx create-react-app 프로젝트명 입력하기npx create-react-app myapp 입력한 후 엔터치면 패키지들이 설치된다.create react app(cra)을 사용하여 react 프로젝트를 만들 때, 기본적으로 포함되는react, react-dom, react-scripts 패키지와 cra-template 템플릿을 함께 사용하는 것을 의미한다.--> cra-template은 create .. 더보기 [ javascript ] 웹 3.0 기초 웹 3.0 기초 - 웹3.0 기술생태계이해 및 개발환경 설정(1회차) WEB(WWW, World Wide Web)의 시작 팀 버너스리가 보다 효율적으로 자료를 공유하기 위해 WEB을 개발, WEB을 실현하기 위한 4가지 구성요소인1. HTML: 문서를 체계적으로 표현하기 위한 HyperTextMarkupLanguage 를 개발2. HTTP: 문서를 전송하기 위한 HyperTextTransferProtocol을 개발3. WEB SERVER: HTTP를 사용하여 HTML을 전송하는 주체, 즉 서비스를 제공하는 웹 서버를 개발4. WEB BROUSER: HTML로 만들어진 문서를 HTTP로 전송하고, 해당 서비스를 사용자가 사용하기 위해 웹을 개발하였다. Node.jsNode.js는 V8 자바스크립트 엔진으로.. 더보기 [ KISA ] Next.js를 활용한 검색 최적화 대응 웹사이트 구축하기(3) 2024.11.13 - [분류 전체보기] - [ KISA ] Next.js를 활용한 검색 최적화 대응 웹사이트 구축하기(2) [ KISA ] Next.js를 활용한 검색 최적화 대응 웹사이트 구축하기(2)2024.11.12 - [분류 전체보기] - [ KISA ] Next.js를 활용한 검색 최적화 대응 웹사이트 구축하기(1) [ KISA ] Next.js를 활용한 검색 최적화 대응 웹사이트 구축하기(1)[ KISA ] WEB TECH SEMINARNext.js를 활용한 검색zzogomthe.tistory.com 컴포넌트, useRouter(), 태그Next.js에서 컴포넌트를 사용할 수 있는데 는 HTML에서 요소 기능을 확장한 리액트 컴포넌트다. 컴포넌트는 라우트間[페이지간] prefetchin.. 더보기 [ javascript ] 자바스크립트에서 네트워크 통신하는 법 (XMLHttpRequest) *두서없음 주의, 손가락으로 기억할려고 두서없이 적고, 그냥 외우려고 기록 XMLHttpRequest(XHR)XMLHttpRequest(XHR) 객체는 서버와 인터랙트하는 것에 사용된다.웹 페이지를 리로딩 하지 않고(without having to do a full page refresh),URL로부터 데이터를 가지고 올 수 있다[얻을 수 있다]. XMLHttpRequest 객체는사용자가 하는 중인 것을 방해하지 않고, 웹 페이지가 페이지의 일부만을 업데이트하는 것을 가능하게 한다.XMLHttpRequest의 이름에도 불구하고 XMLHttpRequest는XML이 아닌 어떤 타입의 데이터라도 가지고 오는 것에 사용될 수 있다.네트워크 통신에서 서버로부터 event 데이터 또는 메시지 데이터를 받는 것이(필.. 더보기 [ KISA ] Next.js를 활용한 검색 최적화 대응 웹사이트 구축하기(2) 2024.11.12 - [분류 전체보기] - [ KISA ] Next.js를 활용한 검색 최적화 대응 웹사이트 구축하기(1) [ KISA ] Next.js를 활용한 검색 최적화 대응 웹사이트 구축하기(1)[ KISA ] WEB TECH SEMINARNext.js를 활용한 검색 최적화 대응 웹사이트 구축하기 한국인터넷진흥원에서 진행하는 웹 개발 교육 과정중 '리액트' 기반의 프레임워크인 Next.js 강좌가 있어 신청하였고,배zzogomthe.tistory.com ▶ Next.js 프로젝트 생성하기[만들기] 1. 터미널에 'npx create-next-app@latest' 입력한 뒤 엔터치기- npx에게 최신버전으로(@latest) Next.js 어플리케이션을 만들어달라고 명령하는 것- 자동으로 모든 것.. 더보기 [ KISA ] Next.js를 활용한 검색 최적화 대응 웹사이트 구축하기(1) [ KISA ] WEB TECH SEMINARNext.js를 활용한 검색 최적화 대응 웹사이트 구축하기 한국인터넷진흥원에서 진행하는 웹 개발 교육 과정중 '리액트' 기반의 프레임워크인 Next.js 강좌가 있어 신청하였고,배움의 기회가 주어져 수강하고 왔다. 나의 부족한 배경지식으로 수업에 대한 이해도가 부족했지만감사하게도 녹화본을 공유해주셔서 복습겸 이렇게 정리할 수 있는 시간을 마련해보았다. Next.js란Next.js는 웹 어플리케이션 풀 스택(프론트엔드와 백엔드)을 만들기위한 React framework(리액트 프레임워크)다.Next.js는 리액트 기반의 프레임워크다. 사용자 인터페이스를 만들기 위해 리액트 컴포넌트를 사용하고,추가적인 기능과 최적화를 위해 Next.js를 사용합니다. Next.j.. 더보기 [ javascript ] 두서없는 공부 기록 계산기 순서도 그리기 계산기를 켰을 때 초기작업시작 → 숫자1을 저장할 변수를 선언한다 → 연산자를 저장할 변수를 만든다 → 숫자2를 저장할 변수를 선언한다→ 계산 결과를 저장할 변수를 선언한다 → 대기 숫자 버튼 클릭 → 숫자를 변수에 저장한다 → 대기 └연산자 변수에 값이 비어있는가? ---예→입력한 숫자가 첫 번째가 된다(숫자1변수에 입력한 숫자를 대입한다) └아니오→입력한 숫자가 두 번째가 된다(숫자2변수에 입력한 숫자를 대입한다) → 숫자2 변수에 값이 존재한다는 것은 숫자1 변수와 연산자 변수에 .. 더보기 [ javascript ] nullish 병합 연산자(??), 쿵쿵따 게임 실습 nullish 병합 연산자(??)??(물음표 두 개)는 논리 연산자로 ?? 연산자를 기준으로 좌항의 피연산자가 null이거나 undefined일 경우우항의 피연산자를 반환한다. 좌항의 피연산자가 null 또는 undefined가 아닐 경우 좌항의 피연산자를 반환한다. a ?? b; a가 null도 아니고 undefined도 아니면 a, 만약 a가 null 또는 undefined라면 b를 반환한다. nullish 병합 연산자(??) 없이 위 표현식을 작성한다면let x = ( a !== null && a !== undefined ) ? a : b; a가 null이 아니다 그리고 a가 undefined가 아니다.a가 빈 값이 아니라면 a의 값을, a가 비어있다면 b의 값을 변수 x에 대입한다. 변수중 실제 .. 더보기 이전 1 2 3 4 ··· 6 다음
