frontend4 [React] 로그인 구현(Frontend) 우선 App.js와 기본적인 페이지를 생성한다. 1. App.js (나는 Routes.js) - Login, Profile는 만들어야 됨. import React, { useContext, useEffect } from "react"; import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; import axios from "axios"; import "bootstrap/dist/css/bootstrap.min.css"; import Login from "../Login/Login"; import Profile from "./Profile"; export default (props) => { console.log(props); .. 2022. 3. 30. webpack이란? ES6, CommonJS. WebPack. 설치 및 설정 방법. 위와 같은 내용 정리. 1. ES6, CommonJS란? javascript의 모듈화 방식이다. (참고. 외부의 스크립트 파일을 불러오는 것, IIFE 등은 범위 문제와 즉시 실행되는 문제로 인해서 모듈 기능을 할 수 없었다.) CommonJS - exports 키워드로 모듈 생성, require()함수로 import 하는 방식. --> script 태그가 아닌 필요한 함수나 변수만을 가져올 수 있음. --> 의존성 관리가 편리 하지만, 브라우저에서는 필요한 모듈을 모두 받을때까지 아무것도 할 수 없다는 단점이 존재. ES6 - export 키워드로 모듈 생성, import로 가져오는 방식. --> server.js export defaul.. 2022. 2. 6. Babel이란? 아래 두가지에 대한 개념 정리. 크로스 브라우징(Cross Browsing) 바벨(Babel) 1. 크로스 브라우징(Cross Browsing) 사용자 환경의 영향을 최소로 하고, 웹 서비스를 사용할 수 있도록 최적화하는 작업이다.(즉, 모든 브라우저에서 의도한대로 올바르게 나오도록 하는 작업(호환성)) --> 크로스 브라우징을 위한 것이 바로 Babel이라는 툴! 2. Babel: 크로스 브라우징 이슈를 해결하기 위한 툴 ES6+ 버전의 자바스크립트, 타입스크립트 등의 다른 언어들도 모든 브라우저에서 동작 가능하도록 호환성을 지켜줌. 바벨을 통해서 ES6+ 버전의 자바스크립트 코드는 하위버전으로 변환되고, 그로 인하여 IE나 다른 브라우저에서 동작할 수 있도록 함. 3. 바벨의 빌드 단계 3-1. 파싱.. 2022. 2. 6. html에 js파일 함수 호출하기. html내에서 js파일 내 함수 호출하는 방법 1. js파일 생성. 2. html 파일 생성. 3. js 폴더를 하나 만들어, html보다 파일을 위쪽으로 배치 하니깐 잘 해결 되었다. 4. html부분에서 head단에 를 명시해준다. 5. html 원하는 곳에서 함수를 호출한다. 아래 예시처럼 하면 실행 가능. // js/test.js 파일 function a(){ console.log('Test') } . . . a(); 경로 중요 2021. 3. 29. 이전 1 다음
