본문 바로가기
728x90
반응형

리액트31

폼 데이터와 함께 파일 업로드 (다중 파일 선택창 & 다중 파일 선택) 하나의 파일 선택창에서 여러 개의 파일을 선택해서 업로드하는 기능을 확장해서 여러 개의 파일 선택창에서 여러 개의 파일을 선택해서 업로드하는 기능을 구현합니다. 단일 파일 선택창에서 다중 선택한 파일 업로드 기능은 아래 내용을 참고하세요. https://myanjini.tistory.com/entry/%ED%8F%BC-%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%99%80-%ED%95%A8%EA%BB%98-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C 폼 데이터와 함께 파일 업로드 사용자 아이디, 이름, 이메일과 첨부파일을 입력받아서 서버로 전달하면, 서버는 지정된 경로에 첨부파일을 저장하고, 전달받은 값과 첨부파일 정보를 이름 : 값 형식으로 반환하는 예.. 2023. 4. 12.
카카오 로그인 MySQL, React, SpringBoot로 구현한 게시판 서비스에 카카오 로그인 기능을 추가하는 과정으로, 실습에 사용한 코드는 https://myanjini.tistory.com/entry/board-%EC%86%8C%EC%8A%A4%EC%BD%94%EB%93%9C 에서 내려받을 수 있습니다. 애플리케이션 추가 카카오 개발자 사이트(https://developers.kakao.com/)에서 애플리케이션을 추가하고, 앱 키를 확인합니다. (여기에서는 JavaScript SDK를 사용하므로, JavaScript 키를 필요로 합니다.) 플랫폼 메뉴에서 사이트 도메인을 등록하고, Redirect URI 등록 페이지에서 카카오 로그인 서비스를 활성화하고, Redirect URI 주소를 등록합니다. 동의항목 .. 2023. 4. 6.
네이버 로그인 MySQL, React, SpringBoot로 구현한 게시판 서비스에 네이버 아이디로 로그인 기능을 추가하는 과정으로, 실습에 사용한 코드는 https://myanjini.tistory.com/entry/board-%EC%86%8C%EC%8A%A4%EC%BD%94%EB%93%9C 에서 내려받을 수 있습니다. 애플리케이션 등록 네이버 개발자 사이트(https://developers.naver.com/)에서 애플리케이션을 등록하고, API를 설정합니다. 라이브러리 등록 SDK 다운로드 페이지(https://developers.naver.com/docs/login/sdks/sdks.md)에서 JavaScript용 네이버 로그인 라이브러리의 최신 버전 링크 주소를 확인합니다. index.html 파일에 앞에서 .. 2023. 4. 6.
깃허브로부터 가져온 리액트 코드를 실행하는 도커 이미지 제작 깃허브로부터 리액트 소스코드와 Dockerfile을 가져와 nginx 컨테이너에서 서비스하는 도커 이미지를 제작합니다. 깃허브 저장소 생성 깃허브에 소스코드를 저장할 퍼블릭 저장소를 생성합니다. 소스코드 등록 및 저장소 주소 확인 리액트 어플리케이션 소스코드를 등록하고, 깃허브 저장소 주소를 확인합니다. VSCode를 실행하고 Dockerfile을 생성 작업 디렉터리에서 VSCode를 실행합니다. ## VSCode 실행 C:\docker> code . 이미지 빌드에 사용할 Dockerfile을 생성합니다. 이때, 각 단계의 컨테이너에서 필요한 값을 ARG 항목으로 정의합니다. ## git을 설치하고 소스코드를 가져오는 컨테이너 FROM alpine AS init RUN mkdir /my-app WORKD.. 2023. 3. 16.
728x90
반응형