React Code const BASE_URL = "http://localhost:3001"; const Mypage = () => { const [content, setContent] = useState(""); const [uploadedImg, setUploadedImg] = useState({ fileName: "", fillPath: "" }); const fileAdd = () => { let file = document.getElementById('fileAdd'); file.click(); } const onChange = (e) => { setContent(e.target.files[0]); }; const onSubmit = (e) => { e.preventDefault(); const..

프로젝트폴더에 Mysql관련 패키지 설치하기 npm install mysql || yarn add mysql server폴더에 DB정보파일 생성 프로젝트폴더의 server디렉토리안에 'config'폴더를 생성한 뒤 'db.js'파일을 생성합니다. 이 정보들은 server.js에서 db에 연결요청시 사용됩니다. var mysql = require('mysql'); const db = mysql.createPool({ host : 'host', user : 'user', password : 'password', port:port, database : 'database' }); module.exports = db; server.js에서 db정보 요청 파일 상단에 DB커넥션 객체를 추가해주고 '/api/prod..

//firebaseConfig.js const firebaseConfig = { apiKey: "apiKey", authDomain: "authDomain", projectId: "projectId", storageBucket: "storageBucket", messagingSenderId: "messagingSenderId", appId: "appId", measurementId: "measurementId" }; export default firebaseConfig; 각 키는 firebase 가입 후 프로젝트를 생성하면 받을 수 있다. 해당 하는 키에 값을 넣어주면 된다. import firebaseConfig from '../firebaseConfig'; import * as firebaseui f..

HTML5 부터 브라우저는 File API 지원하기 시작한다. File API 는 아래와 같이 정의되어 있다. FileList : 파일 리스트 File : 파일 데이터 FileReader : 파일 읽기 Blob : 바이트 데이터 간단예제 const captureProfile = (event) => { event.stopPropagation(); event.preventDefault(); const file = event.target.files[0]; let reader = new window.FileReader(); reader.readAsArrayBuffer(file); let inputId = event.target.id; reader.onloadend = () => { convertToBuffer(..

event.stopPropagation() 을 이해하기 위해서는 우선 HTML 상에서 사용자 이벤트가 어떻게 전달되는지 이해해야 합니다. 웹에서의 클릭이벤트 전파 propagation 의 사전적의미는 전파, 확산입니다. 사용자가 마우스로 웹페이지 내의 버튼을 클릭했을때 대부분의 사람들은 버튼만 반응했다고 생각하게 됩니다. 하지만 웹페이 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 됩니다. 이것을 Bubble Up(버블업)이라고 합니다. 위 슬라이드 우측의 문서구조를 보면 a 태그는 li, ul 의 두개의 부모태그가 있습니다. 사용자가 a 태그를 클릭했을때 클릭이벤트는 a 태그를 감싸고 있는 li, ul 태그로 순차적으로 전달되게 됩니다. 즉 a 태그의 onclick -> li ..

스택(Stack)과 큐(Queue)는 서로 닮았지만 다른 자료구조입니다. 스택의 개념 '쌓다' 라는 의미를 가지고 있는 스택(Stack)은 그 의미와 같이 데이터를 차곡차곡 쌓아올린 형태로 자료를 구성합니다. 책상 위에 쌓아둔 책이나 주방에 쌓아둔 접시를 예로 들 수 있는데요. 스택은 후입선출(Last-in First-out)의 자료구조입니다. 앞자만 따서 LIFO 구조라고 하며, 마지막에 들어온 것이 먼저 나간다라는 뜻입니다. 입구와 출구가 같은 자료구조라고 할 수 있겠습니다. 입구와 출구가 하나밖에 없으니 데이터의 삽입과 삭제가 한 방향에서만 이루어집니다. 스택에서는 흔히 데이터의 삽입 연산을 push, 삭제 연산을 pop 이라 칭합니다. 삽입과 삭제가 일어나는 위치는 top이라고 합니다. 스택의 활..