Stack Building

이 글을 공부 목적으로 일부 요약, 발췌함 - 리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리. - View에만 초점, 라우팅 기술 없음 특징 1. JSX 문법 (여기에 정리함, 과 같이 html 코드를 여러개의 리액트 파일로 분할하여 작업 가능) 2. 컴포넌트 기반 (코드 재사용, 유지보수 가능, 한 페이지에 한 html 파일 방식 아님) 3. Virtual DOM (불필요한 연산이 매번 일어나는 기존 DOM을 한번 더 추상화해 변화를 미리 인지할 수 있도록 함. 사용자가 변화를 인지하지 않아도 가상 돔에서 자동으로 감지, 업데이트) 참고 리액트 서버 사이드 랜더링 설명

잘 설명되어 있는 블로그 글을 요약, 추가 + 이 글을 덧붙임 public - 가상 돔을 사용하기 때문에 실제 돔 필요. 즉 가상 돔이 들어갈 빈 껍데기가 필요. - 일반적으로 이 폴더 내의 파일을 건드릴 일은 거의 없다. src - 리액트 개발이 이루어지는 메인 폴더 - 빠른 재빌드를 위해 여기 안의 파일만 webpack이 처리함. 한줄 정리: App.js에 정의한 컴포넌트들을 index.js에서 으로 사용하고, 이를 껍데기 템플릿인 index.html에 삽입한다. index.js - src 폴더에 있음 - 메인 프로그램 - 자바스크립트 엔트리 포인트 - html 템플릿 및 자바스크립트 컴포넌트 조합, 렌더링 App.js - src 폴더에 있음 - 컴포넌트 정의 - 실제로 화면에 표시되는 내용 정의 -..

JSX - 일반적으로 자바스크립트 내에서는 html 태그 사용이 불가능하지만, 이를 가능하게 함. - 자바스크립트 부분을 알려주기 위해 { }를 사용함. - Babel은 JSX 로더를 가짐. - 속성과 내용 전부에 들어갈 수 있음. - ReactDOM은 JSX에 포함한 값을 escape 처리하여 XSS로부터 안전함. 아래와 같은 코드는 JSX를 사용한 예시를 보여준다. (이미지 출처: '기초부터 배우는 React - Part 1')

1. Arrow Function - 함수 선언이 간단해짐 - this: 자신을 포함, 가장 근접한 일반 함수의 this 참조 => arrow func의 this는 arrow func이 호출되는 시점과 무관, 선언되는 시점에 결정 2. class - 생성자, 상속 등 객체지향의 클래스 기능 사용 가능 3. object 선언 간편 - att:att 와 같이 이름이 겹쳐도 써줘야 했다면 이제는 겹치는 건 att로만 써도 무관 4. template strings - 여러 문자열을 +가 아니라 `를 사용해서 표현 가능 5. destructuring - 함수에서 매개변수의 일부만 입력으로 받을 수 있게 함 - 오브젝트에서 필요한 부분만 추출 6. let, const - 수정 가능한 변수는 let - 수정 불가능한 ..

자바스크립트 컴파일러. 입력과 출력이 모두 자바스크립트 코드이며, 최신 문법을 브라우저가 이해할 수 있도록 변환한다. 컴파일 타임에 실행되는 것이기 때문에 최신 함수가 일부 동작하지 않을 경우 프로그램 시작 시 현재 브라우저에서 지원하지 않는 함수를 검사해 각 오브젝트의 프로토타입에 붙여주는 역할을 하는 polyfill을 사용해야 한다. @babel/polyfill

정의: 두 벡터의 쌍에 스칼라를 대응시키는 일종의 함수가 주어진 벡터공간 (스칼라: 벡터가 크기와 방향을 가진다면 크기만 있고 방향을 가지지 않는 양) 쓰임: 벡터의 크기를 측정. (두 벡터간 각도를 알기 위함) 두 벡터의 크기와 내적된 벡터의 크기만 알면 두 벡터간 각도를 구할 수 있다. 표현: 코사인 중요 개념 1. 벡터의 내적은 크기만 있는 스칼라량 2. 두 벡터의 크기가 같아도 두 벡터 사이의 각도에 따라 내적은 달라짐 출처 위키피디아 - 내적 공간 고등학교 기벡 - 벡터의 내적

payload 사용에 있어서 전송되는 데이터. 큰 데이터 가운데 흥미 있는 데이터를 구별하는 데 사용됨. 프로그래밍에서는 특히 메시지 프로토콜 중에 프로토콜 오버헤드와 원하는 데이터를 구별할 때 사용된다. actions 안에 있는 payload:는 실제 데이터를 의미한다. 위키에서 요약함

특강 요약 본질에 다가가기. 할 수 있을지보다 어떻게 할 것인지 생각하기. 관심이 가는 게 있으면 머릿속으로 맴돌게 할 것이 아니라 직접 실행하기. 느낀 점 우리학교 학생들을 위해 좋은 조언들을 많이 해주셔서 정말 유익한 시간이었다. 3학년이 되면서 진로에 대한 걱정이 많이 늘고 '현실적'이라는 이름으로 한계치를 정하기 바빴는데, 내가 하고 싶은 일을 현실의 제약 없이 일단 생각해보고 그 일을 어떻게 할 수 있을지 생각해보게 되었다. 생각해보면 상무님 말씀처럼 나는 내가 무엇을 해왔는지를 말하기에 급급했고, 그 내용이 남들에 비해 빈약하면 부끄럽고 스스로가 초라하게 느껴졌다. 하지만 목표별로 접근하는 방법이 모두 상이한 것처럼 다른 사람들의 기준을 가져와 나를 평가하는 것은 큰 의미가 없다는 것을 알게 ..

출처: 쓰로틀링과 디바운싱 쓰로틀링: 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것 디바운싱: 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것.

[2] encoding 이라는 이름의 함수를 정의한다. query를 인자로 받아 url의 쿼리 부분으로 파싱한다. [3] query는 찾으려는 검색어로, 이를 UTF-8 (시스템이 사용하는 인코딩 방식)의 캐릭터 스트링으로 변환한다. [4] 리스트 형식으로 되어있는 것을 해제해야 한다. [5] 대문자로 전부 변환한다. [6] 값을 리턴한다. [10] 크롤링 작업에 필요한 라이브러리를 부착한다. 설치되어 있지 않으면 인스톨한다. [13] 게시글 제목을 크롤링하는 함수 title catch를 정의한다. 인자로 쿼리와 페이지 수를 받는다. [14] 임시로 데이터 프레임을 만든다. [15]-[22] 지난 게시글과 같은 방식으로 크롤링하여 tmp에 저장한다. 이때 진행 정도를 파악하기 위해 크롤링 수행 중인 페이..