전체 글143 2023-11-16 본 캠프 31일차 / 50일차 TIL 2023-11-16 본 캠프 31일차 / 50일차 TIL 주요 진행사항 - 알고리즘 문제풀이 - 리액트 강의 수강 - 챌린지반 수업 챌린지반 수업 - styled componenet (1) ThemeProvider 모듈이란? styled-components 모듈에서 사용할 수 있는 컴포넌트 중 하나로, ThemeProvider 컴포넌트 내부에 선언된 컴포넌트는 theme라는 속성 내에 객체 형태로 선언된 스타일들을 모두 사용 가능하게 해준다. 이런 방식으로 여러 theme를 부여해 줄 수 있다. (2) ThemeProvider 사용법 - styled-components 설치 npm install styled-components yarn add styled-components - theme.js 파일 생성.. 2023. 11. 17. 2023-11-15 본 캠프 30일차 / 49일차 TIL 2023-11-15 본 캠프 30일차 / 49일차 TIL 주요 진행사항 - 알고리즘 문제풀이 - 리액트 강의 수강 리액트 강의 수강 내용 정리 - 리액트 컴포넌트 스타일링 (1) CSS 기존 자바스크립트와 동일하게 CSS를 통한 방식이다. 이 방식에서 문제점은 프로젝트 전역에서 사용이 가능하다는 것이다. 만약 규모가 큰 프로젝트 내에서 다른 항목에 같은 클래스를 적용시켰을 때 의도치않은 스타일 적용이 발생 할 수 있다. (2) Styled Components Styled Components는 서드파티 라이브러리로 npm을 통해 프로젝트에 적용할 수 있다. Styled Components의 장점은 다음과 같다. - 컴포넌트와 스타일을 함께 유지하여 가독성, 유지보수성을 높힌다. - 고급 기능을 사용할 수 .. 2023. 11. 16. 2023-11-14 본 캠프 29일차 / 48일차 TIL 2023-11-14 본 캠프 29일차 / 48일차 TIL 주요 진행사항 - 알고리즘 문제풀이 - 리액트 강의 수강 - 수준별 학습 진행 수준별 학습 내용 정리 - styled components의 활용 1. 폴더 구조화 styled components를 모범적인 예시로 사용하기 위해서는 스타일 컴포넌트 파일만 따로 분리하는 방법이 있다. 위와같이 styled components를 위한 파일을 모듈화한다면, 파일의 구조화나, 가독성 측면에서 이점이 있다. import * as S from "./Button.styled.js" import * as Styled from "./styles.js" ... return import 역시 as를통해 코드의 길이를 단축시킬 수 있다. 2. 코드 재사용 styled c.. 2023. 11. 15. 2023-11-13 본 캠프 28일차 / 47일차 TIL 2023-11-13 본 캠프 27일차 / 46일차 TIL 주요 진행사항 - 알고리즘 문제풀이 - 리액트 숙련과정 개인과제 완료 리액트 숙련과정 개인과제 완료 DEMO : https://react-baseballteampage.vercel.app/ 프로야구 Talk react-baseballteampage.vercel.app - 디테일 페이지 UI 제작 및 라우터로 전환 기능 추가 - 디테일 페이지 수정, 삭제 기능 추가 - localStorage 연동 - 리펙토링 (Context, Redux) 캐시 문제 발생 개인과제 완료 후 vercel로 배포를 진행하는 과정에서, 로컬에서는 잘 나오던 이미지가 나오지 않는 문제를 겪었다. 이미지는 외부 url로 가져오고 있었는데 문제는 다른 브라우저(Edge)나 다른.. 2023. 11. 14. 2023-11-10 본 캠프 27일차 / 46일차 TIL 2023-11-10 본 캠프 27일차 / 46일차 TIL 주요 진행사항 - 알고리즘 문제풀이 - 리액트 숙련과정 개인과제 진행 리액트 숙련과정 개인과제 진행 - 과제 주제 : 아이돌 팬 레터 페이지 제작 * 관련 주제는 관심영역이 아니여서 프로야구 구단 응원 페이지로 변경 - 과제 기간 : 11/10(금) ~ 11/20 (월) 10일 간 - 주요 요구사항 - CRUD 구현 - React-Router-Dom 활용 (main, detail page 이동) - props drilling, context, redux 3가지 버전으로 제작 (branch 3개) - 현재 진행사항 1) 메인 페이지 UI 구현 2) styled components 이용 조건부 랜더링 (styled components ThemeProv.. 2023. 11. 13. 2023-11-09 본 캠프 26일차 / 45일차 TIL (unique key message) 2023-11-09 본 캠프 26일차 / 45일차 TIL 주요 진행사항 - 알고리즘 문제풀이 - 리액트 숙련과정 강의 완강 - 리액트 유데미 강의 시청 동적 데이터 맵핑 시 key warning message map 함수를 통한 동적데이터 맵핑시 key props를 추가하지 않았을 때 위와 같은 메세지가 뜨는 경우가 있다. 항상 의미를 모르고 key props를 추가하여 이 주의 메세지를 해결했었는데, 리액트 강의에서 해당 에러에 대한 내용이 있어 정리하였다. key props가 없을 때 리액트은 어떻게 동작할까? 기존 맵핑의 기준이되는 배열이 변경 되었을 때 리액트에서는 어떤 항목이 추가되었는지 인식하지 못한다. 따라서 기존에 있던 맵핑된 요소를 삭제하고 변경된 요소가 업데이트 된 배열로 맵핑을 다시 .. 2023. 11. 10. 이전 1 ··· 6 7 8 9 10 11 12 ··· 24 다음
