내일배움캠프 TIL93 2023-11-21 본 캠프 34일차 / 53일차 TIL 2023-11-21 본 캠프 34일차 / 53일차 TIL 주요 진행사항 - 팀프로젝트 발제 (뉴스피드 프로젝트) 팀프로젝트 시작 주제 : 뉴스피드 프로젝트 기간 : 11/21~27 (7일) 요구사항 (필수) - 로그인, 회원가입 - CRUD - 마이페이지 - 배포 본격적인 진행에 앞서 팀 회의를 통해 프로젝트의 방향성을 결정하였다. 주제 : 게임 정보 뉴스피드 구현 계획 : 페이지 메인 페이지 (검색, 페이지네이션 or 스크롤) (로그인에 따라서 글쓰기 활성화) Route path='/' 검색 페이지네이션 (스크롤) 로그아웃버튼 글쓰기 버튼 토픽에 따른 글 정렬 (최신순) 마이 페이지 Route path =’/mypage’ 프로필 수정기능 내 글 모아보기 내 댓글 보기 블로그 글 작성 페이지 (로그인 상.. 2023. 11. 22. 2023-11-20 본 캠프 33일차 / 52일차 TIL 2023-11-20 본 캠프 33일차 / 52일차 TIL 주요 진행사항 - 알고리즘 문제풀이 - 리액트 강의 수강 리액트 강의 수강 내용 정리 1. useEffect useEffect는 서버와 통신하는 것과 같이 Side Effect를 처리할 때 사용한다. useEffect를 사용하는 방법은 크게 3가지로 나뉜다. - 의존성 배열이 없는 경우 해당 컴포넌트가 re-Rendering 될 때 마다 useEffect가 실행된다. 따라서 비효율적이라고 할 수 있다. - 의존성 배열이 있지만 내용이 비어있을 경우 의존성 배열이 빈 경우에는 컴포넌트가 마운트 될 때 한번만 실행되고 이후 랜더링 때 실행되지 않는다. - 의존성 배열이 있는 경우 의존성 배열 내부의 요소가 업데이트 될 때마다 useEffect가 실행된.. 2023. 11. 21. 2023-11-19 본 캠프 32일차 / 51일차 TIL 2023-11-19 본 캠프 32일차 / 51일차 TIL 주요 진행사항 - 알고리즘 문제풀이 - 개인 프로젝트 진행 (TIL 페이지) TIL 페이지 제작 ( Redux 사용) DEMO : https://react-today-til.vercel.app/ React App react-today-til.vercel.app 1. 컴포넌트 구조 더보기 App.js Router.js HeaderLayout Home WriteModal WriteModalForm WriteModalDateInput DateInput WriteModalTitleInput WriteModalCommentTextarea WriteModalRadioContainer WriteModalRadio TilList TilListItem Detail.. 2023. 11. 20. 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. 이전 1 ··· 4 5 6 7 8 9 10 ··· 16 다음
