ksw_devlog

순수 함수란 동일한 입력에 대해 언제나 동일한 결과를 리턴하는 함수를 의미하고, 불변성을 지키고 사이드 이펙트를 일으키지 않는 함수를 의미합니다. 불변성을 지킨다는 것은 값을 직접 변경하지 않고 늘 새로운 값을 리턴한다는 의미입니다. 불변성을 지킴으로써 얻을 수 있는 이점은 예기치 못한 사이드이펙트를 방지할 수 있다는 점입니다. 사이드 이펙트란 함수 외부의 상태를 변경하는 것으로, 변화를 예측할 수 없기 때문에 예기치 못한 오류를 발생시킬 가능성이 있습니다. 리액트에서는 단방향 데이터 흐름을 유지하기 위해 리액트 컴포넌트의 props를 직접 변경하지 않는 방법으로 순수 함수를 지향하고 있습니다. props : 부모에서 자식 컴포넌트로 데이터를 넘겨줄 때 사용하며, 직접적으로 수정할 수 없는 값이다. pr..

쿠키는 웹 브라우저 상에 작은 '텍스트 파일'로 저장이 되는 만료 기간이 존재하는 저장소이고 옵션에는 Expires, Max-Age가 있습니다. Expires 는 쿠키가 삭제되는 만료 날짜를 설정합니다 Max-Age 는 쿠키가 삭제될 시간을 초 단위로 설정합니다. expires(유효 일자)나 max-age(만료 기간) 옵션이 지정되어있지 않으면 브라우저가 닫힐 때 쿠키도 함께 삭제됩니다. 이런 쿠키를 '세션 쿠키(session cookie)'라고 부릅니다. https://velog.io/@ojudge/Cookie%EC%9D%98-MaxAge-Expires Cookie의 MaxAge, Expires Session cookies웹브라우저가 켜져있는 동안 유효하고 끄고 다시 켜면 없어짐-> expires 혹은..

useRef 는 특정 DOM을 선택하거나 컴포넌트 안의 변수 만들 때 혹은 리렌더링 방지를 할 때 사용하는 React의 Hook 함수입니다. 리액트에서는 DOM을 선택할 때 ref 를 사용합니다. 함수형 컴포넌트에서 ref 를 사용할 때는 useRef 를 사용하고 useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않습니다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그다음 렌더링 이후로 업데이트된 상태를 조회할 수 있지만, useRef 로 관리하는 변수는 설정 후 바로 조회할 수 있습니다. 이 변수를 사용하여 setTimeout, setinterval 을 통해서 만들어진 id 외부 라이브러리를 사용하여 생성된 인스턴스 scroll 위치 같은 값들을 관리할 수..

배열, 객체는 참조값이고 참조값은 변수에 주소를 할당합니다. 따라서 const 변수에는 주소만 할당되어있고 stack에는 주소만 저장됐고, heap에 실제 요소들이 저장되어있습니다. 실제 배열 요소들은 push나 pop으로 변경이 가능하고 참조된 주소는 변경되지 않으므로 const 사용이 가능합니다.

require와 import는 모듈 키워드이고 둘 모두 다른 파일의 코드를 불러온다는 동일한 목적을 가지고 있지만 다른 문법 구조를 가지고 있습니다. require는 CommomJS 의 함수이고 import는 ES6의 키워드로, 원하는 모듈을 불러올 수 있습니다. require는 파일에 들어있는 곳에 남아 있으며 import는 항상 맨 위로 이동합니다. require는 프로그램의 어느 지점에서나 호출할 수 있지만 import는 파일의 시작 부분에서만 실행할 수 있습니다. ES6 사양을 지원하지 않는 환경이거나, Babel 과 같은 인터프리터가 없을 땐 require을 사용해야 합니다.

this JS 에서 this 는 일반적으로 해당 함수를 호출하는 방식에 따라 동적으로 결정됩니다. 하지만 화살표 함수의 경우 해당 함수를 호출하면 선언 단계에서 정적으로 상위 컨텍스트를 참조하여 this 가 결정됩니다. (lexical this) 동작원리 this는 현재 실행 중인 함수의 객체를 참조합니다. this의 값은 함수가 어떻게 호출되었는지에 따라 달라집니다. 1. 일반 함수 호출에서 this는 전역 객체를 가리킨다. 2. 객체의 메소드로 호출된 함수에서 this는 해당 객체를 가리킨다. 3. 생성자 함수에서 this는 생성된 객체를 가리킨다. 4. call() 또는 apply() 메소드를 사용하여 명시적으로 this를 지정할 수 있다. 따라서 this의 값은 실행 컨텍스트에 따라 동적으로 결정..

position 속성은 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성입니다. position 속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치할 수 있고 어떤 방식으로 놓을지를 결정할 수 있습니다. position 속성에는 static, relative, absolute, fixed, sticky 등이 있는데 static을 제외한 나머지 속성값들은 top, left, bottom, right 와 같이 어느 위치에 요소를 위치시킬 건지 지정할 수 있습니다.

프레임워크(Framework) 소프트웨어에서의 프레임워크는 '소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합' 이라 할 수 있으며, 완성된 어플리케이션이 아닌 프로그래머가 완성시키는 작업을 해야합니다. 객체 지향 개발을 하게 되면서 통합성, 일관성의 부족이 발생되는 문제를 해결할 방법중 하나라고 할 수 있습니다. 프레임워크의 특징 특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성되어 있습니다. 추상적인 개념들이 문제를 해결하기 위해 같이 작업하는 방법을 정의합니다. 컴포넌트들은 재사용이 가능합니다. 높은 수준에서 패턴들을 조작화 할 수 있습니다. 라이브러리(Library) 라이브러리는 단순 활용가능한 도구들의 집합을 말합니다. 즉. 개발자가 만든 클래스에서 ..