빈빈 자료실

타 사이트들을 공유하기 할 때는 간단하지만,카카오톡 / 카카오 스토리를 공유할때는꽤나 복잡한 과정을 거친다. 1. 내 애플리케이션 > 애플리케이션 추가하기 2. 플랫폼 > Web 플랫폼 등록 3. 소스 추가하기하단의 Kakao Developers에서 제공하는 소스를 참고하였다. https://developers.kakao.com/tool/demo/message/kakaolink?default_template=feed Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 4. 공유하기 완성~

let num1 = {name: 'abc' , age : 20}; let num2 = {name: 'abc' , age : 20}; // 1. 첫 번째 방법 JSON.stringify(num1) == JSON.stringify(num2); // true // 2. 두 번째 방법 _.isEqual(num1, num2); // true

🔄 AJAX는 뭐고, fetch는 뭔가요?웹 개발을 하다 보면 꼭 한번쯤 듣는 용어, AJAX.그리고 요즘 자바스크립트 코드에서 자주 보이는 fetch()."둘이 같은 거야? 다른 거야?" 헷갈렸던 분들을 위해 이번 글에서 깔끔하게 정리해보겠습니다.✅ AJAX란?AJAX는 함수 이름도, 라이브러리도 아닙니다.정확히 말하면, **비동기적으로 서버와 데이터를 주고받는 기술(개념)**입니다.📌 AJAX란?Asynchronous: 비동기적으로JavaScript: 자바스크립트를 사용해AndXML: (요즘은 JSON을 더 많이 씀)➡ 서버와 데이터를 교환하는 전체적인 방식🕰️ 옛날 AJAX: XMLHttpRequestAJAX가 처음 등장했을 때는 XMLHttpRequest라는 API를 사용했어요.const x..

⏱️ 자바스크립트 Promise, 이게 왜 "비동기"인가요?🌀 비동기란 무엇인가?비동기(Asynchronous)란 "기다리지 않고 다음 작업을 먼저 처리하는 방식"입니다.자바스크립트는 싱글 스레드 기반이지만,시간이 오래 걸리는 작업 (ex. API 호출, 파일 읽기, 타이머 등)은기다리지 않고 먼저 다음 코드로 넘어간 후,작업이 끝나면 결과를 나중에 전달받는 구조입니다.✅ 예시: 동기 vs 비동기 비교1. 동기 방식const data = readFileSync(); // → 여기서 멈춤console.log("파일 내용:", data); 👉 파일을 다 읽을 때까지 다음 줄은 실행되지 않음. "기다림"2. 비동기 방식 (Promise) readFileAsync() .then(data => console..

📌 ES6란 무엇인가?ES6(ECMAScript 2015)는 자바스크립트 역사상 가장 큰 변화가 있었던 버전입니다. 기존의 불편한 문법을 대체하고, 객체지향·비동기·모듈화 등의 기능을 대폭 강화하여 현대적인 웹 개발의 기준점이 되었습니다.🧩 왜 중요한가?✅ 코드의 가독성이 좋아진다✅ 더 안정적이고 예측 가능한 스코프✅ 비동기 프로그래밍이 쉬워진다✅ 객체지향과 모듈화가 본격적으로 가능해진다✅ 이후 버전(ES7~ES13)도 ES6를 기반으로 확장됨🌱 ES6의 주요 기능 정리1️⃣ let과 constvar의 함수 스코프 한계를 해결let: 변경 가능한 변수 (블록 스코프)const: 상수, 재할당 불가let count = 1; const MAX = 10;2️⃣ 템플릿 리터럴 (Template Litera..

2. extends //**------상속 //부모 클래스 class Animal{ constructor(animalName){ this.animalName = animalName; this.speed = 0; //멤버 변수 설정 안해도 사용 가능 나중에 new animpal 만들면 animal name과 speed준비 되어 있다. } run(speed){ this.speed = speed; console.log(`${this.animalName} runs at ${this.speed} m/s`); } stop(){ this.speed = 0; console.log(`${this.animalName} stopped.`); } } let animal = new Animal("animal"); //변수 선언..

1. class //****------basic syntax //User 클래스 class User { userName; constructor(userName){ //생성자 this.userName = userName; } getUserName(){ return this.userName; } setUserName(userName){ if(userName.length < 4){ console.log("userName is too short."); } else { this.userName = userName; } } sayHi(){ //멤버 메소드 console.log("Hi, I am " + this.userName); } } //User 객체 생성 let user = new User("john"); co..

5.scope //****scope1 let msg = 'earth';//한국 전역변수 : global variable { let msg = 'hello';//서울 지역변수 : local variable console.log(msg); } { let msg = 'world'; console.log(msg); } console.log(msg); //블럭안에 벗어나면 msg는 사라진다. //global variable와 동일한 local variable가 있으면 local variable먼저 사용한다. //*****scope2 const greeting = 'hello'; function say(name) {//name = local variable이다. console.log(greeting, `${name..

1.greet /* 선언문 vs 표현식 사용관점 * * 선언으로 만들어진 것은 선언문 위에서도 호출하는게 가능하다. * 그러나 표현식으로 만들어진 것은 선언문 위에서 호출이 불가하다. */ //----------function declaration 선언문 greet(); //선언문 위에서 호출 가능 function greet(){ console.log("hello"); } greet(); //----------function expression 표현식 //salute(); //표현식은 위에서 호출 불가능 let salute = function(){ //lamda랑 비슷함. 변수가 없지만 있는것 처럼. console.log("hi"); } salute(); //-----------function() 파라미..

1. variable //변수 선언 //let //이름으로 문자, 숫자, $, _ 가능 let user; let user2; let _; let $; //let 2user; let userName; //camel case let user_name; //snake case //const const x = 1; //선언과 동시에 초기값 부여 //x = 2; //다른 값 할당 불가능 let y; y = 1; y = 2; //let에는 다른 값 할당 가능 /* ES6 버전부터는 var 이외에 let과 const 사용 가능하다. let으로 선언한 변수는 {} 범위를 벗어나면 사용 불가능하다 const는 상수값을 선언할 때 사용한다. */ 2. type /*3대 type 1. string 2. number 3. b..