최종프로젝트18 [TIL] 내일배움캠프 React 과정 2023.02.21 Today I Learned 마이페이지 UI 구현 및 유저의 관심 카테고리 업데이트 기능 구현 recoil duplicate 에러 해결하기 Expectation Violation: Duplicate atom key "{아톰 키}". This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement. 콘솔에 자꾸 Recoil 관련된 에러 메시지가 떠서 검색해 봤더니 Next.js와 관련하여 발생하는 문제인 거 같았다. RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false 블로그 링크를 참고하여 .env 파일에 상단의 코.. 2023. 2. 23. [TIL] 내일배움캠프 React 과정 2023.02.20 Today I Learned 오후 3시에 원장님께 기본 기능 시연하고 피드백받기 로그인 모달, 회원가입 페이지 UI 구현 typescript에서 styled-components에 여러 개의 props를 넘길 경우 처음에는 props의 타입을 이렇게 지정해 줬었는데 CategoryBtn 하단으로 새로운 스타일 컴포넌트를 작성해도 폰트 색상이 원래대로 적용이 안 돼서 뭔가 이상한가 하는 생각에 문제를 찾다가 타입 지정을 뭔가 잘못해 준 거 같다는 것을 발견했다. interface CategoryBtnStyledProps { bg: string; text: string; border: string; } export const CategoryBtn = styled.button` padding: 0 17px; h.. 2023. 2. 21. [TIL] 내일배움캠프 React 과정 2023.02.19 Today I Learned 북마크 기능 구현 전체적인 코드 리팩토링 로딩 화면에 스피너 추가하기 (next.js) import spinner from '../../../assets/spinner.gif'; import Image from 'next/image'; const LoadingSpinner = () => { return ( ); }; export default LoadingSpinner; 따로 라이브러리를 설치하지 않고 로딩 중 이미지를 gif로 폴더에 넣어준 후 import 해서 src에 넣어주는 방법으로 구현했다. 참고 https://loading.io/ https://anerim.tistory.com/221 next/Image 사용할 때 외부 링크 다중으로 지정하기 /** @type {i.. 2023. 2. 20. [TIL] 내일배움캠프 React 과정 2023.02.10_인증/인가, 쿠키/세션/토큰 Today I Learned 로그인, 회원가입 시 인증, 인가 관련 강의 수강 인증/인가 강의 내용 정리 인증(Authentication) vs. 인가(Authorization) 인증(Authentication): 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차. 인가(Authorization): 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차. (유저 권한, 회원 등급에 따른 권한) Quiz: 유저가 마이페이지에서 서버에 API 요청으로 개인정보를 받아오는 요청을 할 때, 서버는 클라이언트에게 인증을 해주나요 아니면 인가를 해주나요? -> 인가 http 프로토콜 통신의 특징 2가지 무상태 (Stateless) : 서버는 클라이언트의 상태를 기억하지 않는다. 따라서 각 요청마다 서버에.. 2023. 2. 11. [TIL] 내일배움캠프 React 과정 2023.02.09 Today I Learned 와이어 프레임 재작성 기능 개발 시작! [2월 9일] 프로젝트 기초 작업 및 디자이너님 회의 노션 링크 https://slime-egret-f03.notion.site/2-9-282709cf29ee466eb40e14d4c7d6a594 회고 디자이너님에게 우리의 기획 방향이나 의도를 더욱 명확하게 전달해 드리기 위해서 와이어프레임을 처음부터 새로 만들었다. 와이어프레임 외에도 유저 플로우와 메뉴 구조도까지 만들어서 전달해 드렸다! 이렇게 새로 와이어프레임을 짜는 데 시간이 소요되긴 했지만 하나하나 만들어 나가면서 여기는 어떻게 보여주면 좋을까, 이렇게 보여주려면 어떤 식으로 구현할 수 있을까 팀원들과 더욱 상세하게 아이디어를 잡아나갈 수 있는 좋은 기회이기도 했다. 그리고 저녁.. 2023. 2. 10. [TIL] 내일배움캠프 React 과정 2023.02.08 Today I Learned 분양 정보 관련 API 분석하기 [2월 8일] 프로젝트 API 및 S.A 피드백 분석 노션 링크 회고 오늘 진짜 하루종일 API 분석만 했다.... 진전이 없는 느낌에 오후 동안 좀 멘탈이 나갈 뻔했지만 저녁엔 API를 실제로 가져오는 것을 테스트해 보면서 고민 됐던 문제를 해결하는 방법을 찾아서 뿌듯하게 하루를 마무리할 수 있었다! 그 과정은 바로 여기에... 여러 API로 받은 데이터 재가공하기 2023. 2. 9. [TIL] 내일배움캠프 React 과정 2023.02.07 Today I Learned 최종프로젝트 컨셉 다시 짜기 [2월 7일] 프로젝트 기획 회의록 노션 링크 https://slime-egret-f03.notion.site/2-7-2c7c8d07cc2740b8b3d3420808254fe5 회고 오전에 튜터님이 우리 팀에 찾아오셔서 피드백을 주셨는데 우리 팀의 컨셉이 아쉽다는 의견을 주셨다. 우리의 조합으로 더욱 멋진 결과물을 만들어 낼 수 있을 텐데 특색 없이 너무 안정적인 주제를 선택했고, CRUD의 틀에서 벗어나지 못해서 프로젝트의 방향성을 다시 생각해보면 좋을 거 같다는 의견을 주셨다. 피드백을 듣고 나니 우리가 너무 심심한 주제를 선택했고 기존 서비스와 비교해도 특색이 없었나 하는 생각이 들어서 팀원들과 상의 후에 과감하게 기존의 주제를 버리고 새로 .. 2023. 2. 7. [TIL] 내일배움캠프 React 과정 2023.02.06 Today I Learned 최종 프로젝트 시작! [2월 6일] 프로젝트 컨셉 회의록 노션 링크 https://slime-egret-f03.notion.site/2-6-bd0afccb92224f41b5753b37937513c8 회고 오전에는 팀원들과 아이스 브레이킹하는 시간을 가지고 오후에는 내내 컨셉 회의를 했다. 후보를 두 개 정도로 좁히고 최종적으로 결정된 컨셉을 구체화하는 시간을 가졌다. 하루종일 몰아치는 회의에 힘들기도 했지만 팀원들과 정말 멋진 결과물을 만들어 내고 싶다는 욕심도 생겼다. 2023. 2. 7. 이전 1 2 다음
