티스토리

자몽 DevLog

검색하기

블로그 홈

자몽 DevLog

jamong.tistory.com/m

_자몽 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[2024.07.23] storybook + cva 공통 컴포넌트 개발 다 잘 동작하는데 색상에 관련된 css만 안되는 이유를 모르겠다... 공감수 0 댓글수 0 2024. 7. 24.
[2024.07.19] 최종프로젝트_코드 컨벤션, github rules, 모델 체크 다음주부터 시작하는 본격적인 개발에 앞서 마지막으로 주어지는 최후의 주말을 하루 앞둔 금요일~ 부족한 부분이 많은데 주말에 좀 많이 채워넣어야겠다오늘 한 일1. 코드 컨벤션, github rules 정하기2. 프로젝트 세팅 논의 조금3. 모델 체크 공감수 0 댓글수 0 2024. 7. 22.
[2024.07.18] 최종프로젝트_기능 논의 튜터님과의 아침 회의@ 튜터님:1. 모바일 first로 작업 했으면2. 모바일 뷰로 한 페이지가 나오면, 그 데스크톱 뷰가 와이어프레임 수준으로는 나왔으면뒤늦게 모바일 버전이 데스크톱 버전으로 할 때 호환이 안되는 경우가 있을 수 있음=> 이번 프로젝트는 보통 데스크톱을 우선시 하여 개발하던 이전과 다르게 모바일을 우선시 하여 개발하게 되었다. 처음 해보는 방식이라 익숙치 않아도 이 방법의 장점이 부각될 수 있었으면 좋겠다! 오후 회의디자이너님이 가져오신 IA와 레퍼런스 보면서 기능 논의하는 시간을 가졌다. 확실히 추상적으로 머릿속에 있는 아이디어만으로 서로의 의견을 나누는 것 보다, 무언가 시각적으로 볼 게 있으니 좀 더 명확한 의사결정을 내릴 수 있었다. 공감수 0 댓글수 0 2024. 7. 19.
[2024.07.11] 팀 프로젝트_재배치 기능 오늘의 기능 개선: 재배치 버튼 추가기존의 재배치 기능은 리스트에서 드래그를 통해 이루어졌는데, 자칫 클릭하다가도 의도치 않게 위치가 수정될 수 있어 '재배치' 버튼을 만들어 해당 버튼 활성화 상태에서만 위치를 수정할 수 있게 변경하였다. 공감수 0 댓글수 0 2024. 7. 12.
[2024.07.08] 심화 프로젝트 시작 오늘 한 일알고리즘 코드카타 풀이 수업심화프로젝트 발제기획 및 디자인챌린지반 수업SSR을 활용한 SUPABASE 로그인/회원가입 기능벌써 최종 프로젝트 이전 마지막 프로젝트! 준비한 기획이 우연찮게 선정되어 진행되었는데, 내배캠 참여 이전에 조금 생각만 해본 구성이 이제는 간단해보여서 뭔가 뿌듯하다. 한 줄 정리 : 모임이 끝나고 후기를 전할 수 있는 롤링페이퍼 프로젝트기획 의도 : 어떤 모임을 마치고 소감은 듣고 싶은데, 막상 부탁하기 어려울 때! 어땠어?를 사용해보는건 어떨까요?(팀플을 마치고, 회의를 마치고, 어떤 모임을 마치고) 공감수 0 댓글수 0 2024. 7. 9.
[2024.07.05] Next.js 14의 loading.tsx와 suspense Next.js에서 데이터 로딩 상태를 표현하기 위한 방법으로 loading.tsx와 suspense를 적용해 보기로 했다. 🍀 도입배경Toss의 SLASH21의 '프론트엔드 웹 서비스에서 우아하기 비동기 처리하기'라는 세션을 보고 인상 깊은 내용이 있어 적용해보고자 했다. 로딩과 에러 상태를 매 페이지마다 useState나 useQuery문 등으로 관리하기에는 비효율적인 것 같아 부분적으로 Suspense와 ErrorBoundary를 사용하면 코드의 중복도 줄이고 로직도 이해하기 편해지지 않을까?라는 생각으로 개인 프로젝트 때 도입해 보았다. 🔥 하지만 실패와 실패...Next.js 14에는 클라이언트 사이드일 경우 로딩 상태를 감지하여 loading.tsx의 내용을 보여주는 내부 기능이 탑재되어 있.. 공감수 0 댓글수 0 2024. 7. 8.
[2024.07.04] Suspense 수난기 더 좋은 코드를 만들어 보려고 시작한 suspense 기능이 생각보다 많은 시행착오를 동반했고, 3일간의 사투 끝에 해결방법을 알게 되었다.. 최종적으로는 useSuspenseQuery와 dynamic의 조합으로 성공했으나, 아직 해결못한 부분이 남아있어 내일 포스팅에 합쳐서 기재할 예정 공감수 0 댓글수 0 2024. 7. 5.
[2024.07.03] Suspense 렌더링 시점 기존 PokemonList의 로딩 상태를 해당 컴포넌트 내에서 처리하는 게 아닌, 컴포넌트에서는 성공한 사례만 남기고 로딩이나 에러는 외부로 위임하기 위해 분리작업 중에 suspense를 사용하는데 도저히 작동하지 않는다...새벽 4시가 넘어서야 원인을 찾았다(하루 종일 구글링만...) 의 동작시점Suspense는 컴포넌트 렌더링 시점에 작동하는데, useEffect는 컴포넌트 마운트 시점에 동작한다. 때문에 useEffect 내에서 fetch가 이미 다 이루어졌기 때문에 Suspense가 이를 감지하지 못했던 것이었다. 드디어 원인을 알았으니 내일은 해결방법을 모색해서 꼭 해결되면 좋겠다. 더불어 공부하면 할수록 React 생명주기에 대한 공부가 더 필요하단걸 절실히 체감중인데, 최종 프로젝트 전에 시.. 공감수 0 댓글수 0 2024. 7. 4.
[2024.07.01] next.js 개인과제 트러블슈팅_외부 이미지 사용 이번주차 과제는 귀여운 포켓몬 도감을 만드는 일! next.js를 많이 사용해보지 않아 어색하고 모르는 부분도 많지만, 그만큼 트러블 슈팅 회고할 내용이 많아지니 좋은 게 아닐까? next.js는 알아갈 내용이 너무 많아서 요즘 하루하루가 새롭다. 이 글을 작성하고 있는 새벽에도 방금 전까지 오류와 싸우고 왔다...(이겼지요~)외부 이미지 사용 에러이렇게 외부 API를 사용하여 포켓몬들의 리스트들을 격자형태로 만들어주는 것이 시작이었는데, 정적인 이미지 파일이 아닌 외부의 이미지 파일을 사용하려니 아래와 같은 에러가 생겼다 왜 이런 오류가 생길까?next/image는 성능 최적화를 위해 이미지 로딩을 관리하는 컴포넌트로, 이미지 호스트를 명시적으로 지정해야 한다. 이를 통해 외부 이미지 URL을 사용할 .. 공감수 0 댓글수 0 2024. 7. 2.
[2024.06.28] next.js 공부 타입스크립트를 넘으니 next.js가 반갑게 맞이해준다... 이것도 얼른 해봐야지 ※ laytout.tsx에 과 는 있는데 가 없는이유 - metadata라는 정해진 이름의 변수 => 즉, 메타데이터에 의해 설정되거나, next.js로 인해 이면에서 자동으로 설정됨※ components 폴더 위치: next.js 공식문서에서는 다양한 방법의 폴더구조를 소개함. 선호되는 것은 app 폴더 밖에 위치시키는 건데, 그러면 app 폴더를 라우팅과 그에 관련된 일에만 사용할 수 있기 때문임. ※ next.js의 보호된 파일명: 이 파일명들은 app 폴더 내부에서 생성될 때만 특별한 역할을 하며, app 폴더 외부에서는 특별한 방식으로 처리되지 않음. - page.js: 신규 페이지 생성 - layout.j.. 공감수 0 댓글수 0 2024. 6. 28.
[2024.06.27] 타입스크립트 개인과제 완성 오늘 한 일1. [개인 과제] api와 컴포넌트 useEffect 내 중복 try~catch 문 제거2. [개인과제] loading, error 상태에 따른 안내문 추가3. [연습] Next.js + typescript + tailwind css로 미니 프로젝트 시작 typescript와 next.js를 비교적 많이 사용해보지 않았고, 역시 맨땅에 헤딩하는 것이 가장 빠르게 실력을 늘리는 길 같아서 일단 무언가 시작했다. 주말까지 투자해서 무언가 의미있는 성과가 있었으면 좋겠는데, 요즘 세운 계획이 순탄하게만 굴러가지 않아 아쉬운 하루하루 공감수 0 댓글수 0 2024. 6. 28.
[2024.06.26] Toss Frontend Accelerator 지원후기 매일 여러 개발 글을 탐험하다가 본 Toss Frontend Accelerator 프로그램. 정말정말 좋은 기회고 되면 좋겠다 싶지만 테스트도 있고 커피챗까지 있는 걸 봐서 지원하고, 지원한 모두에게 주어지는 테스트를 맛볼 수 있는 기회이기에 지원해 보았다.최근 기술 공부만 하느라 너무 늦게 글을 발견해서 마지막 문항을 채우지도 못하고 제출해서 마음을 이미 비웠지만, 그래도 토요일에 재밌는 테스트를 볼 수 있으면 좋겠다!! 어떤 문제가 테스트로 나올지 기대 가득한? 더 성장할 수 있을 것 같은 기회가 지원서도 제대로 마무리 못한 채 막을 내려 아쉽지만 지금 산더미처럼 쌓인 공부거리나 열심히 해야겠다..그래도 지원 문항에서 스스로를 되돌아보고, 어떤 개발자가 '잘하는 개발자'일지 고민도 해보고, 2024년.. 공감수 0 댓글수 0 2024. 6. 27.
[2024.06.25] 프로그래머스_예산(Summer/Winter Coding(~2018)) 오늘의 알고리즘으로 풀어본 문제!문제 풀이를 위한 생각1. 많은 부서의 물품 구매하려면? -> 신청한 금액이 적은 부서부터 처리2. 신청 금액 별로 정렬하려면? -> sort() 사용(오름차순) -> 시간 복잡도 n log(n)3. 예산에서 정렬된 부서별 신청 금액을 순차적으로 삭감 3-1. 예산이 소진된다면 순회 끝내기 문제 풀이처음 생각한 대로 코드로 작성하니 정상적으로 잘 작동하였다. for문을 쓸지 다른 내장함수를 사용할지 고민했는데, 3-1 예산이 소진될 경우 순회를 끝내기 위한 로직을 넣기 위해선 for문이 좀 더 효과적이라 생각하여 사용하였다. 공감수 0 댓글수 0 2024. 6. 26.
[2024.06.24] 타입스크립트 개인 주차 과제 이번주는 타입스크립트에 익숙해지는 시간인데, 하도 예전 프로젝트에서 타입스크립트 때문에 골머리를 앓았던 기억이 있어 더 열심히 살아야 하는 한 주가 될 것 같다.구현 자체는 간단해보이나, api를 타입스크립트를 적용해 가져오는 걸 연습해 보라고 하시는 건지 api 개수가 많다... 그런데 api에 필요한 값만 타입을 지정하면 될 것 같은데, 모두 한 번 연습차 써봐야 하나 고민 중이다. 공감수 0 댓글수 0 2024. 6. 26.
[2024.06.21] 아웃소싱 프로젝트 트러블슈팅회고(3-feet) 2024.06.17~21, 5일 동안 진행된 아웃소싱 프로젝트프로젝트 주요 내용: https://github.com/hyeonseok98/3-feet 상세 페이지를 맡으며팀원들끼리 기능 역할분담을 하며 상세 페이지를 맡았을 때는 그렇게 어려운 작업 없어 보여서 '금방 끝나겠네'라는 생각을 조금 했었다. 하지만 디테일을 하나 둘 챙기다 보니 결코 작업량이 적지 않았다. 이렇게까지 디테일적인 부분을 많이 챙겨본 것은 처음이지만 확실히 꼼꼼할수록 사용자의 편의성이 크게 향상되는 것 같았다. 디테일 1. 상세페이지를 모달로?말 그대로 상세 '페이지', 어제자 TIL에 썼듯 지도 api와 숙소/맛집 api를 활용하는 페이지에서 사용자는 여러 숙소나 맛집 정보를 빠르게 확인하고 싶을 텐데 매번 페이지를 이동하게 되.. 공감수 1 댓글수 0 2024. 6. 22.
[2024.06.20] 모달에 Query string을 사용해 주소값 부여하기 Query String구상한 와이어프레임을 보면 MAP 페이지에는 지도 api와 숙박/맛집 정보를 가져오는 api까지 사용하여 서버와 통신할 일이 많은 작업이 포함되어 있어, 디테일 페이지로 이동하고 다시 돌아오면 괜한 로딩시간만 더 생기지 않을까 생각하였다. 때문에 디테일 페이지를 모달 형태로 띄워 뒤에 지도나 숙박/맛집 정보는 리렌더링 되지 않도록 하는 방법을 선택하였다.다만 이럴 경우 모달을 띄운 상태로 새로고침을 하게 되면 모달 창이 유지되지 않기에 튜터님의 도움을 받아 query string을 이용해 주소값을 부여하였다. 공감수 0 댓글수 0 2024. 6. 21.
[2024.06.19] 상세페이지 모달 UI구성 + 공통 컴포넌트에 대한 고민 공통 컴포넌트 BigModal, Modal 제작공통 컴포넌트를 만드는 도중 크기와 용도가 다른 모달을 하나로 합쳐야 하나 아니면 분리를 해야 하나 고민이 많았다. 괜히 하나의 주제로 여러 개를 만들면 괜한 리소스가 낭비되는 게 아닌가 싶었기 때문인데, 많은 구글링 끝에 이 글을 보고 분리하기로 결정했다.더 가치 있는 공통 컴포넌트 만들기: KAKAO 기술 블로그URL: https://fe-developers.kakaoent.com/2024/240116-common-component/'공통'이라는 말의 선입견 때문에 반드시 하나를 재사용성 높게 구현해야 한다고 생각했는데, 오히려 그 생각이 독이 된 케이스였다. 해당 공통 컴포넌트에서 지향하는 방향과 확장성에 대해 더 고민해 볼 수 있던 기회였고, 결과적으.. 공감수 0 댓글수 0 2024. 6. 21.
[2024.06.18] JS Deep Dive_27. 배열 + 문자열 계산이 비효율적인 이유 자바스크립트 딥다이브를 공부하며 공부하는 내용이 지난 알고리즘 심화반에서 한 내용과 연관 지어 기록해 두기 ※ 배열여러 개의 값을 순차적으로 나열한 자료 구조요소(element): 배열이 가지고 있는 값으로, 자바스크립트의 모든 값은 배열의 요소가 될 수 있음인덱스(index): 요소가 배열에서 자신의 위치를 나타내는 0 이상의 정수로, 배열의 요소에 접근할 때 사용 ※ 일반적인 자료구조 배열밀집 배열자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조 ※ 자바스크립트의 배열희소 배열배열의 요소가 연속적으로 이어져 있지 않는 배열 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져 있지 않을 수도 있음 따라서 엄밀히 일반적인 .. 공감수 0 댓글수 0 2024. 6. 19.
[2024.06.17] 새로운 팀 프로젝트 시작_아웃소싱 프로젝트 아웃소싱 프로젝트는 특정 업무나 프로젝트를 회사 내부의 팀이 아닌 외부의 전문 회사나 프리랜서에게 의뢰하여 수행하는 것을 의미하는 것으로, 외주를 할 때 많이 사용하는 api를 사용해 보는 의미를 가진다고 한다. 1. 어떤 주제를 선택할까?필수 구현 사항 중에 지도 api, 유튜브 api, 설문조사 중 하나의 주제를 정해서 팀 프로젝트를 진행하는 한 주. 유튜브 api는 무언가 youtube의 일부 기능 구현의 느낌이고, 기획 당시 설문조사는 자유도가 조금 낮아 보여서 다방면에서 사용될 수 있는 지도 api를 선택했다. 2. 어떤 api를 사용할까?필수 구현 사항에 지도 api가 있다는 걸 보자마자 이전에 참여하려고 준비했었던 '2024 관광데이터 활용 공모전'이 떠올랐다. 공모전에 권장되는 Tour-.. 공감수 0 댓글수 0 2024. 6. 18.
[2024.06.15~16] 리액트 테스트 주말 동안 내배캠 챌린지 반 녹화된 강의를 모두 돌려보면서 복습 한 번 진행하고, 과연 테스트 코드가 무엇일지 궁금해서 조금이나마 도전해 보았다. Q. 테스트는 QA팀이 있잖아!보통 소프트웨어를 검증하는 QA(Quality Assurance) 팀이라는 테스트 하는 조직이 있지만, 점차 공부해 나가면서 프론트엔드단에서 테스트라는 용어가 많이 들려서 과연 프론트엔드가 어떤 테스트를 진행하는지 궁금해져서 주말에 시간을 내 보았다.단위 테스트: 상호작용 하지 않는 독립적인 함수, 모듈, 클래스를 테스트통합 테스트: 묶었을 때 상호작용 테스트(모듈들, 클래스들)E2E 테스트(end-to-end): UI 테스트, 사용자 테스트단위 테스트 → E2E 테스트로 갈수록 cost가 비싸지고, 작성하기 까다로워짐 / 테스트.. 공감수 0 댓글수 0 2024. 6. 18.
[2024.06.14] 프로그래머스_다음 큰 숫자 알고리즘 심화반 타임어택 문제로 선택된 문제. 확실히 한 주 동안 풀어본 유형을 내주셔서 생각보다 빠르게 풀 수 있었다. 프로그래머스_다음 큰 숫자처음에는 재귀로 풀어야 할까? 생각하다가 좀 더 단순하게 생각했다. NumberOfOne이라는 함수를 만들어 1의 개수를 세었고, 이 함수에서 toString()과 match()는 모두 O(log n)의 시간 복잡도를 가진다. 따라서 solution 함수에서는 targetNumber의 초기값을 선언하고 while문의 조건문을 실행할 때 O(log n), while 루프를 돌 때 O(n)의 시간복잡도를 가짐으로 최종적으로 O(n)으로 계산하였다. 이것보다 비트 연산을 통해 더 빠르고, 시간 복잡도도 줄이는 방법이 있었는데 많이 난해하여 실제 적용하긴 어려울 듯하.. 공감수 0 댓글수 1 2024. 6. 17.
[2024.06.13] React 심화 프로젝트_가계부(95% 완성) 어느 정도 완성해서야 생각하지만, 아예 심화과제를 받았을 때부터라도 tailwind css로 리팩토링을 하고 진행했으면 어떨까 하는 아쉬움이 조금 남지만 이미 돌아가기에 너무 멀리 와버렸다. 이번 프로젝트는 styled-components로 마무리하고 다음 프로젝트 때부터 tailwind를 더 많이 써보기로! ※ 추가된 프로젝트 기능1. Header Nav 바 구현헤더는 글래스 모피즘으로 구성하였고, 홈으로 이동할 수 있는 로고, 마이페이지 이동 이미지, 로그인/로그아웃 버튼이 위치해 있다. 마이페이지 이미지는 로그인했을 때만 노출된다.2. jwt 인증 서버를 통한 로그인/회원가입 기능로그인을 하지 않으면 메인 페이지로 이동이 불가능하게 하였으며, 로그아웃 시에도 로그인 화면으로 되돌아온다.3. 마이 페.. 공감수 0 댓글수 0 2024. 6. 13.
[2024.06.12] React 심화과정 개인 프로젝트 기존에 진행한 프로젝트에 이어서 jwt 인증을 이용한 로그인/회원가입, json-server를 통해 Restful 하게 구현하기, Zustand 사용, Tanstack Query 이용하기 등 다양한 도전과제들이 추가된 이번 과제!처음 발제날 들을 땐 상당히 빡빡한 일정인 것 같았는데, 인증/인가 기능을 구현한 이후는 뭔가 9부 능선 넘은 것 처럼 수월하게 풀렸다. 다만, 익숙하지 않은 Tanstack Query를 사용하는데 반갑지 않은 오류를 만나고, 아직도 access Token을 header에 추가하여 보내는 과정은 뭔가 두리뭉실하게 알고 있는 느낌이다.하루를 꼬박 과제에 투자하니 어느정도 완성되었다! 트러블 슈팅도 크게 있지 않아 작업 과정은 내일 TIL에 모아서 올려야겠다.. 공감수 0 댓글수 0 2024. 6. 12.
[2024.06.11] 프로그래머스_최솟값 만들기 지난 알고리즘 심화수업을 들은 이후 문제 풀이에만 집중하는 것 보다, 제한사항을 보고 시간복잡도를 먼저 생각한 뒤 알고리즘을 구현하려고 스스로 생각하고 있다. 해당 문제는 A와 B 배열을 가지고 (A최소값 x B최대값) + ... + (A 최대값 x B 최소값)이 될 수 있게 로직을 구현해야 함으로 최소 2번의 정렬과정을 거쳐야 한다. 그리고 계산된 값의 누적합을 구해야 함으로 reduce를 한 번 사용하였다. sort의 시간 복잡도는 nlog(n)이고, reduce는 log(n)이기에 최종적으로 코드의 시간 복잡도는 nlog(n)이 된다. 공감수 0 댓글수 0 2024. 6. 12.
[2024.06.10] 프로그래머스_최댓값과 최솟값 + 자바스크립트 내장함수 지난주 알고리즘 심화반 과제 중 하나였던 최댓값과 최솟값. Math.min()이 시간복잡도가 O(n^2)인 줄로 착각했어서 nlog(n)의 sort()로 풀었다... 튜터님의 설명과 함께 다시 한번 코드를 살펴볼 수 있어서 다행이었다. 평생 착각할 뻔또한 자바스크립트의 내장함수는 v8엔진 위에서 c++로 작동하기 때문에 일반적으로 자바스크립트에서 for문을 순회하는 등의 비슷한 작업과 비교하면 내장함수가 더 속도가 빠르다고 한다. 내장 함수에 어떤 로직이 쓰였나 생각해 본 적이 많지 않아 눈에 보이는 안전한 for문을 더 많이 애용했던 것 같은데 이 점도 신기했다. 공감수 0 댓글수 0 2024. 6. 11.
[2024.06.08~9] 웹 디자인 공부_grid 잡기 프론트엔드 개발을 하다 보면 디자이너와의 협업은 필수인데, 지금도 팀 프로젝트를 하면서 조금씩 디자인을 할 일이 있기도 하고 깔끔하고 접근성 좋은 UI를 만들기 위해 종종 웹 디자인을 찾아보곤 한다. 가장 많이 참고하는 Madia Designer님 채널https://www.youtube.com/watch?v=X18sPNdD8yw&list=LL&index=6 평소 피그마 디자인을 할 때에는 여백과 간격만 신경 썼는데, 이번 기회로 그리드를 먼저 잡고 형식에 맞춰 디자인해보고 싶었다. 다만 마땅한 자료와 시간이 없어 점점 미루게 되었는데 이번 기회에 한 번 따라 연습해 보았다. 비록 포토샵 자료지만 기본기를 익히는데 문제없었고, 최근에 figma 끝장 강의 3시간짜리를... 올려주셔서 조금씩 나누어 보고 있.. 공감수 0 댓글수 0 2024. 6. 11.
[2024.06.07] 뉴스피드 프로젝트 완성_트러블 슈팅 경험 회고 드디어 약 일주일에 걸친 뉴스피드 프로젝트가 완성되었다. 짧은 시간이기에 원하는 기능을 전부 선보이진 못하였어도, 다 같이 노력하여 만족스러운 페이지가 나왔다. 보완점도 좀 있고 아쉬움도 남아야 프로젝트가 제대로 진행된 느낌이 든다. 날밤 새면서 정말 고생한 팀원들👍👏 👍 👏 그중 내가 맡았던 상세 페이지 및 글 작성 기능 구현 중 있었던 트러블 슈팅 혹은 새롭게 작업해 본 기능들을 정리해보려 한다. 1. 늘어나는 textarea 만들기보통 textarea는 지정된 height를 넘으면 스크롤이 생기는데, UI적으로 예쁘지 않고 한눈에 모든 글을 확인할 수 없다는 점 때문에 늘어나는 textarea를 만들어 보았다. textarea를 useRef를 통해 DOM 조작할 수 있게 설정한 뒤, han.. 공감수 0 댓글수 0 2024. 6. 7.
[2024.06.06] 뉴스피드 프로젝트_마무리 작업 새벽까지 팀원들과 작업하니 느낌이 새롭다... 힘든데 재밌는 느낌이라 오묘하다. 프로젝트 마감 전날이라 짧게 작성 1. 댓글기능 완성이전에는 댓글 위치만 레이아웃으로 위치만 시켜두었는데, 오늘에서야 최종적으로 기능 완성을 시켰다. 본인 댓글만 수정/삭제 가능하게 하였고, 언제 댓글이 달렸는지 확인할 수 있게 하였다. 2. 에디터에 사진이 삽입되지 않는 이슈계속 자료를 찾아보았지만 아직 해결이 되지 않았다... 에러도 뜨지 않아 어디가 문제인지 찾기 어려운 상황 조금 힘들어도 마음에 드는 결과물이 나올 수 있도록 다들 파이팅~ 공감수 0 댓글수 0 2024. 6. 7.
[2024.06.05] 썸네일 이미지 등록, react-quill 상세페이지 bold 적용 안되는 문제해결 1. 썸네일 페이지 제작메인 페이지에서 사진과 함께 포스트의 설명을 볼 수 있도록 썸네일을 작성할 수 있는 기능을 추가하였다. 썸네일 사진은 drag&drop 방식으로 사진을 가져와서 업로드할 수 있게 만들어 보았다. 파일 이미지의 크기 제한은 supabase에서 손쉽게 제한할 수 있었다.drag&drop 방식 2. react-quill 상세페이지 bold 적용 안되는 문제이전에 에디터의 bold가 되지 않은 현상은 에디터 자체에 bold 속성의 css를 추가해 준 것으로 해결하였는데, 이번에는 본문에 bold가 적용되지 않았다. 심지어 그 외 커스텀으로 추가한 다양한 속성들도 에디터에서만 변화하고 본문에는 적용이 안 되는 이슈가 있었는데, 여러 자료를 찾아본 결과 본문에도 css를 추가해 주어야 된다.. 공감수 0 댓글수 0 2024. 6. 7.
[2024.06.04] react-quill 에디터 bold, underline 안되는 오류 프로젝트 내 '새 글 작성' 기능을 위해 에디터를 추가하는 작업 중에 다른 기능은 되는데 bold와 underline 기능만 작동하지 않아서 한참 헤맸다. 해결 방법은 import 해 온 Reactqill태그를 통해 에디터 자체의 설정을 추가해 주는 것! 라이브러리가 최신화가 되지 않아 발생할 수 있다 해서 가장 최근 버전으로도 재설치해보고, 다른 방법들을 해보아도 결국엔 이 방법으로만 해결되었다. 어찌 보면 간단한데, 공식문서나 스택오버플로우를 뒤적여보아도 해결방법이 나오지 않아 github까지 찾아보았다. 참고한 링크는 아래에 첨부! ※ 해결 출처: https://github.com/slab/quill/issues/1671 공감수 0 댓글수 0 2024. 6. 4.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.