TIL

지난주 알고리즘 심화반 과제 중 하나였던 최댓값과 최솟값. Math.min()이 시간복잡도가 O(n^2)인 줄로 착각했어서 nlog(n)의 sort()로 풀었다... 튜터님의 설명과 함께 다시 한번 코드를 살펴볼 수 있어서 다행이었다. 평생 착각할 뻔또한 자바스크립트의 내장함수는 v8엔진 위에서 c++로 작동하기 때문에 일반적으로 자바스크립트에서 for문을 순회하는 등의 비슷한 작업과 비교하면 내장함수가 더 속도가 빠르다고 한다. 내장 함수에 어떤 로직이 쓰였나 생각해 본 적이 많지 않아 눈에 보이는 안전한 for문을 더 많이 애용했던 것 같은데 이 점도 신기했다.

프론트엔드 개발을 하다 보면 디자이너와의 협업은 필수인데, 지금도 팀 프로젝트를 하면서 조금씩 디자인을 할 일이 있기도 하고 깔끔하고 접근성 좋은 UI를 만들기 위해 종종 웹 디자인을 찾아보곤 한다. 가장 많이 참고하는 Madia Designer님 채널https://www.youtube.com/watch?v=X18sPNdD8yw&list=LL&index=6 평소 피그마 디자인을 할 때에는 여백과 간격만 신경 썼는데, 이번 기회로 그리드를 먼저 잡고 형식에 맞춰 디자인해보고 싶었다. 다만 마땅한 자료와 시간이 없어 점점 미루게 되었는데 이번 기회에 한 번 따라 연습해 보았다. 비록 포토샵 자료지만 기본기를 익히는데 문제없었고, 최근에 figma 끝장 강의 3시간짜리를... 올려주셔서 조금씩 나누어 보고 있..

드디어 약 일주일에 걸친 뉴스피드 프로젝트가 완성되었다. 짧은 시간이기에 원하는 기능을 전부 선보이진 못하였어도, 다 같이 노력하여 만족스러운 페이지가 나왔다. 보완점도 좀 있고 아쉬움도 남아야 프로젝트가 제대로 진행된 느낌이 든다. 날밤 새면서 정말 고생한 팀원들👍👏 👍 👏  그중 내가 맡았던 상세 페이지 및 글 작성 기능 구현 중 있었던 트러블 슈팅 혹은 새롭게 작업해 본 기능들을 정리해보려 한다. 1. 늘어나는 textarea 만들기보통 textarea는 지정된 height를 넘으면 스크롤이 생기는데, UI적으로 예쁘지 않고 한눈에 모든 글을 확인할 수 없다는 점 때문에 늘어나는 textarea를 만들어 보았다. textarea를 useRef를 통해 DOM 조작할 수 있게 설정한 뒤, han..

새벽까지 팀원들과 작업하니 느낌이 새롭다... 힘든데 재밌는 느낌이라 오묘하다. 프로젝트 마감 전날이라 짧게 작성 1. 댓글기능 완성이전에는 댓글 위치만 레이아웃으로 위치만 시켜두었는데, 오늘에서야 최종적으로 기능 완성을 시켰다. 본인 댓글만 수정/삭제 가능하게 하였고, 언제 댓글이 달렸는지 확인할 수 있게 하였다. 2. 에디터에 사진이 삽입되지 않는 이슈계속 자료를 찾아보았지만 아직 해결이 되지 않았다... 에러도 뜨지 않아 어디가 문제인지 찾기 어려운 상황  조금 힘들어도 마음에 드는 결과물이 나올 수 있도록 다들 파이팅~

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개 중 하나를 선택하려고 범위를 좁혔고 내일 각각의 장단점을 더 비교해본 뒤 하나를 선택하려 한다. 여유로운 주말은 물건너 간듯 하다