탄탄한 기본기!

동일한 데이터를 여러 컴포넌트에서 공유하고 싶을 때, 상태를 끌어올려서 반영해줄 수 있다 Lifting State Up – React A JavaScript library for building user interfaces reactjs.org Source of truth 리액트 공식 문서에서는 변경 사항들을 관리할 때에 단 하나의 "source of truth"를 두어야 한다고 설명하고 있다. 보통 리액트 컴포넌트를 설계할 때, 먼저 해당 컴포넌트에 state를 저장하여 관리하게 한다. 하지만 애플리케이션이 커지고, 로직이 변화하거나 하는 등의 과정을 거치면서 다른 컴포넌트도 역시 같은 상태를 공유해 함께 반영되어야 할 상황이 충분히 생길 수 있다. 이때, 여러 가지 방식으로 상태들을 "동기화"할 수 ..

const getName = () => new Promise((resolve) => { setTimeout(() => { resolve('Dooyeong'); }, 2000); }); const sayHi = async () => { const name = await getName(); console.log(`Hello ${name}!`); }; sayHi(); 자바스크립트에는 async와 await이라는 특별한 문법이 존재한다. 그리고 "비동기(async)"라는 어려울 것 같은 이름을 가지고 있지만 생각보다 이해하기 쉽고 사용하기도 쉽다. Asynchronus function 비동기 함수란, 동기적으로 작동하지 않는 함수이다. 이 말이 무슨 말이냐면, 두 개 이상의 이벤트들이 서로를 기다리지 않고 (b..

자바스크립트에는 Promise라는 아주 중요한 객체가 있다. 내부적으로 비동기적인 로직을 처리할 때 이 Promise객체를 통해서 callback hell이나 에러 처리 등 여러 가지 문제점들을 해결해주고 있다. // callback hell get('/step1', a => { get(`/step2/${a}`, b => { get(`/step3/${b}`, c => { get(`/step4/${c}`, d => { console.log(d); }); }); }); }); 이러한 코드를 Promise를 사용해 바꾸면 다음과 같다. promiseGet(`/step/1`) .then(a => promiseGet(`/step/${a}`)) .then(b => promiseGet(`/step/${b}`)) .t..

1759번: 암호 만들기 첫째 줄에 두 정수 L, C가 주어진다. (3 ≤ L ≤ C ≤ 15) 다음 줄에는 C개의 문자들이 공백으로 구분되어 주어진다. 주어지는 문자들은 알파벳 소문자이며, 중복되는 것은 없다. www.acmicpc.net 문제 제한 사항 (3 ≤ L ≤ C ≤ 15) 문제 풀이 이 문제는 dfs를 활용해서 백트래킹을 할 수 있는지 없는지 물어보는 문제인 것 같다(조합). 문제를 풀 때 자음과 모음 개수에 대해서 제약이 있는데, 모음은 최소 1개 이상, 그리고 자음은 최소 2개 이상으로 구성되어 있다는 것이다. 이 때문에 본인은 다음과 같이 dfs 함수의 매개변수로 모음의 개수를 넘겨주어 이를 계산할 수 있도록 하였다. const dfs = (cnt, st, key, aeiouCnt) ..

Ajax란 Asynchronous Javascript And XML이라는 뜻으로, 자바스크립트를 사용해 서버에 비동기적인 방식으로 데이터를 요청해 동적으로 웹페이지를 갱신하는 방식을 의미한다. 1. Ajax Ajax는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. 그리고 XMLHttpRequest는 비동기적인 HTTP 통신을 위해서 여러 메서드와 프로퍼티 등을 제공한다 이전의 웹페이지의 경우에는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 전송받아 웹페이지 전체를 렌더링하는 방식으로 동작했다. 그렇기 때문에 화면이 전환되면 웹페이지 전체를 처음부터 다시 렌더링해야했기 때문에 화면이 깜빡거리는 현상이 발생했다. 이러한 방식은 매번 완전한 HTML파일을 항상 전송..

Programmers - 가장 먼 노드 코딩테스트 연습 - 가장 먼 노드 6 [[3, 6], [4, 3], [3, 2], [1, 3], [1, 2], [2, 4], [5, 2]] 3 programmers.co.kr 문제 n개의 노드가 있는 그래프가 있습니다. 각 노드는 1부터 n까지 번호가 적혀있습니다. 1번 노드에서 가장 멀리 떨어진 노드의 개수를 구하려고 합니다. 가장 멀리 떨어진 노드란 최단경로로 이동했을 때 간선의 개수가 가장 많은 노드들을 의미합니다. 노드의 개수 n, 간선에 대한 정보가 담긴 2차원 배열 vertex가 매개변수로 주어질 때, 1번 노드로부터 가장 멀리 떨어진 노드가 몇 개인지를 return 하도록 solution 함수를 작성해주세요. 제한사항 노드의 개수 n은 2 이상 20,0..

Programmers - 네트워크 코딩테스트 연습 - 네트워크 네트워크란 컴퓨터 상호 간에 정보를 교환할 수 있도록 연결된 형태를 의미합니다. 예를 들어, 컴퓨터 A와 컴퓨터 B가 직접적으로 연결되어있고, 컴퓨터 B와 컴퓨터 C가 직접적으로 연결되어 있 programmers.co.kr 문제 설명 네트워크란 컴퓨터 상호 간에 정보를 교환할 수 있도록 연결된 형태를 의미합니다. 예를 들어, 컴퓨터 A와 컴퓨터 B가 직접적으로 연결되어있고, 컴퓨터 B와 컴퓨터 C가 직접적으로 연결되어 있을 때 컴퓨터 A와 컴퓨터 C도 간접적으로 연결되어 정보를 교환할 수 있습니다. 따라서 컴퓨터 A, B, C는 모두 같은 네트워크 상에 있다고 할 수 있습니다. 컴퓨터의 개수 n, 연결에 대한 정보가 담긴 2차원 배열 comp..

Programmers - 짝지어 제거하기 코딩테스트 연습 - 짝지어 제거하기 짝지어 제거하기는, 알파벳 소문자로 이루어진 문자열을 가지고 시작합니다. 먼저 문자열에서 같은 알파벳이 2개 붙어 있는 짝을 찾습니다. 그다음, 그 둘을 제거한 뒤, 앞뒤로 문자열을 이어 붙 programmers.co.kr 문제 짝지어 제거하기는, 알파벳 소문자로 이루어진 문자열을 가지고 시작합니다. 먼저 문자열에서 같은 알파벳이 2개 붙어 있는 짝을 찾습니다. 그다음, 그 둘을 제거한 뒤, 앞뒤로 문자열을 이어 붙입니다. 이 과정을 반복해서 문자열을 모두 제거한다면 짝지어 제거하기가 종료됩니다. 문자열 S가 주어졌을 때, 짝지어 제거하기를 성공적으로 수행할 수 있는지 반환하는 함수를 완성해 주세요. 성공적으로 수행할 수 있으면..