P&P 학회/FRONT-END STUDY (7) 썸네일형 리스트형 8주차 (2024.11.25) 프로젝트 (감정 일기장)1. 프로젝트 기획 및 준비감정을 포함한 일기를 작성할 수 있는 웹 서비스 외부 폰트 사용불러온 이미지 사용 및 최적화다양한 페이지를 제공공통 컴포넌트로 UI 요소 모듈화복잡한 데이터 다루기리액트 앱을 실제로 배포 2. 페이지 라우팅페이지 라우팅이란 경로에 따라 알맞은 페이지를 렌더링 하는 과정이다.더보기MPA 방식서버가 사용자들에게 제공할 여러개의 페이지를 미리 가지고 있는 방식을 '여러 개의 페이지를 갖는 어플리케이션이다' 라는 뜻에서 MPA(Multi Page Application)라 한다. 이런 방식에서 브라우저가 새로운 페이지를 요청했을 때 서버측에서 미리 완성해 놓은 HTML 파일을 보내주면 브라우저가 그것을 그대로 렌더링하는 방식은 '서버측에서 페이지를 미리 렌더링 .. 7주차 (2024.11.18) 1. useReduceruseReducer란 react hook들 중 하나로 컴포넌트 내부에 새로운 state를 생성하기 때문에 모든 useState는 useReducer로 대체가 가능하다. useReducer를 이용할 경우, useState와 달리 상태 관리 코드를 컴포넌트 외부로 분리할 수 있다. 1.1. useReducer 실기6주차 프로젝트 업그레이드 6주차 (2024.11.11)프로젝트(투두리스트)1. 프로젝트 준비 [WEB] 리액트 앱 생성 기본 설정1. 파일 생성 후 터미널에서 리액트 앱 생성 2. 기본적으로 필요한 라이브러리들 설치 3. 불필요한 파일 삭제 및 ESLintnkkim3107.tistory.com useStateuseReducerimport './App.css'impor.. 6주차 (2024.11.11) 프로젝트(투두리스트)1. 프로젝트 준비 [WEB] 리액트 앱 생성 기본 설정1. 파일 생성 후 터미널에서 리액트 앱 생성 2. 기본적으로 필요한 라이브러리들 설치 3. 불필요한 파일 삭제 및 ESLint 설정ESLint 파일의 rules에 설정 추가 "no-unused-vars":"off", "react/prop-types":"ofnkkim3107.tistory.com 2. UI 구현1) 컴포넌트 생성 및 연결2) 기본 레이아웃 설정3) Header 컴포넌트이모지 넣는 법 - 윈도우: window + . - 맥 : ctrl + cmd + space바{new Date().toDateString()} 문자열로 날짜를 렌더링하는 JavaScript 코드4) Editor 컴포넌트5) .. 5주차 (2024.11.04) 프로젝트(카운터 앱) & 라이프사이클1. 카운터 앱1.1. 기본 세팅 [WEB] 리액트 앱 생성 기본 설정1. 파일 생성 후 터미널에서 리액트 앱 생성 2. 기본적으로 필요한 라이브러리들 설치 3. 불필요한 파일 삭제 및 ESLint 설정ESLint 파일의 rules에 설정 추가 "no-unused-vars":"off", "react/prop-types":"off",불nkkim3107.tistory.com 1.2. UI 구현1) \src\components 폴더 생성2) \src\components\Controller.jsx와 \src\components\Viewer.jsx 파일 생성3) \src\components\Viewer.jsx에 코드 작성 및 \src\App.jsx 파일에 연결4) \src\co.. 4주차 (2024.10.28) ReactJS 입문 21. StateState란 현재 가지고 있는 형태나 모양을 정의 변화할 수 있는 동적인 값을 뜻한다.State를 갖는 컴포넌트들을 활용하여 State의 값에 따라 각각 다른 UI를 화면에 렌더링한다. 1.1. State 실습함수컴포넌트에서 state를 생성하기 위해서 리액트가 제공하는 내장함수를 사용하여야 한다.1) import { useState } from "react"; 이 문장을 입력해 useState 함수 불러오기2) 컴포넌트 내에서 useState() 입력하여 호출반환값을 state라는 변수에 담는 것useState는 두 개의 요소를 담은 배열을 반환한다.1번째 요소: 새롭게 생성된 state의 값2번째 요소: state의 값을 변경하는 함수배열을 받기 때문에 보통 반환.. 3주차 (2024.10.14) ReactJS 입문 11. 실습 설정이전 주차의 5.1을 참고하여 리액트 앱 생성 후 각종 불필요한 파일들을 먼저 제거해준다.더보기불필요한 항목App.jsx의 (2&3), (1&7) 라인 import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg'+ 사진 파일들도 함께 제거 import { useState } from 'react' const [count, setCount] = useState(0)App.jsx가 return 하고 있는 빈 태그 속의 모든 라인App.css의 전체 내용index.css의 전체 내용main.jsx의 1&7&9 라인 import { StrictMo.. 2주차 (2024.10.07) NodeJS 기초 & ReactJS 개론ReactJS는 NodeJS 기반의 JavaScript ˚라이브러리이다.˚라이브러리: 웹 개발자가 표준 JavaScript 함수를 실행하기 위해 재사용할 수 있는 미리 작성된 코드 조각의 모음 1. NodeJSNodeJS란 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript ˚런타임이다.˚런타임: 코드가 실행되는 환경 (일종의 구동기로, 기본적으로 무언가를 동작시키는 기계 또는 프로그램)즉, 웹 브라우저가 아닌 환경에서도 JavaScript 코드를 실행시켜 줄 수 있는 환경이다.필요한 이유: JavaScript는 웹페이지 안에서 일어나는 아주 단순한 기능만을 개발하기 위해 만들어진 간단한 스크립트 언어이다. 단순한 인터랙션을 개발하기 위한 목적.. 이전 1 다음
