JavaScript3 file upload (react.js + multer + axios) 본 글은 교육시간에 교육생에게 도움을 주기 위해 작성되었습니다. 목적은 react.js - node.js 환경에서 파일 업로드 구현입니다. front 에서 axios 를 이용하며 back-end 에서 multer 를 이용합니다. back-end 에 public 폴더를 static 폴더로 지정했다는 가정이고 이 public 하위에 upload 폴더에 파일을 저장합니다. 파일을 저장하자 마자 저장한 파일명을 front 에 전달해서 화면에 이미지로 출력하는 샘플입니다. Front 코드 const App = () => { const [title, setTitle] = useState('') const [file, setFile] = useState() const [uploadImage, setUploadImag.. 2024. 1. 24. CORS 환경에서 Session 이용하기 본 글은 수업시간에 프로젝트를 진행하는 교육생에게 도움을 주기 위해서 작성되었습니다. 글에 담긴 내용 CORS 환경에서 Session 활용 Front 앱 데이터 Context 활용 사용 기술 React.js + Node.js(Express) + Axios CORS 환경에서 Session 이용 설정 CORS(Cross-Origin Resource Sharing) 환경에서 Session 이 유지되기 위해서는 Back-End 설정 및 Front 설정이 되어야 한다. back-end 설정 app.use(cors()) CORS 를 위해서는 위처럼 cors 모듈만 등록해도 정상적으로 서비스가 가능하다. 하지만 세션을 이용하기 위해서는 cors 를 등록하면서 추가적인 옵션이 설정되어야 한다. app.use(cors(.. 2024. 1. 17. This... 자바스크립트에서의 this 는 일반 OOP 에서의 this 와 차이가 있다. 이는 자바스크립트에서 전역객체를 제공하기 때문에 this 가 지칭하는 객체를 혼동하는 경우가 생긴다. this 가 어떤 객체를 지칭하는지를 정확하게 이해하려면 함수가 일반 함수인지 객체 함수인지를 구분할수 있어야 한다. - 일반함수호출 - 객체함수호출 일반함수호출 자바스크립트는 특정 객체에 속하지 않은 변수나 함수는 전역 객체인 window 소속이 된다. 결국 일반 함수라는 것은 window의 함수를 의미한다. function a(){ this.name="kkang" console.log("a()..."+name)//kkang console.log("a()..."+this.name)//kkang } a() console.log(.. 2019. 2. 13. 이전 1 다음