리엑트19 11 SurveyPie 컴포넌트 스타일링 11-1 styled-componentsStyled Components 라는건 말 그대로 스타일된 컴포넌트 라는 의미이다.그러니까 컴포넌트긴 컴포넌트인데, 그 컴포넌트에 style만 입혔다고 볼 수 있다. css in js 라이브러리공식 문서https://styled-components.com/docs/basics#installation 설치명령 : npm install --save styled-components 강의에서 예시 아래는 전통적인 방식으로 style 적용하는 코드이다. HTML 태그에 className 속성에 정의된 태그 입력한다. 11-2. 질문 유형 별, 컴포넌트 만들기 11-3. 스타일 변수 만들기style 변수 관리하기CSS 변수로 색상 값 정의하는 방법Jav.. 2024. 8. 17. 10. SurveyPie 라우터 적용 10-1. react-routerRouting 이란?주소에 맞게 적절한 페이지를 로드하는 것 http://example.com/list ----링크 클릭/페이지 이동----> http://example.com/detail 전통적인 방식의 웹 서비스에서 라우팅은, 서버에 요청하는 주소에 따라 서로 다른 페이지의 HTML을 보여주는 방식이였는데, SPA에서는 페이지가 여러 개가 아닌 싱글 페이지 어플리케이션이기 때문에 브라우저의 히스토리를 조작하는 방식으로 동작을 한다. 브라우저 history브라우저는 페이지 이동에 대한 내용을 기록하기 위해서 히스토리라는 객체를 가지고 있다.페이지 뒤로가기나 앞으로 가기를 할 수 있는 것도 다 history 덕분이다.SPA에서는 history 객체가 제공하는 기능들을 .. 2024. 8. 16. 09. SuerveyPie 설계 9-1 요구사항 분석 9-2 컴포넌트 구조 설계리액트는 컴포넌트 단위로 개발이 이루어지기 때문에 컴포넌트를 잘 구성하는게 중요하다. 9-3. 데이터 정의데이터 정의 설문조사 데이터(각 질문 데이터, 고유 번호, 생성 날짜) 질문 데이터(질문 내용, 설명, 필수 여부, 옵션) 응답 데이터 9-4 프로젝트 세팅 및 환경설정프로젝트 생성 : npx create-react-app survey-pie prettier, eslint 설정 먼저 진행 { "trailingComma": "all", "singleQuote": true, "tabWidth": 2, "semi": true} 아래 명령은 dev-dependency에 설치를 하는 커멘드npm install --save-dev eslint-plu.. 2024. 8. 16. 08. React 심화 프로젝트 소개 8-1. SurveyPie 소개프로젝트 목표 : SurveyPie 라는 설문조사 서비스와 Admin 개발 기획서 : 서비스의 상세한 기능과 요구사항들을 명시해둔 문서디자인 가이드 : 서비스의 화면에서 색상이나 여백 및 요소의 크기 위치들을 개발자가 구현할 수 있도록 명확하게 정의해 둔 가이드 문서 강의의 핵심 포인트- 프론트엔드 개발 실무의 이해- React 개발 과정의 다양한 고민들 이해 8-2. SurveyPie와 Admin 소개 일반적인 서비스 개발 과정서비스 기획 ---기획서---> 컨셉에 맞게 디자인 ----디자인 가이드----> 개발 SurveyPie 기술스택recoil - 전역 상태 관리axios - API 연동react-router - 라우팅styled-components - 스타일링.. 2024. 8. 16. 이전 1 2 3 4 5 다음
