공부하자

https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오에서는 다양한 API들을 제공한다 내가 구현할 것은 JS+리액트로 카카오톡 공유하기 기능을 구현하기! 1. 로그인 후 내 애플리케이션을 등록해준다 2. 플랫폼에는 사이트 도메인을 넣어줌, 배포 전 테스트일 때는 localhost 링크 넣어주기! 3. 구현 방법을 선택한다 API 메소드 - 공유하기 버튼도 만들 것인지 - 내가 만들어둔 버튼에 onclick만 써서 바로 보낼것인지! 메시지 구성 방법 - 기본 메시지 (카카오톡에서 템플릿 제공해..

절대경로를 설정하는 이유 import main from '../../Images/main/main.svg' 이런 식으로 ../을 무한 생성하게 되니까 여러 개 import할 땐 지저분하게 보일 수 있음! 절대경로를 설정해주면 import main from 'Images/main/main.svg' 이렇게 코드를 간단하게 줄일 수 있다! CRA(create-react-app)에서 절대경로 설정하는 방법 1. 최상위 루트에 jsconfig.json파일을 만든다 있는 경우에는 파일 내용을 추가해주면 됨 2. 아래 내용을 추가해준다 { "compilerOptions": { "baseUrl": "src" }, "include": ["src"], "exclude": ["node_modules"] } 3. 서버를 재실..

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 객체 확장 표현식과 구조 분해 할당 ⇒ 객체나 배열의 특정값을 손쉽게 추출할 수 있는 표현식! ⇒ 배열이나 객체의 값을 해체하여 개별 변수에 할당하는 것 기존 자바스크립트의 객체 확장 표현식 사용 방법 알아보기 // ES5의 예 var x = 0; var y = 0; var obj = { x: x, y: y}; var randomKeyString = ..

JavaScript에서 동적으로 객체 속성을 만들어 값을 할당하는 예시 // ES5 방식 var combined = {}; combined['one' + randomKeyString] = 'some value'; // ES6 방식 var combined = { ['one' + randomKeyString]: 'some value', }; 1. combined라는 빈 객체를 생성한다. 2. randomKeyString은 어딘가에서 가져온 랜덤한 문자열! 이 문자열을 one과 결합하여 새로운 속성의 키를 만든다. 예를 들어 randomKeyString이 'ABC'라면 이 부분은 'oneABC'가 된다. 그리고 이 키에 'some value' 라는 값을 할당한다. 결과적으로 combined 객체는 다음과 같은..

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 화살표 함수 기본 자바스크립트의 함수 사용 방법 알아보기 function add(first, second) { return first + second; } // typeof add === 'function' var add = function(first, second) { return first + second; }; // typeof add === '..

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 클래스 ⇒ 기존 자바스크립트 문법은 클래스 표현식이 없어서 prototype으로 클래스를 표현함 기본 자바스크립트의 클래스 표현 방법 알아보기 // ES5 문법 function Shape(x, y) { this.name = 'Shape'; this.move(x, y); } // static 타입 선언 예제 Shape.create = function(x..

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 템플릿 문자열 템플릿 문자열 사용 방법 - 템플릿 문자열은 문자열 안에 변수와 연산식을 혼합하여 사용한다. 기존 자바스크립트의 문자열 사용 방법 알아보기 // ES5 문법 var string1 = '안녕하세요'; var string2 = '반갑습니다'; var greeting = string1 + ' ' + string2; var product = {..