코드스테이츠 SEB FE 41기 (123) 썸네일형 리스트형 [react] useAxios 커스텀 훅 사용기1(feat. typescript) 네트워크 통신이 많은 앱을 만들다보니 실시간 데이터 리로딩 로직의 필요성을 느끼게 되었고 더 이상 무수한 get 요청에 의존할 수 없다는 것을 깨달았다... 또한 네트워크 관련 코드들을 정리하여 관심사 분리를 진행해야겠다는 생각이 들었다. 코드가 너무 길고 지저분해지면 클린한 코드가 아니라는 생각이 들었기 때문이다. 작은 프로젝트지만 그래도 최대한 클린코드를 향해 나아가는(?) 마음가짐을 가지고 싶었다 :) 해당 문제를 어떻게 해결할지 팀원 분과 고민을 많이 하다가 멘토님께 조언을 얻기로 하고 질문 목록을 정리하여 미팅에 참석하였다! 멘토님께서 추천해주신 방법은 커스텀 훅을 만들어 네트워크 통신 후 response를 받아오도록 만들고, 네트워크 통신과 관련된 코드는 도메인 별로 나누어 파일로 정리하는 것.. [react] 이미지 hover시 이미지 짙어지며 텍스트 뜨게 만들기 각 컴포넌트 hover 시 짙어지며 원하는 텍스트가 나올 수 있도록 만들어보자. 전체 컴포넌트의 구조는 이렇다! {post.likes} 이제 CSS를 작성해보자. 먼저 각각의 게시글 컴포넌트의 Position을 relative로 만들어주자. 그 다음, 컴포넌트에 꽉 차게 썸네일 이미지를 띄워주기 위해 이미지 컴포넌트의 width, height를 모두 100%로 설정해준다. const ImgWrapper = styled.div` width: 130px; height: 130px; position: relative; .post_thumbnail { width: 100%; height: 100%; } `; 그 다음 각 게시글의 썸네일 이미지 호버시 해당 글에 대한 '좋아요' 수를 표시하고 싶기 때문에 clas.. [react] star-rating 구현하기(feat. typescript) 후기의 핵심.. 별점 매기기 기능을 구현해보도록 하자. 이것도 라이브러리가 몇 개 있었는데, 타스에서 적용이 안된다는 이야기가 많아 자스로 구현된 예시 몇개를 보고 리팩토링을 하는 방식으로 진행하였다! 먼저 별점 매기기 기능의 꽃! 별 아이콘을 가져오자. 나는 클릭 여부에 따라 커스텀을 해야하기 때문에 mui 아이콘을 그냥 사용하지 않고 컴포넌트로 만든 뒤 svg 형식으로 가져와 사용했다. 하단 코드는 공식 홈페이지를 참고하였다. import SvgIcon from "@mui/material/SvgIcon"; interface IProps { key: number; size: string; onClick: () => void; className: string; } const StarRate = (prop.. [react] 텍스트 에디터 react-quill 사용기 (feat. typescript) 우리 프로젝트에는 블로그 형식처럼 음식점에 대한 후기글을 남기는 기능이 있었기 때문에, text editor의 사용은 필수적이였다. react에 적용되면서 typescript로 사용가능하고 레퍼런스가 많은 라이브러리를 찾아보려고 이틀 간 구글링을 정말 열심히 했던 것 같다! ㅠㅠ 타입스크립트로 작성된 플젝의 레퍼런스는 사막에서 바늘찾기... 난 아직 애기인걸.. 타입스크립트 신생아라서 레퍼런스 없이는 감도 안오는걸? 응애 결론적으로 내가 선택한 라이브러리는 react-quill이라는 라이브러리이다. react-quill 라이브러리는 타입스크립트가 적용될 뿐아니라 이미지 업로드 시 파일 업로더를 사용하는 방식으로 구현되어 있어, 유저가 게시글을 작성할 때 더욱 편리하게 이미지를 추가할 수 있겠다고 느껴 선.. [react]Modal Portal(feat. typescript) 모달이 뜨면 background가 짙어지는 backdrop 효과가 모든 컴포넌트에 적용되지 않던 문제를 해결했다! 멘토님께 여쭤보니, 역시나 모달의 레벨이 적용되지 않던 컴포넌트(헤더, 사이드바)보다 낮아서 생긴 문제였다. 멘토님이 추천해주신 방식은 Modal Portal을 이용하는 것이였다! 나는 text editor을 열심히 만지던 중이라 팀원분께서 적용해주셨는데! 결과는 성공! 야호 ㅜㅜ 속이 아주 시원했다~!! 나중에 쓰일 것 같아 팀원분이 성공하시고 난 후 적용 과정에 대한 설명을 들었고, 이를 이해한 바탕으로 기록해보자! public/index.html에 'root' div하단에 modal portal을 위한 'modal-box'라는 이름의 div를 생성해준다. 이로써 modal compone.. [react] z-index, position, map reverse, axios (feat. typescript) 1. z-index z-index는 같은 레벨에 있는 요소 간에는 적용되지만, 부모 자식 요소간에는 그 우선순위가 적용되지 않는다. 그래서 왠만하면 z-index는 사용하지 않는게 좋다고 한다...ㅠㅠ 헤더와 사이드바 컴포넌트가 모달 컴포넌트의 부모 요소여서 background 짙게 되는 효과에서 배제 된다!!! 해결하려고 노력해봤지만..아직까지 해결 못했다 ㅠㅠ 멘토님께 여쭤봐야지(모달 포탈 사용해 해결 완료~) 2. postion이 fixed 인 컴포넌트 중앙 정렬 position: fixed; margin: 0 auto; left: 0; right: 0; 아직까지도 나한텐 position 개념이 어렵다..ㅠㅠ 얼른 익숙해지고싶다! 3. position : relative vs absolute rel.. StackOverflow 클론코딩(12/28) 내가 두 번째로 맡게 된 파트는 두둥.... 질문 작성 페이지다!! 도움말 카드?도 조건부 렌더링이 되어야하고, 유효성 검사도 해야하고.. 눈물 쓱.. 제일 어려운 페이지가 되겠구나 싶었는데 내가 만들게 되었다. 마치 가위바위보 제안한 사람이 항상 지는 것 마냥^^7 어제부터 총 이틀간 밤까지 노트북 붙들고 졸린 눈을 비벼가며 만들었다 ㅠㅠ 내 새끼 같이 이뻐보인다! 이제 텍스트 에디터 부분만 적용하면 끝날 것 같다! 팀원분이 토스트 ui로 구현 중이신데, 퍽 어렵다 ㅠㅠ 까다로운 자식 텍스트 에디터가 의외의 복병이 될 줄은 몰랐다. 내일 꼭 텍스트 에디터도 넣어볼 수 있기를! 오늘의 TIL 이 에러는 Tags 부분을 작업했을 때 만나게 되었다. 이런 에러메세지는 태그 요소가 button이 아닌 경우에 .. Stack Overflow 클론코딩(12/23) 우리 팀은 먼저 질문 전체 조회 컴포넌트를 만들기 시작했고(CRUD 기능이 가장 중요하기 때문), 나는 그 중 Header에 해당하는 부분을 만들기로 했다. 내가 만든 헤더,,,(내가 만든 쿠키 따라한 것 맞음(feat. 뉴진스) 만드는데에는 약 두 시간 조금 넘게 걸렸던 것 같다. 평소에는 css 파일을 따로 만드는 방법을 사용했는데, 이번 프리 프로젝트에서 우리 팀은 styled-component를 사용하기로 하여 나도 익숙치는 않지만 열심히 styled-component 연습을 하였다! 나중엔 더 손에 익겠지 ㅠㅠ styled-component 및 css의 개념이 부족한터라... 조오금 해맸다!! ^^ 오늘의 TIL 1. 너무 많은 컴포넌트를 만들지 말자. 굳이 styled 컴포넌트로 만들어주지 않.. 이전 1 2 3 4 5 6 ··· 16 다음
