🥬 상추의 공간

글또 8기를 시작하며 최근 2달동안 있었던 일을 되돌아보고, 글또에 참여하게 된 계기와 다짐글을 써보려고 한다. 최근 2달 동안...2달 전, 대학 2학년이 끝나갈 무렵 교내에서만 활동하다가 교외는 어떨지 궁금해져서 구글링을 해봤다.그리고 우물 안 개구리 느낌을 크게 받았다. 수많은 활동들과 커뮤니티들이 활성화되어 있었고 다양한 이력을 가지고 열심히 사는 사람들이 많았다. 이미 부족함을 느끼고 있었지만, 그날 나는 생각보다 세상이 더 넓고 크다는 것을 느꼈다. 나는 변화가 필요했다. 먼저 정보를 얻고자 컨퍼런스를 찾아 신청했다. 나는 전라도에 머물고 있었기에 주로 서울경기에서 이루어지는 대면 컨퍼런스에 가기엔 어려워 온라인 위주로 찾았다. 기술을 다루는 것보단 개발 입문자를 위해 조언을 해주는 컨퍼런스를..

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과 같다면,..