[꼼꼼한 개발자] 꼼코더

💁🏻‍♂️ 소개 CKEditor5는 텍스트 편집기(블로그 에디터) 라이브러리이다. 텍스트 에디터 중에서도 공식 문서가 잘 정리되어 있어 많이 사용되고 있다. ⚒️ CKEditor 5 종류 종류는 Classic 부터 ~ Super까지 존재한다. 각 빌드 종류에 따라 지원하는 기능들이 다르다.(빌드 별 지원기능) 무료 버전은 아래와 같다. 👉🏻 적용 방법 (3가지) 공식 페이지에서 버전을 선택한 후 적용 방법(3가지)을 선택하여 적용할 수 있다. Zip package 방법은 직접 커스텀하여(플러그인 등) 만들 수도 있다.(진행 방법 하단에 작성) Command line CDN * Zip package 🧑🏻‍💻 Zip package 방법 적용(커스텀 방식) 공식 빌드 커스텀 페이지 접속 (https://cke..

🧹 간단 정리 커스텀 훅이란? 반복되는 로직을 리액트 내장 훅 들을 사용하여 구현한'내가 만든 훅'이라고 생각하면 된다. 쉽게 설명하자면 '반복되는 로직을 분리' 했는데 분리한 로직 속에 리액트 훅이 있다? > '커스텀 훅' 분리한 로직 속에 리액트 훅이 없다? > '(JS) 함수' (자세한 내용은 아래 👀) 💁🏻‍♂️ 규칙 🎤 이름 규칙 - 커스텀 훅의 이름은 "use"로 시작해야 한다. 예를 들어, useCounter나 useFetchData와 같은 이름. 🥊 내장 훅(Hook) 사용 - 커스텀 훅 내에서 내장 훅(예: useState, useEffect)을 사용. 이렇게 하면 커스텀 훅의 로직을 더욱 강력하게 만들 수 있다. 🎁 상태와 함수 반환 - 커스텀 훅은 상태 값과 해당 상태를 업데이트하는 ..

🧹 두서없이 적는 쉬운 정리 1. State는 리액트 컴포넌트의 변경 가능한 데이터. 2. Class 컴포넌트의 생성자에서는 추후 사용할 데이터를 state에 넣어서 초기화한다. 3. state를 업데이트하기 위해 setState() 함수를 사용. 4. 클래스 컴포넌트에서 컴포넌트의 생명, 인생, 죽음을 의미하는 함수를 사용할 수 있다. (componentDidMount(), componentDidUpdate(), componentWillUnmount() 5. map() 함수를 사용시 엘리먼트를 구분하기 위하여 key 값을 필수적 넣어야 한다. (자세한 내용은 아래 참고) 😊 실습 시작 클래스 컴포넌트로 스테이트 와 생명주기 함수를 직접 사용해 보도록 하자 🧑🏻‍💻 Notification 컴포넌트 생성 ..

🧹 두서없이 적는 쉬운 정리 1. State는 리액트 컴포넌트의 변경 가능한 데이터. 2. Class 컴포넌트의 경우 생성자 함수를 가지고 있고 State를 생성자에서 정의한다. 3. 리액트 컴포넌트는 생명주기를 갖고 있다.(출생 - 인생 - 사망) 4. 컴포넌트는 계속 존재하는 것이 아닌 시간의 흐름에 따라 생성되고 업데이트 후 사라진다. (자세한 내용은 아래 참고) 👀 시작 이 글은 지금은 자주 사용하지 않는 클래스 컴포넌트와 관련된 내용이지만 중요한 개념들이 있으니 정리해 보자. 스테이트라는 개념은 함수 컴포넌트에서도 사용하기에 개념을 확실히 이해하고 넘어가는 것이 좋다! 🫨 State란? State는 리액트 컴포넌트의 상태를 의미한다. 리액트 컴포넌트의 변경 가능한 데이터를 State라고 부른다...

🧹 두서없이 적는 쉬운 정리 1. 컴포넌트 안에 여러개의 컴포넌트를 사용할 수 있다. 2. 컴포넌트 속 css적용이 가능하다. 3. 컴포넌트를 동적으로 변경려면 props 추가 4. 여러 중복 데이터는 배열로 관리하고 .map()함수로 추출. (자세한 내용은 아래 참고) 🕵🏻 댓글 컴포넌트 실습 1. Comment라는(댓글) 이름의 리액트 함수 컴포넌트 생성 2. 여러 개 댓글(Comment) 컴포넌트를 포함하고 있는 댓글 목록(CommentList) 컴포넌트 작성 3. 리스트 컴포넌트를 실제로 화면에 렌더링 하기 위해 index.js 수정. 4. 리액트 애플리케이션 실행 🎨 댓글 모양 CSS 스타일 적용 5. 댓글 모양 처럼 보이도록 Comment 컴포넌트에 css 스타일을 작성 후 컴포넌트 코드 변경..

🧹 두서없이 적는 쉬운 정리 1. 함수 컴포넌트는 정말 함수처럼 생겼다. 2. 리액트 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트로 나뉜다. 3. 모든 클래스 컴포넌트는 React.Component를 상속받아서 만든다. 4. 컴포넌트 생성 시 첫 글자는 대문자여야 한다.(소문자는 HTML 태그로 인식됨) 5. 이렇게 만들어진 컴포넌트는 엘리먼트를 출력하고 렌더링을 통해 브라우저에 보이게 된다. (자세한 내용은 아래 참고) 🎅🏻 Components의 역사 리액트 컴포넌트는 아래 그림처럼 크게 클래스 컴포넌트와 함수 컴포넌트로 나뉜다. 초기 버전에는 클래스 컴퍼넌트를 주로 사용하였다. 하지만 클래스 컴포넌트가 사용하기 불편하다는 의견이 많이 나와 함수 컴포넌트를 주로 사용하게 되었다. 함수 컴포넌트를 개선하는..

🧹 두서없이 적는 쉬운 정리 1. Props의 중요한 특징은 Read-only 즉 읽기 전용이므로 변경이 불가하다. 2. 다른 Props의 값으로 엘리먼트를 생성하려면새로운 Props 값을 컴포넌트의 전달하여 새로 엘리먼트를 생성하면 된다. 3. 위 과정에서 엘리먼트가 다시 렌더링 된다. 4. Props의 값을 넣을 때 문자열 이외 [정수 변수 그리고 다른 컴포넌트 등]이 들어갈 경우 중괄호 {} 를 사용해서 감싸 주어야 한다. 5. Props는 자바스크립트 객체가 된다. 6. JSX 를 사용하는 경우에는 간단하게 컴포넌트의 Props를 넣을 수 있다. 7. JSX를 사용하지 않는경우에는 React.createElement()를 사용하면 된다. (비추천) (자세한 내용은 아래 참고) Props의 특징 P..

🧹 두서없이 적는 쉬운 정리 1. 리액트는 컴포넌트 기반의 구조가 특징이며 모든 페이지가 컴포넌트로 구성되어 있다 2. 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다. 4. 다시 말해 컴포넌트들은 마치 내고 블록을 조립하 듯 끼워 맞춰 새로운 컴포넌트를 만들 수 있다. 5. 재사용성 코드 양 감소로 인하여 자연스레 개발 시간과 유지보수 비용도 줄일 수 있다. 6. 컴포넌트는 자바스크립트의 함수와 비슷한데 입력은 Props라는 것이고 출력은 리액트 엘리먼트이다. 7. 컴포넌트는 만들고자 하는 대로 Props 즉 속성을 넣으면 해당 속성에 맞춰 화면에 나타난 엘리먼트를 만들어 주는 것 8. 하나의 컴포넌트로 여러 개의 엘리먼트를 찍어낼 수 있다.(붕어빵 틀 -> 붕어빵(슈크림, 팥..