🥬 상추의 공간

글또에 참여하게 된 계기 나는 최근에 웹 프론트엔드 공부를 본격적으로 하기 시작하면서 공부한 것을 정리할 필요성을 느껴 글을 쓰기 시작했다. 그러다 글또를 알게 되었다. 두 달 전에 한 온라인 컨퍼런스를 들었는데, 강의자의 github을 구경하다가 글또의 아이콘이 눈에 띄어 알게 되었다. 그분의 블로그 글을 읽는데, 되게 글을 정성 있게 쓰시고 열심히 성장하고자 하는 모습에 영감을 받았다. 글또에 들어가서 그러한 사람들과 소통하고 싶고, 나도 그러한 글을 쓰고 싶어서 지원하게 되었다. 어떠한 글을 쓸 것인가 지금까지는 글을 그저 노션에 휘갈겨 쓴 것을 조금 수정하거나 요약한 글을 블로그에 그대로 붙여 놓는 식으로 썼다. 이러한 글은 가독성이 좋지 않고 공부하는 입장에서도 크게 도움이 되지 않았다. 나한테..

React JS 는 ui를 interactive(상호작용)하게 만들어준다. Before React Total clicks: 0 Click me React를 사용하지 않고 바닐라 JS로 코드를 짠 경우를 보자. (1)HTML을 만들고 (2)Javascript에 가져와 (3)event를 감지하고 (4)데이터를 업데이트한 뒤 (5)HTML을 업데이트한다. 계속 이런 방식으로 작업하면 복잡하고 비효율적이다. React Element 이번엔 React JS로 element를 생성하는 방식으로 해볼 것이다. 이를 사용하기 위해서는 react, react-dom를 import해야 한다. React JS는 HTML을 직접 작성하지 않고 JS 코드를 사용한다. const root = document.getElementB..

미션VSCode, Node.js, git 설치 및 github 계정 만들기해당 과정은 이미 되어있어서 통과했다. CRA(Creat React App) 활용해서 프로젝트 생성create-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해주는 도구다. 아래 명령어를 통해 실행시킬 수 있다.npx create-react-app [폴더이름] 위 과정이 완료되면 지정한 이름의 프로젝트 폴더가 생성된 것을 확인할 수 있다.해당 디렉토리로 이동하고 아래 명령어를 입력하면 react 개발 전용 서버를 구동시킬 수 있다.npm start 심화 미션실제 면접 질문에서 자주 물어보는 내용이다. 아래와 같은 내용의 면접 질문을 받았을 ..

스택 마지막에 들어간 데이터가 먼저 나가는 자료구조다. LIFO(Last Input First Out) 구조를 가진다. 실생활 예로는 페이지 뒤로가기, 되돌리기(Ctrl + Z), 책상에 쌓인 책이 있다. 큐 먼저 들어간 데이터가 먼저 나가는 자료구조다. FIFO(First Input First Out) 구조를 가진다. 실생활 예로는 줄을 서는 것이 있다.

슬라이딩 윈도우란? 슬라이딩 윈도우 알고리즘은 투 포인터 알고리즘과 유사하게 부분 배열들을 활용하는 알고리즘이다. 투포인터와 다른 점은 부분 배열의 길이(크기)가 고정적이다. 그래서 포인터 변수가 2개일 필요가 없다. 이름 그대로 고정적인 너비를 가진 창문을 두고 옆으로 한칸씩 이동하며 값을 구하는 방법이다. 예를들어, N개의 원소를 갖는 배열이 있다. 이때 W의 너비를 갖는 창문이 있다. 너비가 3인 창문을 제일 왼쪽에 배치하고, 창문을 왼쪽에서 시작하여 한 칸씩 오른쪽으로 이동한다. 매 순간 창문 안에서의 정보를 활용해 유추해서 값을 구한다. 즉, 같은 너비의 연속 구간들을 연속적으로 처리할 때 주로 사용되는 테크닉이다. 인접한 구간들 사이에 겹치는 정보를 최대한 활용하는 것이 포인트다. 관련 문제 ..

스코프 (체인)은 함수에서 어떤 값에 접근이 가능/불가능 한가 따져볼 때 사용되는 개념이다.이때 판별하는 범위는 블록 단위인데, 블록은 중괄호로 감싸여진 범위다. const x = "x";function c() { const y = "y"; console.log("c"); function b() { const z = "z"; console.log("b"); c(); }}function a() { const x = "x"; console.log("a"); b(); // b를 선언 안했다는 ERROR}a(); c();위 코드를 실행하면 함수 a 안에 있는 b를 호출할 때 b를 선언하지 않았다는 에러가 발생한다.b가 a의 스코..

호출과 선언 명확히 구분할 줄 알아야 하고, 아래 코드를 실행 하기 전에 어떤 결과가 나오는 지 알 수 있어야 한다.const x = "x";function c() { // 선언 const y = "y"; console.log("c"); // 호출 // debugger; // 호출 스택 보는 법}function a() { // 선언 const x = "x"; console.log("a"); // 호출 function b() { // 선언 const z = "z"; console.log("b"); // 호출 c(); // 호출 } b(); // 호출}a(); // 호출 - a, b, cc(); // 호출 - c호출 스택은 호출할 때만 쓰이는 스택이다.함수를 호출할 때마다 스택이 밑에서부터 쌓이..

투 포인터란? 배열에서 원래 이중 for문으로 O(N^2)에 처리되는 작업을 2개의 포인터의 움직임으로 O(N)에 해결하는 알고리즘이다. 여기서 포인터는 C언어의 포인터가 아니라 작업을 처리하기 위해 생성한 변수이다. 포인터라는 변수를 두개를 선언해서 투 포인터라고 부른다. 이분탐색 문제를 투 포인터로도 해결 할 수 있다. 완전 탐색 알고리즘으로 하면 O(N^2)의 수행시간이 나오는데, 투포인터로 시간복잡도를 O(N)으로 줄일 수 있다. 예시 문제: N개의 자연수로 구성된 수열이 있을 때, 합이 M인 부분 연속 수열의 개수 구하기. 수행 제한 시간은 O(N) 투 포인터로 문제 해결하는 방법 시작점(start)과 끝점(end)이 첫 번째 원소의 인덱스(0)를 가리키도록 한다. 현재 부분 합이 M과 같다면,..