분류 전체보기 (44) 썸네일형 리스트형 [포스코x코딩온] 웹개발자 풀스택 과정 15주차 회고 | React: [TypeScript] React에서 TypeScript사용하기 React + TypeScript 프로젝트 생성하기 npx create-react-app 프로젝트 이름 --template typescript 기존 프로젝트에 TypeScript 적용하기: npm install typescript @types/node @types/react @types/react-dom @types/jest # 필요한 모듈 설치 + js & jsx 파일을 ts & tsx 파일로 변경 + tsconfig.json 파일 생성 Props & Interface props를 이용해 특정 component가 데이터를 상위 component로부터 받을 때는 해당 데이터 props가 어떤 형태로 넘어오는지 type을 미리 interface로 정의해줘야 한다. .. [포스코x코딩온] 웹개발자 풀스택 과정 15주차 회고 | TypeScript TypeScript JavaScript의 기본 문법에 자료형을 체크한다. JavaScript가 자의적으로 type을 해석하고 코드를 실행시켰을 때, 의도와 다른 방식으로 쓰이지 않도록 방지한다. 정적 파일언어다. (실행하지 않고도 코드 상의 에러를 알려준다 (실시간 디버깅)) TypeScript type들 (JavaScript 자료형) number string boolean array object null undefined type과 함께 변수 선언하기 변수나 함수를 만들어줄 때 타입까지 명시해서 선언할 수 있다. let a: number = 1; let b: string = "안녕하세요"; let c: object = { name: "gildong", friends: "null", }; TypeScri.. [포스코x코딩온] 웹개발자 풀스택 과정 14주차 회고 | React: [Redux] React Redux 적용 npm install redux react-redux @reduxjs/toolkit @reduxjs/toolkit Redux의 복잡성을 줄이기 위해 만들어진 도구 action 생성, reducer, middleware 등 Redux와 관련된 기능들을 효율적으로 구현할 수 있다. 최상위 component에서 하위 component들에 store를 전달해 준다. store이라는 props에 import 한 store를 넣어준다. import React from 'react'; import ReactDOM from 'react-dom/client'; import {Provider} from 'react-redux'; import store from './store'; import A.. [포스코x코딩온] 웹개발자 풀스택 과정 14주차 회고 | JavaScript: [Redux] State 종류 Local State: 각각의 component 내에서만 관리되고 사용되는 상태다. Cross-Component State: 두 개 이상의 component에서 사용되는 상태, component 간 props를 통해 상태가 전달된다. App-Wide State: 애플리케이션 전체 영역에서 사용되는 상태, 여러 component 혹은 앱의 전체 영역에서 공유되어야 하는 데이터나 상태다. Cross-Component와 App-Wide 상태는 Context API나 Redux가 요구된다. Redux JavaScript 상태관리 라이브러리다. React를 배울 때 자주 나오는 용어지만, React에 종속되는 개념은 아니다. React의 상태 관리 라이브러리로 가장 많이 사용된다. Redux 사용.. [포스코x코딩온] 웹개발자 풀스택 과정 14주차 회고 | React: [React Hook Form, React Context API] React Hook Form React 애플리케이션에서 폼을 쉽게 관리할 수 있다. 폼의 상태 관리와 유효성 검사를 간단하게 구현할 수 있다. #설치 npm install react-hook-form 주요 키워드 register: 입력 요소에 연결하기 위한 함수, 입력 요소에 유효성 검사 규칙을 설정한다. handleSubmit: 폼의 제출을 처리하기 위한 함수, 전달된 콜백은 유효성 검사를 통과한 데이터를 인자로 받아 실행한다. watch: 특정 폼 필드의 값을 실시간으로 관찰하는 함수 formState: 폼의 상태를 나타내는 객체 (상태: errors, isValid, isDirty, isSubmitted 등) 사용 예제 import { useForm } from 'react-hook-form'; e.. [포스코x코딩온] 웹개발자 풀스택 과정 13주차 회고 | React: [React Router DOM] SPA (Single Page Application) 단일 웹페이지로 돌아가는 애플리케이션 (index.html) 브라우저에서 JavaScript를 이용해 단일 웹페이지 상의 HTML 요소를 동적으로 생성하고 조작한다. 검색 엔진 최적화(SEO)에 적합하진 않다. React, Svelte, Vue.js와 같은 라이브러리 및 프레임워크로 개발을 할 수 있다. React Router React에서 라우팅시 가장 많이 사용되는 라이브러리다. 라우팅: 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 개발자가 주소별로 다른 component를 보여주기 위해 사용된다. 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 component를 제공한다. 주요 component 및 hooks: c.. [포스코x코딩온] 웹개발자 풀스택 과정 13주차 회고 | React Styling: [CSS, Sass, Styled Components] React component styling 방식 일반 CSS 소규모 프로젝트에 적합하다. 일반적으로 CSS파일을 만들고 해당 파일을 component파일에 import 하여 적용한다. Sass (Syntactically Awesome Style Sheets) 문법적으로 멋진 스타일시트다 CSS 전처리기를 이용해 복잡한 작업을 보다 쉽게 처리할 수 있다. CSS 전처리기: 자신만의 특별한 문법을 가지고 CSS를 생성하는 프로그램 즉, 변수, 함수 개념을 사용하여 재활용성과 가독성을 높인다. Styled-Components JavaScript 안에서 CSS를 자성하도록 도와주는 CSS-in-JS 라이브러리다. component기반의 설계 방식을 사용한다. 일반 CSS 기존 CSS 클래스를 이용할 경우, co.. [포스코x코딩온] 웹개발자 풀스택 과정 13주차 회고 | React : [Ref, useRef(), useMemo(), useCallBack(), useReducer()] React Ref 기존 HTML에서 고유한 요소를 선택해야 할 경우, 해당 요소에 id를 지정하고 요소를 호출했다. 내용 React에서는 HTML 요소들을 component로 재사용을 하기에 특정 요소에 id를 지정되는 component가 재사용될 경우, 해당 id가 동일하게 지정되기에 고유한 값이 될 수 없는 문제가 있다. Ref는 component내부에서만 고유한 값으로 작동하기에 해당 문제를 해결한다. Ref (Reference) 전역적으로 작동하지 않고 component 내부에서 선언 및 사용된다. 동일한 component를 반복 사용해도 각 component 내부에서만 동작하기에 id처럼 중복되지 않는다. DOM을 직접적으로 건드려야 할 때 사용된다. 특정 input에 focus 주기, 스크롤 .. 이전 1 2 3 4 ··· 6 다음