본문 바로가기

전체 글

 (291)
[Git 07] 서버 Git을 자신의 컴퓨터 내부에서만 사용하면 단순한 버전 관리 시스템이 되지만, 특정 서버에 올려 이를 다수의 사람들과 공유하며 작업하면 협업을 위한 툴이 될 수 있다. Git에서 프로젝트의 각 버전은 충돌이 발생해서는 안되며, 충돌 발생 시 사용자가 개입하여 수정하는 작업을 수행해야 하기 때문에 Github와 같은 깃 서버를 사용하여 협업하는 경우, 사용자들에게 중복되지 않는 작업을 보장한다. 서버 연결 프로토콜 https://git-scm.com/book/ko/v2/Git-%EC%84%9C%EB%B2%84-%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C 서버 연결 방식에는 Local, HTTP, SSH, Git 이 있다. Local 리모트 저장소가 동일 시스템 내 다른 디렉토리 ( 보..
[React] react-redux [React] redux에 대한 개념 Redux란? 리액트의 컴포넌트들은 상태 기반으로 동작한다. 특정 컴포넌트 내부의 상태가 어떤 이벤트에 의해 변경되면, 해당 상태가 갱신되면서 컴포넌트 함수가 다시 실행된다. 평가 결과 기존 v blaxsior-repository.tistory.com 이전 글에서 이어집니다. 앞서 언급했듯이 리액트를 redux와 함께 사용하면 컴포넌트로부터 상태를 격리하여 전역적으로 관리할 수 있다는 장점이 존재한다. 단 redux 그대로 리액트에 적용할 수는 없는데, 리액트의 모든 것은 리액트 내부적으로 관리하는 State 기반으로 관리되기 때문이다. 따라서 리액트에서 특정 값을 사용하기 위해서는 redux의 Store을 리액트와 동기화할 방법이 필요하다. react-redux 는..
[React] redux에 대한 개념 Redux란? 리액트의 컴포넌트들은 상태 기반으로 동작한다. 특정 컴포넌트 내부의 상태가 어떤 이벤트에 의해 변경되면, 해당 상태가 갱신되면서 컴포넌트 함수가 다시 실행된다. 평가 결과 기존 virtual DOM 상에 표현된 컴포넌트의 모습과 다른 부분이 있다면, 해당 부분만을 다시 렌더링하고 실제 DOM상에 반영한다. 컴포넌트의 구성요소는 크게 3가지로 나뉠 수 있다. State : 컴포넌트 내부에서 관리되는 상태. 컴포넌트 함수의 재실행을 야기할 수 있다. View : 현재 상태에 기반하여 선언적으로 표현되는 UI 요소. 보통 Action이 여기에 등록되어 있다. Action : 유저의 입력(input)에 반응하여 나타나는 이벤트, 혹은 상태 갱신을 위한 트리거. 세가지 구성요소는 서로 긴밀한 관계를..
[타입스크립트] 함수 오버로딩 타입스크립트는 정적 타이핑을 사용할 수 있다. 이때 자바, C++, C# 등 정적 타이핑을 사용하는 다양한 언어들에서는 함수 오버로딩 기법을 지원하고 있는데, 타입스크립트 역시 명색이 정적 타이핑 언어이므로 이것이 가능하다. 문제는 타입스크립트가 자바스크립트로부터 완전히 독립된 형태로 동작하지 않는다는 점이다. 타입스크립트는 자바스크립트에 문법이나 특정 기능을 추가하여 에디터 수준에서 동적 타이핑을 지원하기는 하지만, 실제 프로그램으로 동작할 때는 자바스크립트 코드로 치환된다. 따라서 비록 타입스크립트 문법을 이용하여 코드를 작성하더라도 해당 코드가 자바스크립트의 규칙을 깨서는 안된다. 적어도 이 특징은 타입스크립트가 자바스크립트로 치환되지 않고도 사용 환경에서 사용될 수 있는 기술이 등장하지 않는 한 ..
[React] memo & useCallback 리액트에서 컴포넌트는 본질적으로 함수이다. 우리가 props라고 칭하는 프로퍼티들은 함수의 인자로 취급된다. 따라서 별다른 hook을 사용하지 않는다면 컴포넌트는 함수와 동일하게 작동한다. 자바스크립트에서 함수는 객체에 속하며 name, length 등의 프로퍼티를 추가적으로 가진다. 이때 name은 함수의 이름. length는 함수가 가진 파라미터의 개수를 의미한다. 컴포넌트에 대해서도 해당 프로퍼티에 접근할 수 있다. 자바스크립트의 함수와 컴포넌트 우리가 아는 함수는 어떻게 동작했을까? 다음 예시를 보자. function A() { let b = B(); let c = C(); ... func D() { //... some codes } } 자바스크립트는 특정 스코프 내에서 고유한 렉시컬 환경을 가진..
[React] useImperativeHandle을 타입스크립트와 사용하는 방법 useImperativeHandle을 이용하면 하위 컴포넌트의 변수나 함수를 상위 컴포넌트에 공개하여 사용할 수 있다. 이게 단순한 자바스크립트 기반으로 코드를 작성하는 경우에는 별로 어렵지 않은데, 타입스크립트 기반으로 작성하기 시작하면 꽤 까다롭다고 느끼게 된다. 인터넷에 검색해도 영어 문서밖에 안나와서 이번 기회로 사용법을 정리하고자 한다. 다음 문서를 참조했다. declare type with React.useImperativeHandle() function App(){ const cntEl:any = React.useRef(null); // I don't know what type should be here. React.useEffect(()=>{ if(cntEl.current){ cuntEl...
[React] forwardRef & useImperativeHandle useRef는 실제 DOM 상의 엘리먼트를 참조하고, 이들을 직접 제어하기 위한 hook이다. 이때 해당 hook은 기본적으로 리액트에서 제공하는, html의 각 태그에 대응되는 기본 JSX에 대해 작동한다. 여기서 고민이 있다. 기본 제공되는 JSX는 ref로 접근할 수 있는데, 그렇다면 우리가 만드는 컴포넌트는 어떻게 ref로 접근할 수 있을까? 위의 질문을 다시 한번 조정해보자. 커스텀 컴포넌트를 ref로 접근한다는 의미가 무엇일까? 예를 들어 input JSX을 내부적으로 가지고 있는 Input 커스텀 컴포넌트을 ref로 접근하고 싶다는 것은 Input 커스텀 컴포넌트 내부의 input JSX에 접근하고 싶다는 의미로 받아들여질 수 있다. 이 경우 커스텀 컴포넌트는 일종의 래퍼이고, 실제로 접근하..
[자바스크립트] [native code]의 의미 타입스크립트 환경에서 useImperativeHandle을 이용하여 ref을 이용하던 도중, 코드가 제대로 동작하지 않는 상황이 발생했다. 혹시 해당 함수가 존재하지 않는 것인가 하는 의문이 들어 이를 console.log을 이용하여 출력했다. 이때, 내부 코드가 [native code] 로 나타나는 것을 알게 되었다. 여기서 궁금증이 생겼는데, 대체 native code은 뭘까? 이를 이해하기 위해서는 자바스크립트 엔진을 이해하는 것이 좋다. 자바스크립트는 웹 환경에서 빠르게 개발하기 위한 언어를 구상하던 과정에서 생겨난 언어로, 자바스크립트가 돌아가는 엔진 자체는 보통 C / C++ , 최근의 경우 Rust 등의 성능을 중시하는 언어를 통해 작성된다. 이때 console.log 등 엔진에 내장된 기능..

티스토리툴바