\(@^0^@)/

두번째 과제에서 MUI의 달력 라이브러리를 사용하면서 style을 주려했는데, 인라인 css로 스타일을 적용해봤지만 적용이 되지 않아서 이리저리 찾아보다가 발견한 mui에서 style을 적용하는 법을 메모해두려함 1. 왼쪽의 빨간네모박스의 @emotion/styled 와 material-ui 를 설치 2. 컴포넌트에서 makeStyles를 import 3. 해당 mui 컴포넌트 코드 밖에서 makeStyles 함수를 생성하여 그 안에 적용할 스타일들을 작성하고 4. classes라는 변수로 그 함수를 컴포넌트 안으로 불러온다. 5. 스타일을 적용하고 싶은 섹션에 넣어주면 끝! MUI : https://mui.com/components/date-range-picker/ 참고 : https://github...

React-hook-form을 이용하여 회원가입에 필요한 from들의 유효성 체크를 해보았다. 유효성 검사가 React hook을 사용하는 것 이외에도, yup과 redux를 사용하는 등의 방법이 있다고 하는데 최근에 hook을 사용하는 것이 코드도 간결하고 syntax도 깔끔하고, 속도도 빠르다고 해서 hook을 선택. 처음에는 유튭을 참고해서 구현하려 했는데 유튭은 6v이고, 최근에 7버전이 나와서 공식문서와 스택오버플로우를 요리조리 섞어서 구현하였음. 아직 공식 문서를 제대로 이해하는 것이 쉽지 않아서 조금 더 문서를 읽는 연습을 해야 할 것 같다 RedBox : email 이라는 name의 Element를 관찰. OrangeBox : email element를 관찰하기 위해 input에 regis..

오랫동안 해결을 못 했던 부분을 오늘 드디어 완성하였다..... 이렇게 보니, 또 어려운 게 아닌 거 같은데 왜 매번 생각이 나질 않는 걸까?ㅠ 해보고 계속해보고 또 해보고... 그래서 내 것으로 만들어서 빨리 코딩 로봇이 되고싶으다 그럼 열심히 좀.. 우선 나름 엄청난 수정을 하였다, 결과는 만족! 코드가 훨씬 가독성 있고, 간결해졌기 때문에! 수정을 꽤 많이 해서 어디서부터 어떻게 글을 써내려야 할지 모르겠지만, 그냥 내 머릿속을 정리하자는 마음으로 적어보려 한다. 1. 카테고리를 클릭하면, 어떤 카테고리가 클릭되어 있는 상태인지 border-top으로 구분. 2. navBar에서 프로필 아이콘을 클릭하면, 게시물 쪽 포스트들이 렌더 되어야 하고, 마찬가지로, 저장됨 아이콘을 클릭하면, 저장됨 쪽 포..

나는 정말 융통성이 없는 똥고집인걸까? 답은 여러개인데, 왜 자꾸 한 가지만 파고 그게 아니면 답이 없다고 생각하는거지!? 생각을 해라!!! a가 안되면 b를 생각하고, b가 안되면 c를 생각해라! 답은 하나가 아니야!!! 처음에 두개의 함수를 받아와야 했음. 근데, 자꾸 위에있는 getPostDetail만 불러와지고 getUserPost는 get이 안됨. console을 찍어서 확인해보니, getUserPost의 id를 받아오려면, getPostDetail을 먼저 불러와서 그 안의 id값을 받아와야 하는데, 둘다 useEffect로 한번에 불러오려니깐, 데이터가 getUserPost함수의 id값이 읽히지 않는거였음. 두 군데를 수정하였다. 1. 특정 값이 업데이트 될 때, 실행하고 싶다면 [ ] 안에 ..

인스타에서 북마크를 하면 토스트 메시지가 이미지 제일 하단에 뜨는데, 어찌된 영문인지 최근 내 웹에서는 절대 뜨질 않아서 다른분께 도움을 받아서 작업을 했음. 왜 안뜨는지는 아직도 의문.. 다른 부분에서도 변덕이 심한 인스타! 이 작업을 위해 고려해야 할 사항들은 1. 북마크를 저장할 때에만 띄워줘야 함. (취소할 땐 띄우면 안됨) 2. 따로 공간을 차지하는게 아니라, 이미지 하단에 띄워줘야 함. 3. 메세지가 떴다가, 일정 시간이 지나면 자연스럽게 사라져야 함. 저장할때의 상태 관리를 위해 state (초기값 false)를 넣어서 북마크 저장하는 온클릭 핸들러에, 북마크가 눌려있지 않다가 눌릴 때만 toast를 띄워주게 했고 ..

오늘 알게 된.... 아니 전에도 알았지만 이제까지 잊고 있다가 다시 상기된 삼항 연산자 사용법 이런 식으로, 해당 div 전체를 중복 사용했음. 오늘 여기에 조건을 하나 더 추가해줘야 할 일이 생겼는데, 추가하다 보니깐 코드가 더 더러워지고 복잡해져서 어떻게 하면 코드를 좀 더 간결하고 가독성 좋게 쓸 수 있지? 고민 고민 x10 하다가 생각난 것이 아! 클래스네임에만 삼항을 먹일 수가 있었다!!!!! 끼 야호!! 이렇게만 된다면, 모든 문제 해결. 전체에 myProfile 조건 먹이고, 클래스 네임에만 삼항을 추가해줬는데도 위의 코드보다 훨씬 간결하고 짧음!! 굿굿 역시 사람은 아는 것이 많아야 해ㅠㅠㅠㅠ 그리고 기억력이 좋아야해ㅠㅠㅠ 결론은 기억력 좋아진다는 영양제를 구매!

다른 기능들을 하고 다 작동하나 하나씩 확인하는데, 또 좋아요 분명 내 기억에 제대로 작동했던 것 같은데 왜 오늘 보니까 또 이상한 거지...? 내가 잘 된다고 착각했던 건가...? 그럴 리가 없는데... 분명 잘 됐던 거 같은데? 응 내 잘못 어쨌든 오늘 배운건 이렇다. 이게 서버가 준 데이터 이게 내가 댓글을 추가하면 나타나는 내가 집어넣은(?) 데이터 여기서 내가 필요한 건 서버가 준 데이터의 likeCount 였다. (좋아요 개수의 초기값을 0으로 잡기 위해서) 방법은 리듀서에 직접 넣어주는 것.. 이렇게 간단한 건데, 머리가 꽉 막혀서 리듀서에 직접 넣을 생각을 못했다는 것이 참... 오늘도 또 이렇게 내가 코딩을 해도 될 머리인가?를 생각해보는 하루였다. 후엥

댓글 좋아요가 이렇게 어려울 일 인가? 인스타랑 아예 똑같이 하려니까 생각보다 어렵다... 내 맘대로 하고 싶어ㅠㅠ 댓글 좋아요를 메인이랑 디테일 페이지에 각각 뿌려줘야 해서, payload에 main, detail페이지를 path로 구분 줘서 우선 좋아요 기능은 돌아가는데 두 페이지가 각각 다른 api에서 데이터를 불러오다 보니깐 리듀서 작동이 안 되는 느낌적 느낌... 그러다 문득 배열 순서를 둘이 반대로 받아와서 그런 걸까? 하고 생각이 들었는데, 오늘은 시간이 너무 늦어서 낼 서버 쪽에 물어봐야겠다~ 1. 서버쪽에 main이랑 detail 불러오는 api의 comment 부분을 둘 다 최신순으로 받아오게 요청 2. main에서 댓글 추가할 때, 최신순으로 추가되어야 함. 3. 1) 내가 팔로우한 ..

위와 같이 1. 컬렉션 버튼을 누르면 왼쪽 모달이 생성 2. 왼쪽 모달의 다음 버튼 클릭 시 => 왼쪽 모달은 닫히고 오른쪽 모달로 변경됨. 을 구현을 하는 과정에서 느낀 점- 왼쪽 모달에서 오른쪽 모달로 넘어가는 코드를 구현할 때 처음엔, 왼쪽모달 안에 오른쪽 모달을 추가하는 코드를 작성해서, 오른쪽 모달을 열면 자꾸 왼쪽 모달이 닫히질 않고 계속 열려있는 현상이 발생했었다 머리를 싸매고, 이리저리 코드를 바꿔봐도 잘 모르겠더라.. 그래서 같이 프로젝트하는 분께 여쭤봤더니, 생각보다 참 쉬운 방법으로 해결할 수 있어서 아직 많이 해봐야 하고, 좀 더 단순하게 생각해보자! 고 다시 한번 더 느꼈다. useState를 하나 생성해서 왼쪽 모달에 false 기본값을 주고, 오른쪽 모달을 클릭하면 true를 ..

TIL에 뭐 거창한 걸 쓰려니까 계속 안 쓰게 돼서 아무 말이나 해보려 함. 리덕스로 관리하는 게 아직도 어렵긴 하지만, api 받아서 이리저리 굴리다 보니 점점 적응이 되어가는 중.. 하지만 아직 멀고도 멀었다잇!! 중복 삼항 연산자가 있는 줄도 몰랐는데, 며칠 전에 처음 알게 됨. (조건 A)?(조건 B)?(반환 값 A):(반환 값 B):(반환 값 C) 나 같은 경우에는 댓글 기능을 할 때 @가 없으면 댓글, @가 있으면 대댓글로 구분했어야 함. (1. 댓글이 있어) ? (2. @가 있어) ? (댓글 있어a) : (댓글 없어b) : (@ 없어c) 1. 댓글이 있다면 => a 와 b 중에 a 반환 2. 댓글이 없다면 => a 와 b 중에 b 반환 @가 있다면 => (a 또는 b) 와 c 중에 (a 또는..