분류 전체보기

1. 썸네일 페이지 제작메인 페이지에서 사진과 함께 포스트의 설명을 볼 수 있도록 썸네일을 작성할 수 있는 기능을 추가하였다. 썸네일 사진은 drag&drop 방식으로 사진을 가져와서 업로드할 수 있게 만들어 보았다. 파일 이미지의 크기 제한은 supabase에서 손쉽게 제한할 수 있었다.drag&drop 방식  2. react-quill 상세페이지 bold 적용 안되는 문제이전에 에디터의 bold가 되지 않은 현상은 에디터 자체에 bold 속성의 css를 추가해 준 것으로 해결하였는데, 이번에는 본문에 bold가 적용되지 않았다. 심지어 그 외 커스텀으로 추가한 다양한 속성들도 에디터에서만 변화하고 본문에는 적용이 안 되는 이슈가 있었는데, 여러 자료를 찾아본 결과 본문에도 css를 추가해 주어야 된다..

프로젝트 내 '새 글 작성' 기능을 위해 에디터를 추가하는 작업 중에 다른 기능은 되는데 bold와 underline 기능만 작동하지 않아서 한참 헤맸다. 해결 방법은 import 해 온 Reactqill태그를 통해 에디터 자체의 설정을 추가해 주는 것! 라이브러리가 최신화가 되지 않아 발생할 수 있다 해서 가장 최근 버전으로도 재설치해보고, 다른 방법들을 해보아도 결국엔 이 방법으로만 해결되었다. 어찌 보면 간단한데, 공식문서나 스택오버플로우를 뒤적여보아도 해결방법이 나오지 않아 github까지 찾아보았다. 참고한 링크는 아래에 첨부! ※ 해결 출처: https://github.com/slab/quill/issues/1671

프로젝트 내 글 작성 기능을 textarea를 통해서도 할 수 있겠지만, 좀 더 실제 사용되고 있는 서비스와 유사하게 작업하고 싶은 마음에 짧은 프로젝트 기간이지만 욕심내어 도입하기로 결정했다. 하지만 실제로 하나하나 구현하기에는 과하게 시간이 오래 걸리는 작업임을 알게 되었고, 텍스트 라이브러리 중 하나를 선택해야만 하는 상황이 되었다(그때까지만 해도 이렇게 종류가 많을 줄은 몰랐지)텍스트 에디터는 먼저 크게 markdown과 wysiwyg(위지위그) 형태가 있는데, markdown은 마크다운 문법을 사용하여 해당 문법에 익숙하지 않은 사용자가 사용하기에 어려움이 있을 것 같아 제외하였다. wysiwyg는 'What you see is what you get'의 약자로 내부적으로 마크다운 문법으로 변환..

이번 프로젝트에서는 상세 페이지와 새 글 작성 기능을 맡았는데, 오늘은 상세페이지 레이아웃 작업과 어떤 텍스트 에디터 라이브러리를 사용할지 찾아보았다.전체적인 모습을 캡처하기 위해 화면 비율을 75%로 줄였고, 아직 supabase를 연결해두지 않아 더미 데이터로 채워둔 모습이다. 추가적인 무언가를 더 넣어야 하나 생각하다가도 깔끔한 게 더 좋을 것 같아 넣지 않았다.   텍스트 에디터의 경우 Toast UI, React-quill, React-draft-wysiwyg 3개 중 하나를 선택하려고 범위를 좁혔고 내일 각각의 장단점을 더 비교해본 뒤 하나를 선택하려 한다. 여유로운 주말은 물건너 간듯 하다

백엔드를 따로 관리하기 어려운 프론트엔드 개발자들끼리의 협업에서 firebase는 낮은 러닝커브를 가지고, 폭넓은 생태계를 가지기에 손쉽게 접근 가능한 백엔드 플랫폼으로서 높은 위상을 가지고 있다. 하지만 이번 프로젝트에서는 supabase를 사용하는데, 구글이 관리하기에 어느 정도 신뢰성도 보장되며, 그 외 다양한 기능을 제공하는 firebase를 두고 왜 supabase를 사용하는 걸까?supabase는 PostgreSQL 기반으로 복잡한 쿼리와 트랜잭션을 지원하며 관계형 데이터 베이스를 사용하기에 보다 정교하고 직관적으로 DB를 확인할 수 있다. 또한 오픈소스 기반이기 때문에 발전 속도가 빠르며 자체 호스팅도 지원한다. 또한 DB, 인증, 스토리지 등 애플리케이션 개발에 필요한 필수 백엔드 기능을 ..

벌써 3번째 팀프로젝트 발제날! 뉴스피드라고 해서 grid 형태가 갖춰진 무언가라고 생각했는데, SNS, 블로그, 커뮤니티 등 상당히 범위가 넓게 잡혔다.   우리 팀은 깔끔한 UI로 평가받는 velog의 디자인을 조금 변형하여 제작해 보기로 하였고, 주제는 게임 뉴스피드로 결정되었다. 프로젝트 내 여러 기능 중 글 작성 및 상세 글 보는 페이지를 맡았는데, 처음 맡겠다고 했을 때는 간단할 줄 알았는데 에디터 라이브러리가 종류도 엄청 많고 사용법도 처음 보는 입장에선 꽤 복잡해서 생각했던 것보다 시간을 더 쏟아야겠다. 오늘은 팀 그라운드 룰을 정하고, 코드 컨벤션, 작업 환경 세팅을 주로 정했다. router를 설정하고 기본 globalstyle도 지정하고, prettier, eslint까지 우리 팀에 ..

tailwind css 사용 후 환경설정을 하는데 tailwind.config.js에서 다음과 같은 메시지가 떠서 어떤 종류인지 알아보았다.해당 메시지를 직역하자면 '파일은 CommonJS 모듈이며 ES 모듈로 변환될 수 있습니다'로 해석된다. 모듈? 모듈은 많이 들어봤는데 CommJS 모듈과 ES module이라는 것이 어떤 건지 모르기에 한 번 알아보았다. 1. Common JSCommonJS는 서버 사이드 JavaScript를 위해 개발된 모듈 시스템이며, Node.js가 이를 채택하면서 널리 사용되기 시작하였다. 때문에 Node.js 에서 자바스크립트 패키지를 불러올 때 사용되며, 브라우저에서도 사용될 수 있다. ※ Common JS 사용법모듈을 정의하고 내보낼 때 module.exports를 사..

※ Zustand? - Zustand는 리덕스의 복잡함과 너무 많은 보일러 플레이트를 극복하기 위해 나온 전역 상태관리 라이브러리로, 현재 낮은 러닝커브로 많이 사랑받고 있다. 그에 맞게 설치와 사용법도 무척 간단하다. 1. 설치npm i zustand 2. 사용법import { create } from 'zustand'// 함수를 넣어 객체를 리턴const useStore = create((set) => ({ count: 1, inc: () => set((state) => ({ count: state.count + 1 })),}))function Counter() { const { count, inc } = useStore() return ( {count} one up ..