본문 바로가기

반응형

학습 기록/FE (React, JS, HTML, CSS, ...)

(24)
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..
231006 - [React] 모듈 module (외부 모듈 export / import) / node.js / npm 명령어: node package manager / Webpack / 배포용 프로덕션 [23.10.06] 45일차 React를 활용한 SPA (Single Page Application) Front-end - [React] - 모듈 module (외부 모듈 export / import) - node.js - npm 명령어: node package manager - Webpack - 배포용 프로덕션 - powershell 터미널에서 위 명령어들 지우기 : clear - cf) React native는 모바일 앱관련 프레임워크 * 리액트 문법 module모듈 (export / import) - 02_module 폴더 ** git / github 원격 저장소 – 인증 문제로 접근이 안되는 경우 다른 사용자의 정보가 있다면 지우고 다시 인증연결이 필요하다. ** 새로운 React 앱 만들기 기존..
231005 - [React] / local storage / json 정의로 local storage에 편하게 저장하기 / 배포 (github, git, repository 원격저장소) / 배열 함수 array function / 모듈 module (외부 파일문법) [23.10.05] 44일차 - 체계적인 사고 - 문제해결 능력 - 기술학습 능력 > 0919 : 0일차 - 2시간 (HTML + CSS활용) 0920 : 1일차 – JavaScript 기본 0921 : 2일차 – JavaScript 기본 0922 : 3일차 – JavaScript 기본 0925 : 4일차 – JavaScript 기본 (happymarket) 0926 : 5일차 – JavaScript 기본 (happymarket) 0927 : 6일차 – React 1004 : 7일차 - React 1005 : 8일차 - React 1006 : 9일차 - React node.js Front-end - [React] - local storage - json 정의로 local storage에 편하게 저장하기 ..