망고

📌애플리케이션 등록 먼저, 카카오 개발자 페이지에서 애플리케이션을 등록해야 합니다. 등록하는 방법은 아래 링크를 참고하자. 카카오 로컬 API 시작하기 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 📌카카오 로컬 API Javascript SDK 설치 카카오 로컬 API를 사용하기 위해서는 Javascript SDK를 설치해야 한다. 'npm' 패키지 매니저를 사용하여 설치하자. npm install kakao-sdk 📌주소 검색 컴포넌트 구현 import React, { useState } from 'react'; import { KakaoM..

프로그래머스 'N으로 표현' 문제는 주어진 숫자 N과 1부터 9까지의 숫자와 사칙연산을 사용하여 특정한 숫자 number를 만드는 문제입니다. 해당 문제는 동적 계획법(Dynamic Programming)을 이용하여 풀 수 있습니다. 먼저, 1개의 숫자로 만들 수 있는 경우부터 시작하여, 2개, 3개, ..., 8개의 숫자로 만들 수 있는 경우를 모두 확인합니다. 이 때, 중간 결과값이 음수이거나 0보다 작은 경우는 무시합니다. 그리고, 모든 가능한 중간 결과값을 저장하면서, 최종적으로 목표값과 일치하는 경우를 찾습니다. 아래는 해당 문제의 자바스크립트 코드입니다. function solution(N, number) { const setList = Array.from({length: 8}, () => n..

📌개요 최근 회사에서 신규 프로젝트를 진행하는 과정에서 자식 컴포넌트에 있는 데이터를 부모 컴포넌트에 전달해야하는 작업이 필요했다. 예를들어 자식 컴포넌트에서 데이터 입력을 하면 그것을 부모 컴포넌트에서 데이터를 받아와서 다른 자식에게 전달해주는 작업이 필요했던 것이다. 이번 기회를 통해 리액트에서는 부모 자식간의 데이터 전달을 어떤식으로 통신하는지에 대해 알아보도록 하자!! 📌부모에서 자식으로 데이터 보내기 👉 props를 이용한다. props란 데이터를 전달하는 속성으로 부모 컴포넌트에서 설정할 수 있으며, 부모에서 자식으로만 데이터를 줄 수 있다. Parent.js import React, { useState } from 'react' import Child from './Child'; const ..

프로그래머스의 "프린터" 문제는 주어진 프린터 대기열에서 현재 대기열에서 가장 앞에 있는 문서를 꺼내어 출력하는 작업을 반복하면서, 출력될 문서가 원하는 문서인 경우 출력을 멈추고 출력까지 걸린 시간을 반환하는 문제입니다. function solution(priorities, location) { let answer = 0; let queue = priorities.map((priority, index) => ({ priority, index })); // 각 문서마다 우선순위와 인덱스 정보를 객체로 만들어 큐에 넣음 while (queue.length > 0) { // 큐가 빌 때까지 반복 let first = queue.shift(); // 가장 앞에 있는 문서를 큐에서 꺼냄 if (queue.som..

스택 가장 나중에 집어넣은 데이터를 가장 먼저 추출하는 LIFO(Last In First Out) 배열에서 push, pop이 해당한다. 가장 마지막에 있는 데이터를 확인할 수 있다.(보통 stackTop이라고 부른다) class Node { constructor(data, next) { this.data = data; this.next = null } } class Stack { constructor(top, count) { // 가장 마지막에 들어온 top에 해당하는 값 this.top = null; this.count = 0; } push() { // return 값으로는 증가한 배열의 길이를 담는다. } pop() { // return 값으로는 top에서 나온 값 그 자체를 담는다. 여기서는 da..

브라우저 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. ✍ 노드 📌 HTML 요소와 노드 객체 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소의 구조 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. HTML 요소와 노드 객체 노드 객체들로 구성된 트리 자료구조를 DOM이라 한다. DOM 트리라고 부르기도 한다. 📌 노드 객체의 상속 구조 DOM은 DOM을 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다. DOM을 구성하..