작성일 20240512

➡️ Java에서의 빌드(build)

자바코드를 실행가능한 형태인 JAR 파일로 만들어주는 일련의 과정이다.

빌드 시스템(Build System)에 있는 그레이들과 메이븐은 소스코드를 이용해서 실행가능한 애플리케이션을 생성하는 과정을 자동화하는 프로그램이다. 자동화 과정에는 의존성 내려받기, 코드 패키징, 컴파일, 테스트 실행 등이 있다. 참고로 과거에는 메이븐을 많이 사용했으나 요즘은 그레이들을 많이 사용하는 추세이다.

CF. JAR vs. WAR

➡️ 메이븐(Maven)

✅ Maven은 왜 만들어졌을까?

기존의 Apache Ant의 대안으로 만들어진, Apache 회사에서 제공되는 오픈소스 소프트웨어라서 Apache Maven이라고 부르기도 한다.

Maven이 Yiddish(유대인의 언어)로 Accumulator of Knowledge(지식의 축적)를 뜻하더라. 추측해본건데... 그 복잡한 것들을 대신 하도록 도와주는 지식의 결정체와 같은 도구를 만들었다는 의미에서 그렇게 지은 것이 아닐까 생각했다.

이런 도구 없다면 모든 소프트웨어에 필요한 기본적인 동작(빌드 등)도 하나하나 지시해야 했으니 말이다. 애초에 Maven이라는 소프트웨어를 만들게 된 계기도 빌드 프로세스를 단순화하려는 시도였다고 한다.

여기서 Maven이라는 소프트웨어가 참여하는 커다란 소프트웨어(프로젝트)는 자바 프로그래밍언어 기반을 가리킨다. 다시말해 Maven은 자바 프로젝트의 빌드, 관리 및 문서화를 자동화하는 도구이다.

과거에는 프로젝트마다 본인만의 Ant 빌드 파일을 사용했다고 한다. 이러한 통일성 문제로 인해 협력이나 유지보수성 등의 개발 과정 복잡해졌다고 한다. 때문에 기존의 Ant를 확장해 프로젝트를 빌드하는 표준 방법을 제시하여 획일화된 빌드 프로세스를 갖게 되었다.

즉, 소프트웨어의 기초기반를 뚝딱! 제작해주는 도구가 만들어진 것이다. Maven이 등장함으로써 표준 빌드 프로세스가 생긴 덕분에, 누구나 프로젝트 구성을 단시간에 명확하게 알 수 있게 되었다. 뿐만 아니라 pom.xml에 필요한 라이브러리를 코딩해두면 Maven이 알아서 관리하고 다운로드받아주니, 라이브러리(JAR 파일)를 직접 다운로드받을 필요가 없어졌다.

✅ (내용 검토 및 역할요약 필요) Maven의 장점 및 역할

① 표준 빌드 라이프사이클 제공

② 개발 프로세스 간소화 : 프로젝트 빌드, 패키지, 테스트, 배포(WAR 파일) 등

③ 라이브러리의 관리

• 프로젝트의 라이브러리 의존성 관리
• 필요한 라이브러리를 프로젝트에 추가
• 버전 충돌 해결
  

④ 라이브러리 자동 다운로드 및 프로젝트에 추가

• 빌드를 하기 위해 필요한 라이브러리의 종속성을 다운로드
• POM(Project Object Model, 프로젝트 객체 모델)을 이용하여 라이브러리 다운로드
• 프로젝트의 빌드를 위해 필요한 라이브러리들의 종속성을 관리하고 해결

즉, POM 파일에 선언된 라이브러리의 종속성을 해결하여 필요한 라이브러리를 자동으로 다운로드하고 프로젝트에 추가한다는 것을 의미합니다.

⑤ 프로젝트 문서화 처리, 구조 관리

: 빌드하고자 하는 프로젝트가 무엇인지, 어떤 순서로 빌드하는지, 여러 외부 라이브러리 종속성 관계를 pom.xml파일에 명시해준다.

앞서 언급되었듯이 Maven은 POM(Project Object Model, 프로젝트 객체 모델)을 사용하여 프로젝트의 라이프사이클을 관리한다. 지금부터 POM에 대해 알아보자.

✅ POM이란?

프로젝트의 기본 정보가 들어가 있는 pom.xml 파일을 가리키며, pom.xml 파일을 구성하는 최소 항목은 아래와 같다.

• 프로젝트의 루트

• modelVersion

• 프로젝트 그룹의 아이디 (groupId)

• 프로젝트의 아이디 (artifactId) : 이는 곧 아티팩트의 아이디이기도 하다

• 프로젝트의 버전 (version) : 이는 곧 아티팩트의 버전이기도 하다

앞선 [ Maven의 장점 및 역할 ]의 ④에서 언급되었듯이 pom.xml에서는 모든 의존성을 관리하는 역할을 한다.

이는 Maven이 최종적으로 프로젝트를 빌드하기 위해 필요한 과정이다. 그 과정에 모든 의존성을 다운로드해, 라이브러리 간의 의존성을 확인하기 해결하기 위함이다.

추가로 필요한 라이브러리를 다운로드 받기 위한 코드를 삽입하는 경우를 제외하고, 초보 개발자는 Maven을 다룰 일이 많이 없기 때문에 명령줄 사용법을 익히는 것보다는

pom.xml의 코드 구조를 대략적으로 이해하고 새 의존성을 추가하는 방법을 아는 것이 중요하다.

지금까지 의존성이라는 단어를 계속 사용해왔다.
이는 존속성이라고도 부르는데 자바와 같은 객체지향언어를 하는 사람이라면 특히 자주 접할 단어다. 이 단어 자체의 뜻은 대략 알고 있다 생각했지만... 저 말의 의미가 무엇인지 참 헷갈린다.
그래서 이번엔 위에서 설명한 의존성과 관련된 문장들을 이해해보는 시간을 가지려 한다.

✅ 라이브러리의 의존성이란? 이 글에서의 의존성(dependency)은 프로젝트가 다른 외부 라이브러리나 프레임워크에 의존하는 것을 의미한다.
단, 의존성이라는 단어가 사용되는 그 대상에 따라 해당 설명이 바뀔 수 있다. 하지만 결국 무언가 의존하는 관계를 맺고 있다는 의미를 갖는 용어이다.
즉, 라이브러리의 의존성은 프로젝트가 실행되기 위해 필요한 외부 라이브러리나 프레임워크를 가리킨다.
예를 들어, Java 프로젝트에서는 Apache Commons 라이브러리의 commons-lang3 모듈을 사용하여 문자열 처리를 한다면, 이 라이브러리는 프로젝트의 의존성(dependency)을 가지고 있는 것이다. 프로젝트는 이 외부 라이브러리의 기능을 사용하기 위해 해당 라이브러리에 의존하고 있다.

✅ 'pom.xml에 선언된 라이브러리 의존성'의 의미 : Maven을 사용할 때, 이러한 종속성을 명시적으로 프로젝트의 pom.xml 파일에 선언한다. 여기서 명시적~ 선언이라함은 코드로 해당 내용이 적혀있다라고 생각하면 된다. Maven은 이 선언된 종속성을 해결하여 필요한 라이브러리를 다운로드하고 프로젝트에 추가한다. 따라서 Maven은 종속성을 관리하고 해결하는 역할을 수행다.

✅ 위 글에서 'Maven이 pom.xml에 선언된 라이브러리의 의존성을 해결해준다'의 의미 : 이는 Maven이 프로젝트의 종속성을 관리하는 과정을 가리키는 문장이다.
차근차근 풀어서 이해해보자.
Maven이 담당하고 있는 프로젝트의 루트 디렉토리에는 pom.xml이라는 파일이 있다.
이 파일은 프로젝트 객체 모델(Project Object Model, POM)을 정의하며, POM은 프로젝트의 구조, 종속성, 빌드 설정 등을 정의하는 XML 파일이다. 뿐만 아니라 POM 파일에는 프로젝트가 사용하는 외부 라이브러리의 정보도 있다.
예를 들어, pom.xml 파일에 아래와 같은 종속성이 선언되어 있다고 가정해보자.

<dependencies>
    <dependency>
        <groupId>org.apache.commons</groupId>
        <artifactId>commons-lang3</artifactId>
        <version>3.12.0</version>
    </dependency>
</dependencies>

이 경우 Maven은 org.apache.commons:commons-lang3:3.12.0 라이브러리를 다운로드하고 프로젝트에 추가한다.
POM 파일에 있는 외부 라이브러리 정보를 바탕으로 Maven은 프로젝트가 의존하는 라이브러리를 찾아서 다운로드하고, 필요한 라이브러리를 프로젝트 빌드에 포함시키는 과정을 거치게 되는 것이다.

이해의 재료는 모두 모았다. 'Maven은 pom.xml에 선언된 의존성을 해결한다'의 의미를 이제 정리해보자.

1) Maven은 POM 파일에 적혀있는 외부 라이브러리들을 읽는다.
2) Maven이 외부 라이브러리들의 의존 관계에 있는 라이브러리들을 확인한다.
이를 확인하는 이유는 다음과 같다.
만약 의존성이 있는 라이브러리가 적혀있었다고 했을 때, 의존성을 무시하고 딱! 적혀있는 라이브러리만 사용한다면 최악의 경우 아예 해당 라이브러리를 사용할 수 없게 될 것이다.
왜냐하면 라이브러리에게 의존성이 있다는 것은 해당 라이브러리의 동작이 이루어지기 위해서는 반드시 자신 외의 라이브러리를 필요로 한다는 뜻이기 때문이다.
이 설명을 다르게 설명하자면 의존성이 있는 라이브러리는 '자기 혼자 온전히 동작되지 않는' 라이브러리라는 뜻이기도 하다.
때문에 완전하게 라이브러리를 사용하려면 의존성이 있는지, 그리고 있다면 의존 관계에 있는 라이브러리까지 다운로드해야만 하는 것이다.

3) 적혀있는 라이브버리 뿐만 아니라 의존 관계에 있는 라이브러리까지 다운로드하여 프로젝트에 추가한다.

우리는 1)4)번까지의 Maven이 하는 동작을 'Maven의 라이브러리 의존성 해결'이라고 부른다.

➡️ 참고자료

[교재] 주하 한쿨라, 「실전! 스프링부트와 리액트로 시작하는 모던 웹 애플리케이션 개발」

https://maven.apache.org/what-is-maven.html

https://mangkyu.tistory.com/8

https://jisooo.tistory.com/entry/Spring-%EB%B9%8C%EB%93%9C-%EA%B4%80%EB%A6%AC-%EB%8F%84%EA%B5%AC-Maven%EA%B3%BC-Gradle-%EB%B9%84%EA%B5%90%ED%95%98%EA%B8%B0

작성일 2023.01.15 2024.05.12 이후

➡️ 개발 환경

• Front-end : Javascript, React.js, Node.js
• Back-end : Java 17, Spring Boot 3.2.1, Spring Data JPA, Gradle-Groovy
• Database : MySQL
• IDE : IntelliJ Community, Visual Studio Code

React를 선택한 이유
리액트는 가상 DOM을 통해 사용자의 반응에 맞춰 DOM 트리를 효율적으로 변경함으로써, 웹사이트에서 수정된 부분만을 갱신할 수 있게 해줍니다. 이는 과거에는 변경사항이 발생할 때마다 웹 페이지 전체를 다시 불러와야 했던 번거로움에서 벗어나 성능상의 차이를 만들어냅니다.
뷰와 앵귤러도 위와 같은 장점을 가지고 있으며 웹 개발에 널리 사용되지만, 이들은 프로젝트의 특성과 개발자의 취향에 따라 선택되어집니다. 이번 프로젝트에서 뷰나 앵귤러 등이 아닌 리액트를 선택한 이유는 다음과 같습니다.
첫째, 리액트는 JSX 문법을 사용하기 때문에 UI 코드를 작성할 때 자바스크립트와 비슷한 XML 형식을 사용할 수 있어 가독성이 높아지고, HTML과 유사한 구조로 UI를 표현할 수 있습니다. 이는 자바스크립트를 경험해본적 있는 제게 유리한 지점이었습니다.
둘째, 객체지향언어인 자바가 주언어이기 때문에 재사용성이라는 것의 유리함을 알고 있습니다. 그런데 리액트가 컴포넌트 기반 아키텍처를 사용하고 이 구조가 코드의 가독성과 재사용성을 향상시켜준다는 점에서 더욱 메리트있고 친숙하게 느껴졌습니다.
셋째, 리액트를 스프링부트와 함께 사용할 때의 자료가 상대적으로 풍부하다는 사실 역시 고려한 동기 중 하나입니다.

Gradle-Groovy 선택한 이유
내 블로그 바로가기 (SpringBoot의 설정 : gradle, maven, yml, properties https://velog.io/@song-eojin/Gradle%EC%9D%B4%EB%9E%80)

➡️ 환경설정

✅ 인텔리제이 커뮤니티, 무료 버전에서 스프링부트 프로젝트를 개발하고 싶다면?

내 블로그 바로가기 링크
SpringBoot : 인텔리제이 커뮤니티 버전에서 환경설정하는 방법 https://velog.io/@song-eojin/IntellJ-Community-%EB%B2%84%EC%A0%84%EC%9C%BC%EB%A1%9C-Spring-Boot-%ED%99%98%EA%B2%BD%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

✅ 풀스택 프로젝트, 리액트와 스프링부트를 사용하고 싶다면?

내 블로그 바로가기 링크
SpringBoot and React : 스프링부트와 리액트 환경설정 (연동, 개발환경 통합) https://velog.io/@song-eojin/%EB%A6%AC%EC%95%A1%ED%8A%B8React.js%EB%9E%80

✅ 데이터베이스, MySQL을 사용하고 싶다면?

내 블로그 바로가기 링크
MySQL : 비주얼 스튜디오에서 연동하는 방법 https://velog.io/@song-eojin/MySQL-%EB%B9%84%EC%A3%BC%EC%96%BC-%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4%EC%97%90%EC%84%9C-%EC%97%B0%EB%8F%99%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

[ARTICLE]
리액트(React)를 왜 사용해야 할까? – 리액트가 강력한 이유 https://modulabs.co.kr/blog/react-library/

작성일 20240202

MySQL을 설치했다는 가정 하에 설명하는 글입니다.

➡️ STEP 01. 비주얼 스튜디오에서 MySQL 확장 설치하기

아래 사진과 같이 비주얼 스튜디오의 좌측에 확장 버튼을 클릭하자. 참고로 여기서 확장은 작업에 도움을 주는 도구를 추가로 얻을 수 있는 마켓이라 생각하면 된다.

MySQL - Weijan Chen라는 확장을 검색하여 install/설치 버튼을 눌러주면, 좌측에 Database 버튼이 생성된다. 생성된 Database 버튼을 클릭하면 아래와 같은 화면을 볼 수 있다. 이제 Create Connection 버튼을 클릭하여 데이터베이스를 연결해보자.

➡️ STEP 02. Database 확장에서 MySQL 연동하기

데이터베이스를 어떤 이름으로 표시할지를 설정해주는 Name에는 본인이 원하는 이름을 정해주면 된다. 나는 간단히 MySQL으로 하였다. 그 후 MySQL 설치 시 설정한 Username, Password를 작성하고 Connect 버튼을 눌러 Connection Save가 상단에 등장하면 MySQL 연동에 성공한 것이다. 만약 Connection error!Access denied for user 'system'@'localhost' (using password: YES)가 발생한다면 아래의 글을 참고하자.

내 블로그 글 보기
MySQL : Access denied for user 'ODBC'@'localhost' (using password: NO) 이슈 해결방법

➡️ 참고자료

[BLOG]
[MySQL] 사용자 확인/추가/삭제, 사용자 권한 부여/삭제/확인 https://immose93.tistory.com/20
mysql 비밀번호 분실시 - Windows https://m.blog.naver.com/nateen7248/220482580216

작성일 20240122

리액트를 npm start를 통해 실행시켰을 때, 브라우저에 아래와 같은 에러 문구가 뜬다면 어떻게 해결하는지 기록하고자 한다.

ERROR in ./src/index.js 7:0-24
Module not found: Error: Can't resolve './App' in 'D:\project\project-portfolio\shoppingmall\src\main\reactfront\src'

CF. React와 React Native는 어떻게 다를까?
React Native는 React 방식을 사용하여 네이티브 앱을 만들기 위해 만들어졌다. 때문에 프로그래밍 언어로 자바스크립트를 사용하며 문법과 구조 모두 비슷하다.
다만 React는 웹 브라우저에 UI 렌더링되고, React Native는 iOS나 AOS에 렌더링된다는 점이 다르다. 뿐만 아니라 React는 DOM 조작을 필요로 하지만 네이티브는 그렇지 않으며 사용하는 라이브러리도 많이 다르다. 자세한 내용이 궁금하다면 가장 하단의 참고자료에 걸어둔 링크(https://blog.imqa.io/react-native/)를 살펴보자.

✅ 자바스크립트 라이브러리

✅ SPA(Single Page Application)

페이지 이동없이 한 페이지에서 모드 요소를 불어와서 동작한다.

작성일
20240117

인텔리제이에서 스프링부트 프로젝트에 리액트를 설치하기 위해 npx create-react-app 폴더명을 입력하였더니 아래와 같은 에러 메세지가 발생했다.

PS C:\Users\스프링부트 프로젝트 파일경로
npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path C:\Users\USER\AppData\Roaming\npm
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\USER\AppData\Roaming\npm'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in: C:\Users\USER\AppData\Local\npm-cache\_logs\2023-07-26T07_43_03_676Z-debug-0.log

이러한 이슈가 발생했을 때 해결하는 방법이 적힌 타 블로그의 링크를 아래에 달아두었다. 해당 방법으로 해결되었다면 예정대로 다시 npx create-react-app 폴더명을 인텔리제이 터미널 창에서 입력해주면 된다.

[BLOG] npm ERR! path 에러 해결 https://velog.io/@jhcha/typescript-npm-ERR-path-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0

[BLOG] React You are running create-react-app 5.0.0, which is behind the latest release (5.0.1) error https://believecom.tistory.com/768

작성일
20240117, 20240124

➡️ 참고자료

[BLOG]

1. Oracle과 포트번호가 겹쳐서 발생하는 문제 해결하는 방법을 3가지로 잘 정리해둔 타블로그 링크 https://spike1574.tistory.com/129
   
2. Spring Security 관련 사항을 메인 클래스의 애너테이션 설정 변경으로 해결하는 타블로그 링크 https://hstory0208.tistory.com/entry/Spring-Security-%EA%B8%B0%EB%B3%B8-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%ED%99%94%EB%A9%B4-%EC%A0%9C%EA%B1%B0%ED%95%98%EB%8A%94-%EA%B0%84%EB%8B%A8%ED%95%9C-%EB%B0%A9%EB%B2%95
   

작성일 20240112, 20240115, 20240122, 20240124, 20240126

스프링부트와 리액트 활용하여 웹 애플리케이션을 만드는 다양한 방법 중에서 인텔리제이 커뮤니티 버전을 이용하여 스프링부트(Spring Boot) 프로젝트 내부에 리액트 구성하는 방법을 택하려고 한다.
이때, 리액트를 환경설정하는 방법도 여러가지가 있는데 나는 npm을 사용하였음을 미리 알린다. 더불어 데이터베이스로는 MySQL을 사용하였다.

➡️ STEP 01. Node.js 설치하기

리액트를 사용하기 위해서는 HTML 파일에 React 라이브러리를 설치하면 된다. 하지만 이렇게 직접 설치하면 번거롭고 오래걸리기 때문에 Node.js를 추가로 사용해서 편하게 설치해보자. 말해두지만 리액트에서 Node.js가 필수로 필요한 것은 아니지만, Node.js를 설치하면 NPM(Node Package Manager)이라고 해서 모듈을 다운받을 수 있게 해줘서 프론트엔드 개발을 보다 편하게 할 수 있다.

1) 구글 검색창에 node.js 검색하여 download 링크 클릭하면 아래와 같은 페이지를 볼 수 있다. (https://nodejs.org/en/download/current) 2) 본인 컴퓨터 운영체제에 맞는 버전의 Installer를 다운받은 후, 쭉쭉 next 버튼 누르다가 Finish 버튼을 마지막에 눌러주면 끝난다.

참고로 npm은 node.js 로 만들어진 프로그램을 쉽게 설치해주는 앱 스토어이고, npx는 이러한 노드 패키지 실행해주는 도구이다. 정리하자면 npm을 설치하기 위해서는 node.js를 설치하면 되는 것이다.

CF. ./App이란?
[초보자] React 설치부터 배포까지의 과정을 정리 https://dev.classmethod.jp/articles/the-process-from-installing-react-to-distributing-it/

➡️ STEP 02. IntelliJ에서 Spring Boot 프로젝트에 리액트 세팅하기

npm 설치 및 리액트 환경설정 시 참고 및 유의해야 할 점을 미리 알고가자 !

1. npx는 오타가 아니니 안심해도 된다.
   
2. 리액트 설치 파일명을 적을 때에는 괄호 없이 작성해야한다. 괄호는 내가 임의로 실제 명령어와 가이드 라인을 구분하기 위해 기입한 특수문자이다.
   
3. create-react-app 파일명에 대문자를 사용해서는 안 된다.
4. 스프링부트 프로젝트 내부에서 리액트를 사용하는 것이기 때문에 src/main 경로에서 npm을 설치하고 리액트를 세팅해야 한다. 아래와 같은 구조로 최종 환경설정될 예정이니 참고 바란다.

터미널(terminal) 창에서 아래와 같이 입력하여 src/main 위치에 리액트를 세팅해준다.

> cd src/main
> npx create-react-app (리액트 설치 파일명)

이 과정에서 만약 아래와 같은 에러가 발생했거나 잘못된 곳에 리액트를 설치했다면 링크(https://velog.io/@song-eojin/IntelliJ%EC%97%90%EC%84%9C-React-%EC%84%A4%EC%B9%98-%EC%8B%9C-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-npm-ERR-%ED%8C%8C%EC%9D%BC-%EA%B2%BD%EB%A1%9C-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95)를 참고해주길 바란다.

PS C:\Users\스프링부트 프로젝트 파일경로
npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path C:\Users\USER\AppData\Roaming\npm
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\USER\AppData\Roaming\npm'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in: C:\Users\USER\AppData\Local\npm-cache\_logs\2023-07-26T07_43_03_676Z-debug-0.log

여기까지 완료 즉, 리액트를 실행할 준비가 된 상태가 된 것은 Happy hacking!이라는 문구를 통해 알 수 있다. 이 문구가 터미널 창에 뜬다면 성공이라는 의미다. 이제 터미널 창에 아래에 적힌 명령어를 입력해주면 3000 포트로 저런 화면이 자동으로 팝업할 것이다.

cd (앞서 명명한 리액트 설치 파일명)
npm start

➡️ STEP 03. 스프링부트와 리액트 개발환경(포트번호) 통합시키기

스프링부트는 톰캣을 사용하기 때문에 기본 값으로 8080 포트를 갖는 반면, 리액트는 기본이 3000이므로 이를 통합시켜줘야 한다. 즉, 통합 Build 구성을 만들어 준다는 의미다. 앞서 말했듯이 우리가 만들고자 하는 스프링부트+리액트 프로젝트를 build하기 위해서, 현재 각각 두 번 명령어를 입력해줘하는 상황이다. 스프링 부트는 ./gradlew build 명령어를 사용해야 하고, 리액트 프로젝트는 npm run build가 필요할 것이다. 이를 스프링부트 build만 진행하면 프론트엔드, 백엔드 프로젝트 모두 build되어 JAR 파일이 생성되도록 만들고자 하는 것이다.

이를 위해서 일단 아래와 같이 reactfront에 있는 package.json의 scripts 바로 위에 "proxy" : "http://localhost:8080",를 추가해주자. 만약 포트 충돌 등의 문제로 톰캣을 다른 포트를 사용하고 있다면 해당 포트번호로 대체주면 된다.

그 다음 build.gradle에 아래 코드를 추가하고 build(코끼리 버튼)해준다.

def frontendDir = "$projectDir/src/main/(앞서 설정한 본인의 리액트 폴더명)"

sourceSets {
    main {
        resources { srcDirs = ["$projectDir/src/main/resources"]
        }
    }
}

processResources { dependsOn "copyReactBuildFiles" }

task installReact(type: Exec) {
    workingDir "$frontendDir"
    inputs.dir "$frontendDir"
    group = BasePlugin.BUILD_GROUP
    if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
        commandLine "npm.cmd", "audit", "fix"
        commandLine 'npm.cmd', 'install' }
    else {
        commandLine "npm", "audit", "fix" commandLine 'npm', 'install'
    }
}

task buildReact(type: Exec) {
    dependsOn "installReact"
    workingDir "$frontendDir"
    inputs.dir "$frontendDir"
    group = BasePlugin.BUILD_GROUP
    if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
        commandLine "npm.cmd", "run-script", "build"
    } else {
        commandLine "npm", "run-script", "build"
    }
}

task copyReactBuildFiles(type: Copy) {
    dependsOn "buildReact"
    from "$frontendDir/build"
    into "$projectDir/src/main/resources/static"
}

이제 가장 최상위 폴더인 프로젝트에서 ./gradlew build를 입력하여 프론트엔드 백엔드가 통합된 build 환경을 제공하는 JAR 파일을 받을 수 있다.

이제부터는 localhost에서 스프링부트 프로젝트 포트번호(일반적으로 8080)로 접근하면 리액트와 함께 스프링부트를 사용할 수 있게 된다. 개발환경이 잘 통합되었는지 확인해보는 방법은 http://localhost:(스프링부트 포트번호)에서 리액트 화면가 보이면 성공했다는 것이니 안심하자.

CF. 계속 WhiteLabel Error Page만 뜬다면?
터미널 창에 ./gradlew build 명령어를 통해 build를 다시 해보자. 이때 발생할 수 있는 에러는 여러 가지가 있는데, 나 같은 경우에는 JDK 버전을 여러 개 설치해두어 원하는 JDK Open17 버전을 찾지 못하는 문제가 발생했다. 만약 나와 같은 문제가 생겼다면 아래의 링크를 참고해주길 바란다.
https://velog.io/@cho876/SpringBoot-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%95%88%EC%97%90-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%84%A3%EA%B8%B0
https://www.inflearn.com/questions/254791/cmd%EC%97%90%EC%84%9C-%EC%9D%B4%EB%A0%87%EA%B2%8C-%EC%98%A4%EB%A5%98%EA%B0%80-%EB%9C%A8%EB%A9%B4-%EC%96%B4%EB%96%A1%ED%95%98%EB%82%98%EC%9A%94

➡️ STEP 04. Visual Studio에서 프론트 작업하기

보다 편리한 프론트 작업을 위해 비주얼 스튜디오를 겸해서 사용하고자 한다. 방법은 Visual Studio에서 앞서 만든 Spring Boot 프로젝트 내부에 만들어둔 리액트 관련 파일을 Open해주면 된다. 그러면 아래와 같이 프론트와 관련된 파일들만 열람하여 작업할 수 있게 된다.

Visual Studio에서는 개발환경을 통합하였더라도 3000번 포트를 통해 웹 브라우저 화면을 확인할 수 있으며, 이는 정상적인 것이니 염려할 필요없다. 확인하는 방법은 이 전과 마찬가지로 Visual Studio의 Terminal 창에서 npm start를 입력하고 기다려주면 아래와 같은 화면을 볼 수 있다.

비주얼 스튜디오에 추가하면 편리한 확장 추천
확장은 이것저것 골라담으면 작업에 도움을 주는 도구를 추가로 얻게 해주며, 아래 화면과 같이 좌측 하단에서 볼 수 있다. 원하는 확장은 검색하여 install/설치 버튼을 누르면 된다.

• Korean Language Pack for Visual Studio Code : 설치 후 팝업되는 버튼을 클릭하면 비주얼 스튜디오가 재시작하면서 비주얼 스튜디오를 한국어 버전으로 이용 가능하다.
• Color Highlight - Hue show better : 색상 코드를 입력했을 때 해당하는 색을 바로 볼 수 있게 해주는 확장
• Git Graph, Git History, GitLens - Git superchagred, GitHub Pull Requests and Issues, GitHub Repositories, GitHub Actions : 소스트리나 깃허브 데스크와 같은 기능을 비주얼 스튜디오에서 사용할 수 있게 해주는 등 깃과 관련되어 도움을 주는 확장 목록으로, 본인에게 필요한 확장을 설치받을 것을 추천
• Markdown Preview Github Styling : 리드미와 같이 마크다운에 의한 화면을 미리 볼 수 있게 해주는 확장

비주얼 스튜디오에서 자바 언어를 사용할 수 있게 하기 위해, 일단 구글에 Visual Studio를 검색하여 Visual Studio Code - Code Editing. Redefined 웹 사이트에 방문해주자. Docs를 클릭한 후, 보통 좌측 네비게이션 바 또는 가운데 상단에 토글 형태로 있는 Overview에서 JAVA의 Getting Started를 클릭해주면, https://code.visualstudio.com/docs/java/java-tutorial 링크에 도착하게 되고 아래와 같은 화면을 볼 수 있다.

아래 화면의 보라색 Intall 버튼 중 본인의 OS에 맞는 것을 클릭해주자. 그러면 아래와 같은 설치 창이 나타나게 된다. 체크된 상태로 Next를 누른 후 Install 버튼까지 눌러주자.

그러면 Visual Studio 확장에서 이제 Debugger for Java, IntelliCode, IntelliCode API Usage Examples, Language Support for Java(TM), Maven for Java, Project Manager for Java, Test Runner for Java가 설치되어 있는 것을 확인할 수 있다. 우리는 Maven이 아닌 Gradle를 사용할 것이기 때문에 Gradle for Java, Spring Boot와 관련된 Spring Boot Extension, Spring Boot Snippets, 그리고 나의 경우 MySQL을 사용하기 때문에 MySQL - Weijan Chen라는 확장까지 추가로 설치해주자.

좌측에 Database 버튼이 생성되고 이를 클릭하면 위와 같은 화면을 수 있다. Create Connection 버튼을 클릭하여 연결할 수 있다.

➡️ STEP 05. MySQL 연동하기

자세한 방법이 궁금하다면 내 블로그의 해당 글(https://velog.io/@song-eojin/MySQL-%EB%B9%84%EC%A3%BC%EC%96%BC-%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4%EC%97%90%EC%84%9C-%EC%97%B0%EB%8F%99%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95)을 참고해주길 바란다.

➡️ 참고자료

[BLOG]
[개발환경] SpringBoot + React 통합 환경 구성하기 https://velog.io/@cho876/SpringBoot-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%95%88%EC%97%90-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%84%A3%EA%B8%B0
React 아니고 React Native요! (React Native 지원) https://blog.imqa.io/react-native/
Spring Boot + React.js 개발환경 연동하기 https://velog.io/@u-nij/Spring-Boot-React.js-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85
[초보자] React 설치부터 배포까지의 과정을 정리 https://dev.classmethod.jp/articles/the-process-from-installing-react-to-distributing-it/ https://velog.io/@cho876/SpringBoot-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%95%88%EC%97%90-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%84%A3%EA%B8%B0

[VIDEO]
스프링부트와 리액트 함께 쓰기 - 1강) 스프링부트에서 리액트 설치 https://youtu.be/1sw8UTWC8kc?feature=shared
React 기초 1강 : 리액트 설치와 셋팅법 (2022+ 스타일) https://youtu.be/nahwuaXmgt8?feature=shared

작성일 2022~23년도 노션에 작성한 내용 이동 20240110 (내용 보충 및 정리)

우선 자바(Java)는 컴퓨터 프로그래밍 언어(Programming Language) 중 하나입니다.

지금부터 많은 프로그래밍 언어 중 자바를 사용하는 경우는 언제인지, 특징은 무엇인지, 어떻게 만들어진 언어인지 등 하나씩 살펴봅시다.

➡️ 자바가 사용되는 경우는?

✅ PC 애플리케이션 (EX. 이클립스, 인텔리제이, etc.)

✅ 웹 애플리케이션 : 웹 사이트

✅ 모바일 애플리케이션

✅ 빅 데이터(Big Data)

✅ 게임(마인 크래프트), 과학, 소형기기 등

자바 언어는 원래 소형기기를 위해 만들어진 언어였다.

➡️ 자바의 특징

자바의 특징 자체를 숙지하는 것이 중요한 게 아니라, 이를 통해 어떤 프로젝트에서 자바라는 언어가 유리한지를 파악하는 것이 중요하지 않을까 생각합니다. 또한 전체적으로 자바가 유리하지만 일부 기능에서 자바의 특징이 단점으로 작용한다면 어떤 해결 및 대안이 있는지를 파악하는 것도 좋을 것 같습니다.

✅ 객체지향언어 (EX. C++, Java, Python, JS, etc.)

기존의 절차지향 프로그래밍 언어에 객체지향 개념을 도입한 것으로, 객체지향 프로그래밍(Object Oriented Programming, OOP)을 위한 최적의 언어

✅ JVM(Java Virtual Machine)으로 인해 운영체제에 독립적

자바로 작성된 소스코드는 모든 운영체제(Operating System, 플랫폼)에서 실행 가능

✅ 자동 메모리 관리(GC, Garbage Collection)

자바에는 가비지컬렉터가 메모리(RAM)를 자동 관리하여 따로 메모리 관리를 하지 않아도 되서 아주 편리하다. 또한, 개발자에게 메모리 관리를 할 수 있는 수단이 제공되지 않기도 하다.

✅ 풍부한 클래스 라이브러리(Java API) 제공

✅ 네트워크 분산처리 지원

다양한 네트워크 프로그래밍 라이크러리(Java API)를 통해, 네트워크 관련 프로그램 개발을 돕는다.

✅ 멀티쓰레드 지원

언어마다 멀티쓰레드 지원은 운영체제에 따라 구현방법과 처리방식이 다르기 때문에 복잡하지만, 자바는 관련된 라이트버리(Java API)가 제공되므로 멀티쓰레드 프로그램이 모든 시스템에서 구현가능하다.

✅ 멀티 쓰레드 지원

하나의 프로그램에서 동시에 여러 작업을 할 수 있게끔 해주는 기능이다. 예를 들어, 채팅 프로그램으로 채팅을 하면서 파일을 주고 받을 수 있는 상황 등이 멀티 쓰레드 기능에 의해 가능한 것이다. 요즘 대부분의 프로그램은 멀티 쓰레드로 작성되기 때문에 최신 프로그래밍 언어라면 필수로 제공되어야 하는 기능으로, 자바 또한 이를 지원한다.

✅ 동적 로딩(Dynamic Loading) 지원

보통 자바로 작성된 애플리케이션은 여러 개의 클래스로 구성되어 있어, 동적 로딩을 지원한다. 그렇기 때문에 실행했을 때, 모든 클래스가 한번에 로딩되지 않고 필요한 시점에 맞추러 클래스를 로딩하여 사용할 수 있다는 장점이 있다. 또한, 일부 클래스가 변경되어도 전체 애플리케이션을 다시 컴파일하지 않고, 애플리케이션의 변경사항이 발생하여도 적은 작업만으로 처리 가능한 flexible한 애플리케이션을 만들 수 있다.

✅ 속도가 느린 편

바이트코드(byte code)를 하드웨어의 기계어로 바로바로 변환해주는 JIT 컴파일러와 Hotspat과 같은 최신 기술이 도입되면서 JVM의 기능이 많이 향상되어 속도 문제는 상당 부분 개선된 상태이다.

✅ 꾸준한 성능 개선 및 새로운 버전 발표

모바일이나 대규모 기업환경, XML 등의 다양한 최신 기술을 지원하도록 개선함으로써 활용할 수 있는 영역이 더욱 넓어지고 있다. 모던 프로그래밍언어 (객체지향 + 함수형)로써 최신 기술을 담고 있다.

✅ 다양한 분야에서 사용 가능하며 20년간 프로그래밍 언어 1, 2위였다는 사실을 통해 많이 사용되었다는 것을 알 수 있다. 그렇기 때문에 학습자료 또한 많아 배우기도 수월하며, 취업에 유리한 언어 즉, 실무에서도 제일 많이 사용하는 언어다.

➡️ 자바의 역사

자바의 역사란, 곧 JDK 발전의 역사라고 할 수 있다. 그 이유는 다음과 같다.
썬 마이크로시스템즈에서 개발하여 공식 발표(1996년 1월)한 후 현재(2010년 이후) 오라클 회사로 인수하였고, 자바 언어로 된 프로그램을 제작하려면 무조건 JDK를 이용해야 하기 때문에 자바의 발전은 곧, JDK의 발전과 일맥상통한 것이다.

✅ JDK(Java Development Kit)란?

(자세한 설명은 개발환경구축 페이지에서 진행)**

JDK는 한마디로 자바 기반 소프트웨어를 개발하기 위한 도구들로 이루어진 패키지이다. 자바 기반 프로그램을 작성한다는 것은 이 JDK라는 도구 패키지를 이용한다는 의미이다. JDK는 리눅스처럼 라이센스 때문에 회사마다 출시하면서 종류가 다양해졌다. 또한 각 종류별로 발전의 과정에 따라 계속 새로운 버전이 생겨나 각 회사별 JDK 제품별로도 버전도 다양하다. JDK11 버전부터는 JDK 안에 있는 JRE가 무조건 함께 설치하도록 되어 있으며, 그러한 자바 실행 환경인 JRE에는 JVM이 포함되어 있다. 결국 JDK의 운영체제 선택에서 JRE, JVM 모두 비롯된다는 것이다.

✅ JDK 버전 표기

회사별 JDK들의 버전 표기는 통일화되어 있으며, 사람들이 Java라고 하고 Java11이라 하는것은 결국 JDK의 버전을 의미한다고 볼 수 있다. 그래서 Java를 설치한다 라는 것은 JDK를 설치한다 라고 할 수 있다.

• Java SE(Java Standard Edition) : “지금 내가 자바 공부에서 사용하는 버전!” 가장 기본이 되는 표준 에디션의 자바 플랫폼으로 자바 언어의 핵심 기능을 제공
  • 가장 기본적인 클래스 패키지로 구성
  • PC용 어플리케이션, 애플릿개발, 응용프로그램개발, 웹개발, 안드로이드개발
  • PC에 설치해서 사용할 수 있는 모든 프로그램 개발에 관련된 것
• Java EE(Java Enterprise Edition) : 대규모 기업용 에디션. SE확장판(대형 네트워크환경 프로그램 개발시)
  • 기업환경을 위한 대규모 솔루션 개발, 모바일폰, 셋탑 박스, 차량용 텔레매틱스 시스템 개발
• Java ME(Java Micro Edition) : 피쳐폰, PDA폰, 셉톱박스, 프린터와 같은 작은 임베디드 기기들 같은 작은 기기를 다루는데 이용하는 에디션
  • JAVA SE를 줄여 라이트하게 만든 것이 므로 SE개발을 할 줄 알면 ME기반의 개발도 가능
  • 각각의 OS(ex. Android OS, IOS, Black Berry 등)를 가지고 있는 스마트 폰이 대중화된 지금은 잘 쓰이지 않는다
• JavaFX : 가볍고 예쁜 그래픽 사용자 인터페이스(GUI)를 제공하는 에디션
  • 고성능의 하드웨어 그래픽 가속과 미디어 엔진 API를 제공해주어서 프로그램의 성능에 신경을 써야 하는 분야에서 사용

• JDK 1.0 (January 23, 1996)
  • JDK 1.1 (Feburary 19, 1996)
    

• J2SE (December 8, 1998) : 기존의 자바보다 굉장히 많은 발전이 이루어져 Java2라고 불렀다. Java2에는 J2SE(표준형), J2ME(소형기기용), J2EE(대기업용)가 있는데, 그 중에서 표준형에 해당하며 현재 공부하며 사용하고 있는 버전인 J2SE를 기준으로 작성하겠다. 버전에 대한 자세한 설명은 여기하기.
  • J2SE 1.3 (May 8, 2000)
  • J2SE 1.4 (Feburary 6, 2002)
    
• J2SE 1.5/5.0 (September 30, 2004) : 두껍게 글씨 처리한 버전들은 크게 변화했을 때를 의미하는데, 큰 변화가 있기 전까지의 버전들은 약간의 develope만 이루어진 것이다.
  • Java SE 6 (December 11, 2006)
  • Java SE 7 (July 28, 2011)
    
• Java SE 8 (March 18, 2014) : 현재(2023년 기준) 사용하고 있는 JDK(Java 언어)는 Java SE 8를 시작으로 크게 다르지 않게 리뉴얼되고 있다. 너무 최신 버전을 사용하는 것은 아직 오류에 대한 확인 부족한 등등 위험요소가 있기 때문에, 그 근간이 되는 최신버전인 Java SE 8 포함 그 이후의 버전 中에서 사람들에 의해 이미 잘 파악된 버전을 사용하는 것이 좋다.
  • Java SE 9 (September 21, 2017)
  • Java SE 10 (March 20, 2018)
  • Java SE 11 (September 25, 2018)
  • Java SE 12 (March 19, 2019)
  • Java SE 13 (September 17, 2019)
  • · · ·

작성일 20231202, 20231203

➡️ 애플리케이션배포_LM2001020214

➡️ 애플리케이션테스트수행_LM2001020227

➡️ 화면구현_LM2001020225

➡️ 프로그래밍 언어 응용_LM2001020230

➡️ 프로그래밍 언어 활용_LM2001020231

➡️ 응용SW 기초 기술 활용_LM2001020231

➡️ 개발자 환경 구축_LM2001020233

➡️ SQL활용_LM2001020413

➡️ UI 테스트_LM2001020709

➡️ 참고자료

[BLOG]
NCS 모듈 정리 https://velog.io/@ansalstmd/NCS-%EB%AA%A8%EB%93%88-%EC%A0%95%EB%A6%AC%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98%EB%B0%B0%ED%8F%AC
[정보처리산업기사 과정평가형 - 필기] https://yunamom.tistory.com/287
명령형 언어와 선언형 언어의 차이 https://jehwanyoo.net/2020/10/02/%EB%AA%85%EB%A0%B9%ED%98%95-%EC%96%B8%EC%96%B4%EC%99%80-%EC%84%A0%EC%96%B8%ED%98%95-%EC%96%B8%EC%96%B4%EC%9D%98-%EC%B0%A8%EC%9D%B4/
https://iborymagic.tistory.com/73

작성일 20231130

➡️ Error

➡️ Solution

✅ 1) 웹 프로젝트 오른쪽 마우스 클릭 후 Properties 선택하기

✅ 2) Project Facets 검색 후 Dynamic Web Module이 체크되어 있도록 만들기

✅ 3) 우측 Runtime 클릭 후 사용하는 Tomcat 버전이 나타나 있지 않은 경우, New 클릭하여 Apache 폴더에서 사용하고자하는 버전의 Tomcat 선택 후 Next 클릭하기

✅ 4) Browse를 클릭하여 실제로 설치된 Tomcat 폴더 찾아서 선택해서 폴더선택 버튼 클릭하기

✅ 5) Runtime에서 방금 등록한 Apache Tomcat 버전 선택 후 Apply and Close 클릭하기

✅ 6) 이클립스 창 하단에서 Servers 창에 연결된 서버가 없을 경우, 'No servers are available. Click this link to create a new server...' 클릭하기

✅ 6) Apache 폴더에서 전에 등록한 Tomcat 버전 선택 후 Finish 클릭하기

✅ 7) 등록한 서버에 작성 중인 Web Project 등록하기 위해 'Add and Remove' 클릭하기

✅ 8) 좌측 Available에 있는 Web Project를 선택 후 가운데 있는 Add 버튼을 누르면, 우측의 Conrigured로 Web Project가 이동하게 되고 Finish 버튼을 클릭하면 된다

✅ 9) 등록된 Tomcat 서버를 이용하여 Web Project를 실행하기 위해, 우측 클릭 후 Start 버튼 클릭 또는 이클립스 설정에서 Run에 해당하는 단축키 실행 또는 상단 화살표 Run 버튼 클릭하기

작성일 20231129

➡️ CPU

✅ 싱글코어 vs. 멀티코어

컴퓨터에서 두뇌 역할을 하는 CPU에서도 코어는 단위 작업을 처리하는 유닛을 의미한다.

여기서 코어가 많으면 항상 더 빠를 것이라고 생각할 수 있지만, Task를 코어에게 할당하는 작업이 추가되어 코어의 개수와 속도는 무조건적으로 비례하지는 않다는 점을 짚고 넘어가자.

➡️ 참고자료

[BLOG]
CPU 작동 방식: 싱글코어 vs 멀티코어 https://kimsring.tistory.com/entry/CPU-%EC%9E%91%EB%8F%99-%EB%B0%A9%EC%8B%9D-%EC%8B%B1%EA%B8%80%EC%BD%94%EC%96%B4-vs-%EB%A9%80%ED%8B%B0%EC%BD%94%EC%96%B4

작성일 20231129

➡️ CS STUDY 4주차

✅ 동시성(병행성, Concurrency)

동시성은 여러 개의 Task가 있을 때 독립적으로 실행될 수 있어, 서로 다른 Task를 실행하는 시점이 서로 영향을 미치지 않는 성질을 말합니다. 즉, 마치 동시에 여러 작업이 진행되는 것처럼 보이는 성질을 말하며, 실제로 무조건 동시에 진행되어야 한다는 전제조건은 없다는 것이 병렬성과의 차이입니다.

이러한 동시성 특성을 나타낼 수 있는 대표적인 경우로는 이벤트 기반 프로그래밍, 멀티스레드 프로그래밍, 비동기 작업, 그리고 시분할 시스템이 있습니다. 자바스크립트가 동시성을 다루는 방식을 통해 보다 구체적인 예를 들자면, 일반적으로 단일 스레드에서 이벤트 기반 비동기 프로그래밍 모델을 사용하는 자바스크립트의 경우, 웹 애플리케이션에서의 상호작용이나 브라우저의 비동기적 이벤트 처리에서 앞서 설명한 동시성이 나타나곤 합니다.

CF. CPU의 싱글코어와 멀티코어 - 추가공부 필요
[컴퓨터공학 이론 : 하드웨어] 시리즈 中 https://velog.io/@song-eojin/%ED%95%98%EB%93%9C%EC%9B%A8%EC%96%B4-%EA%B8%B0%EC%B4%88-02.-CPU

✅ 병렬성(Parallelism)

병렬성은 Task의 실행 시점이 같을 수도 다를 수도 있는 동시성과 달리, 실제로 물리적으로 동시에 작업이 진행되는 경우를 가리킵니다. 혼동하기 쉬운 동시성과 병렬성은 별개의 개념으로, 두 가지 모두 만족할 수도 아닐 수도 있습니다.

병렬성 특성을 나타낼 수 있는 대표적인 경우로는 네트워크 상의 여러 컴퓨터에게 분산작업을 요청하는 분산 컴퓨팅, 멀티스레드 프로그래밍, 멀티프로세싱, 데이터베이스 병렬처리 등이 있습니다. 특정 언어를 통해 병렬성의 보다 구체적인 예를 들자면, 자바의 경우 멀티 스레드를 명시적으로 지원하여 병렬성을 활용하곤 하는 경우를 들 수 있습니다.

✅ 프로세스 동기화(Process synchronization)

프로세스 동기화는 여러 프로세스나 스레드가 공유된 자원에 동시에 접근하는 것을 효율적으로 제어하고, 서로의 작업이 조율되도록 해주는 기술로, 프로세스 동기화 기술은 안전하고 효율적인 동시 실행을 지원하기 위해 다중 프로세스, 다중 스레드, 네트워크 통신, 운영체제에서 중요하게 다뤄지는 기술입니다.

EX. 프로세스 동기화 예시
다중 프로세스 환경에서 여러 프로세스가 공유된 자원에 접근할 때, 경쟁 조건(Race Condition)이나 데드락 같은 문제로 인해 각 프로세스가 서로의 작업을 방해받지 않도록 조율하기 위해 사용됩니다.
다음으로 다중 스레드 환경에서는 공유 자원에 대한 접근을 조율해서 데이터 무결성을 보장하고 예측 가능한 실행을 유지할 수 있도록 해줍니다.
운영체제에서도 이러한 프로세스 동기화가 여러 프로세스 관리를 위해 사용되며, 뿐만 아니라 네트워크 통신에서도 분산 시스템에서 여러 프로세스 간의 통신이나 서버 간의 통신이 발생할 경우 데이터 일관성 유지를 위해 사용되곤 합니다.

✅ 임계영역(Critical Section)

✅ 경쟁조건(Race Condition)

✅ 경쟁조건의 해결방법

✅ 상호배제(Mutual Exclusion)

✅ 상호배제 방법

✅ 뮤텍스(Mutex)

✅ 세마포어(Semaphore)

✅ 뮤텍스(Mutex)와 이진 세마포어의 차이

✅ 모니터

✅ 데드락(Deadlock)

✅ 데드락 발생 조건 4가지

✅ 데드락 회피 방법

➡️ 참고자료

[BLOG]
동시성(Concurrency)과 병렬성(Parallelism)의 차이 -자바스크립트와 자바 예시 https://medium.com/@su_bak/%EB%8F%99%EC%8B%9C%EC%84%B1-concurrency-%EA%B3%BC-%EB%B3%91%EB%A0%AC%EC%84%B1-parallelism-%EC%9D%98-%EC%B0%A8%EC%9D%B4-44e6fda0a0cd
[Study] 동시성(Concurrency) 과 병렬성 (Parallelism) 올바른 개념 잡기 - 코어와 스레드를 통한 개념 설명 https://vagabond95.me/posts/concurrency_vs_parallelism/

작성일 20231129

➡️ CS STUDY 3주차

✅ 기아 상태가 무엇인가요?

특정 프로세스의 우선순위가 낮아서 원하는 자원을 계속 할당 받지 못하는 상태를 의미합니다.

✅ 기아 상태를 어떻게 해결할 수 있나요?

오래 기다린 프로세스의 우선순위를 높여서 기아 상태를 해결할 수 있습니다.

✅ CPU 스케줄링에 대해 설명해주세요.

CPU 스케줄링은 레디 큐에 있는 프로세스들 중 어떤 프로세스에게 CPU를 할당할지 결정하는 것 입니다. 여러 프로세스들이 번갈아가며 수행되는 시분할 시스템에서 각 프로세스들의 CPU 수행시간은 다 다릅니다. 어떤 프로세스는 CPU를 잡고 있는 시간이 길고, 어떤 프로세스는 굉장히 짧을 수 있습니다. 이런 경우에, CPU 스케줄링을 통해 프로세스들에게 CPU를 적절히 할당 해줘서 빠른 사용자 응답 시간을 제공하고, CPU와 I/O 장치의 효율을 높여줄 수 있습니다.

✅ 스케줄러의 종류는 무엇이 있나요?

1. 단기 스케줄러 (= CPU 스케줄러) : 준비 상태의 프로세스 중에서 어떤 프로세스를 다음 번에 실행 상태로 만들 것인지를 결정합니다.

2. 중기 스케줄러 : 너무 많은 프로세스에게 메모리를 할당해 시스템의 성능이 저하되는 경우를 막기 위해, 프로세스의 동적으로 조절하기 위한 스케줄러입니다. 일부 프로세스를 메모리에서 디스크로 스왑 아웃시켜서 프로세스를 관리합니다.

3. 장기 스케줄러 (= 작업 스케줄러)

준비 큐로 보낼지 말지 결정하는 스케줄러입니다. (현대에서는 프로세스가 시작되면 장기 스케줄러 없이 곧바로 프로세스에 메모리를 할당해 준비 큐에 넣습니다.)

✅ 선점형 스케줄링과 비전형 스케줄링의 차이가 무엇인가요?

• preemptive 방식 (선점형 방식) : 프로세스가 CPU를 계속 사용하기를 원하더라도 강제로 빼앗을 수 있는 스케줄링 방법입니다.

• nonpreemptive 방식 (비선점형 방식) : CPU 획득한 프로세스가 스스로 CPU를 반납하기 전까지는 CPU를 빼앗기지 않는 스케줄링 방법입니다.

  
  

✅ 선입선출 스케줄링(FCFS)에 대해 설명해주세요.

FCFS는 먼저 레디 큐에 도착한 프로세스 순서대로 CPU를 할당 해주는 스케줄링 방식 입니다. 구현이 간단 하지만, 만약 CPU 사용 시간이 매우 긴 프로세스가 먼저 도착 한다면, 뒤이어 도착한 다수의 프로세스들이 긴 시간을 기다려야 한다는 단점이 있습니다.

✅ 최단 작업 우선 스케줄링(SJF)에 대해 설명해주세요.

SJF는 Shortest Job First 라는 뜻으로 CPU 실행 시간이 가장 짧은 프로세스에게 먼저 CPU를 할당 하는 방식 입니다. 이를 위해서는 프로세스들의 CPU 수행 시간을 예측 해야 합니다. 프로세스들의 CPU 수행시간은 이전에 수행되었던 프로세스의 실제 수행 시간과 예측했던 수행시간을 통해 예측할 수 있습니다.

✅ 최소 잔류 시간 우선 스케줄링(SRTF) 방식에 대해 설명해주세요.

SRTF 방식은 SJF의 선점 버전 입니다. 현재 CPU에서 실행 중인 프로세스의 남은 CPU 실행 시간보다 더 짧은 CPU 실행 시간을 가지는 프로세스가 도착할 경우 CPU를 빼앗아 할당 해줍니다. 하지만 CPU 실행 시간이 짧은 프로세스가 계속 도착한다면 CPU 실행 시간이 긴 프로세스는 영원히 CPU를 할당받지 못하는 Starvation이 발생할 수 있습니다.

✅ 우선순위 스케줄링에 대해 설명해주세요.

Ready Queue에서 기다리는 프로세스들중 우선순위가 가장 높은 프로세스에세 CPU를 할당하는 방식입니다. 우선순위를 결정하는 방식에는 여러가지가 있을 수 있습니다. 예를들어 SJF 알고리즘 처럼 CPU 버스트 시간을 기준으로 잡을 수 있습니다. 우선순위 스케줄링의 문제점 중 하나는 기아 현상이 발생할 수 있다는 점입니다. 우선순위가 낮은 프로세스가 계속 CPU를 할당 받지 못할 수 있기 때문입니다.

✅ 라운드 로빈 스케줄링에대해 설명해주세요.

라운드 로빈 방식에서는 각 프로세스가 CPU를 연속적으로 사용할 수 있는 시간이 타임 퀀텀으로 제한 됩니다. 예를들어 한 프로세스가 타임 퀀텀만큼 CPU를 사용했다면, 타이머 인터럽트가 발생하고 레디큐에 줄 서 있는 다른 프로세스에게 CPU를 할당합니다. 여러 프로세스들에게 빠른 시간안에 조금씩 CPU를 사용하게 해주는 방식 이기 때문에 사용자에 빠른 응답 시간을 제공해줄 수 있습니다.

✅ 멀티 레벨 큐 스케줄링에 대해 설명해주세요.

멀티레벨 큐 스케줄링은 레디큐를 여러개로 나누어 관리하는 스케줄링 기법 입니다. 프로세스들이 CPU를 할당 받기 위해 여러 줄로 서서 기다리는 방식 입니다. 일반적으로 CPU 실행시간이 짧은 대화형 프로세스를 담기 위한 전위 큐와(라운드 로빈 방식 적용) CPU 실행시간이 긴 계산위주의 프로세스를 담기 위한 후위 큐로 분할되어 운영됩니다.(FCFS 방식 적용) 멀티 레벨 큐에서는 프로세스에 대한 스케줄링 뿐만 아니라 큐들에 대한 스케줄링도 해줘야 합니다. 큐에 우선순위를 부여하거나 큐에대해 타임 슬라이스 방식을 적용하는 방법이 있습니다.

✅ 멀티 레벨 피드백 큐 스케줄링에 대해 설명해주세요.

멀티 레벨 피드백 큐는 CPU 할당을 기다리는 프로세스들을 여러 개의 레디큐에 줄 세우는 방식 입니다. 각 큐는 우선순위가 있습니다. 어떤 프로세스가 CPU 할당을 받고 작업을 끝내지 못하면 CPU 작업 시간이 긴 프로세스로 간주하여 점점 우선순위가 낮은 큐로 이동시킵니다. 우선순위가 낮은 레디큐에서 너무 오래 기다린 프로세스에 대해서는 다시 우선 순위가 높은 레디큐로 보내는 에이징 기법을 적용 합니다. 프로세스 CPU 작업 시간에 따라 적절한 큐에 배치하여 CPU 스케줄링을 효율적으로 하는 방법 입니다.

➡️ 참고자료

[BLOG]

작성일 20231122

➡️ CS STUDY 2주차

📎 프로세스

✅ 프로그램에 대해 설명해주세요.

프로그램이란 메모리에 올라가 있지 않고, 저장 장치에 저장 되어 있는 상태의 코드 파일을 의미합니다. 프로그램을 실행하기 위해서는 OS로부터 프로그램이 동작하는데 필요한 CPU, 메모리 등을 할당 받아야 합니다.

✅ 프로세스에 대해 설명해주세요.

프로세스란 실행중인 프로그램입니다. 디스크에 파일로 존재하던 프로그램이 메모리에 올라가서 실행되면 프로세스가 됩니다.

✅ 프로세스 문맥에 대해 설명해주세요.

프로세스 문맥이란 프로세스가 어떤 상태에서 수행되고 있는지에 대한 정보입니다.

✅ 문맥교환(context switch)에 대해 설명해주세요.

CPU가 프로세스를 변경할 때, 이전의 프로세스 상태를 PCB에 저장하고, 새로운 프로세스의 저장된 상태를 복구하는 작업입니다.

✅ 문맥교환은 언제 발생하나요?

일반적으로 한 프로세스의 타임 슬라이스가 끝날 경우 발생합니다. (라운드 로빈 방식) 타이머 인터럽트나 I/O 요청 시스템 콜이 들어왔을 때 발생합니다.

✅ 문맥 교환 발생 과정에 대해서 조금 더 상세히 설명해주세요.

사용자 프로세스가 CPU를 할당 받고 실행되던 중에, 타이머 인터럽트가 발생하면 CPU의 제어권은 운영체제에게 넘어가게 됩니다. CPU의 제어권을 가지게 된 운영체제는 원래 수행 중이던 프로세스의 문맥을 PCB에 저장하고 새롭게 실행시킬 프로세스에게 CPU 제어권을 이양합니다. 이 과정에서 원래 수행 중이던 프로세스는 준비 상태로 바뀌고, 새롭게 CPU를 할당받은 프로세스는 실행 상태가 됩니다.

✅ 프로세스의 메모리 공간에 대해 설명해주세요.

프로세스의 메모리 공간은 Code, Data, Heap, Stack 으로 이루어져있습니다. Code는 실행할 프로그램 코드가 저장되며, CPU에서 수행되는 명령어를 저장하는 공간입니다. Data는 정적 변수, 배열, 구조체 등이 저장되는 공간입니다. Heap은 동적 데이터가 저장되는 곳입니다. Stack은 지역 변수와 인자, 함수의 리턴 주소가 저장되는 곳입니다. 함수 호출 시 프레임이 생성되고, 함수가 끝나면 반환됩니다.

✅ 프로세스 제어블록(PCB)에 대해 설명해주세요.

프로세스 제어 블록이란 프로세스를 실행하는 데 필요한 정보를 담고 있는 자료 구조입니다.

✅ PCB에는 어떤 정보가 담겨있을까요?

• PID: 프로세스를 구분할 수 있는 식별자
• 프로세스 상태: 준비 / 대기 / 실행 등 프로세스의 상태를 나타내는 정보
• PC 레지스터: CPU가 다음으로 실행할 명령어를 가리키는 값
• CPU 스케줄링 정보: 우선 순위, CPU 점유 시간 등에 대한 정보

✅ 멀티 프로세스에 대해서 설명해주세요.

멀티 프로세스는 하나의 프로그램에서 동시에 여러개의 프로세스를 실행하는 기술입니다. 하나의 부모 프로세스가 여러 개의 자식 프로세스를 생성하는 구조이며 서로 독립적인 메모리 공간을 가지고 있습니다. 예를들어 구글의 크롬 탭은 각각이 프로세스이며, 하나의 탭이 멈추더라도 다른 탭은 정상 작동합니다.

✅ 프로세스 수행 상태 변화 과정에 대해 설명해주세요.

최초 상태인 new는 프로세스가 생성중인 상태입니다. 그 다음 ready 상태는 CPU를 할당 받아 실행 가능한 상태이고 CPU를 할당 받아 실제로 수행하는 상태는 running 상태입니다. 프로세스가 수행도중 I/O 요청을 하게되면, I/O 요청이 완료될때까지 대기하는 상태인 block 상태가 됩니다. 마지막으로 프로세스가 종료중인 상태를 terminated 상태라고 합니다.

✅ 프로세스끼리 협력하는 방법에 대해서 설명해주세요.

(1) 메시지 전달 방식 : 프로세스는 다른 프로세스에게 전달할 메시지를 운영체제에게 시스템 콜 방식으로 요청해 전달합니다.

(2) 공유 메모리 방식
: 시스템 콜 방식을 통해 각 프로세스 간 공유하는 공간을 만들어, 프로세스 간 같은 공유 공간에 대해 읽고 쓸 수 있도록 합니다.

✅ fork() 명령어에 대해 설명해주세요.

유닉스에서 fork() 명령어는 새로운 프로세스를 생성하게 해주는 시스템 콜입니다. fork() 시스템콜을 통해 부모 프로세스의 내용을 그대로 복제한 자식 프로세스를 생성할 수 있습니다. 이때 부모 프로세스와 자식 프로세스의 주소 공간은 각각 따로 갖지만, 주소 공간 내에는 동일한 공간을 갖습니다.

📎 쓰레드

✅ 쓰레드에 대해 설명해주세요.

프로세스 내에서 실행되는 여러 흐름의 단위입니다. 프로세스 내에서 레지스터와 스택만 따로 할당 받고 Code, Data, Heap 영역은 스레드끼리 공유합니다. 쓰레드의 메모리 공간에 대해 설명해주세요. 쓰레드는 프로세스의 메모리 공간인 힙, 데이터, 코드 영역을 공유합니다. 그렇기 때문에 쓰레드간 context switch는 적은 오버헤드를 갖습니다.

✅ 쓰레드 제어블록(TCB)에 대해 설명해주세요.

쓰레드 제어블록은 프로세스의 PCB 처럼 각 스레드마다 운영체제가 문맥 정보를 담고 있는 자료구조 입니다. TCB에는 쓰레드 ID, 쓰레드 우선순위, 스케줄링 정보등을 저장하고 있습니다.

✅ 사용자 수준 쓰레드와 커널 수준 쓰레드의 차이를 설명해 보세요.

사용자 수준 스레드란, 라이브러리를 통해 구현한 스레드를 의미합니다. 스레드와 관련된 모든 행위를 사용자 영역에서 하기 때문에, 커널은 사용자 수준 스레드의 존재를 알지 못하고 스레드 교환에 개입하지 않습니다. 커널 수준 스레드란, 커널이 직접 생성하고 관리하는 스레드를 의미합니다.

✅ 멀티 쓰레딩 프로그래밍 대해서 설명해주세요.

멀티쓰레딩은 프로세스로 해야하는 작업을 여러개의 쓰레드로 나누어서 수행하는 것을 말합니다. 쓰레드는 프로세스의 자원을 공유하기 때문에 fork로 인한 쓰레드 생성은 프로세스 생성보다 빠릅니다. (공유하는 부분을 제외한 부분만 복사하면 되기 때문 입니다.) 또한 커널의 개입 없이 쓰레드간 통신을 할 수 있습니다. 하지만 쓰레드가 접근하는 공유 데이터에 대해 동기화 작업을 수행해야 합니다.

✅ 멀티 쓰레드 프로그래밍의 장단점을 설명해 주세요.

멀티 스레드 프로그래밍은 하나의 프로세스에서 여러 개의 스레드를 만들어 처리하는 프로그래밍 방식입니다.

• 장점

    - 프로세스 내에 있는 모든 스레드들이 프로세스의 자원을 공유하므로 자원 중복에 대한 낭비를 막을 수 있습니다.
    - 한 스레드가 입출력으로 인해 작업이 진행되지 않더라도, 다른 스레드가 작업을 이어서 할 수 있습니다.

• 단점

    - 한 스레드에 문제가 생기면 전체 스레드에 영향을 미칩니다.
    - 공유 자원에 대한 동기화가 필요합니다.

✅ 멀티 프로세스대신 멀티 쓰레드를 사용하는 이유가 뭔가요?

프로세스 내에 있는 모든 스레드들이 프로세스의 자원을 공유하므로, 자원 중복에 대한 낭비를 막을 수 있습니다.

✅ 멀티 쓰레드 프로그래밍에서 주의할 점이 있을까요?

자원을 공유하기 때문에 Thread-safe하게 작성하여, 동시성 이슈가 발생하지 않도록 해야 합니다

✅ Thread-Safe하다는 의미와 그렇게 설계하는 방법을 설명해 주세요.

Thread-safe하다는 의미는, 여러 쓰레드가 동일한 자원에 접근하더라도 동시성 이슈가 발생하지 않는 것을 의미합니다. Thread-safe하게 설계를 하려면, 기본적으로 불변 객체를 활용하는 것이 Thread-safe하게 설계할 수 있는 방법 중 하나라고 생각합니다. 그 외에 락을 통해 공유 자원에 접근할 스레드를 제한하는 방법이 있습니다.

➡️ 참고자료

[BLOG]

작성일 20231129

➡️ 동시성과 병렬성

✅ 동시성(Concurrency)

한 마디로 여러 개의 Task가 있을 때, 동시에 실행되는 것처럼 보이는 성질을 말한다. 동시성이 나타나는 경우를 크게 싱글 코어와 멀티 코어로 나누어 살펴보려고 한다.

싱글 코어에서 멀티 스레드를 동작시키는 경우, 멀티 태스킹을 하기 위해 여러 개의 스레드가 번갈아가면서 실행되는 성질을 동시성이라고 부른다. 이 경우에는 실제로 물리적 시간으로 동시는 아니지만 Context Switching 즉, 빠른 속도로 다른 작업으로 넘어가기 때문에 동시에 작업이 이루어지는 것처럼 보인다.

반면, 멀티 코어에서 멀티 스레드를 이용하여 동시성을 만족시키는 경우에는 그렇게 보이는 것이 아니라 실제로 동시에 실행된다는 차이가 있다.

동시성 개념에서 오해하지 말아야 할 지점은 모든 멀티 스레드가 동시성을 만족하는 것은 아니라는 것이다. 일례로 코틀린의 경우 싱글 스레드에서 코루틴을 이용하여 동시성을 만족하기도 한다.

Logical Level에 속한다. Single Core 물리적으로 병렬이 아닌 순차적으로 동작할 수 있다. 실제로는 Time-sharing으로 CPU를 나눠 사용함으로써 사용자가 Concurrency를 느낄 수 있도록 한다. Multi Core 물리적으로 병렬로 동작할 수 있다. Case Mutex, Deadlock

다른 작업으로 넘어가야 하기 때문에 context switching이 필요하다. context switching이란 현재 진행하고 있는 작업의 상태를 적용하고 다음 진행할 작업의 상태값을 읽어 적용하는 과정! 이 context swiching에는 다양한 알고리즘이 있는데 매우 빠르기 때문에 사람이 느낄 때는 여러가지 작업을 동시에 수행하는 것 같은 느낌이 듦. 하지만 “동시성”은 여러가지 일을 “동시에”하는 것이 아니라 한가지 일을 조금씩 나눠서 하는 것. 1코어 N쓰레드

✅ 병렬성(Parrallelism)

병렬성 개념의 핵심은 실제로 작업이 동시에 수행된다는 점이다. 이러한 성질이 드러나는 예를 들자면 멀티 코어에서 멀티 스레드를 동작시켜, 한 개 이상의 스레드를 포함하는 각 코어들이 동시에 실행되는 경우를 들 수 있다. 또다른 예로는 네트워크 상의 여러 컴퓨터에게 분산작업을 요청하는 분산 컴퓨팅이 있다.

Physical(Machine) Level에 속한다. 오직 Multi Core에서만 가능하다. Case OpenMP, MPI, CUDA

➡️ 참고자료

[BOOK]

[BLOG] https://nesoy.github.io/articles/2018-09/OS-Concurrency-Parallelism
[Study] 동시성(Concurrency) 과 병렬성 (Parallelism) 올바른 개념 잡기 https://vagabond95.me/posts/concurrency_vs_parallelism/

작성일 20231122 20231129

➡️ CS STUDY 1주차

✅ 운영체제는 무엇이고 어떤 역할을 수행하는지 설명해주세요.

운영체제는 컴퓨터 하드웨어를 제어하고 사용자와 하드웨어 사이에서 응용 프로그램의 서비스를 제공하는 시스템 소프트웨어입니다. 컴퓨터 시스템 자원을 효율적으로 관리해주고, 사용자가 하드웨어를 직접 다루기 복잡한 부분을 운영체제가 대신해주어 컴퓨터 시스템을 보다 편리하게 사용하게 도와주며, 악성 프로그램에 대해 사용자와 운영체제 자신을 보호하는 역할을 수행합니다.

✅ 다중 프로그래밍 시스템(multi-programming system)에 대해서 설명해주세요.

다중 프로그래밍 시스템 즉, 멀티 프로그래밍 시스템은 메모리 공간을 분할해서 여러 프로그램들을 적재하고 수행하는 시스템입니다. 예를들어 한 프로세스를 CPU가 수행하던 중에 I/O 이벤트가 발생하여 대기해야 하는 경우, 그동안 메모리에 적재된 다른 프로세스를 수행하는 식입니다. 이러한 멀티 프로그래밍은 CPU를 효율적으로 사용할 수 있게 해줍니다.

✅ 시분할 시스템에 대해서 설명해주세요.

여러 작업을 수행할 때 컴퓨터 처리 능력을 일정한 시간 단위로 분할해서 번갈아가며 여러 작업을 수행하는 시스템으로, 시분할 시스템을 사용하면 여러 프로그램이 마치 동시에 실행되는 것처럼 느껴집니다.

✅ 대화형 시스템(interactive system)에 대해서 설명해주세요.

인터렉티브 시스템은 사용자의 요청에 대한 결과를 곧바로 얻을 수 있는 시스템을 말합니다.

✅ 다중 처리기 시스템(multi-processor system)에 대해서 설명해주세요.

멀티 프로세싱은 다수의 프로세서가 협력적으로 여러 작업들을 동시에 처리하는 것을 말합니다. 멀티 프로세싱은 다수의 작업을 병렬로 처리할 수 있고, 어떤 프로세서가 고장날지라도 작업이 중단되지 않는 장점이 있습니다.

✅ 시스템 콜에 대해 설명해주세요.

인터럽트의 일종으로, 사용자 프로그램이 운영체제 커널에 있는 코드를 실행하고자 할 때 발생하는 신호입니다. 사용자 프로그램이 운영체제 커널에 있는 코드를 실행하기 위해, 시스템 콜을 발생시키면 CPU 제어권을 운영체제로 넘겨서 운영체제 커널에 있는 코드를 처리하게 됩니다.

✅ 커널에 대해 설명해주세요.

커널은 메모리에 항상 적재 되어있는 운영체제의 핵심 부분을 말합니다. 커널은 컴퓨터 하드웨어와 프로세스의 보안을 책임지고, 시스템 자원을 효율적으로 관리하고, CPU 스케줄링을 수행합니다. 또한 하드웨어 추상화를 통해 프로그래머가 하드웨어 위에서 동작하는 프로그램을 개발하는 것을 돕습니다. 또한 인터럽트가 발생하면 인터럽트 처리를 합니다.

✅ 커널모드에 대해 설명해주세요.

커널 모드는 시스템의 모든 메모리에 접근할 수 있고 모든 CPU 명령을 수행할 수 있는 모드 입니다. 예를 들어 프로세스는 사용자 모드에서 수행하던 중 시스템 콜이나 인터럽트가 발생하면, 커널모드로 전환 한 후 사용자 모드에서 처리할 수 없는 작업을 커널을 통해 수행 합니다.

✅ 유저모드에 대해 설명해주세요.

유저모드란 프로세스의 실행 상태중 하나로, 프로세스가 자신의 주소 공간에 정의된 코드를 실행하는 상태를 뜻합니다. 유저모드에서는 I/O 작업등 커널에 정의되어 있는 작업을 수행할 수 없습니다. 따라서 시스템 콜을 통해 커널모드로 전환하여 커널의 기능을 사용하도록 할 수 있습니다.

✅ 폴링에 대해 설명해주세요.

폴링은 CPU가 일정 주기마다 이벤트가 발생 했는지 소프트웨어적으로 확인하는 방법 입니다. 예를들어 CPU가 I/O 작업을 요청한뒤 CPU는 I/O 작업이 완료 되었는지 주기적으로 확인합니다. 이벤트에 대한 지속적인 확인을 수행하기 때문에 리소스가 소모되고, 이벤트가 발생한 정확한 타이밍에 처리하기가 어렵다는 단점이 있습니다. 하지만 구현은 쉽습니다.

✅ 인터럽트에 대해 설명해주세요.

인터럽트는 컴퓨터 작업 도중 커널의 처리가 필요할때 그것을 통보하는 것을 말합니다. 예를들어 I/O 장치가 요청받은 데이터를 다 읽어왔다던가 프로그램 수행 도중 예외가 발생했거나 프로세스가 직접 시스템 콜을 호출했을 때 인터럽트가 발생합니다. 인터럽트가 발생하면 먼저 인터럽트 벡터에서 해당 인터럽트에 대한 인터럽트 처리 루틴을 찾아서 인터럽트를 처리합니다. 인터럽트를 처리하기 전에는 CPU와 프로세스의 현재 상태를 저장해두고, 인터럽트가 처리되면 다시 상태 정보를 복구해서 이전 작업을 이어서 수행 합니다.

✅ DMA에 대해 설명해주세요.

DMA는 I/O 장치의 로컬버퍼에서 메인 메모리로 데이터를 읽어오는 작업을 CPU 대신 수행해줍니다. DMA를 사용하면 CPU가 I/O 장치에 의해 자주 인터럽트 당하는 것을 막아줘서 CPU를 좀 더 효율적으로 관리하고 입출력 연산을 빠르게 수행할 수 있습니다.

✅ 동기식 I/O에 대해 설명해주세요.

동기식 입출력은 어떤 프로그램이 I/O 요청을 했을 때 그 I/O 작업이 완료 되어야만 그 프로그램이 다음 작업을 수행할 수 있는 방식을 말합니다.

✅ 비동기식 I/O에 대해 설명해주세요.

동기식 입출력은 어떤 프로그램이 I/O 요청을 하면, 그 I/O 작업의 완료를 기다리는 것이 아니라, I/O 요청을 호출한 프로그램에게 제어권을 바로 넘겨줘서 그 프로그램이 다른 작업을 수행할 수 있도록 하는 방식 입니다.

➡️ 참고자료

[BLOG]

작성일 20231122, 20231124

➡️ 운영체제는 어떻게 자원을 관리하나요?

컴퓨터 시스템에는 CPU, 메모리, 입출력 장치 등과 같은 다양한 자원이 존재하고, 이를 관리하는 담당자가 운영체제(Operating System)라는 것을 앞선 글에서 알아봤습니다.

이번 글에서는 운영체제가 시스템의 안전성과 효율성을 유지하기 위해 프로세서(CPU) 관리, 메모리(RAM) 관리, 입출력(I/O) 장치 관리, 파일시스템 관리, 네트워크 관리, 사용자 및 권한 관리 이렇게 총 6가지 측면에서 운영체제의 자원 관리 방법을 살펴보겠습니다.

운영체제의 자원 관리 항목 첫 번째

➡️ 프로세서(CPU) 관리

프로세서들 간의 자원 경쟁을 조절

운영체제의 자원 관리 항목 두 번째

➡️ 메모리(RAM) 관리

운영체제의 자원 관리 항목 세 번째

➡️ 입출력(I/O) 장치 관리

운영체제의 자원 관리 항목 네 번째

➡️ 파일시스템 관리

운영체제의 자원 관리 항목 다섯 번째

➡️ 네트워크 관리

운영체제의 자원 관리 항목 여섯 번째

➡️ 사용자 및 권한 관리

CS STUDY 면접 예상 질문후보 CPU 스케줄링에 대해 설명해주세요. 스케줄러의 종류는 무엇이 있나요.

✅ CPU 스케줄링에 대해 설명해주세요.

CS STUDY 면접 예상 질문후보 선점형 스케줄링과 비전형 스케줄링의 차이가 무엇인가요? 선입선출 스케줄링(FCFS)에 대해 설명해주세요. 최단 작업 우선 스케줄링(SJF)에 대해 설명해주세요. 최소 잔류 시간 우선 스케줄링(SRTF) 방식에 대해 설명해주세요. 우선순위 스케줄링에 대해 설명해주세요. 라운드 로빈 스케줄링에대해 설명해주세요. 멀티 레벨 큐 스케줄링에 대해 설명해주세요. 멀티 레벨 피드백 큐 스케줄링에 대해 설명해주세요.

✅ 선점형 스케줄링과 비전형 스케줄링의 차이가 무엇인가요?

✅ 선입선출 스케줄링(FCFS)에 대해 설명해주세요.

✅ 최단 작업 우선 스케줄링(SJF)에 대해 설명해주세요.

✅ 최소 잔류 시간 우선 스케줄링(SRTF) 방식에 대해 설명해주세요.

✅ 우선순위 스케줄링에 대해 설명해주세요.

✅ 라운드 로빈 스케줄링에대해 설명해주세요.

✅ 멀티 레벨 큐 스케줄링에 대해 설명해주세요.

✅ 멀티 레벨 피드백 큐 스케줄링에 대해 설명해주세요.

➡️ 자원 할당 시 발생할 수 있는 문제 상황에는 어떤 것들이 있나요?

운영체제가 자원을 할당할 시 발생할 수 있는 대표적인 문제 상황에는 교착상태, 기아상태, 우선순위 역전, 과도한 대기 시간, 자원 과다 소모 등을 뽑을 수 있습니다.

✅ 교착상태(Deadlock)

두 개 이상의 작업이 서로 상대방의 작업이 끝나기만을 기다리고 있어 다음 단계로 진행할 수 없는 상태를 말합니다.

✅ 교착상태의 발생조건

아래의 4가지 조건이 모두 성립되는 경우, deadlock이 발생한다.   ▶ 상호배제(Mutual Exclusion)    - 프로세스들이 필요로 하는 자원에 대해 배타적인(= 독점) 통제권을 요구한다.   ▶ 점유대기(Hold & Wait)    - 프로세스가 할당된 자원을 가진 상태에서 다른 자원을 기다린다.   ▶ 비선점(No preemption)    - 프로세스가 어떤 자원의 사용을 완료할 때까지 해당 자원을 다른 프로세스에서 뺏을 수 없다.   ▶ 순환대기(Circular wait)    - 각 프로세스는 순환적으로 다음 프로세스가 요구하는 자원을 가지고 있다.  출처: https://devraphy.tistory.com/242 [개발자를 향하여:티스토리]

CS STUDY 면접 예상 질문후보 기아 상태가 무엇인가요?

✅ 기아상태(Starvation)

특정 프로세스의 우선 순위가 낮아서 원하는 자원을 계속 할당받지 못하는 상태를 말합니다.

프로세스가 필요한 자원을 계속해서 얻지 못해 영원히 기다리는 상태입니다. 프로세스에 자원을 할당하는 정책이나 알고리즘을 개선하여 기아상태를 피할 수 있어야 합니다.

CS STUDY 면접 예상 질문후보 기아 상태를 어떻게 해결할 수 있나요?

✅ 기아상태의 해결방법

기아 상태를 해결하기 위한 방법은 다양하지만, 기본적으로는 우선순위 할당, 시간 제한, 자원 선점, 공정한 자원 할당, 자원 요청 취소 등을 활용합니다. 우선순위를 부여하여 우선적으로 자원을 할당하거나, 대기 시간을 제한하고 자원을 선점하거나, 자원을 공정하게 할당함으로써 기아 상태를 해결할 수 있습니다. 이러한 전략들을 조합하여 특정 상황에 맞게 적절한 해결책을 찾아내는 것이 중요합니다.

✅ 우선순위 역전(Priority Inversion)

낮은 우선순위의 프로세스가 높은 우선순위의 프로세스가 사용 중인 자원을 기다리는 동안 높은 우선순위의 프로세스에게 자원이 할당되어 발생하는 상황입니다. 우선순위 역전을 방지하기 위해 특별한 우선순위 상속(protocol)이나 우선순위 강제 상승(priority boosting) 등의 기법을 사용할 수 있습니다.

✅ 과도한 대기 시간(Excessive Waiting Time)

프로세스가 필요한 자원을 얻기 위해 오랜 시간을 기다리는 상황으로, 시스템의 효율성을 저하시킵니다. 자원 할당 알고리즘이나 스케줄링 정책을 개선하여 대기 시간을 최소화해야 합니다.

✅ 자원 과다 소모(Resource Contention)

여러 프로세스가 한정된 자원에 경쟁하는 상황으로, 자원의 효율적인 분배가 필요합니다. 적절한 자원 할당 전략이나 자원 공유 방법을 사용하여 경쟁을 관리할 수 있습니다. 자원 할당 문제를 해결하기 위해서는 효율적인 자원 관리 정책, 교착상태 방지 및 해결 알고리즘, 우선순위 스케줄링 등이 필요합니다. 이러한 문제들은 운영체제 설계 및 관리에서 항상 주의 깊게 다뤄져야 하는 중요한 측면입니다.

➡️ 참고자료

[BLOG]

작성일 20231124, 20231130, 20231201, 20231202

01. 웹 프로젝트 생성 및 환경설정

✅ 1) Server 설정하기

하단 Servers 창에서 Tomcat을 설정합니다. 시험에서 주어진 버전은 8입니다.

✅ 2) 이클립스에서 웹 프로젝트를 생성하는 방법

: [File]-[New]-[Dynamic Web Project]을 클릭한 후 Project name에 프로젝트명으로 HRD_비번호을 입력하면 됩니다. 이때 비번호는 시험장에서 주어지는 명찰에 해당합니다.

✅ 3) Encoding 설정하기

이클립스 상단 바의 [Window-Proference]에서 java, jsp, html, css, text 파일의 기본 인코딩을 UTF-8로 지정하도록 합니다. 해당 환경설정 내용은 시험지에 주어지므로 암기할 필요는 없습니다.

02. 데이터베이스 관련 환경설정

✅ 4) ojdbc6.jar [WEB-INF-lib]에 저장하거나 아래 참고링크의 방법으로 JDBC Driver 라이브러리 추가하기

CF. https://programjy.tistory.com/6

✅ 2) JDBC 유틸리티 클래스 작성

JDBC(Java DataBase Connectivity)는 자바 프로그램에서 관계형 데이터베이스를 연동하기 위해 제공되는 표준 API, java.sqp 패키지를 가리킨다. 이 API를 사용하면 DBMS에 종속되지 않는 프로그램을 개발할 수 있다는 장점이 있다.

그러나 JDBC를 사용하기 위해서는 매번 드라이버 등록, Concection 연결, PreparedStatement 생성, SQL 전송, 연결 해제과 같은 절차를 파일마다 작성해야 하며, 이는 데이터 중복의 문제와 수정·삭제·조회를 할 시 작업을 여러 번 수행해야 한다는 문제가 발생한다.

때문에 이를 보완하기 위해 우리는 Connection 관련 작업 즉, 특정 데이터베이스로부터 Connection을 획득하는 별도의 클래스로 분리하여 코드의 재사용성을 높이고자 합니다.

JDBCUtil(Util 클래스)는 시험에서 모두 주어지므로 암기의 대상이 아닙니다. 다만 이 클래스가 무엇을 위한 것인지는 아는 게 전체적인 프로그램 작성의 이해에 도움된다고 생각합니다.

// Util.java

package DBPKG;
import java.sql.*;

public class Util {
    public static Connection getConnection() throws Exception {
        Class.forName("oracle.jdbc.OracleDriver");
        Connection con = DriverManager.getConnection("jdbc:oracle:thin:@//localhost:1521/XE", "system", "1234");
        return con;
    }
}

✅ 3) cmd(명령프롬프트)를 통해 SQL 접속

C:\Users\feshe>sqlplus
SQL*Plus: Release 11.2.0.2.0 Production on 일 10월 22 22:12:07 2023
Copyright (c) 1982, 2014, Oracle. All rights reserved.
Enter user-name: system Enter password: 1234
Connected to: Oracle Database 11g Express Edition Release 11.2.0.2.0 - 64bit Production
SQL>

CF. cmd 명령어 모음집
모든 계정에 대한 정보 확인 : select * from all_users; 현재 사용자 확인 : show user; 테이블 전체 조회 : select * from tab;

✅ 4) 회원/매출 정보 테이블 생성

create table member_tbl_02 (
    custno number(6) not null primary key,
    custname varchar2(20),
    phone varchar2(13),
    address varchar2(60),
    joindate date,
    grade char(1),
    city char(2)
);

create table money_tbl_02 (
    custno number(6),
    salenol number(8) not null primary key,
    pcost number(8),
    amount number(4),
    price number(8),
    pcode varchar2(4),
    sdate date
);

✅ 5) 회원번호 자동입력 기능 생성/삭제

create sequence seq_no 
    increment by 1
    start with 100001;

drop sequence seq_no;

✅ 6) 회원/매출 정보 테이블에 데이터 삽입 후 커밋

insert into member_tbl_02 values(seq_no.nextval, '김행복', '010-1111-2222', '서울 동대문구 휘경 1동', '20151202', 'A', '01');
insert into member_tbl_02 values(seq_no.nextval, '이축복', '010-1111-3333', '서울 동대문구 휘경 2동', '20151206', 'B', '01');
insert into member_tbl_02 values(seq_no.nextval, '장믿음', '010-1111-4444', '울릉군 울릉읍 독도 1리', '20151001', 'B', '30');
insert into member_tbl_02 values(seq_no.nextval, '최사랑', '010-1111-5555', '울릉군 울릉읍 독도 2리', '20151113', 'A', '30');
insert into member_tbl_02 values(seq_no.nextval, '진평화', '010-1111-6666', '제주도 제주시 외나무골', '20151225', 'B', '60');
insert into member_tbl_02 values(seq_no.nextval, '차공단', '010-1111-7777', '제주도 제주시 감나무골', '20151211', 'C', '60');
insert into member_tbl_02 values(seq_no.nextval, '박아연', '010-1111-8888', '서울 동대문구 휘경 1동', '20150526', 'B', '12');

insert into money_tbl_02 values('100001', '20160001', '500', '5', '2500', 'A001', '20230501');
insert into money_tbl_02 values('100001', '20160002', '1000', '2', '2000', 'A002', '20230521');
insert into money_tbl_02 values('100002', '20160003', '1000', '2', '2000', 'A002', '20230521');
insert into money_tbl_02 values('100003', '20160004', '10000', '5', '50000', 'A007', '20230603');
insert into money_tbl_02 values('100006', '20160005', '1500', '2', '3000', 'A011', '20231201');

commit;

✅ 7) 테이블 조회/삭제/구조확인

select * from member_tbl_02;
select * from money_tbl_02;

drop table money_tbl_02;

describe member_tbl_02;
describe money_tbl_02;

03. 메인페이지 작성

참고로 JSP와 함께 대표적인 서버에서 사용자 요청을 처리하는 자바 기술로 불리는 서블릿은 자바 코드 사이에 HTML 디자인이 포함되는 구조라면, JSP는 HTML 디자인 사이에 자바 코드가 추가되는 구조를 따릅니다. 때문에 서블릿의 단점이었던 화면의 유지보수성을 높여줍니다.

✅ 1) src/main/wepapp 소스 폴더 오른쪽 마우스 클릭 후 [New]-[JSP File] 메뉴 선택하여 새로운 JSP 파일을 생성

CF. 만약 아래와 같은 에러가 발생할 경우 아래 링크 참조

✅ 2) 모든 페이지에 공통으로 작성되어야 하는 header.jsp 분리하기

<!--header.jsp-->

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>header</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
    <h1>쇼핑몰 회원관리 ver 1.0</h1>
</header>
<nav>
    <ul>
        <li><a href="insert.jsp">회원등록</a></li>
        <li><a href="member.jsp">회원목록조회/수정</a></li>
        <li><a href="price.jsp">회원매출조회</a></li>
        <li><a href="index.jsp">홈으로.</a></li>
    </ul>
</nav>
</body>
</html>

✅ 3) 모든 페이지에 공통으로 작성되어야 하는 footer.jsp 분리하기

<!--footer.jsp-->

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>footer</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<footer>
<p>HRDKOREA Copyright&copy;20231201 All rights reserved. Human Resources Development Service of Korea </p>
</footer>
</body>
</html>

✅ 4) 홈페이지에 해당하는 index.jsp 작성하기

<!--index.jsp-->

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>홈페이지(index.jsp)</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<%@ include file="header.jsp"%> 

<section>
<h2>쇼핑몰 회원관리 프로그램 </h2><br>
<p>
 쇼핑몰 회원정보의 회원매출정보 데이터베이스를 구축하고 회원관리 프로그램을 작성하는 프로그램이다.<br>
 프로그램 작성 순서<br>
 1. 회원정보 테이블을 생성한다.<br>
 2. 매출정보 테이블을 생성한다.<br>
 3. 회원정보, 매출정보 테이블에 서시된 문제지의 참조데이터를 추가생성한다.<br>
 4. 회원정보 입력 화면 프로그램을 작성한다.<br>
 5. 회원정보 조회 프로그램을 작성한다.<br>
 6. 회원매출정보 조회 프로그램을 작성한다.<br>
</p>
</section>

<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>

✅ 5) 모든 웹페이지에 적용될 style.css 작성하기

/* style.css*/

@charset "UTF-8";

* {margin:0; padding:0}
a {color:white; text-decoration:none; font-weight: bold;}

header {
    color: rgb(100,100,100);
    background: ivory;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

nav {
    background: rgba(100,0,0,0.5);
    text-align: center;
    padding-top: 7px;
    padding-bottom: 7px;
}

nav ul li {
    list-style-type:none;
    display: inline-block;
    margin-left: 15px;
    margin-right: 15px;        
}

section {
    color: rgb(80,80,80);
    background: rgba(100,100,100,0.1);
    padding: 50px;
}

section h2 {
    text-align: center; 
    margin-bottom: 40px;
}

footer p {
    font-weight: bold;
    color:white;
    background: rgba(100,0,0,0.5);
    text-align: center;
    padding-top: 7px;
    padding-bottom: 7px;
}

04. 나머지 데이터베이스 관련 페이지 작성하기

✅ 1) 회원정보를 조회할 수 있는 member.jsp 작성하기

스크립트릿(Scriptlet) 태그 <% %>
jsp 파일에서 java 코드 삽입하기

표현식(Expression) 태그 <%= %>
jsp 파일에서 java 코드를 사용하여 값 출력하기

디렉티브(Directive) 태그 <%@ %>
종류 01. 페이지 디렉티브 <%@ page %> : 주로 페이지의 언어, 콘텐츠 타입, 인코딩 EX. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> EX. <%@ page import=“java.sql.*” %>
종류 02. 인클루드 디렉티브 <%@ includepage %> : 주로 다른 파일을 삽입할 때 사용 EX. <%@ include file=“header.jsp”%>

<!--member.jsp-->

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!--2-3) Util 클래스 임포트-->
<%@ page import="DBPKG.Util"%>

<!--3-2) Util 외의 데이터베이스 관련 패키지 전부 임포트-->
<%@ page import="java.sql.*"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!--2-2) Util 클래스 임포트-->
<%@ page import="DBPKG.Util"%>

<!--3-2) Util 외의 데이터베이스 관련 패키지 전부 임포트-->
<%@ page import="java.sql.*"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원정보조회(member.jsp)</title>
<style>    
    body {margin: 0;}
    table {margin: 0 auto; border-color: ivory; text-align: center;}
    table tr th, td {padding: 5px;}
</style>
</head>
<body>
<jsp:include page="header.jsp"></jsp:include>

<section>
<h2>회원목록조회/수정</h2>
<form>
<table border="1">
    <tr>
        <th>회원번호</th>
        <th>회원성명</th>
        <th>전화번호</th>
        <th>주소</th>
        <th>가입일자</th>
        <th>고객등급</th>
        <th>거주지역</th>
    </tr>    

<!--스크립트릿(Scriptlet, JSP에서 자바 코드 삽입하기)-->    
<%
    //1) 클라이언트 요청 인코딩 설정하기
    request.setCharacterEncoding("utf-8");

    //2-3) conn 초기화 필요 
    Connection conn = null;

    //4-2) pstmt 초기화 필요
    PreparedStatement pstmt = null;

    //5-2) rs 초기화 필요
    ResultSet rs = null;

    try {
        //2-1) 데이터베이스 연결을 위해 Util에서 획득한 Connection 객체 가져오기
        conn = Util.getConnection();

        //3) 테이블의 전체 데이터를 가져오는 SQL 쿼리문 정의
        String sql = "select * from member_tbl_02 order by custno";

        //4-1) 얻어온 Connection 클래스를 통해 SQL 쿼리 실행을 위한 Statement 객체 생성
        pstmt = conn.prepareStatement(sql);

        //4-3) sql 쿼리가 올바르게 생성되었는지 확인하기 위해 출력
        System.out.println("SEARCH SQL: " + sql);

        //5-1) Statement 객체를 사용하여, SQL 쿼리문 실행을 위한 ResultSet 객체 정의
        //ResultSet은 데이터베이스 쿼리의 결과 집함을 나타내는 java 인터페이스로, executeQuery() 메서드를 통해 실행된 select 쿼리의 결과가 ResultSet 객체로 반환된다.
        rs = pstmt.executeQuery();


        while(rs.next()) {
%>            
            <tr>
                <!--6) 회원번호 : 회원정보 수정링크-->
                <!--결과집합에서 어떤 행을 수정할지를 가리키기 위해 URL에 쿼리스트링 방식을 사용-->
                <td style="background: rgba(100,0,0,0.5)"><a href="modify.jsp?mod_custno=<%= rs.getString("custno") %> ">
                    <!--7) 표현식(Expression, JSP에서 자바 코드를 사용하여 값 출력하기)-->
                    <%=rs.getString("custno") %>
                </a></td>
                <td><%=rs.getString("custname") %></td>
                <td><%=rs.getString("phone") %></td>
                <td><%=rs.getString("address") %></td>
                <td><%=rs.getString("joindate").substring(0,10)%></td>
                <td><%=rs.getString("grade") %></td>
                <td><%=rs.getString("city") %></td>
            </tr>    
<%            
        }//while
    }//try

    //8) 예외가 발생하면 콘솔 창에 예외정보 출력
    catch(Exception e) {
        e.printStackTrace();
    }//catch
    finally {
        try {
            if (rs != null) rs.close();
            if (pstmt != null) pstmt.close();
            if (conn != null) conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
%>

</table>
</form>
</section>

<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>

✅ 2) 회원정보를 수정할 수 있는 modify.jsp 작성하기

<!--modify.jsp-->

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@ page import="DBPKG.Util" %>
<%@ page import="java.text.SimpleDateFormat" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원정보 수정 (modify.jsp)</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>    
    table {margin: 0 auto; border-color: ivory; text-align: center;}
    table tr th, td {padding: 5px;}
    .button {color: white; background:rgba(100,0,0,0.5); padding:5px; border-color:white;}
</style>

<!--10) 자바스크립트 연동-->
<script src="action.js"></script>
</head>
<body>
<%@ include file="header.jsp"%>

<%
//1) 데이터베이스 관련 공통코드 및 변수 초기화
request.setCharacterEncoding("utf-8");

Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;

//2) HTTP 요청(렌더링할 회원정보 값을 특정하기 위해)에서 mod_custno라는 파라미터(매개변수)의 값 가져오기
String mod_custno = request.getParameter("mod_custno"); 
System.out.println("MODIFIED CUSTNO: " + mod_custno);

//7) 각 변수 초기화
String custname = "";
String phone ="";
String address = "";
Date joindate;
String grade ="";
String city="";
String joindateStr="";

try {
    //3) 데이터베이스 관련 공통코드
    conn = Util.getConnection();

    //4) 1개의 행의 데이터(1명의 회원정보)를 가져오는 SQL 쿼리문 
    String sql = "SELECT * FROM member_tbl_02 WHERE custno = " + mod_custno ;
    pstmt = conn.prepareStatement(sql);
    rs = pstmt.executeQuery();

    //5) 처음에는 ResultSet의 커서가 첫 번째 행의 이전에 위치하므로, rs.next()를 호출한 후에야 첫 번째 행에 이동
    rs.next();

    //6) 수정하기 전 기존의 값을 렌더링하기 위해 ResultSet에서 각각의 값을 가져와 변수에 저장 
    mod_custno = rs.getString("custno");
    custname = rs.getString("custname");
    phone = rs.getString("phone"); 
    address = rs.getString("address"); 
    joindate= rs.getDate("joindate"); 
    grade = rs.getString("grade"); 
    city = rs.getString("city");

    //7) 데이터베이스에서 가져온 날짜 데이터를 원하는 형식으로 변환하는 자바 코드
    SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");

    //8) 위에서 날짜 포맷 변환을 통해 얻은 문자열
    joindateStr = dateFormat.format(joindate);

}catch (Exception e) {
    e.printStackTrace();
}
%>

<section>
<h2>홈쇼핑 회원 정보 수정</h2>

<!--11) 사용자로부터 데이터를 수집하는 데에 사용되는 form 태그를 사용하며, 서버로 수정된 데이터를 전송하는 데에 목적을 두기 때문에 해당 form 태그에서 사용되는 HTTP 메서드를 method 속성으로 정의했다. 또한 해당 폼이 submit될 때 데이터가 전송될 URL(mode.jsp)을 action 속성으로 지정하였다.-->
<form method="post" action="mode.jsp" name="frm">
<input type="hidden" name="mode" value="modify">
<table border="1">
    <tr>
        <th>회원번호</th>

        <!--name 속성은 폼이 서버로 제출될 때 해당 입력 필드의 이름과 값이 함께 전송되며, 서버에서는 이 이름을 사용하여 해당 필드의 값을 식별하고 request.getParameter("custno")를 통해 접근하게 된다-->
        <td><input type="text" name="custno" value="<%=mod_custno %>" readonly></td>
    </tr>
    <tr>
        <th>회원성명</th>
        <td><input type="text" name="custname" value="<%=custname %>"></td>
    </tr>
    <tr>
        <th>회원전화</th>
        <td><input type="text" name="phone" value="<%=phone %>"></td>
    </tr>
    <tr>
        <th>회원주소</th>
        <td><input type="text" name="address" value="<%=address %>"></td>
    </tr>
    <tr>
        <th>가입일자</th>
        <td><input type="text" name="joindate" value="<%=joindateStr %>"></td>
    </tr>
    <tr>
        <th>고객등급 [A:VIP B:일반 C:직원]</th>
        <td><input type="text" name="grade" value="<%=grade %>"></td>
    </tr>
    <tr>
        <th>도시코드</th>
        <td><input type="text" name="city" value="<%=city %>"></td>
    </tr>
    <tr>
        <td colspan="2">
            <!--9) 수정 및 조회 버튼을 눌렀을 때의 동작 함수 지정-->
            <input class="button" type="submit" value="수정" onclick="return modify()">
            <input class="button" type="button" value="조회" onclick="return search()">
        </td>
    </tr>
</table>
</form>
</section>

<%@ include file="footer.jsp" %>

</body>
</html>

✅ 3) 이벤트 발생 시 동작을 처리하는 action.js 작성하기

// action.js


//modify.jsp

function search() {
    window.location = "member.jsp";
}

function modify() {
    alert("회원정보 수정 성공");
}


//insert.jsp

function check() {
    //회원성명이 입력되지 않았으면 alert
    if(document.form.custname.value.length==0) { 
      alert("회원성명이 입력되지 않았습니다");
      frm.custname.focus();
    }
    else if(document.form.phone.value.length==0) {
      alert("전화번호가 입력되지 않았습니다");
      frm.phone.focus();
    }
    else if(document.form.address.value.length==0) { 
      alert("주소가 입력되지 않았습니다");
      frm.address.focus();
    }
    else if(document.form.joindate.value.length==0) {
      alert("가입일자가 입력되지 않았습니다");
      frm.joindate.focus();
    }
    else if(document.form.grade.value.length==0) { 
      alert("고객등급이 입력되지 않았습니다."); 
      frm.grade.focus();
    }
    else if(document.form.city.value.length==0) { 
      alert("도시코드가 되지 않았습니다.");
      frm.city.focus();
    }
    success();
}

function success() {
    alert("회원등록에 성공하였습니다.");
}

✅ 4) 모드에 따른 동작을 처리하는 mode.jsp 작성하기

<!--mode.jsp : 회원정보에 대한 데이터베이스 작업을 처리하는 역할-->

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="DBPKG.Util"%>
<%@page import="java.sql.*"%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>action</title>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;

String mode = request.getParameter("mode");
String custno = request.getParameter("custno"); 
String custname = request.getParameter("custname"); 
String phone = request.getParameter("phone"); 
String address = request.getParameter("address"); 
String joindate = request.getParameter("joindate"); 
String grade = request.getParameter("grade"); 
String city = request.getParameter("city");
try{
  conn = Util.getConnection();

  String sql="";

  switch(mode) {
   case "insert" :
       // 최대 custno를 쿼리하는 대신 데이터베이스에서 자동으로 증가하는 열 사용
       sql = "INSERT INTO member_tbl_02 VALUES (?, ?, ?, ?, ?, ?, ?)";
       System.out.println("INSERT SQL:" + sql);

       pstmt = conn.prepareStatement(sql);
       pstmt.setString(1, custno);
       pstmt.setString(2, custname);
       pstmt.setString(3, phone);
       pstmt.setString(4, address);
       pstmt.setString(5, joindate);
       pstmt.setString(6, grade);
       pstmt.setString(7, city);

       pstmt.executeUpdate();
       System.out.println("성공");
       %>
       <jsp:forward page="member.jsp"/>
       <% 
     break;
  case "modify" : 
      sql = "update member_tbl_02 SET " +
          "custname=?, phone=?, address=?, joindate=?, grade=?, city=? " +
          " where custno=?";
      System.out.println("UPDATE SQL:" + sql);

      pstmt = conn.prepareStatement(sql); // pstmt 초기화 추가
      pstmt.setString(1, custname);
      pstmt.setString(2, phone);
      pstmt.setString(3, address);
      pstmt.setString(4, joindate);
      pstmt.setString(5, grade);
      pstmt.setString(6, city);
      pstmt.setString(7, custno);

      pstmt.executeUpdate();
      %>
      <jsp:forward page="member.jsp"/>
      <%

      break;
  }
}
catch(Exception e){
    e.printStackTrace();
}
      %>
</body>
</html>

✅ 5) 회원의 매출을 조회할 수 있는 price.jsp 작성하기

<!--price.jsp-->

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="DBPKG.Util" %>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원매출조회 (money.jsp)</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
    table {margin:0 auto; border-color: ivory; }
    table tr th, td {padding: 5px 20px 5px 20px; text-align:center; }
</style>
</head>
<body>
<%@ include file="header.jsp" %>

<section>
<h2>회원매출조회</h2>
<form>
<table border="1">
    <tr>
        <th>회원번호</th>
        <th>회원성명</th>
        <th>고객등급</th>
        <th>매출</th>
    </tr>
<%
request.setCharacterEncoding("utf-8");
Connection conn = null;
Statement stmt = null;

//3-2) 변수 grade 초기화
String grade = "";

try {
    conn = Util.getConnection();
    stmt = conn.createStatement();

    //1) 회원별로 매출 구하는 쿼리문 작성
    String sql = "select m1.custno, m1.custname, m1.grade, sum(m2.price) as total " + 
        "from member_tbl_02 m1, money_tbl_02 m2 " + 
        "where m1.custno = m2.custno " + 
        "group by m1.custno, m1.custname, m1.grade " + 
        "order by sum(m2.price) desc"; 

    //2) sql 쿼리문 실행하기 위한 ResultSet 객체
    ResultSet rs = stmt.executeQuery(sql);

    //3-1) 회원의 등급 String 값 변환하여 출력
    while(rs.next()) {
        grade = rs.getString("grade");
        switch(grade) {
           case "A" : 
                grade="VIP";break;
           case "B" : 
                grade="일반";break;
           case "C" : 
                grade="직원";break;     
        }//switch
%>
        <!--4) 모든 회원에 대해 자동삽입되도록 만들기 위해 while문 내부에 작성-->
        <tr>
            <td><%=rs.getString("custno") %></td>
            <td><%=rs.getString("custname") %></td>
            <td><%=grade %></td>
            <td><%=rs.getString("total") %></td>    
        </tr>
<%        
    }//while
}//try
catch(Exception e) {
    e.printStackTrace();
}
%>
</table>
</form>
</section>

<%@ include file="footer.jsp" %>
</body>
</html>

✅ 6) 회원정보를 등록할 수 있는 insert.jsp 작성하기

<!--insert.jsp-->

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="DBPKG.Util" %>
<%@ page import="java.sql.*" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원등록 (insert.jsp)</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
    table {margin:0 auto; border-color: ivory}
    table tr td,th {line-height: 30px;}
    table tr td input {margin-left: 5px; margin-right: 50px;}
    .button {color: white; background:rgba(100,0,0,0.5); padding:5px; border-color:white;}
</style>
<script src="action.js"></script>
</head>
<body>
<%@ include file="header.jsp" %>
<%
    //1) 공통코드 작성
    request.setCharacterEncoding("utf-8");

    Connection conn = null;
    PreparedStatement pstmt = null;
    ResultSet rs = null;

    //6-2) 변수 custno 초기화
    String custno = "";

    // 입력될 코드 변수에 저장
    String custname = request.getParameter("custname");
    String phone = request.getParameter("phone");
    String address = request.getParameter("address");
    String joindate = request.getParameter("joindate");
    String grade = request.getParameter("grade");
    String city = request.getParameter("city");

    try {
        //2) 공통코드
        conn = Util.getConnection();

        //3) 회원정보등록 페이지에서 input에 회원번호를 자동입력시키기 위해 가장 큰 회원번호 찾는 쿼리문 정의
        String sql = "SELECT MAX(custno)+1 custno FROM member_tbl_02" ;

        //4) 가장 큰 custno 찾는 쿼리문을 Statement 객체에 저장
        pstmt = conn.prepareStatement(sql);

        //5) 쿼리문 실행을 위해 ResultSet 객체 사용 
        rs = pstmt.executeQuery();
        rs.next();

        //6-1) 회원등록 페이지에서 회원번호 자동입력을 위해
        custno = rs.getString("custno");
    }
    catch(Exception e) {
        e.printStackTrace();
    }
%>
<section>
<h2>홈쇼핑 회원 등록</h2>

<form method="post" action="mode.jsp" name="form">
<input type="hidden" name="mode" value="insert">
<table border="1">
    <tr>
        <th>회원번호(자동발생)</th>
        <td><input type="text" name="custno" value="<%=custno %>" readonly></td>
    </tr>
    <tr>
        <th>회원성명</th>
        <td><input type="text" name="custname"></td>
    </tr>
    <tr>
        <th>회원전화</th>
        <td><input type="text" name="phone" placeholder="010-XXXX-XXXX"></td>
    </tr>
    <tr>
        <th>회원주소</th>
        <td><input type="text" name="address" size="40"></td>
    </tr>
    <tr>
        <th>가입일자</th>
        <td><input type="text" name="joindate" placeholder="20231202"></td>
    </tr>
    <tr>
        <th>고객등급 [A:VIP B:일반 C:직원]</th>
        <td><input type="text" name="grade" placeholder="A,B,C 중 입력"></td>
    </tr>
    <tr>
        <th>도시코드</th>
        <td><input type="text" name="city" placeholder="최대 2자리"></td>
    </tr>
    <tr>
        <th colspan="2" style="text-align:center;">
            <input type="submit" value="등록" onClick="return check()" class="button"/>
            <input type="button" value="조회" onClick="return search()" class="button"/>
        </th>
    </tr>
</table>
</form>
</section>

<%@ include file="footer.jsp" %>
</body>
</html>

➡️ 참고자료

[BOOK] 채규태, 「채쌤의 Servelt&JSP 프로그래밍 핵심」, 쌤즈, 2022

[BLOG]
오라클 포트번호 및 SID 확인방법 https://all-record.tistory.com/77
오라클 IO 오류 https://study-melody.tistory.com/71
[Oracle] 오라클 INSERT문(삽입) 사용법 & 예제 https://coding-factory.tistory.com/424
오라클 시퀀스(Sequence) 사용 및 NEXTVQL 초기화 https://cocodo.tistory.com/12
[Oracle] IO 오류 - The Network Adapter could not establish the connection 해결 https://moonong.tistory.com/50