본문 바로가기

학교 & 학원 이론 수업/네이버 클라우드 AIaaS 개발자 양성 과정

 (50)
final project 기간 : 4주 (7.12 ~ 8.7) 종류 : 웹 풀스택 개발 (온라인 커뮤니티) -Front : React , Figma -모바일 크기 , 반응형 -Back : Spring Boot , Gradle , JPA, MyBatis, MySQL -Server : Naver Cloud , Docker, Jenkins, Tomcat -ETC : Socket.io , HTTPs , JWT , naver sens , Github , IDE(VSCode, IntelliJ), Postman , 소셜로그인(Naver,Kakao) , DNS -게시판 CRUD -로그인 -회원가입 -마이페이지 (이력서관리, 개인정보관리, 관리자페이지 등) -쪽지기능 -검색 -세미 프로젝트 때 JSP로 개발했던 내용을 React 로 리팩토링 -..
react(11) - useContext , JWT Token Index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import reportWebVitals from './reportWebVitals'; import Root from './Root'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // ..
react (10) useReducer , useCallback (ReducerComp1.js) (ReducerComp2.js) (callback>SmartHome.js)
react (9) - 페이징 처리 reactboard Boardsql.xml select count(*) from reactboard insert into reactboard values (null,#{myid},#{myname},#{photo},#{subject}, #{content},0,now()) select * from reactboard order by num desc limit #{start},#{perpage} update reactboard set readcount=readcount+1 where num=#{num} select * from reactboard where num=#{num} delete from reactboard where num=#{num} BoardMapper package data.mapper; im..
react(8) - 로그인 구현 src>main>java>data>controller package data.service; import java.util.HashMap; import java.util.List; import java.util.Map; import org.springframework.stereotype.Service; import data.dto.MemberDto; import data.mapper.MemberMapper; import lombok.AllArgsConstructor; @Service @AllArgsConstructor public class MemberService implements MemberServiceInter { private MemberMapper memberMapper; @Override p..
react(6),(7) - docker, Jenkins, docker hub 다음과 같은 구조로 서버 2개에 배포하고자 한다 ncloud 에 새로운 server 2개 생성하기(비번변경 bit!@#123) react-jenkins react-springboot 도커 설치 스크립트 다운로드 # apt-get update # apt-get install curl # curl https://get.docker.com > docker-install.sh # chmod 755 docker-install.sh 도커 설치 # ./docker-install.sh 도커 버전 확인 # docker -v 도커 이미지 목록 확인하기-아직 아무거도 없음 docker image ls docker images Jenkins 사용법/Jenkins 설치 젠킨스 도커 컨테이너에서 사용할 브릿지 네트워크를 준비한다..
react (5) - router VSCode로 리액트, IntelliJ로 SpringBoot 프로젝트 설치 후 진행중. -package.json에 proxy 추가 "proxy": "http://localhost:9000" -react-router-dom 설치 : 페이지 이동에 활용 -src>pages>About.js , Food.js, Home.js , HomeSub1.js , HomeSub2.js , HomeSub3.js , index.js , Main.js 만들기 -RouteMain.js 에 다음의 코드 RouteMain.js src>pages>About.js RouteMain.js src>pages>Food.js RouteMain.js src>pages>index.js export {default as Home} from './H..
react(4) & 스프링부트 연동 Json 파일 리액트에서 호출하기 import로 가져온다음 const로 선언하고 map으로 호출해준다 Axios로 백엔드 서버 및 DB와 연동 백엔드 서버 셋팅 (Naver Cloud , Spring Boot, MySql) -IntelliJ, Gradle, NaverCloud(MySql), MyBatis, lombok - @RestController: 이 어노테이션은 컨트롤러를 REST 스타일로 사용하게 만드는 스프링 MVC 어노테이션입니다. 이 어노테이션을 클래스에 추가하면, 그 클래스의 모든 메소드는 기본적으로 HTTP 응답 본문에 직접 쓰여지게 됩니다. 즉, @ResponseBody가 없어도 뷰를 통해 데이터가 반환되지 않고, 데이터가 그대로 클라이언트에게 전달됩니다. @AllArgsConstruc..

티스토리툴바