프레임워크&라이브러리15 [Trouble Shooting] setTags가 왜 not a function이지? 문제상황 : 자식 컴포넌트에서 부모 컴포넌트로 string[] 타입의 데이터를 상태 끌어올리기를 활용하여 구현하고 있는 도중에 not a function error가 콘솔에 표시되면서 페이지 전체의 렌더링이 되지 않음 추론1. 내가 아직 자바스크립트의 인터프리팅 체계에 대한 이해가 부족해서 당연한 메서드를 잘못된 위치에서 호출하고 있는 것은 아닐까? => 문제가 위치한 레이어 : 단위 함수 추론2. 타입의 설정이 잘못되어 있는 것은 아닐까? => 문제가 위치한 레이어 : 인터페이스 타입 설정 추론3. 부모 컴포넌트와 자식 컴포넌트의 Props 전달과정 혹은 타입 정의 과정에서 각자 다른 타입/함수를 사용한 경우 타입 추론에 의해 자식 컴포넌트에서 함수로 인식하지 않을 수도 있지 않을까? => 문제가 위치.. 2023. 7. 22. [리팩토링] 내 정보 조회 : useEffect => useQuery 참고문헌 : - https://stackoverflow.com/questions/74095164/switching-out-useeffect-for-tanstack-react-query - https://gyyeom.tistory.com/125 - https://kyounghwan01.github.io/blog/React/react-query/basic/ - https://tanstack.com/query/v3/docs/react/guides/queries - 그 외 등등.. 이 짧은 수정을 위해, 정말 많은 문서와 github를 뒤졌다.. 2가지 핵심요점 1. React-query가 리턴하는 객체 2. Query Key는 뭘까? React-query가 리턴하는 객체 React-query의 useQuery.. 2023. 7. 13. React-Query 입문 [필요성, query, mutation] 공식문서 : https://tanstack.com/query/latest/docs/react/quick-start 참고자료 : https://tech.kakaopay.com/post/react-query-1/ 필요성 프로젝트를 진행하면서 apis 폴더에 모든 서버 통신 함수들을 관리하다보니, 같은 동작임에도 불필요하게 반복되는 부분이 많았다. axios는 서버 통신을 할 때, fetch에 비해 json.stringfy()와 같은 필수적이지만 중복되는 동작들을 처리해주고 error, data, loading에 따른 동작을 비동기적으로 처리해주는 강력한 도구이다. 그러나 캐싱과 같은 서버 상태를 다루려면 종전의 fetch와 마찬가지로 필수적이지만 중복되는 코드들이 많아진다. 이 문제는 사실 redux와 같은.. 2023. 7. 8. React-Quill을 활용한 구현 예제 이전 포스팅 : https://whaleinmilktea.tistory.com/80 참조 블로그 : https://velog.io/@onezerokang/Quill%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%97%90%EB%94%94%ED%84%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0-Quickstart1 Quill을 사용해서 텍스트 에디터 만들기: Quickstart(#1) quill을 시작하는 가장 좋은 방법은 간단한 예제를 만들어보는 것입니다. Quill은 DOM element를 사용하여 에디터를 세팅할 수 있습니다.이게 Quill의 초기 세팅법입니다!Quill의 진정한 장점은 유연성과 v.. 2023. 4. 16. React-quill을 활용한 구현 예제 참조블로그 : https://velog.io/@onezerokang/Quill%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%97%90%EB%94%94%ED%84%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0-Quickstart1 Quill을 사용해서 텍스트 에디터 만들기: Quickstart(#1) quill을 시작하는 가장 좋은 방법은 간단한 예제를 만들어보는 것입니다. Quill은 DOM element를 사용하여 에디터를 세팅할 수 있습니다.이게 Quill의 초기 세팅법입니다!Quill의 진정한 장점은 유연성과 velog.io 맨땅에 헤딩으로 공식문서와 chat gpt를 갖고 씨름하던 나에게,,, .. 2023. 4. 13. (Rich-TextEditor) React-quill Rich Text-Editor & WisWig Rich Text-Editor(리치 텍스트 에디터)와 WisWig(위즈윅) 에디터는 흔히 블로그나 웹 문서를 작성할 때 흔히 볼 수 있는 위와 같은 에디터를 말한다. 통상적으로 비슷한 의미로 쓰이지만 다음과 같은 차이점을 갖는다. 리치 텍스트 에디터는 일반적으로 HTML 코드를 직접 작성하는 것이 아니라, 일반적인 텍스트 에디터와 비슷한 방식으로 작동한다. 사용자는 문서의 스타일, 글꼴, 크기 등을 선택하거나, 강조, 들여쓰기, 링크 등의 일반적인 기능을 수행할 수 있지만, 사용자가 작성한 문서는 HTML 코드로 저장된다. 반면에 위지윅 에디터는 "What You See Is What You Get"의 약자로, 사용자가 작성한 문서가 실제로 출력될 모습과 비.. 2023. 4. 12. (SPA) React-Router-Dom SPA란? SPA는 Single-Page-Application의 약자로, 여러 url을 필요한 부분만 렌더링하는 개념을 의미한다. 사용자가 경험하는 모든 웹앱은 서버에 저장되어 있는 웹앱을 인터페이스를 통해 요청하고 응답받는 구조로 되어있다. 이 때, 브라우저는 응답받는 내용대로 웹앱을 정보를 읽고, 이를 화면에 그리는 "렌더링(rendering)"을 진행하게 되는데, 일반적인 웹앱에서는 동일한 정보가 상당히 많이 겹침에도 웹앱 전체를 렌더링한다(MPA). SPA는 이러한 렌더링을 줄이고, 필요한 부분만 렌더링한다는 개념이다. React-Router-DOM 리액트는 SPA의 구현을 위해 React-Router-DOM 라이브러리를 사용한다. Router는 네트워크에서 경로를 결정하는 장치나 시스템을 의미하.. 2023. 3. 6. UseRef() useState, useEffect와 같은 React Hooks들은, React를 class형 프로그래밍이 아닌, 함수형 프로그래밍으로 제어할 수 있도록 고안된 개념들이다. 일반적으로 "use"를 앞에 붙이고 있는 리액트의 기능들이 Hooks이다. React 공식문서에서는 Hooks의 종류를 다음과 같이 제시하고 있다. 1. Basic Hooks useState useEffect useContext 2. AdditionalHooks useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue useDeferredValue useTransition useId 3. Library Hooks useSyncExter.. 2023. 2. 22. State Lifting Up(상태 끌어올리기) React.js에서 "상태 끌어올리기"란 여러 컴포넌트에서 공유하는 상태를 부모 컴포넌트로 옮겨서 관리하는 것을 말한다. 이런 의미에서 상태 끌어올리기는 State를 통해 상태를 관리하는 기능이라고 볼 수 있다. React.js의 indeed 단방향 데이터 흐름 React.js는 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터를 전달하고, 자식 컴포넌트에서는 이를 받아서 화면에 렌더링하는 방식으로 작동한다. 자식 컴포넌트에서 상태를 변경해도, 이 변경된 상태는 항상 상위 컴포넌트로 전달되어 최종적으로 애플리케이션의 상태가 업데이트되게 된다. ** 사설 이 때, 본인은 자식 컴포넌트에서 상태를 변경해도 부모 컴포넌트로 전달된다는 개념이 너무~~~~너무 이해가 되지 않았다. " 자식 컴포넌트로 상.. 2023. 2. 21. Styled Component Styled Component 1. React는 기능구현에 초점을 둔 라이브러리이기 때문에, 종전의 스타일링은 전적으로 CSS파일에 의존했다. 2. 그러나 웹에서의 상호작용이 비대화되고, React프로젝트가 거대화 됨에 따라 CSS파일 또한 다양화되었다. 3. 이로 인해 SASS나 Styled Component와 같은 방법론이 등장했다. 각각의 방법론은 장/단점을 갖고 있다. 1. SASS 장점 : 변수/함수/상속 개념을 활용하여 재사용이 가능하고, CSS가 구조화되어 유지보수가 편리하다 단점 : 별도의 전처리 과정이 필요하고, 디버깅하는데 어려움이 있으며, 컴파일한 CSS가 거대화되는 문제가 있다. 2. Styled-Component 장점 : CSS가 컴포넌트 안으로 캡슐화되어서 네이밍이나 최적화를 신.. 2023. 2. 20. useState(), useEffect() useState()와 useEffect()? useStates와 useEffect는 React.js가 JS DOM을 대체할 수 있었던 가장 핵심적인 기능이다. 모던 웹은 정적 정보만을 제공하지 않고, 인터페이스를 통한 동적 상호작용을 통해 현재 페이지에 그려지는 요소의 상태를 표현한다. 이를 다루기 위해 라이브러리 없이 JS DOM으로만 이벤트를 처리할 때, 해당 요소를 정의, 로딩, 이벤트 정의, 이벤트 핸들링 등의 개념이 절차적 프로그래밍과 같이 코드로 작성되어야 했다. 하지만, useStates()와 useEffect()는 이러한 상태(state)를 변수에 담아 관리하고, 컴포넌트의 생명주기를 의존성 배열이나 조건부 렌더링 등을 통해 관리할 수 있다는 장점이 있다. use~()이라고 하는 모든 리액.. 2023. 2. 13. States & Props (feat. eventHandler) Props? props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해주도록 하는 "속성"이다. 속성이라는 말에서 알 수 있듯, props는 마치 html 태그에 속성을 추가하는 모습처럼 사용된다. import "./styles.css"; import "./component/ExpenseItems"; import Expense from "./component/Expense"; const App = () => { // 나는 App 함수에서 정의된 객체들을 App 컴포넌트가 아닌 하위 컴포넌트에서도 동시에 제어하고자 한다. const expenses = [ { id: "e1", title: "멘토 매칭 서비스", amount: 99000, date: new Date(2020, 7, 14) }, { id:.. 2023. 2. 6. Component " 컴포넌트는 리액트의 심장이다! " - React 개발자 Dan Abramov 리액트 없이 HTML과 Javascript만을 갖고 웹을 개발하려고 한다면 웹에 있는 각 기능을 html 파일 안에서 하드코딩된 형식으로 전부 구성해야 하며, Javascript를 일일이 연결해서 그 기능을 구현해야 했다. 하지만, React에서 Component의 개념을 제시한 뒤로는 HTML은 오직 렌더링 이후의 결과만을 보여주는 역할만을 수행했고, 나머지 웹의 구조부터 기능에 이르기까지 전반적인 내용들 Component 단위로 쪼개어 구현한 뒤 Root 단계에서 조립하는 식으로 변화되었다. Component 기반 개발의 특징과 장점 컴포넌트는 웹의 각각에 보여지는 부분들을 기능 단위로 쪼개어 개발된다. 이 때의 기능 단.. 2023. 2. 2. JSX JSX 1. JSX의 코드 그 자체로는 브라우저에서 읽어들일 수 없다. 이로 인해 babel이라는 컴파일러는 사용하게 된다. 2. 중간 렌더링 툴이 필요할만큼 복잡한 JSX가 필요한 이유는, 개발상 용이성 때문이다! Hello React! 흔히 볼 수 있는 위의 h2 밑에 "I want to be a developer who increases value"라는 내용을 갖는 태그를 JS를 활용하여 추가하기 위해서는 다음과 같은 2가지 방식이 있다. // ./App.js // * JS DOM으로 구현한 코드 const para = document.createElement("p"); para.textContent = "I want to be a developer who increases value"; docum.. 2023. 1. 31. Create-react-app 리액트 프로젝트 시작하기 "React는 라이브러리이다." 1. React로 개발한 모든 어플리케이션은 JS로도 구현이 가능하다. 2. 그럼에도 불구하고, React를 쓰는 이유는 다양한 도구(js코드의 집합===>명령어/태그 등)들을 통해 어플리케이션 자체에 집중할 수 있고, 향후 유지보수 및 개선에 있어서 높은 생산성을 보장하기 때문이다. 3. 다만, JS자체가 아니기에 프로젝트 시작단계에서, 라이브러리 설치부터 진행해야 단다. # npx === node package module (패키지 모듈 설치) # create-react-app === 리액트 라이브러리를 사용한 새로운 프로젝트의 시작 # my-app === 폴더명, 프로젝트 이름에 따라 다양하게 변경됨 npx create-react-app my.. 2023. 1. 30. 이전 1 다음
