javascript/react (19) 썸네일형 리스트형 [React-Quill] 에디터 영역 스크롤 바 만들기 react-quill 을 통해 에디터를 그대로 띄워보면 다음과 같다. 기본 설정에서도 글을 작성하는데는 문제가 없지만, 에디터 영역이 너무 작다는 점은 불편하게 느껴진다. 특히 해당 영역은 기본적으로 스크롤 기반으로 동작하지 않기 때문에 글을 길게 작성함에 따라 에디터 영역이 계속 증가한다. 티스토리 블로그 글쓰기처럼 에디터 영역이 계속 확장되어도 상관 없다면 이 동작 그대로 사용해도 되지만, 나는 에디터 글쓰기 란이 어느 정도 초기 공간을 가지고 있고, 그 이상은 스크롤 형식으로 동작하기를 원하기 때문에 이 동작을 변경해야 한다. Quill 공식문서에서는 scollingController 옵션을 통해 스크롤 대상을 변경할 수 있다고 설명하고 있다. https://quilljs.com/docs/confi.. [React] 개발 환경 프록시 설정 개발 환경에서 프록시를 설정하지 않는 경우 CORS 에러가 발생할 수 있다. 실제 배포 환경에서는 nginx 등 웹 서버에 빌드 된 파일들을 올리기 때문에 이런 문제를 고민할 필요가 없으나, 개발 환경은 그렇지 않다. 다행히도 CRA 또는 Vite을 이용하는 경우 개발 환경에서 프록시를 설정할 수 있도록 기능을 지원하고 있다. CRA(Create-React-App)를 사용하는 경우 https://create-react-app.dev/docs/proxying-api-requests-in-development 두가지 방법이 존재하나, 후자가 좀 더 정밀한 사용이 가능하다. package.json 파일 내에 "proxy" 정의 http-proxy-middleware 을 설치한 후, src 폴더 내에 setup.. [React] 타입스크립트와 children 사용 리액트18 이전까지는 React.FunctionComponent 인터페이스가 children 프로퍼티를 가지고 있었다. 반면 React.FC 인터페이스에는 해당 프로퍼티가 없기 때문에 React.FunctionComponent 인터페이스를 사용했다. 그런데 리액트18 이후부터 React.FunctionComponent에서도 children 프로퍼티가 제거되었기 때문에 이를 사용하고 싶다면 타입이나 인터페이스 안에 children 프로퍼티를 만들어 따로 정의해야 한다. type props = { children: React.ReactNode; } https://blog.logrocket.com/using-react-children-prop-typescript/ 17 버전에서는 잘만 되던 동작이 갑자기 안되.. [React] react-router 리액트 라이브러리를 이용하면 SPA( single page application ) 형식의 웹페이지를 구현할 수 있다. 이때 SPA는 통상적으로 하나의 html 페이지만 사용하므로, 이에 따라 하나의 페이지에서 동작한다. 그러나 실제 사용자 입장에서 모든 동작을 하나에 페이지 안에서만 수행하는 것은 평범하지 않다. 로그인이 필요하면 로그인 페이지를 방문하고, 블로그에 글을 쓰려면 블로그 페이지를 방문하는 등, 목적에 따라 URL 기반으로 다양한 페이지가 존재하는 것이 좀더 기본적이라고 생각할 수 있다. 리액트 프레임워크를 이용하여 만든 웹사이트는 SPA 기반으로 동작하므로, 원칙적으로는 하나의 페이지 내에서 데이터를 유저 및 서버로부터 주고 받으며 동작한다. 이때 리액트가 하나의 페이지 내에서 URL을 .. [React] custom hook 프로그래밍 할때 우리는 코드의 여러 부분에서 공통적으로 혹은 유사하게 사용되는 로직을 함수라는 형태로 묶어 따로 분리한다. 이 경우 재사용성 및 유지보수가 좋아진다는 장점이 있다. 예를 들어 특정 API에 http 요청을 하는 경우를 생각해보자. 하나의 API는 보통 유사한 url을 통해 외부에 정보를 제공해주기 때문에 주소 뒷단을 조금 바꾸면 다른 정보를 얻을 수 있는 경우가 많다. 정보를 fetch로 가져온다고 가정하면, 함수로 분리하지 않은 경우 필요한 정보가 있을 때마다 fetch 메서드에 url 및 headers 등의 각종 정보를 바꿔가며 사용해야 하지만, 만약 정보를 가져오는 전 과정 ( fetch 후 json ... ) 을 하나의 로직으로 생각하여 함수로 관리한다면 구현 방식에 따라 뒷단의 .. [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)에 반응하여 나타나는 이벤트, 혹은 상태 갱신을 위한 트리거. 세가지 구성요소는 서로 긴밀한 관계를.. [React] memo & useCallback 리액트에서 컴포넌트는 본질적으로 함수이다. 우리가 props라고 칭하는 프로퍼티들은 함수의 인자로 취급된다. 따라서 별다른 hook을 사용하지 않는다면 컴포넌트는 함수와 동일하게 작동한다. 자바스크립트에서 함수는 객체에 속하며 name, length 등의 프로퍼티를 추가적으로 가진다. 이때 name은 함수의 이름. length는 함수가 가진 파라미터의 개수를 의미한다. 컴포넌트에 대해서도 해당 프로퍼티에 접근할 수 있다. 자바스크립트의 함수와 컴포넌트 우리가 아는 함수는 어떻게 동작했을까? 다음 예시를 보자. function A() { let b = B(); let c = C(); ... func D() { //... some codes } } 자바스크립트는 특정 스코프 내에서 고유한 렉시컬 환경을 가진.. 이전 1 2 3 다음
