React (14) 썸네일형 리스트형 특정 영역에 마우스 오버 시 텍스트 나오기 - useState 보호되어 있는 글입니다. 객체 보호되어 있는 글입니다. [새싹 프론트엔드] 9주차 - 1,2 Firebase Firebase란? Firebase • 구글의 모바일 및 웹 어플리케이션 개발 플랫폼 • 백엔드 서버 기능을 클라우드 서비스 형태로 제공 • 인증(Authentication), 데이터베이스(Firestore), 분석 (Analytics) 등의 기능 제공 https://firebase.google.com Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 시작하기 클릭 프로젝트 생성 프로젝트 만들기 클릭 - 프로젝트 이름 지정 - 구글 애널리틱스 설정 - 애널리틱스 위치 : "대한민국"으로 설정 - 프로젝트 만들기 - 계속 프로젝트 완료 Cloud Firestore Firebase가 지원.. [새싹 프론트엔드] 9주차 - 1 네트워크 통신 (동기 vs 비동기) / fetch 동기 방식 vs 비동기방식 동기 방식(synchronous) 요청을 보낸 후 응답을 받아야 다음 동작을 실행할 수 있는 방식 특징 • 설계가 간단하고 직관적 • 요청에 대한 응답을 받을 때까지 대기해야 하는 단점 - 서버가 응답을 할 때 까지 기다려야 함 (버튼 하나 눌러줘 했는데 10분걸린다 하면 10분동안 대기. 응답을 받은 후 비로소 다시 뭔가를 할 수 있음 코딩한 순서 그대로 출력) 비동기 방식(Asynchronous) 요청을 보낸 후 응답을 받기 전에 다음 작업을 먼저 실행 하는 방식 - useState, fetch 특징 • 동기 방식보다 복잡함 • 요청에 대한 응답을 받기까지의 대기 시간에 다른 작업을 할 수 있음 ex) set state 값 바꿔주고 바로 콘솔에 찍었는데 이전 데이터만 나오는.. [새싹 프론트엔드] 8주차 - 4 라우터 싱글 페이지 어플리케이션 전통적인 웹 페이지 일반 웹 사이트의 동작 과정 웹 사이트의 화면 일부를 수정하기 위해 노력한 과정 • 초기 웹 사이트 각 화면에 해당하는 웹 문서를 일일이 제작 • 서버에 저장된 값을 화면에 반영하는 동적인 웹 문서 도구 개발 서버 사이드 렌더링(Server Side Rendering) ASP(Active Server Page), JSP(Java Server Page) • 웹 서버가 아닌 자바스크립트 코드로 웹 문서를 생성 싱글 페이지 어플리케이션(Single Page Application) 싱글 페이지 어플리케이션(Single Page Application) 기존 html과 달리 많은 페이지가 아니라 하나의 페이지로 자바스크립트나 json으로 전달 (html x) 싱글 페이지.. [새싹 프론트엔드] 8주차 - 3 Context Context • 어플리케이션에서 전반적으로 사용할 값을 저장 및 관리 • 예) 사용자의 언어, 로그인 상태, UI 테마 등 환경 설정 • 주의사항 • Context와 컴포넌트가 연동되면 컴포넌트를 재사용하기 어려움 • 자주 변경되는 상태인 경우, 사용하지 않는 것이 좋음 👉 Context 내부의 값이 변경되면 Context를 사용하는 모든 자식 컴포넌트들이 리렌더링 됨 일반적인 전역 상태 관리 흐름 컴포넌트 여기저기서 필요한 데이터가 있는 경우 • 주로 최상위 컴포넌트인 App의 state에 넣어서 관리 전달하면서 값을 넘겨줘야 함 (App에서 G로 한 방에 보내줄 방법이 없음) 단점 : 유지보수가 어려워짐 Props Drilling 실습) Props Drilling App.js function App.. [새싹 프론트엔드] 8주차 - 2 Hooks useReducer() 컴포넌트의 상태를 관리할 때 사용하는 Hooks 특징 • 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리 가능 (자식으로 넣어놓는 것이 아니라 따로 떼어 놓는 것 - 컴포넌트 외부 혹은 다른 파일) • 다른 컴포넌트에서도 해당 로직을 재사용 가능 사람이 주문을 함 - dispatch 함수 메뉴 결정 - action (객체) dispatch 함수 안에 action을 매개변수로 넣음 요청은 reducer를 찾아감 결과가 state에 저장 컴포넌트 영역 안에서 주문 햄버거 가게는 reducer 안에 있음 결과는 다시 컴포넌트로 돌려줌 동작과정 useReducer() 사용 방법 const [state, dispatch] = useReducer(reducer, initialState); /.. [새싹 프론트엔드] 8주차 - 1 Hooks Hooks Hooks란? • 리액트 버전 16.8에 새로 도입된 기능 • 함수형 컴포넌트에서 상태 관리를 할 수 있는 기능 제공 종류 • useState • useEffect • useReducer • useMemo • useCallback • useRef useState() • 가장 기본적인 Hook • 함수형 컴포넌트가 가변적인 상태를 지닐 수 있도록 해 줌 • 형태 const [state, setState] = useState(초기값); • 예시 const [ number, setNumber ] = useState(3); • 현재 number 값 = 3 • number 값 변경 = setNumber(6); 실습) AddName AddName.js (App.js에서는 호출하는 중) import Rea.. [새싹 프론트엔드] 7주차 - 4 Post CSS CSS를 불러와서 사용할 때 클래스 이름을 고유한 값 형태로 자동으로 만들어 컴포넌트 스타일 클래스 이름이 중첩 되는 현상을 방지해주는 기술 post css와 scss 같이 사용 값 형태 사용 방법 버전 2 이상부터는 별도의 설정이 필요 없고, 다음과 같은 확장자로 파일을 저장하기만 하면 적용 모듈 파일을 불러옴 실습) Post CSS App.js CSSModule.js CSSModule.module.css 실행 결과 실습) global 스타일 App.js GlobalStyle1.js GlobalStyle2.js GlobalStyle1.module.css 실행 결과 어떤 스타일에 global을 쓰면 전역변수로 되어 그대로 물려 받는다 클래스 이름을 두 개 이상 적용 CSS Module을 .. [새싹 프론트엔드] 7주차 - 3 컴포넌트 스타일링 리액트 컴포넌트 스타일링 스타일링 방식 설명 일반 CSS • 컴포넌트를 스타일링하는 가장 기본적인 방식 Sass • 자주 사용되는 CSS 전처리기(pre-processor) 중 하나 • 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성 할 수 있음 CSS Module • CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션 styled-components • 스타일을 자바스크립트 파일에 내장시키는 방식 • 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트 생성 가능 - 잘 사용하지 않음 실습) 클래스 이름 작성의 중요성 Button1.js Button1.css Button2.js Button2.css 실습) 클.. 이전 1 2 다음
