매일 꾸준히

클로저 자바스크립트에는 클로저라는 것이 존재한다. 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. 예를들어서 다음과 같은 경우가 존재한다. function makeFunc() { const name = "Mozilla"; function displayName() { console.log(name); } return displayName; } const myFunc = makeFunc(); myFunc(); makeFunc의 함수 안에 name이라는 변수와 displayName이라는 함수가 선언되었다. makeFunc는 displayName이라는 함수를 반환하는데, displayName은 makeFunc의 name이라는 변수를 참조한다. myFunc..

리액트에서 라우팅은 보통 react-router-dom을 사용한다. 이 react-router-dom은 두 가지의 라우터를 제공한다. 공식문서에서는 BroswerRouter가 현재 브라우저의 위치를 받아사 브라우저의 history스택을 이용해 이동한다고 한다. 하나씩 살펴보자. export interface BrowserRouterProps { basename?: string; children?: React.ReactNode; window?: Window; } 먼저 BrowserRouterProps는 basename이라는 기본 URL을 받고 children이라는 라우터의 자식이 되는, 랜더링 될 리액트 노드를 받고 window를 사용하고 있다. let historyRef = React.useRef(); ..

정적인 사이트를 만들때, 스크롤 애니메이션은 정말 멋진 것 같다. 특히 애플 공식 홈페이지의 애니메이션은 너무너무 이쁜데, 이를 보고 내가 만드는 것에 도입해보고 싶었다. 스크롤 애니메이션 브라우저는 사용자가 화면을 스크롤 할떄마다, 스크롤 이벤트를 발생시킨다. 리액트로 스크롤을 구현하는 라이브러리는 많지만, 직접 구현해 보고 싶었다. 화면을 스크롤 할떄, 특정 화면이 보이기 시작한다면 애니메이션이 적용되면서 등장하는 방식이다. Intersection Observer 방금 말한 '특정 화면이 보인다면'을 Intersection Observer를 통해 해결 가능하다. 기본적으로 뷰포트와 설정한 교차점을 관찰해, 요소가 뷰포트에 포함되는지 ,사용자에게 지금 보이는 화면인지를 쉽게 판단가능하게 해준다. 비동기..

랜더링이란? 리액트는 컴포넌트를 랜더링한다. 컴포넌트가 스스로의 상태를 능동적으로 바꾸든, 다른 변화 떄문에 수동적으로 바뀌었든, 컴포넌트는 리액트에 의해 호출된다. 컴포넌트가 상태 업데이트를 했다고 해서, 반드시 하나의 랜더링으로 이어지는 것은 아니다 리액트는 컴포넌트의 상태의 변화가 의미 없는 변화로 해석할 지도 모른다! 리액트에서 상태 업데이트를 모아서 한번에 처리하고(batch update) 이 일괄 업데이트로, 불필요한 랜더링 횟수를 최소화 한다. 리액트는 다양한 이유로 컴포넌트를 랜더링 할 수 있기 때문에 컴포넌트를 랜더링 하는 것이 즉각적인 UI 변화로 이어지지 않을 수 있다 랜더링 과정 살펴보기 리액트는 컴포넌트의 루트부터 시작하면서 (아래의 코드에는 root부터 ), 아래쪽으로 쭉 훑어보..

이분 그래프란? 이분 그래프는 노드가 두 개의 그룹으로 분리되어 있는 그래프를 말한다. 인접한 정점끼 서로 다른 색으로 색칠하여 모든 정점을 두 가지 색으로만 칠할 수 있는 그래프이다. 철수부터 색을 칠하면 인접한 정점은 철수와 반대되는 색으로 칠한다 철수와 인접한 수학은 주황색으로 칠해진다. 다시 수학과 인접한 영희를 수학과 반대되는 파란색으로 칠하고 영희와 인접한 국어를 주황색으로, 국어와 인접한 세희를 파란색으로..쭉쭉 칠하면 모든 정점을 두 가지의 각기 다른 색으로 칠할 수 있다.이러한 그래프를 이분 그래프라고 부른다. 모든 정점을 방문하며 간선을 검사하기 때문에 시간 복잡도는 O(V+E)로 그래프 탐색 알고리즘과 같다. 이분 그래프의 판별법 서로 인접한 정점이 같은 색이면 이분 그래프가 아니다!..

기존 SPA의 Client-side 랜더링의 문제점 웹 페이지의 랜더링이 클라이언트 = 브라우저 측에서 일어나는 것을 의미한다. 브라우저가 최초 요청 시 html,css,js 확장자 파일을 차례로 다운로드하는데, 최초로 불러온 HTML 파일은 비어있게 된다. 그 후 빈 HTML 파일에 js 파일이 다운로드되면 DOM을 빈 HTML 위에서 그리기 시작한다. 그래서 디버거 모드에서 자바스크립트 사용 중지를 하게 된다면, DOM을 페이지 위에서 그리지 못하므로 빈 페이지가 나오게 된다. Nextjs의 pre-rendering Next js는 기본적으로 모든 페이지를 pre-rendering한다. Next js에서는 모든 페이지가 사용자에게 전해지기 전에 HTML을 미리 생성해 pre-rendering을 수행한..

https://school.programmers.co.kr/learn/courses/30/lessons/161989 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 스위핑 문제같아서 스위핑을 사용해서 접근했다 처음구간을 section의 처음으로 잡고 끝 구간을 처음 구간 + m -1로 잡는다 그 후 secion배열을 돌면서 만약 section이 끝 구간 보다 길다면, 새로 덧칠해야 하므로 처음 구간과 끝 구간을 각각 갱신해 주었다 #include #include //n미터의 벽 //1부터 N까지 구역 //롤러의 길이는 M임 //3456 -> 1234 //1..

Next js로 개발을 하던 중 sessiostorage is not defined 에러를 만났다. 나는 sessionStorage의 어떤 값이 업데이트 될떄 시행해야 할 작업이 있었고, useEffect안에 의존성 배열로 sessionStorage.getItem('...키값..') 이런식으로 사용을 했는데, 위와 같은 에러를 만났다. 찾아보니 Next js 는 SSR환경이고, 막무가내로 locaoStorage,sessionStorage를 사용하면, 위와 같이 정의되지 않았다라는 에러를 만날 수 있다고 한다!. Next js에서 window객체는 cliend-side를 랜더링 하기 이전에 server-side랜더링을 수행한다! 그래서 Next js에서 제공하는 server-side랜더링에서는 window..

https://school.programmers.co.kr/learn/courses/30/lessons/154539 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 스택을 이용해서 해결하였습니다. #include #include #include #include using namespace std; vector solution(vector numbers) { vector answer; stack st; for(int i = numbers.size()-1;i>=0;i--){ if(st.empty()){ answer.push_back(-1); st.push(nu..

this는 함수를 호출한 방식에 따라 다르게 정의된다. 객체 리터럴의 메서드의 this const circle = { radius:5, getRadius(){ return this.radius; } }; console.log(circle.getRadius()); 객체 리터럴의 메서드 내부에서 this는 메서드를 호출한 객체와 바인딩된다. 다음의 경우를 살펴보자 const person = { name:'LEE', getName(){ return this.name; } }; const anotherperson = { name:'Kim' }; anotherperson.getName = person.getName; console.log(anotherperson.getName()); const getName = ..