doeunn.log

▶이미지 파일 업로드 기능 구현 - 아이콘 클릭으로 업로드하고 화면에 띄우자 이번 글에서는 프로젝트 진행 중에 겪었던 어려움을 해결한 방법에 대해 기록해 보려고 합니다 :) 다음 글에서는 업로드 후 해당 이미지 파일과 JSON 데이터를 함께 post 요청을 보내는 것까지 해볼 예정입니다. 🔎 이미지 파일 업로드 보통 이미지 파일 업로드를 하기 위해 다음과 같이 작성합니다. 해당 input 태그는 보이지 않게 하고 겉에 있는 div에 클릭 이벤트를 주어 이미지 파일 업로드 기능을 구현했는데요. 자세하게는 input 태그에 useRef를 걸어두고 겉에 있는 div에 클릭 이벤트가 발생하면 Ref를 통해 current.click() 이 되도록 코드를 작성했습니다. input 태그는 보이지 않게 하고 아이콘을 ..

▶리액트(React)를 알아보자 리액트 프로젝트 파일을 생성하기 전에 리액트가 무엇인지, 구동원리는 무엇인지, 핵심 컨셉은 무엇인지! 등에 대해 알아보려고 합니다🙂! 🔎 React ? React란 복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위해 페이스북에서 제작한 라이브러리 입니다. 📌 라이브러리 ? (도서관 = 모듈들의 집합) 간혹 프레임워크와 라이브러리가 혼동될 때가 있는데요. 같이 알아봅시다! 프레임워크 코드를 작성할 때 필요한 틀을 제공해 주는 것 따라서 개발을 할 때 제어권이 개발자가 아닌 프레임워크에게 존재. 개발할 때 프레임워크가 가지고 있는 규칙에 의해 작성 ex) Spring, Django, nextJS, nuxtJS 라이브러리 같은 로그인 로직이라 하더라도 passportJS, g..

▶NodeJS(express)랑 React랑 연동하기 저는 처음에 express와 React를 따로따로 배웠던 터라 React에서 express를 연결하는 부분에 있어서 어려움이 좀 있었는데 그 방법에 대해서 좀 정리해보려고 합니다 :) 클라이언트 / 서버 시점에서 살펴보려고 합니다. 우선 react와 express를 연결한다는 의미는 무엇인가? express는 누군가 서버의 포트로 접속을 하면 react로 만든 파일들을 보여주는 역할을 수행하면 되는 것입니다. 1. Client(React) creat-react-app ./ 리액트 파일이 설치가 되었다면 이제 express와 연동하는 것을 해 봅시다. 우선 우리는 클라이언트를 서버와 연결할 것을 알고 있어야 합니다. 이 말은 클라이언트의 포트와 서버의 ..