HYEWON JUNG의 개발일지

목표 supabase storage post bad request 400 / 403 해결하기 첨부파일 업로드하기 목록페이지 콘텐츠 편집 상세페이지 틀 만들기 새로 알게 된것/ 오늘의 코드 1. supabase storage post bad request 400 / 403 해결하기 코드상에 이상이 없는데도 계속 오류가 나고 있었다. 특히 unauthorized 오류의 경우 팀원분이 이미 해결한 오류라서 별 문제 없이 진행이 될 줄 알았다. 첫번째 팀원분이 했던 방법은 storage에 policy를 수정하는 것이었다. 스토리지에서 policies를 누른 뒤 policy가 없는 경우 new policy를 눌러서 추가해주면 된다. for full customization을 눌러서 이렇게 설정을 해주는 것이다.!..

목표 라이브러리 비교 후 변경 또는 유지 새로 알게 된것/ 오늘의 코드 react-draft-wysiwyg의 특징 const contentState = content.getCurrentContent(); const rawContentState = convertToRaw(contentState); const htmlContent = draftToHtml(rawContentState); 변환을 꼭 거쳐야하고 htmlContent는 html 태그 안에 쌓인 콘텐츠가 있다. 그래서 read해올 때 이렇게 파싱을 해줘야한다. 또한 툴바를 유연성있게 사용할 수 있다는 장점이 있다고 하지만 quill에서도 비슷하게 어느정도 할 수 있다. 또한 툴바에 기본 텍스트 핸들링은 있지만 이미지 핸들링같은 첨부는 전혀 없는 것..

목표 텍스트 에디터 적용하기 새로 알게 된것/ 오늘의 코드 wysiwvg 는 What You See Is What You Get의 약자로 사용자가 에디터에서 작성한 콘텐츠의 최종 출력물이 화면에서 어떻게 보일지를 실제로 보여주는 편집 환경을 말한다. wysiwvg 라이브러리는 여러개가 있는데 대표적으로 quill과 react-draft-wysiwyg 이 있는데 작성하다보니 quill을 사용했어야 했나 싶다! 지금 사용하고 있는 react-draft-wysiwyg 는 사용이 많아서 구글링이 용이하기 때문에 이용을 했는데 잔버그도 많고 변환해줄 것이 많다. 구글링을 하다 발견한 것인데 이미지를 넣고 글자를 넣으면 오류가 난다는 말도 있어서 프로젝트가 더 진행되기 전에 바꿔야 하나..? 고민이다... reac..

Supabase Storage를 사용할 경우, 이미지 파일을 저장하고 해당 이미지 파일의 URL을 받아와서 블로그 글에 삽입할 수 있습니다. 이때, 이미지 URL을 저장하는 별도의 테이블의 column이나 필드가 필요하지 않을 수 있습니다. 보통의 구조는 다음과 같습니다: Supabase Storage: 여기에는 이미지 파일 자체가 저장됩니다. Supabase Database (Table for Blog Posts): 블로그 글의 내용, 제목 등을 저장하는 테이블이 있습니다. 이미지를 포함하는 경우, 이미지의 URL이나 파일 경로는 이 테이블에 저장하지 않을 수 있습니다. 이미지 URL을 저장하는 별도의 column이나 필드를 테이블에 저장할 필요는 없으며, 필요한 경우 해당 이미지를 나타내는 부분에 이..

목표 데이터 CR하기 새로 알게 된것/ 오늘의 코드 supabase 세팅하기 supabaseClient.ts import { createClient } from '@supabase/supabase-js'; const supabaseUrl = '각자 url'; const supabaseKey ='각자의 key'; export const supabase = createClient(supabaseUrl, supabaseKey); 데이터를 읽어오는 법 const [posts, setPosts] = useState([]); useEffect(() => { const getPost = async () => { try { let { data: community, error } = await supabase .from..

Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요 recoil이 있다. recoil은 context API 기반으로 함수형컴포넌트에서만 사용 가능한 전역상태 라이브러리다. 리덕스와의 차이는 첫번째는 상태 저장 방식입니다. 리코일의 경우 atom이라는 단위로 분산 저장을 하고 리덕스는 스토어라는 하나의 저장소에 집중저장합니다. 두번째는 렌더링 최적화 방식입니다. 리덕스에서는 상태에 의존하지 않는 컴포넌트는 불피요한 렌더링을 하지 않도록 해주고, 리코일의 경우 컴포넌트가 구독하는 atom이 변경되었을 때만 렌더링되어 최적화를 해줍니다. 버츄얼 돔과 리얼 돔의 차이를 설명해주세요. Real DOM은 실제 페이지를 이루는 컴포넌트인 엘리먼트를 tree 형태로 표현한 것이고, 엘리먼트의 자식..