NPM 배포하기 cra로 설정한 full-page-scroll 개발 중 문득 내가 개발한 기능을 npm에 배포해보면 어떨까? 하는 재미있는 생각이 들었다. 바로 배포해보자! 패키지 이름 먼저, 패키지 이름이 겹치는지 확인해야 한다. 해당 이름의 패키지가 존재하지 않는다면, 배포가 가능하다. 프로젝트 구조 내 프로젝트의 구조는 다음과 같다. components 폴더 내의 FullPageScroll을 배포할 계획이다. components 폴더 내의 index.js에 배포할 컴포넌트를 불러온 뒤, export 해준다. babel 설치 package.json과 같은 경로에 babel.config.js 작성 package.json 작성 (아래는 내 react-fp-scroll 패키지의 package.json 파일이다.) npm login package.json 까지 작성해준 뒤, 배포를 하기 전 npm 계정으로 로그인을 해야한다. 로그인이 정상적으로 되었다면, 명령어로 배포하면 완료된다.…

React에서의 배열 state 관리 배열 state를 업데이트하기 위해서는 배열에 직접적으로 영향이 가지 않는 방법을 이용해야 한다. (state에 저장한 배열은 변경이 불가능한 것으로 취급해야 하기 때문) 객체 state를 업데이트할 때와 마찬가지로, state에 저장된 배열을 업데이트하려면, 새로운 배열을 만들어 사용해야 한다. 추천하지 않는 방법 예시 추가: push, unshift 삭제: pop, shift, splice 교체: splice, arr[i] = … 정렬: reverse, sort 추천하는 방법 예시 추가: concat, […arr] spread syntax 삭제: filter, slice 교체: map 정렬: 배열을 복사한 뒤 처리 두 방식 비교 코드 (배열에 값 추가 예시) Refference: https://react-ko.dev/learn/updating-arrays-in-state

투 포인터 알고리즘이란? 투 포인터 알고리즘은 배열이나 리스트에서 두 개의 포인터를 조작하여 원하는 결과를 얻는 데 사용되는 알고리즘이다. 이 알고리즘은 일반적으로 정렬된 배열에서 특정한 합이나 조건을 만족하는 부분 배열을 찾거나, 두 배열을 병합하는 경우에 효과적으로 사용된다. 투 포인터 알고리즘의 주요 아이디어는 두 개의 포인터를 사용하여 배열 내에서 움직이면서 원하는 조건을 찾아내는 것이다. 보통 시작점과 끝점을 나타내는 두 포인터를 사용하며, 이 두 포인터는 배열을 훑으면서 조건에 맞게 이동한다. 투 포인터 알고리즘 예시 간단한 예제로 정렬된 배열 내에서 두 수 사이의 합이 특정 값이 되는 경우(부분수열)를 찾는 예시이다. 시작과 끝 포인터 초기화: 배열의 시작지점에 시작과 끝 포인터를 놓는다. 포인터 이동: 포인터가 가리키는 두 수 사이의 합을 목표값과 비교한다. 합이 목표 값보다 작으면 끝 포인터를 오른쪽으로 옮긴다. 합이 목표 값보다 크면 시작 포인터를 오른쪽으로 이동…

Flutter? 유튜브 영상을 보다 Flame 이라는 게임엔진을 이용하여 개발한 모바일 게임이 눈에 띄었다. Flame이 뭘까? 궁금해서 검색해보니 Flame은 Flutter 기반 2D 게임엔진이라고 한다. (3D도 준비중이라고 하는데 지금은 정확히 모르겠다.) 그렇다면, Flutter는 무엇일까? Flutter는 Google에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크이다. React Native처럼 하나의 프레임워크로 IOS, Android 둘 다 개발이 가능한 모양이다. 앱 개발 전공이 아닌 나같은 경우(취미로 개발할 경우)에는 CrossPlatform 프레임워크를 사용하여 가볍게 시작하기에 좋을 것 같다! 물론 Flutter나 React Native를 사용한다고 Native를 아예 사용하지 않는 것은 아니라고 한다.(Native는 어려워…) 그럼, Flutter와 React Native 와 비교했을 때 Flutter의 장점은 무엇이 있을까? React Native에…

Lodash란? 함수형 프로그래밍 패러다임을 사용하여 일반적인 프로그래밍 작업을 위한 유틸리티 기능을 제공하는 Javascript 라이브러리(Wikipedia) debounce와 throttle debounce와 throttle은 이벤트가 연속적으로 발생할 때, 콜백함수의 불필요한 실행을 줄여주는 기능을 제공한다. 서버로의 불필요한 요청(Request)을 줄일 수 있고, 불필요한 렌더링을 방지할 수 있어 컴포넌트 성능 개선에 도움이 된다. 또한, 외부 API를 호출해야 하는 경우, 과도한 서버 요청을 막아줄 수 있는 면에서 아주 중요한 기능을 한다고 생각한다. debounce는 이벤트가 종료된 뒤, 일정 시간 뒤에 콜백함수가 실행된다. throttle은 콜백 함수를 일정 주기마다 한 번 실행한다. debounce 적용 예시 beforeDebounce afterDebounce

웹 브라우저의 동작 순서 사용자가 브라우저에 도메인 입력(ex. https://www.naver.com) 웹 브라우저는 DNS에 입력된 도메인의 IP 주소를 요청 해당 IP주소에 해당하는 서버로 접근(이때, random sequence 번호를 가지고 접근) 서버에서 브라우저에 번호에 1을 더하여 응답(random sequence + 1) 브라우저에서 다시 서버에 1을 더하여 응답 (3, 4, 5 과정을 3 Way-Handshake 라고 한다. 브라우저가 서버에게 자신의 존재를 알리고 -> 서버는 브라우저의 존재를 확인했다는 사실 + 자신의 존재를 알리는 신호를 브라우저에 보냄 -> 브라우저는 서버의 존재를 확인했다는 신호를 서버에 다시 보냄 ===> 위 세 과정을 통해 브라우저와 서버간의 TCP 연결이 성립된다.) 브라우저 렌더링 과정 Refference 웹 브라우저의 동작 순서(유튜브)

Web Storage HTML5에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있다. Web Storage의 개념은 key/value 쌍으로 데이터를 저장하고 key를 기반으로 데이터를 조회하는 패턴이다. 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 환경에 맞게 선택이 가능하다. Web Storage는 기존 Cookie와 매우 유사한 개념이다. 몇 가지 쿠키의 단점을 보완하기 위해 도입되었다. Web Storage와 Cookie의 차이점 쿠키는 매번 서버로 전송된다. 웹사이트에서 쿠키를 설정하면 이후 모든 웹 요청은 쿠키정보를 포함하여 서버로 전송된다. 단순 문자열을 넘어 객체정보를 저장할 수 있다. 문자열 기반 데이터이 외에 구조화된 객체를 저장할 수 있다. 제한 용량이 쿠키에 비해 자유롭다. 쿠키는 개수와 용량에 제한이 있다. 하나의 사…

Side Effect 란? React 컴포넌트가 화면에 1차로 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들 비동기로 처리되어야 하는 이유? 데이터를 가져오려고 외부 API를 호출할 때, 일단 화면에 렌더링할 수 있는 것은 1차로 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 이유는 연동된 API가 응답이 늦거나 없을 때 데미지(사용자의 답답함)를 최소화 시켜 사용자 경험 측면에서 유리하기 때문이다. React Hooks 란? Hooks는 리액트 v16.8에 새로 도입된 기능이다. 함수형태의 컴포넌트에서 사용되는 몇가시 기술을 Hook이라고 부른다. 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공한다. 잘 사용하고 있던 클래스형 컴포넌트에서 함수형 컴포넌트로 바꾸는 이유? React를 배우는 데 있어서 클래스는 큰 진입장벽이었다. 코드의 재사용성과 코드 구성을 …

Webpack(웹팩) 이란? 현대 Javascript Application의 Static Module Bundler 필요한 다수의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어 주는 것을 말한다. Bundle(번들) 이란? 소프트웨어 및 일부 하드웨어와 함께 작동하는 데 필요한 모든 것을 포함하는 Package Webpack을 사용하는 이유 연관되어 있는 자바스크립트 파일들을 하나의 파일로 묶어줘서 관리하기 편하다. 컴파일할 때, 여러 모듈들의 파일을 읽어오는데 걸리는 시간을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다. 하나의 자바스크립트 파일로 만들어서 웹페이지 성능을 최적화 해준다. 다른 Module Bundler도 많이 존재하지만, performance가 우수하다. Babel(바벨) 이란? ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환 시켜 IE나 다른 브라우저 내에서 동작할 수 있도록 하는…

GET 이란? GET은 지정된 리소스에서 데이터를 요청하는데 사용되는 HTTP Method GET 요청의 특징 Browser history에 남아있다. 북마크가 가능하다. 민감한 데이터를 처리할 때 GET을 사용하지 않는다. (보안) 데이터 요청에만 사용된다. POST 란? 리소스를 생성/업데이트하기 위해 서버에 데이터를 보내는 데 사용된다. POST 요청의 특징 Browser history에 남아있지 않는다. 북마크 불가능 데이터 길이에 대한 제한이 없다. 궁금증 Browser history가 무엇일까? (개발할 때 사용하던 history가 이 history인가?) 북마크가 무엇일까? 흔히들 사용하는 북마크기능을 말하는 것일까? POST 요청은 데이터 길이에 제한이 없다고 하는데 아예 없는 것일까? (vs GET에 비해 비교적 프리한 것인가?) 궁금한건 직접 해봐야지 Refference: https://www.w3schools.com/tags/ref_httpmethods.…

프로세스(Process) 란? 운영체제로부터 자원을 할당받은 작업의 단위 프로그램이 메모리에 적재된 상태 스레드(Thread) 란? 프로세스가 할당받은 자원을 이용하는 실행의 흐름 단위 프로그램 > 프로세스 > 스레드 프로세스와 스레드의 차이 프로세스는 프로그램을 실행하는 순간 해당 파일이 컴퓨터 메모리에 적재되고, 이 동적인 상태의 프로그램을 프로세스라고 함. 스레드는 프로세스를 구성하는 더 작은 실행 단위의 개념 프로세스는 메모리에 적재될 때 운영체제로부터 독자적인 시스템 자원을 할당받는 반면, 스레드는 프로세스 내부에서 다른 메모리 영역을 같은 프로세스 내 다른 스레드와 공유한다.

Javscript Closure(클로저)란? 독립적인 변수를 가리키는 함수 클로저의 원리 함수A가 존재하고, 함수 A에서 선언된 1이라는 변수가 존재, 또한 함수 A 내부에 B라는 내부함수가 존재하고 B라는 내부함수에서 A함수에서 선언된 1이라는 변수를 참조, 이때 내부함수 B가 외부로 전달될 경우, A의 실행이 종료되어도 변수 1이 사라지지 않는다. ~~A의 실행이 종료되어도 변수 1이 사라지지 않는다 -> 사이드 이펙트 실행이 종료되어도 사라지지 않는다는 것은 메모리에 계속 남아있음을 뜻하고 이는 메모리 누수 현상이 발생할 수 있음을 뜻함 또한 메모리에 계속 남아있기에 필요에 의해 참조가 가능 메모리 누수란? 프로그램이 필요하지 않은 메모리를 계속 점유하고 있는 현상 클로저를 사용하는 이유 불필요한 전역변수의 선언을 막아준다. private 변수를 사용하고 싶을 때 이용된다. 클로저 사용의 단점 메모리 누수 현상이 발생할 수 있다. 새로운 Scope를 생성하여 내부 함수에 링크…

Javscript Hoisting(호이스팅) 이란? 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효범위의 최상단에 선언하는 것 변수의 경우 var로 선언한 변수만 호이스팅이 적용된다. (let, const 변수는 적용되지 않음) 예시 적용 전 적용 후 또한, 함수에서는 함수 선언문은 호이스팅이 적용되고, 함수 표현식은 적용되지 않는다. 예시 적용 전 적용 후 Hoisting 적용 우선순위 변수 선언문이 함수 선언문보다 위로 끌어올려진다.