JavaScript (7) 썸네일형 리스트형 Ch 3. 자바스크립트 기본 문법 3.1 자바스크립트 작성 위치HTML에서 자바스크립트를 작성할 수 있는 위치는 2가지이다. head 태그와 body 태그이다.head 태그title 태그 밑에 태그를 추가하고 script 태그 안에 작성🔎 head 태그 안에 작성하면 브라우저가 body 태그의 HTML 코드를 실행하기 전에 자바스크립트 코드를 먼저 해석하게 된다.🔎 head 태그 안에 구현된 자바스크립트 코드가 많다면 브라우저는 자바스크립트 코드를 모두 해석한 이후에 HTML코드를 실행하기 때문에 사용자에게 보이는 웹페이지는 그만큼 느려질 수 있다.body 태그body 태그 제일 하단의 태그 안에 작성🔎 body 태그에 있는 HTML 코드가 모두 실행되어 사용자가 보고 있는 브라우저 화면에 나타난 후 자바스크립트 코드를 실행함으.. Ch 1. 자바스크립트, Ch 2. 개발 환경 구성 자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. - 주로 웹 브라우저 내에서 사용 - Node.js를 사용해서 서버 프로그래밍, 데스크탑, 임베디드, 키오스크 등에도 사용 1.1 ECMA Script 란자바스크립트는 프로그래밍 언어이고, ECMA Script는 스크립트 표준을 의미한다. (ES: ECMA Script의 약자) 1.2 바닐라 JS어떠한 라이브러리나 프레임워크를 쓰지 않는 순수 자바스크립트를 바닐라 JS라고 부른다. React, Vue, Svelte 같은 프론트엔드 프레임워크도 결국 바닐라 자바스크립트로 구현을 한 것이다. 따라서 바닐라 자바스크립트를 제대로 이해한다면, 이런 프레임워크를 더 빨리 이해할 수 있고, 제대로 사용할 수 있다. 2.1 Visual.. [React] File Upload 구현하기 ② - 복수 파일 업로드, 썸네일 미리보기, 업로드 된 파일 목록 표시하기 2023.12.20 - [JavaScript/React] - [React] File Upload 구현하기 ① [React] File Upload 구현하기 ① 1. React 프로젝트 생성 2. 코드 작성 1) apiFile.js import axios from "axios"; const baseURL = "http://localhost:8081" const axiosInstance = axios.create({ baseURL, headers:{ 'Content-Type' : 'application/json' } }) export const postFile = async (d 100ke.tistory.com ▶ 이전 포스트에서 실행한 프로젝트에서 추가 구현 1. UploadFile.js import { u.. [React] File Upload 구현하기 ① 2023.12.20 - [Framework/SpringBoot] - [Spring Boot] File Upload 구현하기 ① [Spring Boot] File Upload 구현하기 ① 1. 프로젝트 생성 및 설정 * application.properties server.port=8081 # oracle set spring.datasource.driver-class-name=oracle.jdbc.OracleDriver spring.datasource.url=jdbc:oracle:thin:@localhost:1521/xe spring.datasource.username=(연결할 DB id) spr 100ke.tistory.com ▶ 해당 spring boot 프로젝트의 DB와 연결하여 작업했습니다. 1. .. [React] Router 적용하기 1. 라우터 설치 2. index.js 수정 3. App.js에 적용 App.js 상단에 import {Routes, Route, Link, NavLink} from 'react-router-dom' 적용하여 코드를 작성한다. import './style.scss'; import {Routes, Route, Link, NavLink} from 'react-router-dom' import { useState } from 'react'; // 231121 라우터 실습 function App() { const [isActive, setIsActive] = useState(false) return ( COM home company product community ); } export default App; s.. [React] 231110 - ① 리액트 워크스페이스 지정, ② Component와 state 1. 리액트 워크스페이스 지정 1) 프로젝트 생성할 폴더에서 cmd 실행 > npx create-react-app 2023react > cd 2023react > code . >> 2023react 폴더에서 VS code 실행됨 2) 깃허브에서 2023react 이름으로 repository 생성 3) VS code 위에서 실행했던 VS code 의 터미널에서 다음을 순차 실행 > git init > git add * > git commit -m "first" > git branch -M main > git remote add origin https://github.com/100ke/2023react.git > git push -u origin main 2023.11.10 - [Tools] - [GitHu.. [React] 리액트 개발 환경 구축 1. VS code 터미널 설정 터미널을 실행하면 기본설정이 powershell로 되어있는데 작업의 편의성을 위해 cmd로 변경합니다. 2. Node.js 설치 Node.js (nodejs.org) Node.js nodejs.org node 설치 후 VS code를 재실행 합니다. 3. npm install VS code 에서 터미널 실행하여 cmd에서 다음을 입력합니다. 정상적으로 설치되었다면 다음을 실행하여 'my-app'이라는 이름의 새 react app을 만들어봅니다. 성공 메시지와 함께 'my-app' 이 생성된 것을 확인할 수 있습니다. my-app 위치로 이동한 뒤 npm start를 실행해봅니다. 💻 서버 구동 확인 이전 1 다음
