목록개발일지 (74)
HYEWON JUNG의 개발일지
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/XKzHM/btsDs4Y9QeL/nQlWFKGRQZZSCbeobfBq90/img.png)
목표 라이브러리 비교 후 변경 또는 유지 새로 알게 된것/ 오늘의 코드 react-draft-wysiwyg의 특징 const contentState = content.getCurrentContent(); const rawContentState = convertToRaw(contentState); const htmlContent = draftToHtml(rawContentState); 변환을 꼭 거쳐야하고 htmlContent는 html 태그 안에 쌓인 콘텐츠가 있다. 그래서 read해올 때 이렇게 파싱을 해줘야한다. 또한 툴바를 유연성있게 사용할 수 있다는 장점이 있다고 하지만 quill에서도 비슷하게 어느정도 할 수 있다. 또한 툴바에 기본 텍스트 핸들링은 있지만 이미지 핸들링같은 첨부는 전혀 없는 것..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dYB3Xo/btsDkzLfzxj/tvn1Jfmd7KystyzGexBpn1/img.png)
목표 텍스트 에디터 적용하기 새로 알게 된것/ 오늘의 코드 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 형태로 표현한 것이고, 엘리먼트의 자식..
토요일에 해커톤을 진행했다. 기업과제에 협업을 늘릴 수 있는 기회라고 해서 도전했다. 과제자체는 조금 간단한 편이었고 지금까지 배운 것을 활용하면 할 수 있을 정도였다. 물론 typescript로 해보진 않았지만.. 하지만 8시간이라는 시간안에 구현하기에 지금까지 배운 것으로 하기에 조금 나태한 것 같아 새로운 것을 적용해 보기로 했다. ui 자체는 전에 사용했던 것을 그대로 사용했다. 내가 사용한 것은 react-hook-form 라이브러리와 yup 이다. 차례대로 작성을 해보겠다. 라이브러리 설치 yarn add react-hook-form yup @hookform/resolvers schema 설정해주기 const schema = yup.object().shape({ id: yup .string()..