본문 바로가기

반응형

응용SW 개발 (React)/필기일지

(6)
231031 [응용SW개발] - React SPA 미니 프로젝트 점검 / DB 연동 기초 개념 / mongo DB / express [23.10.31] 61차 [DB 연동 응용SW 개발] - React SPA 미니 프로젝트 점검/확인 - DB 연동 기본개념 - mongo DB - express - 사용자입장에서 사용자가 이용하기 편하게 만들기 - 터미널에서 npm run dev중인 서버 연결끊기 (ctrl + c) * 2 향후 스프링활용 – 스프링은 (리액트와 마찬가지로) Front + Back형태, 스프링은 둘을 명확하게 구분하기 좋다. [사용자(client)] URL로 request (req) ---> [서버(server)] [데이터베이스(DB)] console.log('[MongoDB] connected')) .catch(() => console.log('[MongoDB] Error!!!')) console.log('server..
231030 [응용SW개발] 리액트 SPA 실습 [23.10.30] 60일차 [DB 연동 응용SW 개발] - SPA React 실습 - antd(Ant-design) 수정 . useEffect() 인수에 따라 어느 타이밍이 되는지 스터디 . 왜 두번씩 출력되는 지 스터디 . 메뉴 짝수 홀수 마다 세팅왜다른지 찾기 (개인) * url이없는 배우사진은 안보이게하기 {/* Cast Grid Card */} {ActorToggle && // ActorToggle이 true여야 실행(element 생성) {Casts.map((cast, index) => { return ( {cast.profile_path && // js 문법 ~~&& : ~~이true 일 때 } ); })} ~~ && : ~~이 true 일 때 뒤코드 실행 ** 평소엔 하나의 서버로 운용을 ..
231027 [응용SW개발] - API (TMDB 실습) - antd(Ant-design) 활용 (Grid, Col, Row, Card) - useState(), useEffet(), fetch(), .then 등 [23.10.27] 59일차 [DB 연동 응용SW 개발] - API (TMDB 실습) - antd(Ant-design) 활용 (Grid, Col, Row) - useState(), useEffet(), fetch(), .then 등 . useEffect() 인수에 따라 어느 타이밍이 되는지 스터디 . 왜 두번씩 출력되는 지 스터디 . 메뉴 짝수 홀수 마다 세팅왜다른지 찾기 (개인) . url 없어 깨진 배우사진 안보이게 . GridCard대신 AntCard변경 . md일 때 4개, lg: 6개 . 카드하단에 (영화목록)영화 제목, (배우목록)배우이름 보이게 * 1027 LandingPage import React, { useEffect, useState } from 'react'; import { API..
231026 [응용SW개발] - API (TMDB 실습) / React API 활용 (useEffect, useState, grid, Fragments 등) [23.10.26] 58일차 [DB 연동 응용SW 개발]ㅋ - API (TMDB 실습) - React API 활용 (useEffect, useState, grid, Fragments 등) . useEffect() 인수에 따라 어느 타이밍이 되는지 스터디 . 왜 두번씩 출력되는 지 스터디 . 메뉴 짝수 홀수 마다 세팅왜다른지 찾기 const NavBar = () => { const menu_list = ['로고', '메뉴1']; return ( { const key = index + 1; return { key, label: menu_list[key - 1], }; })} /> 익명함수 .map()의 기본 파라미터 중 map(value, index) 사용형태 : _ 는 value를 첫번째 인수로 받기는 하..
231025 [응용SW개발] - 컴포넌트 component / 외부 컴포넌트 사이트 (디자인요소) / API [23.10.25] 57일차 [DB 연동 응용SW 개발] - 컴포넌트 component - 외부 컴포넌트 사이트 (디자인요소) - API - NavBar : 메뉴정리 - movie DB 회원가입 - JS : 비동기처리 - 필요없는 코드는 정리하기 - 사용 안하는 요소 제거 단축키 alt + shift + o - 컴포넌트 개념 antdesign = > 리액트에 디자인적 컴포넌트를 제공 package.json에도 설치가 되어 컴포넌트로 사용가능 movie – client - view에서 작업 ** 다양한 디자인요소들(버튼, 아이콘, 레이아웃, 메뉴 등) JavaScript 가져와 사용가능 cf) App의 타입을 : ~~ 로 나타내는 형식 왼쪽 TypeScript * 경로 나타내는 ‘Breadcrumb’ * ..
231024 [응용SW 개발] -React 관련 기반 설치 [23.10.24] 56일차 [DB 연동 응용SW 개발] React 관련 기반 설치 movie 파일을 생성한다. movie 파일에서 npm start로 실행 확인을 한 번 하고, movie 파일 안에 client 파일을 생성한다. movie 속 client 파일의 npm start를 실행 시키기 위해 movie 파일의 package.json에서 위의 명령어를 입력해준다. 이렇게 해주면 npm run dev로 실행이 된다. 두번 타고 실행되는것을 간략화 -g를 붙이는 이유는 global의 약자로 다른 프로젝트에서도 다 사용할 수 있는 것. yarn 설치. get-executionpolicy Set-ExecutionPolicy -Scope CurrentUser RemoteSigned get-execution..

반응형