목차 인가 코드 발급 토큰 받기 사용자 정보 가져오기 먼저 카카오 소셜 로그인을 진행하기 전 1. 카카오 애플리케이션 생성 2. [Web 플랫폼 등록]에서 개발 사이트 도메인 추가 3. 카카오 로그인 활성화 상태 설정 4. Redirect URI 등록 위 과정을 거친 후 진행해야 합니다. 1. 인가 코드 발급 Redirect URI는 카카오 로그인이 정상적으로 이루어졌을 때 리다이렉트할 URI를 의미합니다. 또한 로그인이 정상적으로 이루어지면 Redirect URI로 인가 코드를 담은 쿼리 스트링이 전달됩니다. Javascript SDK Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다..
🤔 무한 스크롤이란? 컨텐츠를 페이징하는 기법 중 하나로 스크롤을 이용해 맨 아래까지 도달할 때 새로운 컨텐츠를 불러오는 방식을 말한다. 🪄 구현 방식 스크롤을 끝까지 내렸을 때 fetch된 새로운 데이터를 엘리먼트에 계속 추가(appendChild)하는 방식으로 구현한다. 구현 방식은 크게 두 가지이다. 1. scroll 이벤트를 이용한 방법 - 전통적인 방식 - window의 scroll 이벤트가 일어날 때마다 브라우저 화면의 높이, 스크롤바의 위치를 이용해 body(컨텐츠)의 끝까지 다다랐으면 새로운 데이터를 가져오는 방식을 말한다. - window.innerHeight : 클라이언트에서 보여지는 화면 중 탭, url 주소창, 북마크 탭을 제외한 브라우저의 높이 - window.scrollY : 현..
🤔 캐시를 구현하는 이유 특정 값의 데이터를 저장해두면 이후에 그 특정 값에 대한 데이터가 필요할 경우, 요청을 보내지 않고 저장된 데이터를 가져와 바로 사용할 수 있고 불필요한 요청을 줄일 수 있다는 이점이 있다. 🖱️ 구현 방법 특정 값에 대한 데이터를 SessionStorage에 저장하여 구현할 수 있다. SessionStorage를 사용하는 이유는 브라우저가 닫히기 전까지 데이터가 유지된다. 만약 영구적으로 데이터를 저장하고 싶다면 LocalStoage를 사용할 수 있다. 구현은 정말 간단하다!!! import { getItem, setItem } from "./storage.js"; const $root = document.querySelector(".root"); const $input = d..
🍪 Cookie 쿠키는 브라우저에 저장되는 작은 크기의 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부이다. 특징은 다음과 같다. - 키-값의 저장 - 클라이언트 식별과 같은 인증에 많이 쓰인다. - 4KB 용량 제한을 갖는다. - 웹 서버에 의해 생성되며 서버가 HTTP 응답 헤더의 Set-Cookie에 내용을 넣어 전달하면 브라우저는 이 내용을 자체적으로 브라우저에 저장된다. - 매 서버 요청마다 쿠키도 함께 전송된다. 만약 쿠키 사이즈가 커지면 HTTP 요청 크기도 커진다. - 쿠키 조작 방지를 위해 httpOnly를 설정하는 것이 좋다. - 보통 브라우저를 닫는 순간 없어지며 유효 기간을 설정할 수도 있다. 🤔 왜 서버에 쿠키가 같이 전송될까? HTTP 요청은 상태를 갖지 않는..
실무에서는 화면에 태그를 추가할 때 createElement로 만들어 실제 DOM에 추가하지 않는다고 한다. 그 대신 document.createDocumentFragment로 documentFragment를 생성해 내부에 여러 태그를 추가한 후, 해당 documentFragment를 실제 DOM에 추가하는 방식을 사용한다고 한다. 그럼 documentFragment의 사용이 DOM의 효율성과 어떤 관련이 있을까? DocumentFragment 기본적으로 DOM과 동일하게 동작하나 실제 DOM에는 영향을 주지 않는다. DOM 트리 외부에, 메모리 상에서만 존재하는 DOM을 생성하기 때문에 실제 DOM 구조에는 변경이 일어나지 않아 브라우저가 화면을 랜더링하지 않는다. 따라서 페이지의 성능 영향을 최소화할..
클로저를 이해하기 위해 '실행 컨텍스트(EC)'의 개념이 필요합니다. 먼저 '실행 컨텍스트(EC)' 부터 간략히 알아볼까요? 실행 컨텍스트(Execution Context) 실행 가능한 코드가 실행되기 위해 필요한 환경을 말합니다. 즉, 자바스크립트가 실행되는 환경이며 코드가 실행되기 위한 모든 정보가 저장되어 있습니다. 실행 컨텍스트의 종류 크게 전역 실행 컨텍스트와 함수 실행 컨텍스트가 존재합니다. 1. 전역 실행 컨텍스트(Global Execution Context) default context 단 한 개만 정의되는 컨텍스트입니다. Call Stack에 가장 먼저 추가되어 앱이 종료할 때 삭제됩니다. 함수 밖의 코드를 위해 존재합니다. 2. 함수 실행 컨텍스트(Function Execution Co..
2623번: 음악프로그램 첫째 줄에는 가수의 수 N과 보조 PD의 수 M이 주어진다. 가수는 번호 1, 2,…,N 으로 표시한다. 둘째 줄부터 각 보조 PD가 정한 순서들이 한 줄에 하나씩 나온다. 각 줄의 맨 앞에는 보조 PD가 담당한 www.acmicpc.net 위상 정렬 알고리즘을 사용하는 문제이다. 선수 과목을 고려한 학습 순서 결정과 같은 문제일 때, 위상 정렬 알고리즘으로 풀이할 수 있다. 위상 정렬을 모르시는 분들을 위해 아래를 참고해주세요! 위상 정렬 위상 정렬은 방향 그래프에서 간선으로 주어진 정점 간 선후 관계를 위배하지 않도록 나열하는 정렬을 말한다. 위상 정렬은 사이클이 존재하지 않는 방향 그래프에서만 정의된다. 선수 과목과 같이 가장 앞에 올 수 있는 노드를 먼저 생각해야 한다. ..
프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이전에 푼 문제를 다시 풀었는데 더 간단한 방법으로 해결하여 이 글을 작성한다. 이번에 작성한 코드 이전 코드보다 가독성이 더 좋아졌고 더 간단하게 풀이해보았다. function solution(skill, skill_trees) { let cnt = 0; for (let list of skill_trees) { // skill에 포함된 스킬만 뽑기 let s = list.split("").filter((v) => skill.indexOf(v) > -1).join(""); // 항상 첫 번째 스킬부터 배운 후..
