웹(Web) 67

[React/Spring Boot/Kotlin] 목록 만들기(Spring-React연결하기)

FrontEnd : React BackEnd : Kotlin + SpringBoot DataBase : Docker + Mysql 이용 툴 : - VS(Visual Studio Code) - Postman(데이터베이스 쿼리 발생) - Windows Terminal - npm(Node.js패키지 관리자) Backend개발 후 Docker Mysql 연결(PORT : 3306) => Mysql연결된 것을 Postman을 통해서 쿼리 테스트 => VS에서 npm을 통해 React 설치 및 App.js를 이용 (PORT : 3000에서 Spring서버로 연결해서 PORT : 3306에서 데이터를 불러옴) 접근허용 방법 아래는 webConfig.class 파일의 내용이다. https://www.youtube.co..

Docker 명령어

https://www.yalco.kr/36_docker/ 가장 쉽게 배우는 도커 어려운 프로그래밍 개념들을 쉽게 설명해주는 유튜브 채널 '얄팍한 코딩사전'. 영상에서 다 알려주지 못한 정보들이나 자주 묻는 질문들의 답변들, 예제 코드들을 얄코에서 확인하세요! www.yalco.kr 1. 현재 실행중인 도커 보기(present의 약자) docker ps 2. 이미지로 컨테이너 생성하기 docker create {옵션} {이미지명}:{태그} # 예: docker create -it python 3. 만들어진 컨테이너 시작 docker start {컨테이너 id 또는 이름} 4. 이미지를 다운받아(없을시에) 바로 컨테이너 실행하여 진입하기 docker run {이미지명}:{태그} # 예: docker -it ..

Docker 설치 및 도커에 MySQL실행하기

참고 영상 https://www.youtube.com/watch?v=J9pxPVcd-fY 참고 링크 https://docs.microsoft.com/ko-kr/windows/wsl/install-win10#manual-installation-steps Windows 10에 WSL 설치 Bash 터미널을 사용하여 Linux 배포(Ubuntu, Debian, SUSE, Kali, Fedora, Pengwin 및 Alpine 포함)를 Windows 10 머신에 설치하는 방법을 알아봅니다. docs.microsoft.com 준비 : ms store에서 윈도우 터미널 다운 모두 설치완료하면 wsl2설치완료. 다음은 docker 설치 https://docs.microsoft.com/ko-kr/windows/wsl/..

[JAVA] Spring boot 공부방향

1. 완전초보일때 참고할 깃허브 https://github.com/next-step/spring-learning-test next-step/spring-learning-test Contribute to next-step/spring-learning-test development by creating an account on GitHub. github.com 2. 완전 처음일때 강의추천(김영한님 로드맵따라가기) https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8 [무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근..

Spring과 React/Vue/Angular 연결

웹프레임워크(ex) Spring, Django )을 통해서 정적사이트를 만들 수 있다. SPA(홈페이지는 그대로인데 내용만 바뀌는것)는 정적사이트(전체페이지가져옴)를 보완하기 위해 AJAX를 통해 구현함. 하지만, SPA를 위한 프레임워크가 있음(JS로 구성된 Angular, React, View)를 통해서 만들 수 있다. 따라서, 웹 페이지를 구축할때는 아래와 같이 한다. 프론트- JS를 이용한 React/Vue/Angular 로 웹페이지 만들기 백엔드- Java+SpringBoot로 구축 => 왜 React/Vue/Angular로만 만들지 않는가? : 대표적으로 DB를 연결하려면 Spring이 필요하다. 즉, DB외에도 다른 서비스들을 연동하려면 백엔드단으로 따로 나누어 Spring의 도움이 필요한것..

객체지향 디자인패턴1 feat.예시로 이해

1. 싱글톤 패턴(Singleton Pattern) : 다크모드를 각 페이지에 적용할때, 생성자를 private으로 만들어서, 다른페이지에서 그대로 가져다 쓰게 만드는 것이라고 본다. 2. 전략 패턴(Strategy Pattern): 각 버튼에 따라서 다르게 검색. if문에 따라서 onclick메소드를 바꾸는것. => 좋지 않음. 모드마다 동작 하나하나를 다르게 갈아껴주는 방식. 옵션마다 implements. 3. 상태 패턴(State Pttaern) : 전략패턴과 비슷하지만 메소드가 실행될때 모드도 전환되는것. 4.커맨드 패턴(Command Pattern) : 그리드에서 로봇이 움직이는 것. => 추상클래스로 Command. Kit를 만들어서 수행하게 할 수 있음. 5. 어댑터 패턴(Adapter Pa..

스프링 XML --> JAVA Configuration으로 변경

1. @Configuration 2. @ComponentScan("spring.di.ui") 3. @Bean : 우리가 만든것을 컨테이너에 담아준다. NewlecDIConfig.java 를 만들어 JAVA Configuration을 한다. @ComponentScan("spring.di.ui") @Configuration public class NewlecDIConfig{ @Bean //public Exam getExam(){ //반환할때, 인터페이스로 받기 때문에 public Exam exam(){//id의 이름으로 메소드를 만드는것이 바람직 return new NewlecExam(); } } ApplicationContext context = new AnnotationConfigApplicationCo..

스프링 어노테이션을 이용한 객체생성/초기값(@Value)

소스코드로 옮기는작업을 하는것이다. Component-scan이 꼭 필요함을 알려줌. 더보기 www.youtube.com/watch?v=DNrkw3pAsAM&list=PLq8wAnVUcTFWxnsrMu5kS_jt_o8gpEiTR&index=15 www.youtube.com/watch?v=pyMzPpK4uXk&list=PLq8wAnVUcTFWxnsrMu5kS_jt_o8gpEiTR&index=16 "spring.di.ui"라는 패키지 안에 들어가서 클래스들이 있을텐데, 거기 들어가서 클래스 읽어줄래? 스캔해봐서 component가 있는지 찾아봐. 거기 컴포넌트가 있으면 객체화 시켜줘. @Component를 읽으면 안쪽에 있는 걸(Autowired부분) 읽어버림. 따라서 XML부분에서는 객체 생성하는부분을 다..

스프링 어노테이션(Annotation), @AutoWired과 @Qualifer

1. XML로 설정 XML을 매번 바꿔야되므로 귀찮으니 발전해서 소스코드를 읽게해줌. -> 따라서 java코드에서 @Component를 인식해서 객체화함 @Autowired를 통해서 Xml에 있던객체를, 코드에다가 객체를 모두 박아버리는것이다. 위 한줄만 추가해주면 된다. => 객체를 만들어놓고 "그 안을 들여다봐라" 라는 뜻 => 그래야 @Autowired를 통해서 안을들여다보고 자동으로 설정 (추가해주지 않으면 탐색을 하지 않으므로 NullPointerError 뜬다.) @Autowired : 자동으로 연결해준다는것은 문제가 될 수 있다. @Qualifer : 객체가 여러개일때 식별이 모호할경우 명시해주기 위해 사용한다. bean에 모호한 exam이 여러개 등록되어있다. id="exam"으로 하면 @..