개발자의 공부

개발자의 공부/React

[React]Page Routing

🤔Routing이란? 어떤 네트워크 내에서 통신 데이터를 보낸 경로를 선택하는 일련의 과정 - 위키백과 Router: 데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가 즉, 길잡이의 역할을 한다. Routing: 경로를 정해주는 행위와 그런 과정들을 다 포함하여 일컫는 말이다. 🤔Page Routing이란? 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 할 수 있다. 요청(Request)에 명시된 경로에 따라 알맞은 페이지를 선택하고 그 페이지를 반환해서 사용자가 해당 페이지에 접속하는 과정 자체를 Page Routing이라 한다. 👉 MPA와 SPA, SSR과 CSR 리액트와 같은 경우 단일 페이지로 구성되는 SPA 방식을 따르며 CSR으로 페이지를 렌더링 한다. ..

개발자의 공부/React

[React]성능 최적화와 성능 체크(업데이트)

Memoization: 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 연산의 결과값을 메모리에 저장해 두고 동일한 연산을 시키면, 다시 연산하지 않고 기억 해 두었던 데이터를 반환 즉, 재사용하는 기법 UseMemo 성능 최적화를 위하여 연산된 값(연산 결과)을 useMemo라는 Hook 을 사용하여 재사용한다. // CommentItem const [clickCount, setClickCount] = useState(0); const handleClick = () => { onClick(); setClickCount((prev) => prev + 1); // 클릭 시 숫자 증가...

개발자의 공부/JS

[JS]얕은 복사와 깊은 복사

얕은 복사(Shallow copy) 객체를 복사할 때 원래 값과 복사된 값이 같은 참조를 가리키고 있는 것을 말한다. const user = { // key: value name: 'jeong', age: 85, email: ['gyflsakfn@naver.com'] } const copyUser = user console.log(copyUser === user) user.age = 22 console.log('user', user) console.log('copyUer', copyUser) console.log('------') console.log('------') copyUser와 user는 true가 나왔기 때문에 같은 메모리 주소를 바라보고 있다. user의 객체 데이터만 수정 했을 뿐인데 co..

개발자의 공부/JS

[JS]데이터 불변성(Immutability)

변수에 값을 할당한다는 것은 값의 메모리 주소를 가리키는 것(참조) 임을 유의해야 한다. Immutable type VS Mutable Type 불변성(Immutability)란 말 그대로 변하지 않는 것을 의미한다. 불변 데이터는 한번 생성되고 나면 그 뒤에는 변할 수 없다. 자바스크립트에는 원시 타입(primitive type)이 불변성을 띤다. 원시 타입(primitive type)의 종류 Boolean String Number Null undefined Symbol 원시 타입은 메모리영역 안에서 변경이 불가능하며 변수에 할당할 때 완전히 새로운 값이 만들어져 재할당된다. 원시 타입 이외의 모든 값은 객체(Object) 타입이며 객체 타입은 변경 가능한 값(mutable value)이다. 즉, 객체..

개발자의 공부/자료구조&알고리즘

[알고리즘]재귀

💡학습 전 보기 - 재귀 함수 등 정리 목표 재귀의 정의와 재귀 사용 방법 정의 재귀 함수의 두 가지 필수 구성 요소 이해 호출 스택을 시각화하여 재귀 함수를 더 잘 디버그하고 이해하기 헬퍼 메소드 재귀(helper method recursion)와 순수 재귀(pure recursion) 재귀를 한번에 이해하는 것은 쉽지 않다. 지속적인 반복으로 자신의 것으로 만들자. 재귀(recursion)란? 자기 자신을 호출하는 프로세스 즉, 자기 자신을 호출하는 함수를 의미한다. 재귀를 알아야하는 이유는 무엇일까? 재귀는 어디서든 사용된다. JSON.parse / JSON.stringify document.getElementById and DOM traversal algorithms Object traversal..

개발자의 공부/JS

[JS]스코프(Scope)

스코프(scope): 유효범위 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다. 즉, 스코프는 식별자가 유효한 범위를 말한다. 식별자는 어떤 값을 구별할 수 있어야하므로 유일(unique)해야 한다. 따라서 식별자인 변수 이름은 중복될 수 없다. 즉, 하나의 값은 유일한 식별자에 연결(name binding)되어야 한다. function add(x, y) { // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프는 함수 몸체 내부이다. console.log(x, y) // 2 5 return x + y; } add(2, 5); // 매개변수는 함수 몸체 내..

개발자의 공부/자료구조&알고리즘

[기초]슬라이딩 윈도우 패턴, 분할 정복

Sliding Wind 한 위치에서 다른 위치로 배열 또는 숫자가 될 수 있는 창을 만드는 것을 의미한다. 특정 조건에 따라 창이 증가하거나 닫힌다. (새 창이 생성됨) 배열이나 문자열과 같은 일련의 데이터를 입력하거나 특정 방식으로 연속적인 해당 데이터의 하위 집합을 찾는 경우에 유용하다. 예시를 들어보자. maxSubarraySum 함수는 정수 배열과 n이라는 숫자를 받아들인다. 함수는 배열에서 연속되는 n개의 요소의 최대 합계를 계산해야 한다. 순수한 해결책 function maxSubarraySum(arr, num) { if(num > arr.length) { return null; } let max = -Infinity; for(let i = 0; i < arr.length - num + 1; ..

개발자의 공부/자료구조&알고리즘

다중 포인터 패턴

Multiple Pointers: 다중 포인터 (공식 이름은 아님) 인텍스나 위치에 해당하는 포인터 또는 값을 만든 다음에 특정 조건에 따라 중간 지점에서부터 시작 지점, 끝 지점 또는 양쪽 지점을 향해 이동시키는 것이다. 공간 복잡성을 최소화하면서 문제를 해결하는데에 매우 효율적이다. 포인터는 배열이나 문자열의 특정 위치를 가리키는 것이다. 예시 1: sumZero함수 입력 값: 오름차순으로 정렬된 정수 배열 출력 값: 합계가 0인 첫 번째 쌍. 쌍이 없을 경우 0으로 합한 값 또는 undefined sumZero([-3,-2,-1,0,1,2,3]) // [-3,3] sumZero([-2,0,1,3]) // undefined sumZero([1,2,3]) // undefined 순진한 해결책 funct..