본문 바로가기

Programing/TIL85

2024-05-31 Quill 에디터와 supabase를 연동한 글쓰기 페이지 // 지금은 협업 초기로 비교적 자세하게 주석을 달았습니다.// merge하는 과정에서는 필요한 주석만 남기고 제거하겠습니다. - 김병준 -import React, { useEffect, useState } from "react";import styled from "styled-components";import { useNavigate } from 'react-router-dom';import supabase from "../supabaseClient";import ReactQuill from 'react-quill';import 'react-quill/dist/quill.snow.css'; // Quill 스타일 import (글쓰기 에디터)const Container = styled.div` dis.. Programing/TIL 2024. 6. 3.
2024-05-31 리액트에서의 기본 문법 사용법 JSX프로젝트 셋업에서 가장 먼저 눈에 띄는 것은 App.jsx와 같은 파일들이다.이것은 jsx라는 문법을 사용하고, 콩글리쉬로는 '작스'라고 부른다.안의 내용을 보면 자바스크립트와 HTML이 혼합되어 있는 형태처럼 보인다. 그런데 실제로 HTML은 아니고, HTML과 거의 흡사하게 생긴 JSX라는 코드다.function App() { return ( Hello World! );}위 코드를 보면 자바스크립트 함수 안에 return 키워드 내부에 HTML을 사용 중인 것처럼 보인다. 위 코드는 사실 리액트에서는 아래와 같이 해석한다.function App() { return React.createElement("div", null, "Hell.. Programing/TIL 2024. 5. 31.
2024-05-30 리액트의 핵심, Virtual DOM이란? 리액트 공부를 시작하면서 빨리 코드를 작성할 생각만 했지 정작 리액트가 무엇인지 설명을 못하고, virtual DOM에 대해 묻는 과제의 질문에 답하지 못했다.오늘 숙련 과제 제출이 끝났으므로, 기본을 먼저 다지고 가려고 한다.리액트의 특징Virtual DOM리액트는 Virtual DOM을 사용한다.DOM은 Document Object Model의 약자로, 객체를 통해 문서 구조를 표현하는 방법이고, XML, HTML로 작성한다.DOM의 치명적인 단점 : 정적이다. 동적 UI에 최적화 되어 있지 않다. HTML 자체는 정적인 정보만 렌더링 해준다. 자바스크립트를 통해 동적으로 만들 수 있다.그런데 소셜미디어나 대규모 포털사이트와 같은 사이트에서의 DOM은 수 백, 수 천 개에 달한다. 사용자가 DOM을 .. Programing/TIL 2024. 5. 30.
2024-05-29 리덕스 개관 Redux의 기본 개념액션상태에 어떤 변화가 필요하면 action이라는 것이 발생한다. action은 하나의 객체로 표현된다. 이 액션 개체는 아래와 같은 형태로 이루어져 있다.{ type: 'TOGGLE_VALUE'}액션을 조금 더 쉽게 설명하자면 스토어라는 상태 중앙 저장소에 상태에 어떠한 변화가 일어났다고 보내는 메시지의 개념이다.액션은 자바스크립트 객체로 이루어져 있고, 리덕스에게 "이런 일이 발생했으니, 데이터를 바꿔주세요!"라고 요청하는 것이다.타입(type) 필드개발자가 자유롭게 작명하는 액션 객체의 이름임. 이를 통해 나중에 상태 업데이트 시 참고할 수 있음.{ type: 'ADD_TODO', data: { id: 1, text: '리덕스 배우기' .. Programing/TIL 2024. 5. 30.
2024-05-28 스탠다드 과제 - props-drilling을 context API 활용 리팩토링 하기 context API로 texts state 리펙토링 하기원본import React, { useState, useEffect} from "react";import TextInput from "./components/TextInput";import TextList from "./components/TextList";function App() { // TODO: texts 를 context api 로 리팩터링 하세요. const [texts, setTexts] = useState(() => localStorage.getItem("texts") ? JSON.parse(localStorage.getItem("texts")) : [], ); useEffect(() => { lo.. Programing/TIL 2024. 5. 28.

티스토리툴바