본문 바로가기

전체 글

 (97)
연상작용, 점화효과( 생각에 관한 생각) 바나나와 구토라는 단어를 봤을 때 무엇이 떠오르는가? 내 안의 시스템1이 작용해서 바나나가 구토를 유발한다는 시나리오를 짜게된다. 이러한 현상이 일어나는 이유는 시스템1이 자기강화를 통해서 상황에 대한 논리적 일관성을 만들기 때문이다. 이러한 인과관계가 만들어지면 이후에 일어나게 될 상황에 대한 예측 또한 하게 된다. 쉽게 말해 순간적인 상황에서 맥락을 파악해 과거를 파악하고 미래를 대비한다. 짧은 상황 파악 속에서 만들어진 시나리오는 미래의 행동에 영향을 주게 된다. 예를 들어 할아버지에 관한 단어를 많이 듣는 사람은 그렇지 않은 사람보다 걸음을 천천히 걸을 확률이 높다. 또 다른 예로는 돈을 연상케 하는 상황에 노출이 많이 된 사람은 더 독립적으로 행동하고 자립심이 높다. 즉 개인주의가 될 가능성이 ..
클로저 문제 : 안에 정의된 변수가 있다 이를 어떻게 빼내서 출력할래? 해결: count를 함수 리턴값에 저장함으로써 함수 선언을 저장 새로운 변수를 호출할 때 이 함수의 값을 부를 수 있음 function check(element){ //안에 변수가 정의 됨 let count =0 for(let i=0; i
react 의 원리 문제 :리엑트는 어떻게 작동할까? 왜 좋을까? 알아야할 단어 변화 (Mutation) Model Virtual Dom 브라우저 랜더링 과정 상황 1. 웹 어플리케이션의 렌더 엔진이 HTML을 파싱하여 DOM tree 생성 2.render tree 생성 css파일과 inline 스타일을 파싱 => DOM tree+ CSS 3. Layout 각 노드들의 스크린의 자표에 따라 위치 결정(어디에 태그를 넣을건지를 지정) 4. Paint. 실제 웹 화면에 그리기 문제 : 태그의 속성이 바뀌거나 데이터가 변경이 되면 이 과정을 계속 바뀌게 된다. 이러한 연산을 한다는 거는 메모리 누수, 과부화 발생 인터랙션에 의해 DOM에 변화가 발생하면?? 데이터의 글자가 바뀐다, 숫자가 변화한다 등 등.. 이면 이 과정을 반복..
Server의 배포 문제 LocalHost3000 은 안보이지만 goggle.com 은 보이는 이유 상황 AJAX(AsynChronous JavaScript and XML) 비동기적으로 데이터 호출이 가능하기 때문에 파일의 크기가 커짐 그렇기 때문에 파일을 분리하는 모듈화를 해야함 이러한 모듈을 묶어주는 "번들링"을 웹팩, 바벨로 빌드를 해야함 그러면 이렇게 빌드된 정적파일을 호스팅 서비스에 결과물만 업로드 그 결과 웹 서버가 정적파일을 웹 어플리케이션에서 나의 사이트를 랜더링할 수 있음
CSR vs SSR 모습을 먼저 이해하자 Server const express = require("express"); const app = express(); const infoArr = [ "csr과 차이점이 느껴지나요?", "ssr이란?", "HTML은 어디서 조작될까요?", "Server Side Rendering", "검색엔진 최적화(Search Engine, Optimization)에 상대적으로 유리하다.", "초기로딩 속도가 빠르다.", "TTV(Time To View)와 TTI(Time To Interact)의 시간 공백이 있을 수 있다." ]; app.get("/", (req, res) => { res.send( "" + infoArr[Math.floor(Math.random() * infoArr.length..
자료구조 // directed graph (방향 그래프) // unweighted (비가중치) // adjacency matrix (인접 행렬) // 이해를 돕기 위해 기존 배열의 인덱스를 정점으로 사용합니다 (0, 1, 2, ... --> 정점) class GraphWithAdjacencyMatrix { //graph의 constructor를 구현합니다. constructor() { this.matrix = []; } //vertex를 추가합니다. addVertex() { const currentLength = this.matrix.length; for (let i = 0; i < currentLength; i++) { this.matrix[i].push(0); } this.matrix.push(new Arra..
재귀의 정리 상황 재귀를 쓰는 이유는 이 함수의 반복이 언제 끝날지 모른다는 것이 핵심이다. 그래서 이 함수의 반복을 통해 데이터를 확인하면서!!( slice, 인자값을 줄이기 등)어떤 결과를 도출하되 그 끝나는 지점을 알려줘야 한다. 들어온 수의 함수 더하기 function sumTo(num) { // TODO: 여기에 코드를 작성합니다. // 별도의 최적화 기법(memoization)은 금지됩니다. //재귀의 핵심은 끝날 때까지 계속 이 함수를 진행하는거야 if(num=== 0){ return 0 } if(num
callback vs Promise vs await 왜 쓸까? 함수를 호출해서 실행할거 아니야? 그러면 이게 순서있게 가야되는데 웹 어플리케이션에 요청하면 이게 비동기적으로 호출이 되서 언제 어떤게 먼저 실행될지 몰라. 그러니깐 비동기적인 실행을 방지하기 위해서 우리가 상황을 조정하는거야 .실제 상황을 보자구 화면 리셋하고 비디오를 실행하면 1초뒤에 다시 멈추고 타이틀을 보여주고 0.5초뒤에 타이틀을 강조하고 2초뒤에 다시 타이틀 리셋 function runCallback() { //실행 resetTitle(); //실행 playVideo(); //실행 delay(1000, () => { pauseVideo(); displayTitle(); delay(500, () => { highlightTitle(); delay(2000, resetTitle); })..

티스토리툴바