$$config title: 공부 LOG keywords: - IT - 백준 - 프로그래머스 - mysql $$ ### 2022-09-28 ## js와 jsp의 차이 ## 관계형 모델이란? ### 2022-09-27 ## DBMS 와 RDBMS # DBMS란? - DataBase Management System의 약자로 데이터베이스를 관리하는 시스템이다. - 사용자와 DB사이에서 사용자의 요구에 따라 데이터를 생성해주고, DB를 관리해주는 소프트웨어이다. - DBMS는 데이터를 계층 또는 탐색 형식으로 저장한다. 파일 시스템을 사용해 저장하며, 따라서 테이블 간에는 아무런 관계가 없다. - 데이터에 대한 많은 보안을 제공하지 않으며 정규화를 수행할 수 없어 데이터는 높은 중복성을 가질 수 있다. - Sybase, dbase 및 Microsoft Access는 DBMS의 몇 가지 예이다. # RDB(Relational DataBase)란? - 관계형 데이터 모델에 기초를 둔 데이터 베이스이다. - 모든 데이터를 2차원의 테이블 형태로 표현한다. # RDBMS란? - RDB를 생성하고 수정하고 관리할 수 있는 소프트웨어이다. - Relational DataBase Management System의 약자로 관계형 모델을 기반으로 하는 DBMS 유형이다. - RDBMS의 테이블은 서로 연관되어 있어 일반 DBMS보다 효율적으로 데이터를 저장, 구성 및 관리할 수 있다. - 정규화를 통해 데이터의 중복성을 최소화하여 트랜잭션을 수행하는 것이 더 쉽다. - 데이터의 원자성, 일관성, 격리 및 내구성을 유지하며 데이터 무결성을 높인다. - MSSQL, MySQL, Oracle이 RDBMS의 몇 가지 예이다. # DBMS와 RDBMS의 관계는? - RDBMS는 DBMS의 한 유형이다. # RDBMS 예시 ![](https://ifh.cc/g/mDThP3.png) ## [Node.js] Ejs # Ejs(Embedded JavaScript)란? - 자바스크립트가 내장되어 있는 html 파일 # Ejs와 html에서 자바스크립트를 넣는것의 차이 - ejs는 html의 태그처럼 자바스크립트 내용을 삽입할 수 있다. 매우 큰 강점인데, 이것을 이용해 페이지를 동적으로 짜는 것이 수월해진다. 일반 html 파일은 무조건 script 태그를 이용해 분리를 시켜야하지만, ejs는 지정된 태그를 통해 스크립트 내용을 하나의 요소처럼 사용될 수 있게 한다. 또한 서버에서 보낸 변수를 가져와 사용할 수 있다 # 예시 ```js 22222TESTESTEST22222 <% for (var i = 0; i < 5; i++) { %>

안방으로 들어왔습니다.

<% } %> ``` # 결과 ![](https://ifh.cc/g/JJYfJt.jpg) # 서버에서 넘겨준 변수 사용하기 ```js const express = require("express"); const ejs = require("ejs"); const bodyParser = require('body-parser'); // body-parser 요청 const app = express(); app.set("view engine", "ejs"); app.use(bodyParser.urlencoded({extended: false})); // urlencoded app.use(bodyParser.json()); // json 타입으로 파싱하게 설정 app.use(express.static(__dirname + '/')); app.get("/", function(req, res){ res.render("test1", {}); }); app.get("/hello", function(req, res){ // 수정된 부분 res.render("test2", { one : "this is one", two : "this is two" }); // 수정된 부분 }); app.post("/postTest", function(req, res){ // postTest라는 주소로 POST요청이 들어오면 실행 console.log(req.body); // body에 있는 정보를 콘솔창에 출력. res.json({ok:true, name:req.body.name}); // 클라이언트에 성공했다고 신호를 보냄. }); app.listen(3000, function(){ console.log("실행중..."); }); 이렇게하면 이제 test2.ejs로 변수 one과 two가 넘어가게 된다. 그러면 test2.ejs로 넘어가 one과 two를 써보면 된다. 방법은 간단하다. 그냥 넘겨진 변수명을 그대로 쓰면 된다. 22222TESTESTEST22222 <% for (var i = 0; i < 5; i++) { %>

안방으로 <%= i+1 %>번째 들어왔습니다.

<% } %>

<%= one %>

<%= two %>

``` # 결과 ![](https://ifh.cc/g/kKFZk0.jpg) # <% %>, <%= %> 사용 시 유의점 1. <% %>는 한줄로 쭉 써야된다. - <% %>안에 코드를 쓰다 개행을 하면 다시 <% %>를 써서 코드를 진행해야한다. 2. <% %>로 변수 선언을 하면 스코프 적용이 된다. ejs 내 자바스크립트와 <% %>안의 변수명은 겹쳐도 따로 인식된다. 3. <%= 문자열 변수 %>는 코드 해독 때 문자열로 인식되지 않는다. - <%= %> 태그는 해당 변수의 값을 그대로 코드로 박아넣는 것이기 때문에 변수형을 가리지 않는다. 선언되지 않은 변수이면 undefined라는 코드를 그대로 갖다 넣는다. 그렇기 때문에 문자열로 저장하려면 "<%= %>" 식으로 써야된다. 4. <% %> 내 코드는 개발자 모드로 볼 수 없다. - 내장된 <% %> 자바스크립트 코드는 개발자 모드로 봐도 안보인다. 위에 있는 안방에 들어왔습니다. 예시는 따라해보고 개발자 모드로 보면 h1 코드 5개만 달랑있을 것이다. <%= %>는 코드로 심어버리는 거라 보인다. 5. 괄호 여닫기를 똑바로 하자. - 어느 코드에나 해당되는 말이지만, ejs를 쓸 때 헷갈릴 수도 있다. <% %>태그 때문이다. 개행을 하면 <% %>를 새로 써야되기 때문에 중괄호를 열었다면 끝에 항상 <% } %>가 있는지 확인하자. ejs 코드가 길어지면 좀 어지럽다. ### 2022-09-23 ## 크롤링 # 크롤링이란? - 인터넷에 데이터가 방대해지면서 우리는 그걸 활용할 필요성이 높아졌습니다. 그런 정보들을 우리가 분석하기 쉽고 활용하기 쉽게 끔 데이터를 수집하는 행위 - 다양한 웹사이트의 페이지를 브라우징하는 작업 - 크롤링하는 프로그램을 크롤러(Crawler) 라고 합니다. # 크롤링의 원리 - 크롤링의 원리를 알아봅시다. 먼저 웹페이지의 구성을 알아야 하는데요. - 웹페이지는 HTML 문서로 작성되어 있습니다. 그리고 이 문서에는 인터페이스를 참조할 수 있는 CSS파일과 페이지 상호작용을 위한 JavaScript파일을 참조할 수 있죠. ![](https://ifh.cc/g/mt5nzc.png) - 우리는 모든 웹페이지의 HTML 문서를 확인할 수 있습니다. 그리고 HTML 문서에 어떤 CSS 문서가 참조 되었는지, 어떤 내용이 들어가 있는지 확인할 수 있죠. 그리고 우리는 크롤러를 만들 때, HTML 태그등을 찾아서 원하는 데이터를 추출할 수 있습니다. # 크롤링 대상 - 크롤링의 대상은 웹 상의 자원들이다. 이 자원은 정적인 문서가 될 수도 있고, API와 같은 서비스가 될 수도 있다. 다만 어느쪽이던 다수의 데이터를 수집하고, 여기서 필요한 정보만 추출해서 처리하는 것을 우리는 크롤링이라고 부를뿐이다. ## API란? # API란 무엇인가요?(Application Programming Interface) - API는 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘입니다. - - 예를 들어, 기상청의 소프트웨어 시스템에는 일일 기상 데이터가 들어 있습니다. 휴대폰의 날씨 앱은 API를 통해 이 시스템과 "대화"하고 휴대폰에 매일 최신 날씨 정보를 표시합니다. # API는 어떻게 동작하나요? - API 아키텍처는 일반적으로 클라이언트와 서버 측면에서 설명됩니다. 요청을 보내는 애플리케이션을 클라이언트라고 하고 응답을 보내는 애플리케이션을 서버라고 합니다. 따라서 날씨 예에서 기상청의 날씨 데이터베이스는 서버이고 모바일 앱은 클라이언트입니다. # REST API란 무엇인가요? - REST는 Representational State Transfer의 줄임말입니다. REST는 클라이언트가 서버 데이터에 액세스하는 데 사용할 수 있는 GET, PUT, DELETE 등의 함수 집합을 정의합니다. 클라이언트와 서버는 HTTP를 사용하여 데이터를 교환합니다. - REST API의 주된 특징은 무상태입니다. 무상태는 서버가 요청 간에 클라이언트 데이터를 저장하지 않음을 의미합니다. 서버에 대한 클라이언트 요청은 웹 사이트를 방문하기 위해 브라우저에 입력하는 URL과 유사합니다. 서버의 응답은 웹 페이지의 일반적인 그래픽 렌더링이 없는 일반 데이터입니다. # REST API를 사용하면 어떤 이점이 있나요? 1. 통합 - API는 새로운 애플리케이션을 기존 소프트웨어 시스템과 통합하는 데 사용됩니다. 그러면 각 기능을 처음부터 작성할 필요가 없기 때문에 개발 속도가 빨라집니다. API를 사용하여 기존 코드를 활용할 수 있습니다. 2. 혁신 - 새로운 앱의 등장으로 전체 산업이 바뀔 수 있습니다. 기업은 신속하게 대응하고 혁신적인 서비스의 신속한 배포를 지원해야 합니다. 전체 코드를 다시 작성할 필요 없이 API 수준에서 변경하여 이를 수행할 수 있습니다. 3. 확장 - API는 기업이 다양한 플랫폼에서 고객의 요구 사항을 충족할 수 있는 고유한 기회를 제공합니다. 예를 들어 지도 API를 사용하면 \ 웹 사이트, Android, iOS 등을 통해 지도 정보를 통합할 수 있습니다. 어느 기업이나 무료 또는 유료 API를 사용하여 내부 데이터베이스에 유사한 액세스 권한을 부여할 수 있습니다. 4. 유지 관리의 용이성 - API는 두 시스템 간의 게이트웨이 역할을 합니다. API가 영향을 받지 않도록 각 시스템은 내부적으로 변경해야 합니다. 이렇게 하면 한 시스템의 향후 코드 변경이 다른 시스템에 영향을 미치지 않습니다. # API 통합이란 무엇인가요? - API 통합은 클라이언트와 서버 간의 데이터를 자동으로 업데이트하는 소프트웨어 구성 요소입니다. API 통합의 몇 가지 예로 휴대폰 이미지 갤러리에서 클라우드로 데이터 자동 동기화 또는 다른 시간대 여행 시 노트북에서 시간 및 날짜 자동 동기화가 있습니다. 기업은 또한 API 통합을 사용하여 많은 시스템 함수를 효율적으로 자동화할 수 있습니다. # API는 어떻게 사용하나요? 1. API 키를 받습니다. API 공급 업체의 확인을 받은 계정을 생성하면 됩니다. 2. HTTP API 클라이언트를 설정합니다. 이 도구를 사용하면 수신된 API 키를 사용하여 API 요청을 쉽게 구성할 수 있습니다. 3. API 클라이언트가 없는 경우 API 설명서를 참조하여 브라우저에서 요청을 직접 구성할 수 있습니다. 4. 새 API 구문에 익숙해지면 코드에서 이를 사용하기 시작할 수 있습니다. ### 2022-09-22 ## 오디오 만들어서 onclick 시 audio 사운드 들리도록 하기 # 예제(스타크래프트 레이스) ```js 스타크래프트

``` - audio라는 변수를 선언해 Audio 객체를 생성하고, play() 메소드를 사용해서 음악을 재생하는 방법이다. new Audio('해당오디오파일')에 ()안에는 자신이 넣고 싶은 음악 파일의 src를 적어주면 된다. # 오디오 객체 메소드 - audio.play();// audio를 재생함 - audio.pause();// audio를 일시정지함 - audio.load();// audio를 다시 load함// 주로 audio의 src나 설정이 바뀌었을 경우에 사용 ## onclick 시 해당 이미지 토글로 보이게/안보이게 하기 # 예제(스타크래프트 레이스) ```js 스타크래프트

``` - 클로킹 img에 onclick 이벤트를 발생시켜 onclick시 hide 함수가 실행되도록 설계하고 hide 함수에는 레이스 img의 style을 클릭시 ' ' -> hidden이 되도록 다시누르면 hidden -> ' ' 되도록 토글 # hide == ' ' 일때 ![](https://ifh.cc/g/qBqySa.jpg) # hide == hidden 일때 ![](https://ifh.cc/g/3qymdw.png) ### 2022-09-21 ## 도메인과 DNS – 네임서버란? # Domain(도메인)이란? - 도메인은 웹 브라우저를 통해 특정 사이트에 진입을 할 때, IP 주소를 대신하여 사용하는 주소이다. - 도메인을 이용해서 한눈에 파악하기 힘든 IP 주소를 보다 분명하게 나타낼 수 있다. - 만약 IP 주소가 지번 또는 도로명 주소라면, 도메인 이름은 해당 주소에 위치한 상호로 볼 수 있다. - 도로명 주소를 대신해서, 우리는 상호나 건물의 이름을 찾아 갈 수도 있는 것처럼 말이다. # 터미널에서 도메인의 IP 주소를 확인하는 방법 - 터미널에서 명령어 nslookup으로 naver.com 의 IP 주소를 확인할 수 있다. # DNS(Domain Name System)이란? - 네트워크 상에 존재하는 모든 PC는 IP 주소가 있다. - 그러나 모든 IP 주소가 도메인 이름을 가지는 것은 아니다. - 로컬 PC를 나타내는 127.0.0.1 은 localhost 로 사용할 수 있지만, 그 외의 모든 도메인 이름은 일정 기간 동안 대여하여 사용한다. # 도메인 이름과 IP 주소는 어떻게 매칭하는 걸까? - 브라우저의 검색창에 도메인 이름을 입력하여 해당 사이트로 이동하기 위해서는, 해당 도메인 이름과 매칭된 IP 주소를 확인하는 작업이 반드시 필요하다. - 네트워크에는 이것을 위한 서버가 별도로 있다. - 이 서버가 바로 DNS 서버이다. # DNS 하는 일 - DNS는 Domain Name System의 줄임말로, 데이터베이스 시스템이다 - 호스트의 도메인 이름을 IP 주소로 변환하거나 반대의 경우를 수행할 수 있도록 개발된 데이터베이스 시스템이다. - DNS(Domain Name System)는 범국제적 단위로 웹사이트의 IP 주소와 도메인 주소를 이어주는 환경/시스템이다. - DNS 시스템 안에서 이어주는 역할을 하는 서버를 풀네임으로 DNS 서버라고 한다. # DNS 처리 순서 - 브라우저의 검색창에 naver.com을 입력한다. - 이 요청은 DNS에서 IP 주소(125.209.222.142)를 찾는다. - 그리고 이 IP 주소에 해당하는 웹 서버로 요청을 전달하여 클라이언트와 서버가 통신할 수 있도록 한다. # 네임서버란 무엇일까? - 네임서버 = DNS 서버 같은 말이다… # DNS 동작 과정 ![](https://ifh.cc/g/2o9jwT.png) # 결론 - 도메인은 IP 주소를 대신하여 사용하는 주소이다. - DNS라는 시스템을 이용해서 IP와 도메인을 매칭한다. - DNS란 웹사이트의 IP 주소와 도메인 주소를 이어주는 환경/시스템이다. - DNS 시스템 안에서 IP와 도메인 매칭을 하는 역할을 하는 것이 DNS 서버이다. - DNS 서버와 네임서버는 같은 의미이다. ## 프레임워크(Framework)란? 개념, 장단점, 종류 # 프레임워크란? - Gof의 디자인 패턴으로 유명한 랄프 존슨(Ralph Johnson)은 "프레임워크란, 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것"이라고 정의하였습니다. 보통 Framework는 라이브러리라는 개념과 비교해서 많이 설명합니다. # 프레임워크 vs 라이브러리 - 프레임워크는 자동차의 프레임, 즉 기본적으로 구성하고 있는 뼈대를 말합니다. - 라이브러리는 자동차의 기능을 하는 부품을 의미합니다. - 한 번 정해진 자동차의 프레임은 바꾸질 못합니다. 소형차를 만들기 위해 뼈대를 사용하는데, 이 뼈대로 SUV를 만들 수는 없습니다. 그러나 바퀴나, 선루프, 헤드라이트 등은 비교적 다른 종류로 쉽게 바뀔 수 있겠죠. # 프레임워크와 라이브러리가 있는 이유 - 자동차를 만들기 위해서 자동차의 프레임과 부품들을 가져다 쓰지 않아도 됩니다. 프레임을 일일이 만들고, 부품을 일일이 만들어서 자동차를 만들어도 됩니다. 그러나 너무 많은 시간과 비용이 들지 않겠습니까? 그래서 프레임워크와 라이브러리가 존재하는 겁니다. # 프레임워크 종류 # 테이블 예시 | 구분 | 종류 | | -- | -- | | 자바 프레임워크 | Struts, Spring, 전자정부 프레임워크 | | QRM 프레임워크 | myBatis(iBatis), Hibernate | | 자바스크립트 프레임워크 | AngularJS, React, Polymer, Ember | | 프론트엔드 프레임워크 | Bootstrap, Foundation, MDL | # 프레임워크의 장, 단점 - 장점 1. 효율적 -> 아무것도 그려지지 않은 제로에서 코드를 일일이 짜는 것보다 시간과 비용이 훨씬 절약되며 생산성이 좋아집니다. 2. Quality 향상 -> 버그 발생 가능성을 처리해줌으로써 개발자가 반복 작업에서 실수하기 쉬운 부분을 커버해줍니다. 다수의 개발자가 사용하며 수정하다 보니 이미 검증된 코드라고 볼 수 있습니다. 3. 유지 보수 Good -> 프레임워크를 쓰지 않고 일일이 코드를 짜 놓은 경우, 회사 입장에서 개발 담당자가 바뀌어버리면 곤란해집니다. 그러나 Framework를 사용하면 코드가 보다 체계적이어서 담당자가 바뀌더라도 위험부담을 줄일 수 있으며 유지 보수에 안정적입니다. - 단점 1. 학습시간이 길다 -> 코드를 본인이 짜 놓은 것이 아니기 때문에, 프레임워크에 있는 코드를 습득하고 이해하는 데 오랜 시간이 걸립니다. 2. 제작자의 의도된 제약 사항 -> 제작자가 설계한 구조를 어느 정도 유지한 채 코드에 살을 붙여나가야 합니다. 따라서 개발자는 자유롭고 유연하게 개발하는 데 한계가 있습니다. ### 2022-09-19 ## Release,Deploy,Distribute # Release - 같은 제품을 새롭게 만드는 것을 의미 -> ex) ip address를 release 한다는 것은 새로운 아이피 번호를 부여받는 다는 의미 - 디버그에 대한 정보가 없으며, 코드를 최적화하여 실행파일 크기를 최대한 줄여준다. - 속도와 크기, 메모리 사용면에서 디버그 보단 좋으며, 순수한 코드 자체의 기능만 담긴 파일이다. - 더 이상 문제점이 없을 때, 빌드 해주는 것이 좋다. # Deploy - 프로그램 등을 서버와 같은 기기에 설치하여 작동가능하도록 만드는 일 # Distribute - 제품을 사용자들이 사용할 수 있도록 서비스 등을 제공하는 의미 # Debug - 실행파일에 디버깅 정보를 포함하여 언제든지 디버깅 할 수 있다. - Release mode 보다 더 큰 메모리를 사용한다. - 디버그에 필요한 정보들을 실행 시 계속 체크하여 그 만큼 속도가 저하한다. # 사용 예시 - 서비스 버전 x.x.x가 새롭게 release 되었고, 이를 서버에 deploy하여 사용자들이 사용할 수 있도록 distribute 하였습니다. ## JWT # JWT란? - Json 포맷을 이용하여 사용자에 대한 속성을 저장하는 Claim 기반의 Web Token이다. - 토큰 자체를 정보로 사용하는 Self-Contained 방식으로 정보를 안전하게 전달한다. - 주로 회원 인증이나 정보 전달에 사용되는 JWT는 아래의 로직을 따라서 처리된다. # 동작원리 ![](https://ifh.cc/g/5BhT0C.png) # JWT 구조 - Header, Payload, Signature의 3 부분으로 이루어지며, Json 형태인 각 부분은 Base64Url로 인코딩 되어 표현된다. - 각각의 부분을 이어 주기 위해 . 구분자를 사용하여 구분한다. 추가로 Base64Url는 암호화된 문자열이 아니고, 같은 문자열에 대해 항상 같은 인코딩 문자열을 반환한다. ![](https://ifh.cc/g/DdQXGw.png) 1. Header - typ과 alg 두 가지 정보로 구성된다. - typ: 토큰의 타입을 지정 - alg: 알고리즘 방식을 지정하며, 서명(Signature) 및 토큰 검증에 사용 ex) HS256(SHA256) 또는 RSA ```js { "alg": "HS256", "typ": JWT } ``` 2. PayLoad(페이로드) - 페이로드에는 토큰에서 사용할 정보의 조각들인 클레임(Claim)이 담겨 있다. - 클레임은 총 3가지로 나누어지며, Json(Key/Value) 형태로 다수의 정보를 넣을 수 있다. -> 2.1 등록된 클레임(Registered Claim) : 등록된 클레임은 토큰 정보를 표현하기 위해 이미 정해진 종류의 데이터들로, 모두 선택적으로 작성이 가능하며 사용할 것을 권장한다. 또한 JWT를 간결하게 하기 위해 key는 모두 길이 3의 String이다. 여기서 subject로는 unique한 값을 사용하는데, 사용자 이메일을 주로 사용한다. -> 2.2 공개 클레임(Public Claim) : 공개 클레임은 사용자 정의 클레임으로, 공개용 정보를 위해 사용된다. 충돌 방지를 위해 URI 포맷을 이용한다. "https://mangkyu.tistory.com": true -> 2.3 비공개 클레임(Private Claim) : 사용자 정의 클레임으로, 서버와 클라이언트 사이에 임의로 지정한 정보를 저장한다. 아래의 예시와 같다. "token_type": access 3. Signature(서명) - 토큰을 인코딩하거나 유효성 검증을 할 때 사용하는 고유한 암호화 코드이다. 서명(Signature)은 위에서 만든 헤더(Header)와 페이로드(Payload)의 값을 각각 BASE64Url로 인코딩하고, 인코딩한 값을 비밀 키를 이용해 헤더(Header)에서 정의한 알고리즘으로 해싱을 하고, 이 값을 다시 BASE64Url로 인코딩하여 생성한다. # 토큰예시 ![](https://ifh.cc/g/qYgAv9.png) # JWT 단점 및 고려사항 - Self-contained: 토큰 자체에 정보를 담고 있으므로 양날의 검이 될 수 있다. - 토큰 길이: 토큰의 페이로드(Payload)에 3종류의 클레임을 저장하기 때문에, 정보가 많아질수록 토큰의 길이가 늘어나 네트워크에 부하를 줄 수 있다. - Payload 인코딩: 페이로드(Payload) 자체는 암호화 된 것이 아니라, BASE64Url로 인코딩 된 것이다. 중간에 Payload를 탈취하여 디코딩하면 데이터를 볼 수 있으므로, JWE로 암호화하거나 Payload에 중요 데이터를 넣지 않아야 한다. - Stateless: JWT는 상태를 저장하지 않기 때문에 한번 만들어지면 제어가 불가능하다. 즉, 토큰을 임의로 삭제하는 것이 불가능하므로 토큰 만료 시간을 꼭 넣어주어야 한다. - Store Token: 토큰은 클라이언트 측에서 관리해야 하기 때문에, 토큰을 저장해야 한다. ### 2022-09-16 ## IP주소 # IP주소란? - 통신이란 데이터를 주고 받아야 하는데 출발지와 도착지가 있어야겠죠. 그래서 생겨난 개념이 ip 주소(Internet Protocol Address)입니다. - 우리집의 주소는 서울시 / 용산구 / 한강로3가 / xx번지 이런식으로 구분되듯 아이피주소도 123.123.123.123 식으로 구분됩니다. 이렇게 0부터 255까지의 숫자 4마디로 구분되는 방식이 IPv4입니다. 현재는 대부분 IPv4방식의 주소를 사용합니다. IPv4는 0.0.0.0 부터 255.255.255.255까지의 주소를 사용하며 2의 32제곱, 대략 42억개의 주소를 나타낼 수 있습니다. # IPv4 - 대역에 따라 클래스(class) A, B, C, D, E 등으로 나눌 수 있습니다. - 클래스 A는 대규모 네트워크 환경에 쓰이며, IP 주소 4마디 중 첫 번째 마디의 숫자가 1~126(각 네트워크마다 1,600만 개 IP 주소 사용 가능) 까지 사용됩니다. - 클래스 B는 중규모 네트워크 환경용으로 129~191(각 네트워크 마다 65,000개 IP 주소 사용 가능)까지 사용됩니다. - 클래스 C는 소규모 네트워크 환경에 적용되는 것으로 192~223 (각 네트워크마다 254개 IP 주소 사용 가능)까지 사용됩니다. - 클래스 D와 E가 223 이후의 숫자로 구성되는데, 이는 연구/개발용 IP 주소이므로 일반적인 용도로 활용되지 않습니다. # 공인 IP와 사설 IP - 공인 IP -> 공인기관에서 인증한 공개형(public) IP 주소 -> 인터넷공유기를 사용하지 않는 한 컴퓨터 등에서 사용하는 대부분의 IP 주소는 공인 IP 주소입니다. -> 공인 IP 주소도 외부에 공개되어 있어 다른 컴퓨터 등에서 검색, 접근이 가능합니다. -> 공인 IP 주소를 사용하려면 보안 장비(방화벽 등)가 반드시 필요합니다. - 사설 IP -> 공인되지 않은 주소라는 뜻이며 외부에 공개되지 않아, 원칙적으로 외부에서 검색, 접근이 불가능한 주소입니다. -> 사설IP는 A클래스의 10.xxx.xxx.xxx와 B클래스의 172.10.xxx.xxx , C클래스의 192.168.xxx.xxx로 정해져 있습니다. -> 사설IP를 사용하는 이유는 2가지가 있습니다. 첫번쨰는 IP 주소를 공유하기 위함입니다. 또 하나의 이유는 보안 때문입니다. # 고정IP와 유동IP란? - 공인 IP 주소든 가상 IP 주소든 컴퓨터 등에 IP 주소를 설정하려면, 누군가 (주로 서버 시스템)가 IP 주소를 컴퓨터에 배급, 할당해 줘야 합니다. - 고정 IP -> 고정IP 주소는 사용자가 직접 IP 주소를 입력해 주소를 설정하는 방식을 말합니다. IP 주소가 변경되면 안 되는 서버나 네트워크프린터 등에 적합한 것으로 일반적으로 특별한 경우 외에는 사용할 기회가 거의 없습니다. - 유동 IP -> IP 주소를 할당하는 서버나 공유기가 보내주는 정보 그대로 컴퓨터에 자동 설정되는 방식입니다. -> 컴퓨터가 부팅하면 DHCP 서버에 IP 주소 할당을 요청하고, 이를 수신한 DHCP 서버가 해당 컴퓨터에 IP 주소 등의 네트워크 정보를 전달하면, 컴퓨터에서는 이를 자동으로 등록, 설정하게 됩니다. # 서브넷 마스크란? - 하위(sub) 네트워크(net)를 구분하는 표기(mask)법 - 같은 IP 주소 대역이라도 네트워크를 A, B, C 클래스등으로 나눌 수 있는데, 이를 구분하는 기준입니다. - 서브넷 마스크는 일반적으로 '255.0.0.0(클래스 A)' 또는 '255.255.0.0 (클래스 B)', '255.255.255.0(클래스 C)' 등의 형식으로 표기됩니다. ## 백준 7568 - 덩치 # 문제 ![](https://ifh.cc/g/5x52ba.png) # 조건 1. 2 <= N <= 50 2. 10 <= x,y <= 200 3. N을 받아서 키와 몸무게를 비교해야한다. 4. 키는 키대로 몸무게는 몸무게대로 비교해야한다. # 풀이 1. 2중 빈 배열을 만들고 거기에 각각 x와 y를 담아준다. 2. 2중 for문을 통해 x를 비교하고 y를 비교한다. 3. 등수를 매기기 위한 rank 변수를 만든다. 4. if x와 y가 둘다 비교하는 값보다 클 경우 rank를 1 올려준다. # 정답 ```js import java.util.*; import java.io.*; public class Main { public static void main(String[] args) throws IOException { Scanner sc = new Scanner(System.in); int N = sc.nextInt(); // 전체 횟수 N 입력받기 int[][] arr = new int[N][2]; // 2차원 배열 만들기 for(int i = 0; i < N; i++) { // 반복하면서 2차원 배열 값 받기 arr[i][0] = sc.nextInt(); // {55,58,88,60,46} arr[i][1] = sc.nextInt(); // {185,183,186,175,155} } for(int i = 0; i < N; i++) { // 2중 for문을 반복하며 rank함수를 1로 지정하고 int rank = 1; for(int j = 0; j < N; j++) { if(arr[i][0] < arr[j][0] && arr[i][1] < arr[j][1]) { //if 첫번째 세로줄 i가 j보다 작거나 두번째 세로줄 i가 j보다 작다면 나보다 큰 숫자이므로 rank함수 1증가 rank++; } } System.out.print(rank + " "); // 출력이 한칸씩 띄어쓰기 이므로 해당처럼 출력 } } } ``` ### 2022-09-15 ## Angular, React, Vue가 뭔가요? # 프레임워크란? - 애플리케이션 구조에 대한 가이드라인과 기반 코드를 제공하는 개발 툴 # Front-end 프레임워크 - 사용자와 만나는 화면단인 Front-end 개발을 목적으로 하는 프레임워크 최근에는 웹이 복잡해지며 SPA 개발을 위한 프레임워크가 각광 받고 있다. # React / Angular / Vue.js 비교 - 가장 먼저 발표된 프레임 워크는 Angular. 이후 React, Vue.js 순서로 개발 - React는 프레임워크가 아닌 라이브러리. MVC 모델 중 View 단에만 영향 - Angular / Vue.js는 프레임워크 - 주요 특징은 React는 Virtual DOM을 사용하고 Angular는 양방향 바인딩 사용. Vue.js는 React와 Angular의 장점을 수용한 것이 특징 # Virtual DOM - 메모리에 가상의 DOM을 저장하고, 데이터가 변경되면 전체 UI를 Virtual DOM에 그렸다가 이전의 Virtual DOM과 비교해 달라진 내용을 실제 DOM에 적용해 기존 DOM을 이용하는 방식보다 빠름 - React / Vue.js가 Virtual DOM 방식을 사용한다. # React 1. Facebook에서 만든 자바스크립트 기반 UI 라이브러리 2. 넷플릭스 / 트위치 등 글로벌 기업들이 사용 3. 버추얼 돔을 사용함 4. XML을 변형한 JSX 문법 권장 5. Virtual DOM 사용으로 일반 DOM 객체를 사용할 때 보다 빠름 6. 컴포넌트를 재사용 할 수 있어 생산성이 높고 유지보수에 유리 7. 라이브러리기 때문에 다른 프레임워크와 혼용 가능 8. JSX 문법은 익숙하지 않으면 적응 어려움 9. IE 8 이하의 브라우저는 지원하지 않음 # Angular 1. 구글에서 개발하고 운용 중인 자바스크립트 기반 Front-end 웹 프레임워크 2. 양방향 바인딩 방식 제공 3. AngularJS는 자바스크립트 기반으로 출시되었으나 2014년 발표된 Angular는 타입스크립트 기반 4. 전통적인 프레임워크로 프로젝트의 생성 / 테스트 / 빌드 / 배포 모든 단계를 위한 기능을 제공 5. 대규모 프로젝트에 적합한 타입스크립트 언어를 Vue.js / React보다 효과적으로 지원함. 6. 컴포넌트를 재사용함. 7. 학습 난이도가 높다. 8. 사용법이 정형화되어 있어 다른 라이브러리와의 혼용이 어려울 수 있다. # 양방향 바인딩 - 데이터바인딩은 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것 - 단방향 데이터는 화면 생성 시 watcher(감시자)가 데이터를 인식해 화면에 출력한다. 이후 사용자가 새롭게 데이터를 업데이트하게 되면 임의의 이벤트를 발생시켜 데이터의 값을 업데이트 함. - 양방향 바인딩의 경우, 추가적인 watcher가 존재한다. 사용자가 값을 입력해 변화가 생기게 되면 watcher가 변화를 감지하고 새로운 값을 브라우저 데이터에 반영한다. # Vue.js 1. 웹페이지 화면 개발을 위한 프레임워크 2. Angular의 양방향 바인딩, React의 Virtual DOM 랜더린 방식 모두를 가지고 있다. 3. 템플릿을 사용해 뷰와 모델을 연결 4. 낮은 학습 난이도가 장점 5. 속도가 빠르고 가볍고 개발환경 구성이 쉬움 (CDN 링크 삽입만으로 이용할 수 있다.) 6. 단점은 후발주자이기에 Angular / React에 비해 생태계 규모가 작다 ## CDN(콘텐츠 전송 네트워크)이 뭔가요? # CDN - Content Delivery Network의 약자인 CDN은 지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술을 의미합니다. - CDN은 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화합니다. CDN은 각 지역에 캐시 서버(PoP, Points of presence)를 분산 배치해, 근접한 사용자의 요청에 원본 서버가 아닌 캐시 서버가 콘텐츠를 전달합니다. - 예를 들어 미국에 있는 사용자가 한국에 호스팅 된 웹 사이트에 접근하는 경우 미국에 위치한 PoP 서버에서 웹사이트 콘텐츠를 사용자에게 전송하는 방식입니다. # CDN의 필요한 경우 - 인터넷을 통해 비즈니스를 운영하거나 웹 사이트에서 그래픽 이미지, 동영상 파일 등의 콘텐츠를 제공한다면 CDN 서비스를 이용할 필요가 있습니다. CDN은 동영상 스트리밍이나 온라인 게임, 대용량 파일 전송, 그리고 해상도가 높아 용량이 큰 이미지를 다루는 쇼핑몰, 포털 사이트 등에서 안정적인 서비스 제공을 위해 활용되고 있습니다. # 활용 사례 - 온라인 동영상 스트리밍 서비스를 제공하는 넷플릭스(Netflix)는 전 세계의 사용자들에게 안정적인 서비스를 제공하기 위해 2011년에 자체 CDN을 구축했습니다. 넷플릭스의 서비스 범위가 전 세계에 걸쳐 있고, 구독자의 절반 이상이 미국 외의 지역에 분포하고 있어 콘텐츠를 안정적이고 빠르게 세계 각지로 전달하기 위해서는 CDN 기술이 필수적이기 때문입니다. - 세계 최대 숙박 공유 서비스인 에어비앤비(Airbnb) 또한 CDN 기술을 활용해 전 세계 고객에게 언제 어디서나 숙박 시설과 각종 액티비티를 예약할 수 있는 서비스 환경을 구축했습니다. ### 2022-09-13 ## DOM은 뭐고 가상 DOM은 뭔가요? # DOM - DOM이란 Document Object Model로서 말 그대로 다큐먼트(웹페이지)를 객체로 표현하는 모델을 의미한다. 브라우저마다 DOM을 구현하는 방식은 다르기에 DOM이라는 것이 구체적으로 정해저 있는 언어나 모델과 같은 것은 아니다. 다만 웹페이지를 객체로 표현한 모델을 의미할 뿐이다. # DOM의 렌더링 과정 ![](https://ifh.cc/g/jbTnYA.png) - 첫째, 브라우저는 html태그를 파싱 하여 돔 트리를 구성한다. 동시에 브라우저는 스타일시트에서 css를 파싱 하여 스타일 규칙들을 만들어낸다. - 둘째, 위에서 언급한 돔 트리와 스타일 규칙 두 가지가 합쳐져서 렌더 트리를 만들어낸다. -> 여기서 주의할 점은 렌더 트리는 화면에 반영되는 것만 가지고 있기에 HTML의 모든 정보를 표현하는 돔 트리와 일대일 관계는 성립되지 않는다. 즉 렌더 트리에 없어도 돔 트리에는 있을 수 있는 것이다. # 가상DOM - 기존에는 화면의 변경사항을 돔을 직접 조작하여 브라우저에 반영하였다. 하지만, 이 방법의 가장 큰 단점은 돔 트리가 수정될 때마다 렌더 트리가 계속해서 실시간으로 갱신된다는 점이었다. 즉, 화면에서 10개의 수정사항이 발생하면 수정할 때마다 새로운 랜더 트리가 10번 수정되면서 새롭게 만들어지게 되는 것이다. - 가상 돔을 활용하면 이러한 불필요한 렌더링 횟수를 줄일 수 있다. 대표적인 프런트 앤드 프레임워크가 리액트, 뷰, 앵귤러이다. 이러한 프레임워크들은 화면에 변화가 있을 때마다 실시간으로 돔 트리를 수정하지 않고 변경사항이 모두 반영된 가상 돔을 만들어낸다. 그 후 가상 돔을 이용해 한 번만 돔수정을 하게 되고 이는 한 번만 렌더 트리를 만들어내게 된다. ![](https://ifh.cc/g/dkWwja.png) ## XML, JSON, YAML이 뭔가요? # 원문 ![](https://ifh.cc/g/CxHrRP.jpg) # XML - 줄바꿈 없이 쭉 이어지는 글자로 정보를 보내야 함 → 표, 테이블 같은건 (= 구조를 가진 정보) 어려움! - 이러한 구조화된 정보를 주고받는 약속이 필요함 = XML, JSON - 줄글 형식의 데이터로 전송하려면? = XML - 태그를 사용하는 형식 (HTML과 비슷, HTML이 XML을 기반으로 웹을 만든 것이기 때문) (단일 태그로 쓰일수도, 태그들이 중첩될 수도 있음) - ? XML은 필요 이상으로 장황하다... 태그 때문에 글자수도 너무 많고.. ![](https://ifh.cc/g/56nzVv.jpg) # JSON - 자바스크립트의 객체 표기법으로 구조화된 정보를 표시 - 간결성을 바탕으로 XML을 대체해나가고 있음 - 문법 오류에 취약 : , {} 등 빼먹으면 안됨 - 오류 조금 있어도 괜찮음 - 스키마 파일로 오류 검토 가능 (xsd) - 주석 넣을 수 있음 ![](https://ifh.cc/g/AZHl6Y.jpg) | XML | JSON | | -- | -- | | 안정성 | 간결성 | # YAML - 한줄 데이터 아님! 사람이 보기 좋은 데이터 - 줄바꿈과 태그가 필수요소! (minify 하지 않음) - 주석 사용 가능 - 상속 사용 가능 - 도커, 스프링 등에 사용 ![](https://ifh.cc/g/jqOvLA.jpg) ### 2022-09-07 ## JVM, JRE, JDK # JVM(Java Virtual Machine)란? - 자바 소스코드로부터 만들어지는 자바 바이너리 파일(.class)을 실행할 수 있다. - JVM은 플랫폼에 의존적이다. 즉 리눅스의 JVM과 윈도우즈의 JVM은 다르다. 단, 컴파일된 바이너리 코드는 어떤 JVM에서도 동작시킬 수 있다. # JVM의 역할 1. 바이너리 코드를 읽는다. 2. 바이너리 코드를 검증한다. 3. 바이너리 코드를 실행한다. 4. 실행환경(Runtime Environment)의 규격을 제공한다. (필요한 라이브러리 및 기타파일) # JRE(Java Runtime Environment)란? - JVM 이 자바 프로그램을 동작시킬 때 필요한 라이브러리 파일들과 기타 파일들을 가지고 있다. JRE는 JVM의 실행환경을 구현했다고 할 수 있다. ![](https://ifh.cc/g/NLSMfX.png) # JDK(Java Development Kit)란? - JRE + 개발을 위해 필요한 도구(javac, java등)들을 포함한다. ![](https://ifh.cc/g/qka0Tz.png) # 따라서 JVM <- JRE <- JDK 이다. ## 백준 2231 - 분해합 # 문제 ![](https://ifh.cc/g/nQL6Fo.png) # 조건 1. 자연수 N에 대한 생성자 M은 M의 숫자 + M의 각각의 자리수만큼 더해준 값이 N이 되어야 한다. 2. 자연수 N의 생성자가 여러개일 경우에는 가장 작은 생성자를 구해야 한다. # 풀이 1. 결과값을 더해줄 result 변수와 for문 안에서 각각의 자리수를 더해줄 변수 sum 변수를 생성한다. 2. for문을 통해 N에 대한 M의 최소값부터 i++ 시키면서 number를 받아 계속 나누면서 비교한다. 3. while문을 통해 number에 대해 일의자리로 계속 나누면서 number != 0 아닐때까지 반복하여 숫자를 구한 후 sum 변수에 더해준다. 4. sum 변수와 i의 값이 N과 같다면 최소값이면서 생성자이므로 결과값을 더해줄 result 변수에 담고 뿌려준다. # 이해가 안갔던 부분 while(number != 0) { // number가 0이 아니면 while문 계속 진행 sum += number % 10; // sum에 값에 1의 자리 숫자를 더해줌 number /= 10; // number를 나눠주어서 몫을 반환하여 다시 while문에 넣어줌 } 1의 자리숫자를 나눠서 구하는건 알겠는대 나머지 몫으로 나눠주면 어떻게 십의자리와 백의자리를 구분해서 되는지 이해가 안갔음. -> while문 이므로 예를들어 문제 예제로 한다 가정하면 입력이 216이고 출력이 198일때 while(198 != 0) { sum += number % 10; (8이 sum에 들어감) 198 /= 10; (19가 반환됨) } while(19 != 0) { sum += number % 10; (9이 sum에 들어감) 19 /= 10; (1이 반환됨) } while(1 != 0) { sum += number % 10; (1이 sum에 들어감 what? 1은 나누어지지 않기에 몫이 그대로 반환) 1 /= 10; (나누지 못해서 반환되는 값이 없음.) } 따라서 sum에 값에는 1 + 9 + 8 = 18이 들어가있음. # 정답 ```js import java.util.*; import java.io.*; public class Main { static char[][] arr; public static void main(String[] args) throws IOException { Scanner sc = new Scanner(System.in); int N = sc.nextInt(); //입력받을 숫자 변수 int result = 0; // 결과 값을 반환해줄 변수 for(int i = (N - (N * 9)); i < N; i++) { //N의 생성자는 각각의 자리별 최대숫자는 9이기 떄문에 int number = i; //number에 N - (3*9)한 값을 넣기 //219라 하면 N - (3*9) 이하의 값은 생성자가 될 수 없다. int sum = 0; // 계속 더해줄 변수 선언 while(number != 0) { // number가 0이 아니면 while문 계속 진행 sum += number % 10; // sum에 값에 1의 자리 숫자를 더해줌 number /= 10; // number를 나눠주어서 몫을 반환하여 다시 while문에 넣어줌 } if(sum + i == N) { // if 1의 자리로 만들어서 더해준 숫자들과 i를 더한값이 N과 같다면 result = i; //result 변수에 i값을 넣고 스탑 break; } } System.out.println(result); //result 변수 호출 } } ``` ### 2022-09-06 ## checkbox 의 리스트 중 체크된 값 가져오기 # 예제(html부분) ```js

List
Check	번호	이름
Check	1	철수
Check	2	영수
Check	3	토마스
Check	4	순이
Check	5	창모

``` # 예제(javascript 부분) ```js jQuery의 checkbox 여부 확인 // checkbox의 전체 갯수 $("input:checkbox[name=chkList]").length // checkbox의 선택된 갯수 $("input:checkbox[name=chkList]:checked").length // checkbox의 전체 체크 $("input[name=chkList]:checkbox").prop("checked", true); ----------------------------------------------------- jQuery의 each문을 통하여 checked된 value 값 가져오기 let chk_Val = []; $("input:checkbox[name=chkList]").each(function(i,iVal) { chk_Val.push(iVal); }); console.log(chk_Val); ``` ## 백준 2798 - 블랙잭 # 문제 ![](https://ifh.cc/g/bN9a2H.png) # 조건 1. N(3 <= N <= 100) 2. M(10 <= M <= 300,000) 3. M을 넘지 않으면서 M에 최대한 가까운 카드 3장의 합을 출력한다. 4. 모든 경우의 수를 전부 계산해야한다. # 풀이 1. N을 받고 for문을 통하여 첫번쨰숫자부터 N번쨰 숫자까지를 int 배열에 담는다. 2. 3중 for문을 통하여 받은 숫자들의 모든 경우의 수를 대입시킨다. 3. 3중 for문의 숫자의 합을 갖는 int형 변수와 0의 값을 갖는 int형 변수 2개를 만든다. 4. 0의 값을 갖는 int형 변수 <= if 3중 for문의 숫자의 합을 갖는 int형 변수 <= M 형식을 만들고 이게 true라면 0의 값을 갖는 int형 변수에 덮어씌우면서 반복한다. 5. 그게 아니고 만약 M과 3중 for문의 숫자의 합을 갖는 int형 변수가 같다면 바로 리턴한다. # 정답 ```js import java.util.*; import java.io.*; public class Main { static char[][] arr; public static void main(String[] args) throws IOException { Scanner sc = new Scanner(System.in); int N = sc.nextInt(); int M = sc.nextInt(); int[] arr = new int[N]; for(int i = 0; i < N; i++) { arr[i] = sc.nextInt(); } int result = search(arr,N,M); System.out.println(result); } static int search(int[] arr, int N, int M) { int result = 0; // 3개를 고르기 때문에 첫번째 카드는 N - 2 까지만 순회 for(int i = 0; i < N-2; i++) { // 두 번째 카드는 첫 번째 카드 다음부터 N - 1 까지만 순회 for(int j = i+1; j < N-1; j++) { // 세 번째 카드는 두 번째 카드 다음부터 N 까지 순회 for(int k = j+1; k < N; k++) { // temp라는 변수에 첫번쨰,두번째,세번째 카드를 더해준다. int temp = arr[i] + arr[j] + arr[k]; // if M과 temp가 같다면 temp를 그대로 return한다. if(M == temp) { return temp; } // temp가 result보다는 크고 M보다는 작으면 result에 덮어씌운다. if(result < temp && temp <= M) { result = temp; } } } } //순회가 끝나고 result값을 리턴한다. return result; } } ``` ### 2022-09-05 ## 함수형 프로그래밍 # 함수형 프로그래밍이란? - 하나의 프로그래밍 패러다임으로 정의되는 일련의 코딩 접근 방식이며, 자료처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임을 의미한다. # 함수형 프로그래밍을 배워야 하는 이유 - 함수형 프로그래밍은 기존 절차적 프로그래밍과 객체 지향형 프로그래밍과는 다른 새로운 방식이다. 함수형 프로그래밍을 배우는 것은 스칼라나 클로저에 관심이 없고 앞으로 쓰지 않을 것 같다고 해도 다른 방식으로 사고하는 법을 배우는 것이다. - 새로운 계산방법을 배우는 것 처럼 사고의 전환을 필요로 하며 다양한 사고방식으로 프로그래밍을 바라보면 유연한 문제해결이 가능하다. # 함수형 프로그래밍의 특징 1. 순수함수 - 동일한 입력에는 항상 같은 값을 반환해야 하는 함수 - 함수의 실행이 프로그램의 실행에 영향을 미치지 않아야 하는 함수 - 함수 내부에서 인자의 값을 변경하거나 프로그램 상태를 변경하는 Side Effect가 없는 것 2. 비상태, 불변성 (Stateless, Immutability) - 함수형 프로그래밍에서의 데이터는 변하지 않는 불변성을 유지해야 한다. - 데이터의 변경이 필요한 경우, 원본 데이터 구조를 변경하지 않고 그 데이터의 복사본을 만들어서 그 일부를 변경하고, 변경한 복사본을 사용해 작업을 진행한다. 3. 선언형 함수 - 함수형 프로그래밍에서는 마찬가지로 if,switch,for 등 명령문을 사용하지 않고 함수형 코드로 사용해야한다. 4. 1급 객체와 고차함수 (Fist-class, Higher-order functions) - 1급 객체의 특징 -> 변수나 데이터 구조안에 담을 수 있다. -> 파라미터로 전달 할 수 있다. -> 반환값(return value)으로 사용할 수 있다. -> 할당에 사용된 이름과 관계없이 고유한 구별이 가능하다. -> 동적으로 프로퍼티 할당이 가능하다. - 고차함수의 특징 -> 함수를 인자로써 전달 할 수 있어야 한다. -> 함수의 반환 값으로 또 다른 함수를 사용 할 수 있다 # 함수형 프로그래밍의 장단점 - 장점 1. 높은 수준의 추상화를 제공한다 2. 함수 단위의 코드 재사용이 수월하다 3. 불변성을 지향하기 때문에 프로그램의 동작을 예측하기 쉬워진다 - 단점 1. 순수함수를 구현하기 위해서는 코드의 가독성이 좋지 않을 수 있다 2. 함수형 프로그래밍에서는 반복이 for문이 아닌 재귀를 통해 이루어지는데 (deep copy), 재귀적 코드 스타일은 무한 루프에 빠질 수 있다 3. 순수함수를 사용하는 것은 쉬울 수 있지만 조합하는 것은 쉽지 않다 ## 반응형 프로그래밍 # 반응형 프로그래밍이란? - 데이터 스트림과 그 변화에 대한 선언적 프로그래밍 패러다임이다. -> 여기서 스트림이란 시간순으로 발생하는 이벤트의 나열이다. - 데이터가 변경될 때마다 관련된 로직을 일일히 호출하는 것이 아니라, 데이터 스트림이 존재하고 이를 구독하는 곳에서 변화에 따라 알아서 처리하는 하겠다는 것이다. # 예제 ```js 일반적인 프로그래밍 a = 10; b = 20; c = a + b; // c: 30 a = 20; // c: 30 -------------------------------------------------- 반응형 프로그래밍 a = 10; b = 20; c = a + b; // c: 30 a = 20; // c: 40 ``` - 반응형의 경우 모든 데이터를 스트림으로 보고 스트림의 데이터가 변화되면 이를 전파하여 해당 데이터 스트림을 구독하고 있는 곳도 영향을 받는다. - 이처럼 반응형 프로그래밍은 기존 프로그래밍 패러다임과는 다르게 사고해야될 필요가 있다. 객체지향의 경우 어떤 동작에 중점을 두었다면, 반응형의 경우 데이터 스트림의 변화에 중점을 둔 것이다. ### 2022-09-01 ## git stash 사용법 # 사용사례 - 최근에 A브랜치에서 작업을 완료 후 pull Request를 올렸다. 그리고 새로운 기능의 작업을 위해 B브랜치를 따서 쭉 작업하는 중, A브랜치에서 작업한 내용의 코드 리뷰를 받아 수정할 사항이 생겼다. A브랜치로 넘어가 코드 수정을 해야하는데, B브랜치에서는 작업 중이다 보니 A브랜치로 그냥 넘어갈 수가 없다. # 해결방법 1. 현재 작업 중인 상황을 그대로 commit을 한다. 2. 새로운 브랜치를 따서 commit 후, 다시 현재 브랜치로 돌아온다. 3. git stash 명령어를 이용한다. -> 3번의 git stash 명령어를 이용하면, branch를 새로 따거나, 불필요한 commit을 막을 수 있다. # git stash - 현재의 상태를 임시로 저장한다. # 사용방식 1. git stash를 통해 현재 상태를 워킹 디렉토리에 임시로 저장되고 최근 commit 상태로 돌아가게 된다. 2. 임시로 저장된 내 최근 상태를 push를 통해 git에 푸쉬한다. 3. git stash pop을 통해 push까지 완료된 최근 상태로 stash된다. ## 디클래러티브(선언적) 프로그래밍 - 선언형 프로그램은 목표를 명시하고 알고리즘을 명시하지 않는 것이다. - 정의를 이해하고 이를 재귀적으로 분석하는 것 - 어떻게 해야 하는지는 알아서 찾아서 해야하는 것 ## 하노이의 탑 # 규칙 1. 한번에 하나의 원판만 움직일 수 있다. 2. 크기가 작은 원판위에 큰 원판이 옮길수가 없다. 3. 원반은 위에서만 꺼낼수 있다. # 풀이 1. 우선 시작 기둥에 모든 원판을 모아놓고 시작을 하고 보조 기둥 목표 기둥으로 나눈다. ![](https://ifh.cc/g/2mHyZh.png) 2. N개의 원반을 옮기기 위해서는 N-1 개의 원반을 이웃한 기둥으로 옮겨야 한다. 3. 가장 큰 원반이 최종 목적 기둥으로 옮긴다. 4. 이제 이웃한 기둥에서 n-1 개의 원반을 최종 목적 기둥으로 옮겨야 한다. ### 2022-08-31 ## 백준 2447 - 별찍기 10 # 문제 ![](https://ifh.cc/g/A2DMKw.png) ![](https://ifh.cc/g/BvkSjQ.png) # 조건 1. N은 3의 거듭제곱이다. 2. N의 패턴은 N * N 정사각형이다. 3. 정가운데에만 공백이고 나머지에는 별이 들어간다. # 풀이 1. 아래와 같이 그림이 형성되므로 먼저 N = 27 일 때 우리는 9개의 블록으로 구분할 수 있다. 공백인 구간을 만족한다면 그 구간은 공백으로 채우고 공백 구간이 아닌 블럭은 재귀호출을 하면 된다. 그러면 N = 9 일 때로 넘어갈 것이다. 또 앞선 함수와 같이 9개의 블록으로 나눈 뒤, 공백 구간은 공백 문자로 채우고 공백이 아닌 구간을 다시 재귀 호출을 하는 것이다. 그렇게 된다면 N = 3 일 때로 갈 것이고, 위와 같은 과정을 반복하다 보면 결국 N = 1 일 때가 온다. 여기서는 더 못 쪼개기 때문에 해당 구역의 배열을 공백 또는 별(*) 로 채우면 되는 것이다. ![](https://ifh.cc/g/FXA0BK.jpg) - 해당 방식으로 진행하면 아래와 같은 과정을 거치게 된다. ![](https://ifh.cc/g/g88Qbq.png) - 단계에서 9칸으로 구분 한 뒤, x, y 좌표에 따라서 공백 또는 재귀 호출을 반복해주어 더 이상 나눌 칸이 없을 때까지 반복하는 것이다. # 정답 ```js import java.util.*; import java.io.*; public class Main { static char[][] arr; public static void main(String[] args) throws IOException { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); int N = Integer.parseInt(br.readLine()); arr = new char[N][N]; Star(0,0,N,false); StringBuilder sb = new StringBuilder(); for(int i = 0; i < N; i++) { for(int j = 0; j < N; j++) { sb.append(arr[i][j]); } sb.append('\n'); } System.out.println(sb); } public static void Star(int x, int y, int N, boolean blank) { // 공백일 경우 if(blank) { for(int i = x; i < x + N; i++) { for(int j = y; j < y + N; j++) { arr[i][j] = ' '; } } return; } //더이상 쪼갤 수 없는 블록일 때 if(N == 1) { arr[x][y] = '*'; return; } /* N = 27일 경우 한 블록의 사이즈는 9이고, N = 9일 경우 한 블록의 사이즈는 3이듯 해당 블록의 한 칸을 담을 변수를 의미 size count는 별 출력 누적을 의미 */ int size = N / 3; int count = 0; for(int i = x; i < x + N; i+= size) { for(int j = y; j < y + N; j+= size) { count++; if(count == 5) { Star(i, j , size, true); } else { Star(i, j , size, false); } } } } } ``` ### 2022-08-30 ## 정적 웹과 동적 웹 # 정적 웹 - 움직이지 않는 언제 접속해도 같은 리소스를 건네주는 웹사이트 - 사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹 페이지를 보게 됨. # 정적 웹의 대표적인 사례 - 회사 소개 페이지 -> 별다른 로그인이 없고 페이지는 어떤 디바이스, 상황에 상관 없이 항상 일정한 화면을 제공 -> 그 경우에 브라우저는 웹 서버와 통신해서 이미 저장되어 있던 HTML, CSS, JS 파일을 다운받습니다. -> 여기서 웹 서버는 HTML, CSS, JS 저장소 역할을 하는 거죠. 따로 데이터베이스가 필요하거나 복잡한 비즈니스 로직이 필요하지 않아요. ![](https://ifh.cc/g/RgJ3RW.png) # 정적 웹의 장점과 단점 1. 장점 : 빠르다, 비용이 적다 2. 단점 : 서비스가 한정적이다, 관리가 힘들다. # 동적 웹의 장점과 단점 1. 장점 : 서비스가 다양하다, 관리가 쉽다. 2. 단점 : 상대적으로 느리다, 비용이 많이 든다. # 동적 웹 - 다른 변수들에 의해서 변경되어 보이는 동적인 웹사이트 - 동적 웹은 클라이언트의 요청에 따라 다양한 화면을 제공해 줍니다 # 동적 웹의 대표적인 사례 - 쇼핑몰 등의 상품판매 페이지 -> 우리가 로그인을 한 후 마이페이지를 들어가면 각기 다른 정보를 확인할 수 있죠. 그리고 상품 페이지에 들어갈 때 각각 다른 화면을 제공받을 수 있죠. 이 경우에 웹 서버에서는 단순히 HTML, CSS, JAVASCRIPT 파일만 제공해주는 게 아니라 웹 어플리케이션 서버와 직접 통신을 합니다. -> 기본적으로 동적 웹은 정적 웹에 비해 복잡한 로직들과 리소스를 필요로 한다고 보시면 됩니다. ![](https://ifh.cc/g/WNMvGa.png) ## application.properties 와 application.yml 차이 # application.properties - Spring boot 애플리케이션 프로젝트에서 resource 디렉토리 하위에 자동으로 생성되는 파일이다. .properties 파일의 포맷은 name=value 형식이다. # 예제 ```js spring.datasource.url=jdbc:h2:dev spring.datasource.username=SA spring.datasource.password=password ------------------------------------------------- 값을 지정할 때, ${} 을 사용해 다른 환경 변수의 값을 참조할 수 있다. app.name=MyApp app.description=${app.name} is a Spring Boot application --------------------------------------------------- List 하나의 속성에 값이 다른 value가 있는 경우 배열 인덱스로 List 구조를 나타낼 수 있다 application.servers[0].ip=127.0.0.1 application.servers[0].path=/path1 application.servers[1].ip=127.0.0.2 application.servers[1].path=/path2 application.servers[2].ip=127.0.0.3 application.servers[2].path=/path3 ``` ### 2022-08-29 ## 백준 10870 - 피보나치 수 # 문제 ![](https://ifh.cc/g/cBPlgQ.png) # 조건 1. 피보나치 수 0은 0이고 1은 1이다. 2. 피보나치수의 합은 F(n) = F(n-1) + F(n-2)이다. 3. n <= 20이다. # 풀이 1. 피보나치를 재귀하기 위한 함수를 만든다. 2. n이 0인 경우 0을 1인경우 1을 리턴시킨다. 3. n이 0인 경우나 1이 아닌 경우에는 F(n-1) + F(n-2)를 리턴시키고 int 형 변수를 만들어 계속 더해준다. # 정답 ```js import java.util.*; import java.io.*; public class Main { public static void main(String[] args) throws IOException { Scanner sc = new Scanner(System.in); int n = sc.nextInt(); int sum = pabonachi(n); System.out.println(sum); } public static int pabonachi(int n) { if (n == 0) { return 0; } if ( n == 1) { return 1; } return pabonachi(n-1) + pabonachi(n-2); } } ``` ## 백준 17478 - 재귀함수가 뭔가요? # 문제 ![](https://ifh.cc/g/X0ZlfA.png) ![](https://ifh.cc/g/jzKmRG.png) # 조건 1. N은 1보다 크거나 같고 50보다 작거나 같다 2. 첫번째 줄만 반복되지 않는다. 3. N이 0일 경우에 대한 조건을 달아야 재귀함수를 실행할 수 있다. # 풀이 1. 첫번째 줄은 그냥 바로 출력한다. 2. N이 0일때는 반복하지 않는 부분만 출력한다. 3. line이라는 변수를 만들어 "" 로 처리하여 띄어쓰기가 되지 않는 오류를 방지해야한다. 4. ____ 가 4개씩 되어있기때문에 그에 따른 String 변수 1개가 필요하다. #정답 ```js import java.util.*; import java.io.*; public class Main { static String underbar = ""; public static void main(String[] args) throws IOException { Scanner sc = new Scanner(System.in); int n = sc.nextInt(); System.out.println("어느 한 컴퓨터공학과 학생이 유명한 교수님을 찾아가 물었다."); JHteacher(n); } public static void JHteacher(int n) { String line = underbar; if (n == 0) { System.out.println(line + "\"재귀함수가 뭔가요?\""); System.out.println(line + "\"재귀함수는 자기 자신을 호출하는 함수라네\""); System.out.println(line + "라고 답변하였지."); return; } System.out.println(line + "\"재귀함수가 뭔가요?\""); System.out.println(line + "\"잘 들어보게. 옛날옛날 한 산 꼭대기에 이세상 모든 지식을 통달한 선인이 있었어."); System.out.println(line + "마을 사람들은 모두 그 선인에게 수많은 질문을 했고, 모두 지혜롭게 대답해 주었지."); System.out.println(line + "그의 답은 대부분 옳았다고 하네. 그런데 어느 날, 그 선인에게 한 선비가 찾아와서 물었어.\""); underbar += "____"; JHteacher(n - 1); System.out.println(line + "라고 답변하였지."); } } ``` ### 2022-08-26 ## JAVA Script slice()와 splice() # slice() 함수 - 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용합니다. 첫번째 인자로 시작 인덱스(index), 두번째 인자로 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환합니다. # 예제 ```js nums = Array(20).fill().map((_, i) => i) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19] 1. 이 숫자 배열에서 5부터 9까지를 복사한 값을 담고 있는 새로운 배열을 만들어 보겠습니다. nums.slice(5, 10) [5, 6, 7, 8, 9] 2. 여기서 주의할 점은 첫번째 인자로 넘어온 시작 인덱스가 가리키는 값은 포함하지만, 두번째 인자로 넘어온 종료 인덱스가 가리키는 값은 포함하지 않는다는 것입니다. 두번째 인자를 넘기지 않으면, 시작 인덱스가 가리키는 값부터 배열의 마지막 값까지 모두 복사해줍니다. nums.slice(10) [10, 11, 12, 13, 14, 15, 16, 17, 18, 19] 3. 첫번째 인자도 넘기지 않으면, 배열의 처음 값부터 마지막 값까지 전체를 복제해버리는 효과를 낼 수 있습니다. nums.slice() [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19] 4. slice() 함수는 밑에서 다룰 splice() 함수와 달리 아무리 많이 호출해도 원본 배열의 값은 절대 건드리지 않습니다. 따라서 원본 배열이 그대로 보존되야 하는 상황에서 매우 유용하게 사용됩니다. nums [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19] ``` # splice() 함수 - 함수의 이름에서 알파벳 p가 하나 더 있는 splice() 함수는 다목적으로 사용할 수 있는 함수인데요. 이 함수로는 배열로 부터 특정 범위를 삭제하거나 새로운 값을 추가 또는 기존 값을 대체할 수 있습니다. 첫번째 인자로 시작 인덱스(index), 두번째 인자로 몇개의 값을 삭제할지, 그리고 세번째 인자부터는 추가할 값을 가변 인자로 넘길 수 있으며, 삭제된 값을 담고 있는 배열을 반환합니다. # 예제 ```js nums = Array(20).fill().map((_, i) => i) < [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19] 1. 이 숫자 배열에서 인덱스 5가 기리키는 값부터 3개의 값을 삭제해보겠습니다. nums.splice(5, 3) [5, 6, 7] nums [0, 1, 2, 3, 4, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19] 2. 이번에는 인덱스 5가 기리키는 값부터 아무 값도 삭제하지 않고, -5, -6, -7을 추가해보겠습니다. nums.splice(5, 0, -5, -6, -7) < [] > nums < [0, 1, 2, 3, 4, -5, -6, -7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19] 삭제된 값이 없으므로 빈 배열이 반환되고, 이전에 값이 삭제된 자리에 -5, -6, -7을 들어간 것을 알 수 있습니다. 3. 이번에는 인덱스 10이 가리키는 값부터 2개의 값을 -10, -11로 대체해보겠습니다. nums.splice(10, 2, -10, -11) < [10, 11] > nums < [0, 1, 2, 3, 4, -5, -6, -7, 8, 9, -10, -11, 12, 13, 14, 15, 16, 17, 18, 19] 삭제된 2개의 값을 담고 있는 배열이 반환되며, 원본 배열의 10, 11이 있던 자리에 -10, -11에 들어가 앉아있는 것을 볼 수 있습니다. 4. splice() 함수에 첫번째 인자만 넘기면 해당 인덱스가 가리키는 값을 포함해서 배열의 마지막 값까지 삭제가 됩니다. > nums.splice(15) < [15, 16, 17, 18, 19] > nums < [0, 1, 2, 3, 4, -5, -6, -7, 8, 9, -10, -11, 12, 13, 14] ``` ## JAVA Script createElement(), .createTextNode(), .appendChild() # createElement() - 요소를 생성합니다. ```js createElement( 'h1' )

``` # createTextNode() - 선택한 요소에 텍스트를 추가 ```js createTextNode( 'My Text' ) My Text라는 문자열을 만듭니다. .appendChild()는 선택한 요소 안에 자식 요소를 추가합니다. ``` # Click이라는 텍스트를 가진 button 요소를 추가하는 예제 ```js JavaScript ``` ### 2022-08-25 ## JAVA Script 이벤트 메서드 addEventListener # addEventListener - addEventListener은 이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다. # 예제 ```js ``` # 이 방식은 ie8이하에서는 호환되지 않는다. ie에서는 attachEvent 메소드를 사용해야 한다. # 예제 ```js var t = document.getElementById('target'); if(t.addEventListener){ t.addEventListener('click', function(event){ alert('Hello world, '+event.target.value); }); } else if(t.attachEvent){ t.attachEvent('onclick', function(event){ alert('Hello world, '+event.target.value); }) } ``` # 이 방식의 중요한 장점은 하나의 이벤트 대상에 복수의 동일 이벤트 타입 리스너를 등록할 수 있다는 점이다. # 예제 ```js ``` # 이벤트 객체를 이용하면 복수의 엘리먼트에 하나의 리스너를 등록해서 재사용할 수 있다. # 예제 ```js ``` ## 백준 10872 - 팩토리얼 # 문제 ![](https://ifh.cc/g/m6070m.png) # 조건 1. N은 0부터 12까지의 정수이다. 2. N이 <= 1 일 경우 1을 출력한다. 3. 재귀함수를 사용한다. 풀이 1. n을 받고 함수를 설정해 n이 <= 1이 되기전까지 자기가 자기를 다시 참조하도록 한다. 정답 ```js import java.util.*; import java.io.*; public class Main { public static void main(String[] args) throws IOException { Scanner sc = new Scanner(System.in); int n = sc.nextInt(); int sum = factorial(n); System.out.println(sum); } static public int factorial(int n) { if(n <= 1) { return 1; } return n * factorial(n-1); } } ``` ### 2022-08-24 ## 백준 9020 - 골드바흐의 추측 # 문제 ![](https://ifh.cc/g/DwrzCL.png) # 조건 1. 골드바흐 수란 짝수를 두 소수의 합으로 나타낼 수 있는것을 말한다. 2. n은 짝수이고 2보다는 큰수이다. 3. 골드바흐 파티션이 여러가지인 경우 두 소수의 차이가 가장 작은 것을 출력한다. # 풀이 1. 테스트 케이스만큼 반복하기 위한 int 변수 T를 설정한다. 2. for문을 통해 0부터 T변수까지 증가시키면서 int 변수 N을 입력받는다. 3. static boolean 함수를 만들어 소수인지 아닌지 판별한다. 4. first와 second 변수를 만들어 N의 값을 더할 수 있는 각각의 차이가 가장 작은 수를 담는다 5. while문을 통해 둘다 소수라면 그대로 나와서 뿌려주고 아니라면 first는 빼면서 second는 더하면서 비교하여 뿌려준다. #정답 ```js import java.util.*; import java.io.*; public class Main { public static void main(String[] args) throws IOException { Scanner sc = new Scanner(System.in); int T = sc.nextInt(); // 입력받은 테스트 케이스 개수 for(int i = 0; i < T; i++) { // 0부터 테스트 케이스까지 N의 값을 입력받는 반복문 int N = sc.nextInt(); int first = N / 2; // N을 합치기 위한 첫번쨰 변수 int second = N / 2; // N을 합치기 위한 두번째 변수 // 차이를 작게하기 위해 반으로 나눴다. while(true) { // 반복하면서 첫번째와 두번째 값이 소수가 되도록 만든다. if(isPrime(first) && isPrime(second)) { break; } else { first--; second++; } } System.out.println(first + " " + second); // 두값이 소수가 되면 뿌려준다. } } static boolean isPrime(int n) { // 소수인지 아닌지 판별하는 함수 boolean check = true; for(int i = 2; i <= Math.sqrt(n); i++) { if(n % i == 0) { check = false; } } return check; } } ``` ## 백준 4948 - 소수구하기(n부터 2 * n +1까지) # 문제 ![](https://ifh.cc/g/f2GPmX.png) # 조건 1. 테스트를 입력받을 수 있는 변수가 없다. 2. n보다 크고 2n보다 작은 소수의 개수를 출력해야한다. 3. 입력의 마지막은 0으로 끝난다. # 풀이 1. while문을 통하여 n의 개수만큼 반복한다. 2. 에라토스테네스의 체를 이용하여 풀이한다. 3. if n==0 일떄는 while문을 빠져나온다. # 정답 ```js import java.util.*; import java.io.*; public class Main { public static void main(String[] args) throws IOException { Scanner sc = new Scanner(System.in); while(true) { // 참이면 무한 반복한다. int n = sc.nextInt(); // 변수 n을 입력받는다. if(n == 0) { // 만약 n이 0이라면 반복문을 빠져나온다. break; } boolean[] arr = new boolean[2 * n+1]; // 2 * n+1까지의 배열을 만든다. arr[0] = true; // arr[0]과 arr[1]은 무조건 true이다. arr[1] = true; for(int i = 2; i < Math.sqrt(2 * n+1); i++) { // 2부터 2 * n +1의 제곱근까지 반복 for(int j = i * i; j < 2 * n+1; j+= i) { // 4부터 2 * n + 1까지 i만큼 증가하면서 반복 arr[j] = true; // 소수가 아니므로 true를 반환한다. } } int cnt = 0; // 소수의 개수를 세주기 위한 변수 설정 for(int i = n+1; i < 2 * n+1; i++) { // n 초과부터 2 * n +1 까지 i만큼 증가하면서 반복한다. if(arr[i] == false) { // false라면 소수이므로 카운터를 증가시킨다. cnt++; } } System.out.println(cnt); } } } ``` ### 2022-08-23 ## replaceWith # replaceWith - 선택한 요소를 다른 것으로 바꿉니다. - 예를 들어 h1 요소를 abc로 바꾸고 싶다면 다음과 같이 합니다. -> $( 'h1' ).replaceWith( 'abc' ); -> h1 요소의 내용 뿐 아니라 h1 태그까지 지우고 바꾼다는 것에 주의합니다. # 예제 ```js jQuery

Lorem

버튼을 클릭하면 h1 요소를

Ipsum

로 바꿉니다. ``` ## 백준 1929 - 소수 구하기 # 문제 ![](https://ifh.cc/g/qn2SMd.png) # 조건 조건 1. 한 줄에 하나씩, 증가하는 순서대로 소수를 출력한다. # ※ 에라토스테네스의 체란? - 해당링크가 도움이 될 것이다 - https://ko.wikipedia.org/wiki/%EC%97%90%EB%9D%BC%ED%86%A0%EC%8A%A4%ED%85%8C%EB%84%A4%EC%8A%A4%EC%9D%98_%EC%B2%B4 # 풀이 1. 에라토스테네스의 체로 푼다. 2. 해당값을 풀기위한 N까지의 boolean 타입의 배열을 만든다. 3. 0과 1은 소수가 될 수 없으므로 따로 true로 지정해둔다. 4. 시간이 짧아야 하므로 BufferedReder를 쓰는게 적절해보인다. 5. BufferedReder를 쓰므로 int형 변수로 다시 형변환을 해주고 StringToknizer를 통해 문자열을 쪼개준다. # 정답 ```js import java.util.*; import java.io.*; public class Main { public static void main(String[] args) throws IOException { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); StringTokenizer st = new StringTokenizer(br.readLine()); int M = Integer.parseInt(st.nextToken()); int N = Integer.parseInt(st.nextToken()); boolean[] arr = new boolean[N + 1]; // boolean 타입 N 까지의배열 생성 arr[0] = true; // 0과 1은 소수가 아니므로 true로 놓고 시작 arr[1] = true; for(int i = 2; i <= Math.sqrt(N + 1); i++) { // 2부터 제곱근까지 i++하면서 계산 for (int j = i * i; j < N + 1; j += i) { // i의 제곱인 4부터 N까지 j에 i만큼 증가하면서 제외시키기 arr[j] = true; } } for(int i = M; i < N + 1; i++) { // 그외의 M부터 N까지의 숫자는 모두 소수이므로 false로 놓고 뽑아준다. if(arr[i] == false) System.out.println(i); } } } ``` ### 2022-08-22 ## 백준 11653 - 소인수분해 # 문제 ![](https://ifh.cc/g/OOsBPN.png) # 조건 1. N이 1인 경우 아무것도 출력하지 않는다. 2. 인수분해를 오름차순이 되도록 한다. # 풀이 - 소수를 구해줘야 할 것 같은 문제지만 사실은 구해주지 않아도 된다. while문을 통해 2부터 나눠주기 시작하면 숫자 4가 되었을떄는이미 2로 나누어주었기 때문에 4로 나눌수가 없으므로 소수가 아니면 나눌수가 없게 된다. 그리고 나누어줄때마다 그 나누어준 수를 N에다가 다시 저장한다. # 정답 ```js import java.util.*; import java.io.*; public class Main { public static void main(String[] args) throws IOException { Scanner sc = new Scanner(System.in); int N = sc.nextInt(); int i = 2; while(i <= N) { if(N % i == 0) { System.out.println(i); N = N / i; } else { i++; } } } } ``` ## 백준 2581 - 소수찾기 2 # 문제 ![](https://ifh.cc/g/QyFWc5.png) #조건 1. M은 N보다 작거나 같다. 2. 소수의 값들을 모두 더한값(1) 과 최소값(2) 를 출력한다. 3. M이상 N 이하의 자연수 중 소수가 없을 경우에는 -1을 출력한다. #풀이 1. 최소값 설정을 위한 변수를 설정한다. 2. 소수를 더할 변수를 설정한다. 3. 이중반복문을 통해 M부터 N까지 더하면서 그중 2부터 N까지 더하면서 소수인지 아닌지를 판별 4. 소수라면 변수를 이용하여 비교하여 최소값 찾기 5. 반복문을 통해 얻어진 소수를 모두 더해주기 #정답 ```js import java.math.BigInteger; import java.util.*; import java.io.*; public class Main { public static void main(String[] args) throws IOException { Scanner sc = new Scanner(System.in); int M = sc.nextInt(); int N = sc.nextInt(); int min = N; // 최소값 설정을 위한 변수 int sum = 0; // 소수를 더할 변수 for(int i = M; i <= N; i++) { boolean isPrime = true; // 소수인지 아닌지 구할 변수 if(i == 1) { // 1의 경우 소수가 될 수 없으므로 false isPrime = false; } for(int j = 2; j < i; j++) { // 2부터 100까지 j++ 시키면서 만약 j가 나누어진다면 소수가 아니므로 false반납 후 종료 if(i % j == 0) { isPrime = false; break; } } if(isPrime) { // 소수라면 최소값으로 대체 모든 소수 더하기 if(min > i) min = i; sum += i; } } if(sum == 0) { // sum 이 0이라는건 소수가없었다는 뜻으로 -1 출력 System.out.println(-1); } else { System.out.println(sum); // 소수를 더한값 System.out.println(min); // 소수중 최소값 } } } ``` ### 2022-08-19 ## Math.sqrt(변수) # Math.Sqrt()란? - java.lang.Math클래스의 sqrt() 메서드입니다 double타입의 인수를 전달하면 인수에 대한 double타입의 제곱근 값을 리턴해줍니다 제곱근은 음수가 나올 수 없으므로 음수를 입력하면 NaN(Not a Number)을 리턴해줍니다 # 사용예제 ```js import java.io.IOException; public class MathSqrt { public static void main(String[] args) throws IOException { System.out.println("9의 제곱근 : " + Math.sqrt(9)); System.out.println("20의 제곱근 : " + Math.sqrt(20)); System.out.println("50의 제곱근 : " + Math.sqrt(50)); System.out.println("100의 제곱근 : " + Math.sqrt(100)); System.out.println("NaN의 제곱근 : " + Math.sqrt(Double.NaN)); System.out.println("-1의 제곱근 : " + Math.sqrt(-1)); } } ``` ## 백준 1978 - 소수찾기 # 문제 ![](https://ifh.cc/g/AsBr2g.png) # 조건 소수는 1과 자기 숫자로만 나누어지는 숫자이다. 1 본인은 소수가 아니다 # 풀이 개수 N을 받아서 for문을 통한 N개의 숫자만큼 반복해서 X를 받고 boolean 타입의 변수를 통해 true / false를 구분하여 count를 세어준다. 추가적으로 for문을 통하여 2부터 시작해서 Math.sqrt(변수) : 해당 변수의 제곱근을 계산해주는 함수 를 통하여 ++시키면서 비교 만약 true라면 count를 1씩 증가시키고 아니라면 false를 반환하도록 한다. # 정답 ```js- import java.math.BigInteger; import java.util.*; import java.io.*; public class Main { public static void main(String[] args) throws IOException { Scanner sc = new Scanner(System.in); int N = sc.nextInt(); // 수의 개수 int count = 0; // 소수 카운트 for(int i = 0; i < N; i++) { //n만큼 반복 int X = sc.nextInt(); boolean isPrime = true; if(X == 1) { continue; // 1은 소수가 아니므로 넘어간다. } for(int j = 2; j <= Math.sqrt(X); j++) { //Math.sqrt(X) 함수로 제곱근을 계산해주는 함수 if(X % j == 0) { //X를 j로 나눠서 떨어지면 소수가 아니다. isPrime = false; } } if(isPrime) { //나머지는 소수다. count++; } } System.out.println(count); } } ``` ### 2022-08-18 ## BigInteger # BigIntger를 사용해야 하는 이유 - 아래와 같이 int형 보다 큰 숫자의 경우 BigInteger를 사용한다. | Type | 범위 | | -- | -- | | int | -2,147,483,648 ~ 2,147,483,647 | | long | -9,223,372,036,854,775,808 ~ 9,223,372,036,854,775,807 | # BigInteger 사용법 ```js BigInteger bigNumber = new BigInteger("10000"); BigInteger은 java.math안에 있으며 위와 같이 선언하시면 됩니다. 특이한 점은 BigInteger을 초기화하기 위해서는 문자열을 인자 값으로 넘겨주어야 한다는 점입니다. BigInteger가 문자열로 되어 있기 때문입니다. ------------------------------------- BigInteger bigNumber1 = new BigInteger("100000"); BigInteger bigNumber2 = new BigInteger("10000"); System.out.println("덧셈(+) :" +bigNumber1.add(bigNumber2)); System.out.println("뺄셈(-) :" +bigNumber1.subtract(bigNumber2)); System.out.println("곱셈(*) :" +bigNumber1.multiply(bigNumber2)); System.out.println("나눗셈(/) :" +bigNumber1.divide(bigNumber2)); System.out.println("나머지(%) :" +bigNumber1.remainder(bigNumber2)); --------------------------------------- 결과값 덧셈 : 110000 뺼샘 : 90000 곱셈 : 1000000000 나눗셈 : 10 나머지 : 0 ``` # BigIntger 형 변환 ```js BigInteger bigNumber = BigInteger.valueOf(100000); //int -> BigIntger int int_bigNum = bigNumber.intValue(); //BigIntger -> int long long_bigNum = bigNumber.longValue(); //BigIntger -> long float float_bigNum = bigNumber.floatValue(); //BigIntger -> float double double_bigNum = bigNumber.doubleValue(); //BigIntger -> double String String_bigNum = bigNumber.toString(); //BigIntger -> String ``` # BigInteger 두 수 비교 ```js BigInteger bigNumber1 = new BigInteger("100000"); BigInteger bigNumber2 = new BigInteger("1000000"); //두 수 비교 compareTo 맞으면 0 틀리면 -1 int compare = bigNumber1.compareTo(bigNumber2); System.out.println(compare); ``` ### 2022-08-17 ## 쿠키 , 세션, 캐시 # HTTP의 특징 - (1) Stateless 프로토콜클라이언트의 상태 정보를 가지지 않는 서버 처리 방식이다. 클라이언트와 첫번째 통신에서 데이터를 주고 받았다 해도, 두번째 통신에서 이전 데이터를 유지하지 않는다. - (2) Connectionless 프로토콜클라이언트가 서버에 요청(Request)을 했을 때,그 요청에 맞는 응답(Response)을 보낸 후 연결을 끊는 처리방식이다.+) HTTP 1.1 버전에서 연결을 유지하고, 재활용 하는 기능이 Default 로 추가되었다. (keep-alive 값으로 변경 가능) - But, 실제로는 데이터 유지가 필요한 경우가 많다. 정보가 유지되지 않으면, 매번 페이지를 이동할 때마다 로그인을 다시 하거나, 상품을 선택했는데 구매 페이지에서 선택한 상품의 정보가 없거나 하는 등의 일이 발생할 수 있다 - 따라서, Stateful 경우를 대처하기 위해서 쿠키와 세션을 사용한다. # 쿠키 - 사용자의 브라우저에 저장되고, 통신할 때 HTTP 헤더에 포함되는 텍스트 데이터 파일이름, 값 만료기간(지정 가능), 경로 정보가 있고 키와 값으로 구성되어 있다해당 사용자의 컴퓨터를 사용한다면 누구나 쿠키에 입력된 값을 쉽게 확인 가능 -> 보안성이 낮다! -> ex) TV가 어떻게 구성되어있는지를 알필요없이 리모콘을 동작할 수 있으면 TV를 조정할 수 있는 것처럼 리모콘이 이에 해당함. # 쿠키 통신 방법 - (1) 최초 통신에서는 쿠키값이 없으므로, 일단 클라이언트는 Request 를 한다. - (2) 서버에서 클라이언트가 보낸 Request Header에 쿠키가 없음을 판별. 통신 상태(UserID, Password, 조작상태, 방문횟수 등) 를 저장한 쿠키를 Response한다. - (3) 클라이언트의 브라우저가 받은 쿠키를 생성/보존한다 - (4) 두번째 연결부턴, HTTP Header에 쿠키를 실어서 서버에 Request 한다 # 쿠키 예시 - 자동 로그인 유지, 위시 리스트 저장, 팝업 보지 않기, 사용자 이전 스크롤링이나 뷰 설정 값 등 # 세션 - 서버'에 저장되는 쿠키. 클라이언트와 서버의 통신 상태. 주로 중요한 데이터를 저장 시 사용브라우저를 종료할 때까지 유지 됨 사용자 로컬이 아닌 서버에 직접 저장되므로, 세션 내의 데이터를 탈취하는 것은 어려움 -> 보안성이 비교적 높음 -> ex) TV를 구성하기 위해 필요한 모든 것들에 해당 다른사람은 이 기밀에 대해 몰라야 하는 기술같은 것들 # 세션 통신 방법 - (1) 클라이언트가 서버에 접속 시, 세션 ID를 발급한다. - (2) 서버에서는 클라이언트로 발급해준 세션 ID를 쿠키를 이용해서 저장 - (3) 클라이언트는 다시 페이지에 접속할 때, 쿠키에 저장된 세션 ID를 서버에 전달 - (4) 서버는 Request Header에 쿠키 정보(세션 ID)로 클라이언트를 판별 # 쿠키와 세션 비교 | | 쿠키 | 세션 | | -- | -- | -- | | 저장위치 | 클라이언트 | 서버 | | 보안 | 변질 우려로 인해 보안 취약 | 비교적 보안성이 좋음 | | 라이프 사이클 | 만료 기간 지정, 브라우저 종료 시에도 유지 | 브라우저 종료시 삭제 (기간 지정이 가능하긴 함) | | 속도 | 빠름 | 느림 (서버에 정보가 있으므로) | # 캐시 - 리소스 파일들의 임시 저장소. 같은 웹 페이지에 접속할 때 사용자의 PC에서 로드하므로 서버를 거치지 않아도 된다. 이전에 사용되었던 데이터는 다시 사용될 가능성이 높다 -> 그래서 다시 사용될 확률이 있는 데이터들을 빠르게 접근 가능한 저장소에 저장한다.=> 페이지 로딩 속도를 개선함 이미지, 비디오 오디오, CSS/JS 등 ## 백준 10757 큰수 A + B # 문제 ![](https://ifh.cc/g/KcKhlH.png) # 조건 정수 A와 B는 long 범위보다 큰 숫자이다. # 풀이 Buffereder를 사용한 후 StringTokenizer를 통하여 문자열을 공백단위로 쪼개서 담는다. # 정답 ```js import java.io.InputStreamReader; import java.util.StringTokenizer; import java.io.IOException; import java.io.BufferedReader; import java.math.BigInteger; public class Big_APlusB { public static void main(String[] args) throws IOException{ BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); StringTokenizer st = new StringTokenizer(br.readLine(), " "); BigInteger big = new BigInteger(st.nextToken()); BigInteger big2 = new BigInteger(st.nextToken()); System.out.println(big.add(big2)); } } ``` ### 2022-08-16 ## html 검색기능 구현하기(우리꺼 참조) # 검색기능 구현하기 위해 필요한 기능 1. 검색창의 클릭 버튼 2. 검색어 입력 3. 원하는 검색 엔진 선택 ```js HTML Document

------------------------------------------------------------------ CSS * { margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; height: 100vh; } .search { width: 300px; height: 100px; } .search input { width: 80%; height: 30px; font-size: 18px; border: none; border-bottom: 1px black solid; } .search button { font-size: 18px; border: none; background-color: green; width: 50px; height: 30px; border-radius: 15px; color: #fff; cursor: pointer; } ``` #결과 ![](https://ifh.cc/g/zMJLfp.png) ## 주소검색 api 적용해보기(카카오) # 나오는 화면 ![](https://ifh.cc/g/FOxkbP.png) # 제공되는 형태와 제한 ![](https://ifh.cc/g/6BAqKL.png) #코드 ```js -----------------

``` #결과화면 ![](https://ifh.cc/g/9rycBS.png) ### 2022-08-13 ## @CreationTimestamp / @UpdateTimestamp # @CreationTimestamp - @CreationTimeStamp는 INSERT 쿼리가 발생할 때, 현재 시간을 값으로 채워서 쿼리를 생성한다. @InsertTimeStamp 어노테이션을 사용하면 데이터가 생성된 시점에 대한 관리하는 수고스러움을 덜 수 있다. # @UpdateTimestamp - @UpdateTimestamp는 UPDATE 쿼리가 발생할 때, 현재 시간을 값으로 채워서 쿼리를 생성한다. @UpdateTimestamp 어노테이션을 사용하면 수정이 발생할 때마다 마지막 수정시간을 업데이트 해주어야 하는 데이터에 유용하게 활용될 수 있다. 예시로 사용한 Post 객체에는 updatedAt 필드가 있다. 이 필드는, 게시글의 수정이 발생할 때 마다 매번 업데이트를 해주어야 한다. @UpdateTimestamp 어노테이션은 이러한 경우 유용하게 활용될 수 있다. ```js @Entity @Getter @Builder public class Post { @Id @GeneratedValue @Column(name = "user_id") private Long id; @Email private String text; @CreationTimestamp // INSERT 시 자동으로 값을 채워줌 @Column(name = "created_at") private LocalDateTime createdAt = LocalDateTime.now(); @Column(name = "updated_at") @UpdateTimestamp // UPDATE 시 자동으로 값을 채워줌 private LocalDateTime updatedAt = LocalDateTime.now(); } ``` # 간단정리 - @CreationTimestamp private Timestamp createDate; // insert 시 시간 자동 저장 - @UpdateTimestamp private Timestamp updateDate; // update 시 시간 자동 저장 ## 백준 2839 - 설탕배달 # 문제 ![](https://ifh.cc/g/AvLkom.png) ![](https://ifh.cc/g/pCPBff.png) # 조건 1. 봉지는 3kg과 5kg 이 있다. 2. 봉지의 갯수는 최소한으로 가져가야 한다. 3. 정확하게 가져갈 수 없는 경우 -1을 출력한다. # 풀이 1. 5로 나누어지면 카운터를 증가시키고 카운터 갯수만큼 바로 출력 2. 5로 바로 나누어지지 않는 경우에는 -3을 진행 후 카운터 증가 시키고 다시 5로 나누어지는지 확인 3. -3을 진행시키는 도중 N의 값이 0보다 작아질 경우 -1을 출력시키기 # 해답 ```js import java.util.*; import java.io.*; public class Main { public static void main(String[] args) throws IOException { Scanner sc = new Scanner(System.in); int N = sc.nextInt(); int count = 0; while(true) { if(N % 5==0) { count += N / 5; System.out.println(count); break; } else { N -= 3; count++; } if(N < 0) { System.out.println(-1); break; } } } } ``` ### 2022-08-12 ## git Flow란 # git Flow 개념 - Git Flow는 Git으로 형상관리를 할때 브랜치를 효율적으로 관리하기 위해 사용하는 브랜치 관리 전략(Branch management strategy)입니다 # git Flow 사용 이유 - 그렇다면 이러한 브랜치들을 굳이 전략까지 세워서 관리를 해야될까? 프로젝트 규모가 작거나 혼자서 개발을 할 경우 branch? 아니 master에서 그냥 작업해서 배포해도 상관없을 것입니다. 하지만 프로젝트의 규모가 커져서 팀원이 늘어났을 경우 누군가는 하루 종일 conflict를 해결해야 하며, 이슈가 발생했을 때 개발한 코드를 다시 되돌리고 이러한 과정에서 개발을 멈춰야 되는 불편함이 있습니다. 물론 회사마다 프로젝트를 효율적으로 관리를 하는 방법이 있겠지만, 위와 같은 과정들을 최소화하고 형상관리를 효율적으로 하기 위해 생겨난 전략이라고 생각하면 될 것같습니다. # Git Flow 종류 # 테이블 예시 | | | | -- | -- | | master | 제품으로 출시될 수 있는 브랜치 | | develop | 다음 출시 버전을 개발하는 브랜치 | | feature | 기능을 개발하는 브랜치 | | release | 이번 출시 버전을 준비하는 브랜치 | | hotfix | 출시 버전에서 발생한 버그를 수정 하는 브랜치 | ![](https://ifh.cc/g/TCns9l.jpg) # 예제 - 상황 : A는 게시판에 필터기능을 추가하고, B는 게시글에 댓글기능을 추가해야한다. ```js develop 브랜치에서 A와 B가 각각 feature 브랜치를 생성한다. 개발이 완료되면 그동안 commit된 내용을 local branch에서 feature 브랜치로 pull 또는 pull request한다. feature 브랜치에서 develop 브랜치로 merge 요청한다. relase 브랜치에서 QA를 진행하기 위해 merge를 진행한다. QA 테스트가 통과되었다면 master, develop에 merge를 진행한다. 운영서버에서 버그가 발생했다. master브랜치에서 바로 hotfix 브랜치를 생성한다. 버그를 열심히 수정하고 master 브랜치에 merge를 진행하고 추가적으로 버그가 발생하지 않도록 develop에도 merge를 진행한다. ``` ## branch란 # 브랜치의 필요성 - 소프트웨어를 개발할 때에 개발자들은 동일한 소스코드를 함께 공유하고 다루게 됩니다. 동일한 소스코드 위에서 어떤 개발자는 버그를 수정하기도 하고 또 다른 개발자는 새로운 기능을 만들어 내기도 하죠. 이와 같이 여러 사람이 동일한 소스코드를 기반으로 서로 다른 작업을 할 때에는 각각 서로 다른 버전의 코드가 만들어 질 수 밖에 없습니다. - 이럴 때, 여러 개발자들이 동시에 다양한 작업을 할 수 있게 만들어 주는 기능이 바로 '브랜치(Branch)' 입니다. 각자 독립적인 작업 영역(저장소) 안에서 마음대로 소스코드를 변경할 수 있지요. 이렇게 분리된 작업 영역에서 변경된 내용은 나중에 원래의 버전과 비교해서 하나의 새로운 버전으로 만들어 낼 수 있습니다. # 브랜치란? - 독립적으로 어떤 작업을 진행하기 위한 개념입니다. 필요에 의해 만들어지는 각각의 브랜치는 다른 브랜치의 영향을 받지 않기 때문에, 여러 작업을 동시에 진행할 수 있습니다. ![](https://ifh.cc/g/vfsfgz.png) - 이렇게 만들어진 브랜치는 다른 브랜치와 병합(Merge)함으로써, 작업한 내용을 다시 새로운 하나의 브랜치로 모을 수 있습니다. 여러 명이서 동시에 작업을 할 때에 다른 사람의 작업에 영향을 주거나 받지 않도록, 먼저 메인 브랜치에서 자신의 작업 전용 브랜치를 만듭니다. 그리고 각자 작업을 진행한 후, 작업이 끝난 사람은 메인 브랜치에 자신의 브랜치의 변경 사항을 적용합니다. 이렇게 함으로써 다른 사람의 작업에 영향을 받지 않고 독립적으로 특정 작업을 수행하고 그 결과를 하나로 모아 나가게 됩니다. 이러한 방식으로 작업할 경우 '작업 단위', 즉 브랜치로 그 작업의 기록을 중간 중간에 남기게 되므로 문제가 발생했을 경우 원인이 되는 작업을 찾아내거나 그에 따른 대책을 세우기 쉬워집니다. ![](https://ifh.cc/g/wRp2rQ.png) # Mast Branch - 저장소를 처음 만들면, Git은 바로 'master'라는 이름의 브랜치를 만들어 둡니다. 이 새로운 저장소에 새로운 파일을 추가 한다거나 추가한 파일의 내용을 변경하여 그 내용을 저장(커밋, Commit)하는 것은 모두 'master' 라는 이름의 브랜치를 통해 처리할 수 있는 일이 됩니다. 'master'가 아닌 또 다른 새로운 브랜치를 만들어서 '이제부터 이 브랜치를 사용할거야!'라고 선언(체크아웃, checkout) 하지 않는 이상, 이 때의 모든 작업은 'master' 브랜치에서 이루어 집니다. ### 2022-08-11 ## html table 태그 이용하기 # table 태그란? - 표를 만들어주는 HTML태그인데요. 표 뿐만 아니라 갤러리를 만들 수도 있고 지금은 잘 사용하지 않습니다만 웹사이트 전체의 레이아웃 공간을 배치할때도 사용할 수 있는 등 매우 다양하게 응용이 가능하여 굉장히 많이 사용되는 태그입니다. #테이블 만들기 | 주제 | 태그 | 비고 | | -- | -- | -- | | @rows=4: 테이블의 구성 요소 | table | 테이블을 만드는 태그 | | th | 테이블의 헤더부분을 만드는 태그 | | tr | 테이블의 행을 만드는 태그 | | td | 테이블의 열을 만드는 태그 | #예제 ```html 초간단 테이블

테이블	만들기
첫번째 칸	두번째 칸
첫번째 칸	두번째 칸

오늘의 수입/지출
내용	수입	지출
월급!	1,000,000
점심값		5,000
부모님선물		30,000
총계	수입	지출
	1,000,000	35,000
	남은돈	965,000

``` #결과 ![](https://ifh.cc/g/5ynfqK.png) ## html select 태그 이용하기 # select 태그란? - 아래로 펼치지는 목록 상자 - 드롭다운 메뉴 또는 리스트박스를 만들 수 있음 # option 태그란? - HTML select 태그 내부의 항목 - HTML에서 드롭다운 메뉴의 항목 # 예시(드롭다운1) ```html ``` #결과 ![](https://ifh.cc/g/sGXWBt.png) # 예시(드롭다운2) ```html ``` #결과 ![](https://ifh.cc/g/CvkOC8.png) # 예시(리스트박스) ```html ``` #결과 ![](https://ifh.cc/g/d9ocoO.png) ### 2022-08-10 ## 백준 2775번 부녀회장이 될테야 # 문제 ![](https://ifh.cc/g/mrGYOV.png) # 입력 ![](https://ifh.cc/g/pOjKBw.png) # 출력 ![](https://ifh.cc/g/hSnFYB.png) # 조건 1. 가장 첫 줄에 테스트 케이스가 주어진다 2. 테스트 케이스(첫 줄) 다음부터 두 줄씩 묶어 k 와 n 이 주어진다. 3. 아파트에는 0층부터 있고, 각 층에는 1호부터 시작한다. # 알고리즘 - a 층 b 호에 살기 위해서는 (a-1) 층의 1 호부터 b 호까지 사람들 수의 합만큼 사람들을 데려와 살아야한다고 쓰여있다. 입력받는 변수인 k 와 n 으로 표현하자면 다음과 같다. -> k 층 n 호 = ( k - 1 ) 층 1 호 + ( k - 1 ) 층 2 호 + ⋯ + ( k - 1 ) 층 n 호 ![](https://ifh.cc/g/O6XJbO.jpg) # 예제 ![](https://ifh.cc/g/72X0ld.jpg) # 풀이 ![](https://ifh.cc/g/MS3SJ7.png) ## 스프링 부트의 구조 # src/main/java 디렉터리 - 기존의 스프링 레가시와 마찬가지로 클래스, 인터페이스 등 자바 파일이 위치하는 디렉터리입니다. # BoardApplication 클래스 - 이전 글에서 생성한 Board 프로젝트의 com.board 패키지에는 우리가 생성하지 않은 BoardApplication 클래스가 포함되어 있습니다. 파일을 열어보면, 메서드 선언부에는 딸랑 main( ) 메서드 하나만 선언되어 있는데요. main( ) 메서드는 SpringApplication.run( )을 호출해서 웹 애플리케이션을 실행하는 역할을 합니다. 다음으로 클래스 선언부에 선언된 @SpringBootAplication입니다. 해당 애너테이션은 다음의 세 가지 애너테이션으로 구성되어 있습니다. | 애너테이션 | 설명 | | -- | -- | | @EnableAutoConfiguration | 스프링 부트는 개발에 필요한 몇 가지 필수적인 설정들의 처리가 되어 있는데요, 해당 애너테이션에 의해 다양한 설정들의 일부가 자동으로 완료됩니다. | | @rows=2 : @EnableAutoConfiguration | 스프링 부트는 개발 | | @ComponentScan | 기존의 XML 설정 방식의 스프링은 빈(Bean)의 등록 및 스캔을 위해 수동으로 ComponentScan을 여러 개 선언하는 방식을 사용하였습니다. 스프링 부트는 해당 애너테이션에 의해 자동으로 컴포넌트 클래스를 검색하고, 스프링 애플리케이션 콘텍스트(IoC 컨테이너)에 빈(Bean)으로 등록합니다. 쉽게 이야기하면, 의존성 주입 과정이 더욱 간편해졌다고 생각할 수 있습니다. | | @Configuration | 해당 애너테이션이 선언된 클래스는 자바 기반의 설정 파일로 인식됩니다. 스프링 4 버전부터 자바 기반의 설정이 가능하게 되었으며, XML 설정에 어마 무시한 시간을 소모하지 않아도 됩니다.물론, XML 기반의 설정을 전혀 사용하지 않는 것은 아닙니다. | # src/main/resources 디렉터리 - 기존의 스프링은 프로젝트가 생성되면 해당 디렉터리에는 log4.xml 파일만 떡하니 생성되었습니다. 스프링 부트는 templates 폴더, static 폴더, application.properties 파일이 기본적으로 생성됩니다. # src/test/java 디렉터리 - 해당 디렉터리의 com.board 패키지에는 BoardApplicationTests 클래스가 생성되어 있는데요. 해당 클래스를 이용해서 각각의 개발 단계에 알맞은 단위 테스트를 진행할 수 있습니다. 기존의 스프링과 달리, 복잡한 설정 없이 곧바로 테스트가 가능합니다. # build.gradle - 우리는 이전 글에서 프로젝트를 생성하면서 프로젝트의 Type을 그레이들(Gradle)로 선택했습니다. 기존의 스프링은 pom.xml에 여러 개의 dependency를 추가해서 라이브러리를 관리하는 방식의 메이븐(Maven)을 이용했었는데요, 제 경우에는 라이브러리의 버전 문제, 충돌 문제, 종속적인 문제 등 메이븐을 사용하면서 너무나도 골치 아픈 상황을 여러 번 겪어보았습니다. - 이러한 이유로 요즘에는 그레이들을 선호하는 추세라고 합니다. 메이븐은 하나의 라이브러리를 추가하려면 평균적으로 네 줄 이상의 코드를 작성해야 하지만, 그레이들은 단 한 줄의 코드로 라이브러리를 추가할 수 있습니다. # MVC 패턴 | 패턴 | 설명 | | -- | -- | | 모델, Model - (M) | 데이터 처리영역, 해당 영역은 데이터베이스와 통신하고 사용자가 원하는 데이터를 가공하는 역할을 합니다. | | 뷰, View - (V) | 사용자가 보는 화면, HTML과 타임리프를 이용해서 화면을 처리합니다. | | 컨트롤러, Controller - (C) | 모델(M) 영역과 뷰(V) 영역의 중간 다리 역할을 하는 영역입니다. 사용자의 요청을 처리할 어떠한 로직을 호출하고, 호출한 결과를 사용자에게 전달하는 역활을 합니다. | ### 2022-08-09 ## 파라메타 # 파라미터(Parameter)를 검색했더니 매개변수라고 해요. 그게 뭐죠? - 파라미터를 번역하면 매개변수라는 의미를 지니는데요, IT업계에서는 ‘소프트웨어나 시스템상의 작동에 영향을 미치며, 외부로부터 투입되는 데이터’라는 의미로 통용되고 있습니다. 파라미터를 활용하여 소프트웨어나 시스템을 작동시키기 때문에 다양한 활용도를 지니고 있어 없어서는 안되는 녀석이죠. - 구글 애널리틱스 같은 데이터 분석 툴을 설정하다보면 ‘UTM 파라미터(맞춤 캠페인 매개변수)를 설정하라’고 하거나, 뷰저블의 경우 데이터 수집을 위한 방식을 물을 때 파라미터의 영향도를 체크하라고 물어보곤 합니다. - 여기서 등장하는 파라미터는 ‘URL파라미터’라고 불리우며 ‘URL과 관련되어 사용되는 파라미터’를 의미합니다. # URL 파라미터(쿼리 파라미터)란 무엇인가요? - https://search.naver.com/search.naver?sm=top_hty&fb,=1&ie=utf8&query=뷰저블 - 네이버 검색창에 ‘뷰저블’이라고 검색을 하면 브라우저 상단의 URL이 위와 같이 노출되었습니다. URL파라미터란 위 URL 중에서 물음표 ‘?’ 이후 문자열을 뜻합니다. - URL 파라미터는 ‘웹 서버에 저장된 프로그램을 웹 브라우저로 전달하는 것’이라고 이해할 수 있습니다. [파라미터 명]=[파라미터 값]이 한 세트로 작동하고, 파라미터가 여러 개 일 때는 마찬가지로 위에 빨갛게 마킹해 둔 것처럼 ‘&’로 이어줍니다. #URL 파라미터(쿼리 파라미터), 어떻게 활용하나요? - 웹 데이터 분석과 마케팅에 활용할까요? 구글 애널리틱스나 에이스카운터 같은 분석 툴을 통해 광고 효과를 측정할 수 있고, 고객이 누구인지를 특정지어 해당 고객이 ‘전환(Conversion)’ 행동을 일으켰는지를 추적할 수도 있습니다. # URL 파라미터(쿼리 파라미터) 종류 - 액티브 파라미터 : 액티브 파라미터란, 지정한 파라미터 값에 따라 화면의 내용이 바뀌는 경우를 의미합니다. - 패시브 파라미터 : 패시브 파라미터란, 서버 프로그램이 내부적으로 사용하는 URL 파라미터로, 액티브 파라미터처럼 파라미터 값에 따라 콘텐츠가 바뀌지 않습니다. 웹로그 분석 툴에서 추적 유저ID별로 데이터를 분류하고 처리하는 과정에서 활용됩니다. ## Spring Data JPA에서 Query를 사용하는 방법 # 쿼리를 자동생성해준다고? - Spring boot를 통해서 개발을 하게 된다면, DB에 데이터를 삽입, 읽기 등 여러 가지 작동을 하기 위해서는 방식이 필요하다. 쿼리를 작동시키는 방식에는 여러 가지 방식이 존재한다. 실제로 현재 Spring Data JPA를 사용하면 꽤 편리한점이 있기 때문에, 그 점을 잘 이용하기 위해서는 결국에는 Query를 "자동 생성할 수 있는 포인트를 아는 것이 좋다." # 예시 ![](https://ifh.cc/g/tBqGWq.png) - @Repository에서 메소드를 만들고 나면, ![](https://ifh.cc/g/Dtk4aT.png) - @Service에서 다음과 같이 사용할 수 있다. # Query를 직접 써서 직접 메소드를 만드는 방법 - 1. 쿼리를 직접 쓰는 경우는 다음과 같은 조건이 있어야한다 ```js @Query("SELECT u FROM User u WHERE u.status = 1") Collection findAllActiveUsers(); From table 별칭을 Select문안에 넣어야 한다. 안 그러면 오류를 만들어낸다. 하지만 이런 오류를 집어내면서 해결하는 것이 은근히 귀찮다. ``` - 2. DB에서 쓰는 것처럼 직접 쿼리를 작성하는 방식 ```js @Query( value = "SELECT * FROM USERS u WHERE u.status = 1", nativeQuery = true) Collection findAllActiveUsersNative(); @Query 옵션에서 nativeQuery = true를 줘야지만... DB에서 쿼리문을 작성하는 방식으로 작성할 수도 있다. ``` - 3. JPA에서 메서드 Parameter를 통해서 @Query에 그 parameter가 넣어지는 방식 ```js public interface UserRepository extends JpaRepository { @Query("select u from User u where u.emailAddress = ?1") User findByEmailAddress(String emailAddress);} ?를 통한 경우 -> parameter의 위치에 따른 숫자를 넣어주면 된다. ?1 -> parameter 첫번째 자리에 있는걸 넣겠다는 뜻. ``` - 4. :name -> 파라미터의 이름으로 검색하는 경우 ```js public interface UserRepository extends JpaRepository { @Query("select u from User u where u.firstname = :firstname or u.lastname = :lastname") User findByLastnameOrFirstname(@Param("lastname") String lastname, @Param("firstname") String firstname); @Query("select u from User u where u.firstname = :firstname or u.lastname = :lastname") User findByLastnameOrFirstname(String lastname, String firstname); //이렇게도 사용 가능하다. } ``` ### 2022-08-05 ## Spring Initializr # Spring Initializr 설치 및 설정하는 방법(IntelliJ 개발기준) - 사이트 : https://start.spring.io/ # 설정방법(웹접속) ![](https://ifh.cc/g/vlp7AM.png) ```js Project : Project는 Spring Boot를 빌드하고 배포하는 방식이다. Maven, Gradle 중 선호하는 프로젝트를 선택한다. > Maven Project > Gradle Project (O) Language : 개발 언어는 Java, Kotlin, Groovy를 지원하며, Java를 선택한다. > Java (O) > Kotlin > Groovy Spring Boot : Spring Boot 버전을 선택한다. > 2.3.4 (O) Project Metadata : Spring Boot Embedded Tomcat 기반으로 기동하기위해 Jar Package하는 com.lgcns.nrson package를 갖는 Project를 생성한다. Java는 8을 사용한다. > Group : com.lgcns > Artifact : nrson > Name : nrson > Description : NRSON Project for Spring Boot > Package name : com.lgcns.nrson > Packaging : Jar (O), War > Java : 14, 11, 8 (O) Dependencies : DEPENDENCY로 포함할 라이브러리를 선택한다. > ADD DEPENDENCIES 버튼 클릭 ``` # 설정방법(옵션선택) ```js -project : 사용할 빌드 툴 선택 -Language : 언어선택 - Spring Boot : 버전선택 - Project Metadata group :보통 기업의 도메인명, 자유롭게 작성가능 artifact :빌드결과물 이름 - Dependency : 스프링프로젝트에서 사용할 라이브러리 ``` ![](https://ifh.cc/g/J5TRX6.png) # 설정방법(IntelliJ) ```js - zip 다운로드 - IntelliJ에서 열기 ``` ![](https://ifh.cc/g/r35DOC.png) # 설정방법(잘실행되는지 테스트) ![](https://ifh.cc/g/DFOMCl.png) ## 스프링시큐리티 # 스프링시큐리티(Spring Security)란? - 스프링 시큐리티는 스프링 기반의 애플리케이션의 보안(인증과 권한, 인가 등)을 담당하는 스프링 하위 프레임워크입니다. 즉 인증(Authenticate, 누구인지?) 과 인가(Authorize, 어떤것을 할 수 있는지?)를 담당하는 프레임워크를 말합니다. - 스프링 시큐리티에서는 주로 서블릿 필터(filter)와 이들로 구성된 필터체인으로의 구성된 위임모델을 사용합니다. 그리고 보안과 관련해서 체계적으로 많은 옵션을 제공해주기 때문에 개발자 입장에서는 일일이 보안관련 로직을 작성하지 않아도 된다는 장점이 있습니다. # 스프링 시큐리티 특징과 구조 - 보안과 관련하여 체계적으로 많은 옵션을 제공하여 편리하게 사용할 수 있음 - Filter 기반으로 동작하여 MVC와 분리하여 관리 및 동작 - 어노테이션을 통한 간단한 설정 - Spring Security는 기본적으로 세션 & 쿠키방식으로 인증 ![](https://ifh.cc/g/TcKtdd.png) # 스프링 시큐리티 기본구조 ![](https://ifh.cc/g/ACHjaW.png) # 각 필터별 기능 설명 | | | |-|-| |SecurityContextPersistenceFilter|SecurityContextRepository에서 SecurityContext를 로드하고 저장하는 일을 담당함| |LogoutFilter|로그아웃 URL로 지정된 가상URL에 대한 요청을 감시하고 매칭되는 요청이 있으면 사용자를 로그아웃시킴| |UsernamePasswordAuthenticationFilter|사용자명과 비밀번호로 이뤄진 폼기반 인증에 사용하는 가상 URL요청을 감시하고 요청이 있으면 사용자의 인증을 진행함| |DefaultLoginPageGeneratingFilter|폼기반 또는 OpenID 기반 인증에 사용하는 가상URL에 대한 요청을 감시하고 로그인 폼 기능을 수행하는데 필요한 HTML을 생성함| |BasicAuthenticationFilter|HTTP 기본 인증 헤더를 감시하고 이를 처리함| |RequestCacheAwareFilter|로그인 성공 이후 인증 요청에 의해 가로채어진 사용자의 원래 요청을 재구성하는데 사용됨 SecurityContextHolderAwareRequestFilter HttpServletRequest를 HttpServletRequestWrapper를 상속하는 하위 클래스(SecurityContextHolderAwareRequestWrapper)로 감싸서 필터 체인상 하단에 위치한 요청 프로세서에 추가 컨텍스트를 제공함| |AnonymousAuthenticationFilter|이 필터가 호출되는 시점까지 사용자가 아직 인증을 받지 못했다면 요청 관련 인증 토큰에서 사용자가 익명 사용자로 나타나게 됨| |SessionManagementFilter|인증된 주체를 바탕으로 세션 트래킹을 처리해 단일 주체와 관련한 모든 세션들이 트래킹되도록 도움| |ExceptionTranslationFilter|이 필터는 보호된 요청을 처리하는 동안 발생할 수 있는 기대한 예외의 기본 라우팅과 위임을 처리함| |FilterSecurityInterceptor|이 필터는 권한부여와 관련한 결정을 AccessDecisionManager에게 위임해 권한부여 결정 및 접근 제어 결정을 쉽게 만들어 줌| ### 2022-08-04 ## @SpringBootApplication # Spring Initializr - 스프링 부트 프로젝트 생성에 필요한 몇 가지 설정만 입력하면, 자동으로 이것저것 세팅해서 프로젝트를 짠 만들어 주는 놈이다. 스프링 프레임워크를 사용했다면 몇 백 줄이 넘는 xml 세팅 파일을 관리해야 했을 텐데 말이다. 이 마법같은 일을, 스프링 부트는 대체 어떻게 해주는 걸까? # Application.java - 스프링 부트 프로젝트를 만들면, 유일한 프로덕션 소스 코드로서 아래와 같은 내용이 생성된다. ```js mport org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); } } ``` - 어플리케이션을 실행시키면 이 클래스의 main이 실행되는데, run도 run이지만 그 전에 @SpringBootApplication 어노테이션이 많은 일을 해줄 것이라 짐작할 수 있다. # @SpringBootApplication - @SpringBootApplication은 자동 설정을 해주기 위한 어노테이션으로, org.springframework.boot.autoconfigure 패키지에 들어 있다. 코드를 열어 보면 이렇게 적혀 있다. ```js @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Documented @Inherited @SpringBootConfiguration @EnableAutoConfiguration @ComponentScan(excludeFilters = { @Filter(type = FilterType.CUSTOM, classes = TypeExcludeFilter.class), @Filter(type = FilterType.CUSTOM, classes = AutoConfigurationExcludeFilter.class) }) public @interface SpringBootApplication { // ... } ``` - 여기서 중요한 것은 스프링 고유 어노테이션 @SpringBootConfiguration, @EnableAutoConfiguration, @ComponentScan 세 가지다. # @EnableAutoConfiguration - 스프링 부트의 Application Context 설정을 자동으로 수행한다는 어노테이션으로 META-INF/spring.factories에 정의되어 있는 configuration 대상 클래스들을 빈으로 등록 - spring.factories를 열어 보면, 185줄에 달하는 엄청나게 많은 클래스들이 스프링 부트 기본 auto configuration 대상으로 나열이 되어 있다. 이 리스트에 있는 클래스들은 @Configuration 어노테이션이 없어도 자동으로 빈으로 등록된다. # Auto Configuration Mechanism - 이렇게 많은 클래스들이 항상 다 빈으로 등록된다면 엄청난 리소스 낭비가 될 것이다. 따라서 AutoConfigurationImportSelector가 @Conditional 어노테이션 등을 활용해 필터링 작업을 수행한다. # FilteringSpringBootCondition의 match() 메서드 - FilteringSpringBootCondition은 AutoConfigurationImportFilter을 implements 한다. 매치 여부 확인을 요청하는 역할을 하고 OnClassCondition, OnBeanCondition 등의 ConfigurationCondition은 실제로 AutoConfigurationMetadata에 매칭되는 애가 있는지 확인을 한다. 이런 식으로 모든 필터링이 진행되면 필요한&제외할 configuration 정보는 AutoConfigurationEntry에 저장된다. 그리고 마지막으로 AutoConfigurationImportSelector의 selectImports()에서 제외할 configuration을 제거하고, 나머지 entries를 반환하면서 필터링이 마무리된다. ## sql comment # comment가 필요한 이유 - 협업이 필요한 경우 시스템이 커질수록 테이블과 컬럼들이 많아질 때 중복이 생길수도 있고, 무엇을 의미하는지 모를수도 있는 다양한 문제를 관리하기 위해 사용됨. # 코멘트 다는 법 / 수정 / 삭제(오라클) - 테이블 comment 설정하는 법 -> COMMENT ON TABLE [테이블명] IS 'table_comment'; - 컬럼에 comment 설정하는 법 -> COMMENT ON TABLE [테이블명.컬럼명] IS 'column_comment'; - comment 삭제 -> COMMENT ON TABLE [테이블명] IS ""; -> COMMENT ON COLUMN [테이블명.컬럼명] IS ""; - comment 수정 -> COMMENT ON TABLE [테이블명] IS '수정문자열'; -> COMMENT ON COLUMN [테이블명.컬럼명] IS '수정문자열'; # 코멘트 다는 법 / 수정 / 삭제(MYSQL, MariaDB) - 테이블에서 comment 부여할 경우 -> create table 테이블이름 ( 컬럼명 데이터타입 제약조건 comment '컬럼코멘트', 컬럼명 데이터타입 제약조건 comment '컬럼코멘트', ... 컬럼명 데이터타입 제약조건 comment '컬럼코멘트', ); # 테이블 생성 후 comment 생성하거나 수정하기 - 테이블에 코맨트 부여 -> ALTER TABLE [테이블명] COMMENT = '테이블코멘트'; - 컬럼에 코멘트 부여 -> ALTER TABLE [테이블명] MODIFY [컬럼명] [데이터타입][제약조건] COMMENT '컬럼코멘트'; # 테이블 코멘트, 컬럼 코멘트 삭제하기 - ALTER TABLE [테이블명] COMMENT = ""; - ALTER TABLE [테이블명] MODIFY [컬럼명] [데이터타입] [제약조건]; # 예제 ```js # DB 생성 DROP DATABASE IF EXISTS shopingMall; CREATE DATABASE shopingMall; USE shopingMall; CREATE TABLE mallUser( id INT(100) UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, reg_date DATETIME NOT NULL, user_email VARCHAR(50) NOT NULL, user_password VARCHAR(100) NOT NULL, nick_name VARCHAR(20) NOT NULL, cellphoneNo CHAR(20) NOT NULL, authLevel SMALLINT(2) UNSIGNED DEFAULT 3 COMMENT '권한레벨(3=일반,7=관리자)', delStatus TINYINT(1) UNSIGNED NOT NULL DEFAULT 0 COMMENT '탈퇴여부(0=탈퇴전,1=탈퇴)', delDate DATETIME COMMENT '탈퇴날짜' ); INSERT INTO mallUser SET reg_date = NOW(), user_email = "admin@test.com", user_password = "admin", nick_name = "관리자", cellphoneNo = "010-0000-0000", authLevel = 7; INSERT INTO mallUser SET reg_date = NOW(), user_email = "user1@test.com", user_password = "user1", nick_name = "테스트 유저", cellphoneNo = "010-1111-0000"; SELECT * FROM mallUser; CREATE TABLE article( id INT(100) UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, reg_date DATETIME NOT NULL, update_date DATETIME NOT NULL, title VARCHAR(50) NOT NULL, `body` TEXT NOT NULL ); INSERT INTO article SET reg_date = NOW(), update_date = NOW(), title = "품목1", `body` = "품목1"; INSERT INTO article SET reg_date = NOW(), update_date = NOW(), title = "품목2", `body` = "품목2"; SELECT * FROM article; ``` ### 2022-08-03 ## 테일윈드 # 테일윈드란? - Utility-First를 지향하는 CSS 프레임워크입니다. - CSS의 각 속성들을 클래스에 직관적으로 표현함으로써 효율적으로 사용할 수 있게 됩니다. -> 스타일링에 필요한 대부분의 속성들이 클래스 형태로 사전에 정의되어 있고 사용자는 클래스들을 조합해서 사용하면 됩니다. # Utility-First - 미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링 # 테일윈드 적용 전 ```js

ChitChat

You have a new message!

``` # 테일윈드 적용 후 ```js

ChitChat

You have a new message!

``` # 테일윈드 장점 - 1. 클래스의 이름을 고민하지 않아도 됩니다. - 2. 쉽게 반응형 페이지를 구현할 수 있도록 지원합니다 -> 기본적으로 제공하는 BreakPoint가 존재하기 때문에 복잡한 반응형 디자인도 쉽게 구현할 수 있습니다. - 3. 따로 커스터마이징이 가능합니다. -> 기본 정의된 테마를 확장할 수도 있고 새로운 속성을 추가할 수 있습니다. - 4. 반복되는 스타일은 컴포넌트 추상화, 클래스 추상화를 통해서 재사용 가능합니다. - 5. 공식문서가 매우 친절하고 학습 난이도가 낮습니다. - 6. 다크 모드 지원 # 테일윈드 단점 - 1. 코드의 직관성은 좋으나 가시성은 떨어집니다. -> div class="bg-slate-100 rounded-xl p-8 dark:bg-slate-800" -> Headwind와 같은 플러그인( 정렬 기능 )을 활용해 가독성을 높일 수 있습니다. - 2. 미리 정의된 스타일 시트( CSS 파일 )의 용량이 매우 커집니다. -> 클래스명을 재사용하기 때문에 컴포넌트가 많아져도 CSS 파일 용량이 상대적으로 늘어나지 않는 장점은 있습니다. - 3. CSS 속성들의 우선순위 문제 -> Tailwind CSS는 클래스가 출현한 빈도 / 출현한 순서에 상관없이 정의한 순서에 따라 스타일을 구성합니다. -> twin.macro를 통해 class에 선언된 여러 클래스 중 뒤에 위치한 클래스가 최종적으로 적용시킬 수 있습니다. -> v3에서 아직 twin.macro 이슈가 존재합니다. ( 불안정 ) - 4. 특정 프리픽스는 모든 CSS 속성을 지원하지 않습니다. -> hover: / focus: 등 특정 프리픽스는 일부 속성만 사용 가능합니다. -> 모든 속성을 지원하기 위해서는 커스터마이징을 통해 추가 설정을 넣어주면 됩니다. - 5. 다른 CSS 프레임워크 처럼 완성된 스타일 / 컴포넌트를 손쉽게 제공하여 사용할 수는 없습니다. -> 하지만 본인이 필요한 것들만 사용하고 불필요한 부분을 제거하며 직접 구현의 의존도가 높을 경우 더 높은 효율성을 보장합니다. - 6. 분기처리를 하기위한 동적 스타일링을 하기위한 자바스크립트 변수 값 활용이 불가능 합니다. ## 데이터 입력 IOException, BufferedReader, StringTokenizer # 선언과 사용법 ![](https://ifh.cc/g/fova6b.png) - BufferdReader를 사용하기 위해서는 우선 main에 IOException을 해주어야 한다. - System.in은 byte 단위이고 BufferedReader는 char 단위이므로 InputStreamReader를 통해 변환을 해주어야함. - 만약 BufferdReader를 쓸 경우에는 int형 변수로 변환하고 싶을때는 Integer.ParseInt를 써주어야한다. # 단점 - Scanner 클래스에 비해서 사용이 힘든점은 반드시 throws IOException을 해줘야 하고, nextToken()으로 읽어드릴때는 String으로 밖에 읽어드릴수 없어 정수로 읽고싶을때는 Integer.parseInt()로 숫자로된 문자열을 숫자형으로 형변환 시켜줘야 한다. - 라인 한줄을 읽고 다음 라인을 읽고싶을때는 new StringTokenizer(br.readLine()) 을 추가 해야 하고 특정 문자열 단위로 읽고싶을때는 new StringTokenizer(st.nextToken(), 특정문자열)) 뒤에 인자를 추가하면 된다. (default는 공백 이다.) # 사용 ![](https://ifh.cc/g/oJ2bDy.png) ### 2022-08-02 ## 어노테이션 # 어노테이션이란? - 자바 애너테이션(Java Annotation)은 자바 소스 코드에 추가하여 사용할 수 있는 메타데이터의 일종이다. 보통 @ 기호를 앞에 붙여서 사용한다. JDK 1.5 버전 이상에서 사용 가능하다. 자바 애너테이션은 클래스 파일에 임베디드되어 컴파일러에 의해 생성된 후 자바 가상머신에 포함되어 작동한다. # 메타데이터란? - 이터의 대한 속성정보이다, 데이터의 대한 데이터로서 하위 레벨 데이터를 설명 및 기술하는 데이터라고 보면 된다. 도서관을 예시로 들어보자면 표제,저자,주제명,분류기호 등이 포함되어 있는 목록이 메타데이터의 속한다 # 어노테이션의 사용용도 - 1. 코드 문법 에러 체크 - 2. 코드 자동 생성 정보 제공 - 3. 런타임시 특정 기능을 실행하는 정보 제공 # 어노테이션의 사용방식 - Custom Annotaion - Built-in Annotaion # 어노테이션의 분류(요소의 개수에 따라) - Marker Annotation : 요소가 없으면 단순하게 표식으로 사용되는 어노테이션, 컴파일러에게 어떤 의미 전달체로 사용 - Single-value Annotaion : 요소가 한가지인 어노테이션, 단일변수 밖에 없기에 값만을 명시하여 데이터 전달이 가능하다 - Full Annotaion : 요소가 둘 이상의 변수를 갖는 어노테이션, 데이터를 배열 안에 key-value 형태로 전달한다 # Full Annotation - Full Annotaton는 int,double과 같은 기본타입 , String,열거타입,Class타입 그리고 이들의 배열타입을 사용할 수 있다, 엘리먼트의 이름 뒤에는 메소드처럼()를 붙여야되는 규칙이 있다, ```js @Retention(RetentionPolicy.RUNTIME) Public @interface AnnotationName { Stirng elementName1(); int elementName2() default 5; } ``` - 정의된 어노테이션을 사용할때에는 다음과 같이 선언한다. ```js @AnnotationName(elementName1 = "값", elementName2 = 3 ) // String , int or @AnnotationName(elementName1 = "값"); // String 값만 사용하고 싶으면 단일 선언가능 ``` # Built-in Annotaion의 종류 - @Override 메소드가 슈퍼클래스의 메소드를 오버라이드한 메소드라는 정보를 컴파일러에게 전달한다. - @Deprecated 버전업을 하면서 해당 클래스 / 메소드 등이 지원되지 않을 수 있기 때문에 더 이상 사용하지 말라는 경고 메세지를 알려준다. - @SupressWarning 코드의 대한 오류경고가 발생할시 컴파일러에게 명령을 내려 발생하는 경고를 제거한다. - @FunctionalInterface 컴파일러에게 다음의 인터페이스는 함수형 인터페이스라는 것을 알린다, 오바라이딩 어노테이션과 같은 실수방지 용도로 사용된다. ## 스프링부트 # 스프링부트란? - Spring framework 기반 프로젝트를 복잡한 설정없이 쉽꼬 빠르게 만들어주는 라이브러리 - 개발자가 일일히 모든 설정을 할 필요없이 자주 사용되는 기본 설정을 알아서 해준다. 스프링 부트는 실행만 하면 스프링기반의 사용화가 가능한 애플리케이션을 쉽게 만들기 위해 단독 실행 가능하도록 해주는 스프링 프로젝트이다. - 스프링 부트는 스프링을 쉽게 사용할 수 있도록 필요한 여러가지 복잡한 설정을 대부분 미리 세팅 해놓았을 뿐만 아니라 WAS도 별도의 설절없이 바로 웹개발에 들어갈 수 있도록 만들어 놓은 놈이다. # 스프링부트의 장점 - 1. 라이브러리 관리 자동화. -> 스프링부트의 Starter 라이브러리를 등록해서 라이브러리 의존성을 간단히 관리할 수 있다. - 2. 라이브러리 버전 자동관리 기존 스프링 라이브러리는 버전을 직접 입력해야 했지만, 스프링 부트는 pom.xml에 스프링 부트 버전을 입력해놓으면 spring 라이브러리 뿐만 아니라 third party라이브러리들도 호환되는 버전으로 알아서 다운로드 및 관리해준다. - 3. 설정 자동화스프링 부트는 @EnableAutoConfiguration 어노테이션을 선언해서 스프링에서 자주 사용했던 설정들을 알아서 등록해준다. 이 기능이 스프링 부트의 마법이라고 불린다고 한다. - 4. 내장Tomcat.스프링 부트는 WAS인 Tomcat을 내장하고 있다. @SpringBootApplication 어노테이션이 선언되어 있는 클래스의 mail()메소드를 실행하는 것만으로 서버를 구동시킬 수 있다. 내장 톰캣을 사용하기 위한 별도 설정없이 web starter 의존성만 추가해주면 된다. - 5. 독립적으로 실행가능함 JAR 웹 프로젝트라면 war파일로 패키징 해야하는데 스프링 부트는 내장 톰캣을 지원하기 때문에 jar 파일로 패키징해서 웹 애플리케이션을 실행시킬 수 있다 # 스프링 프레임워크 특징 - 제어반전(IoC: Inversion of Control) 기반 : 컨트롤의 제어권이 사용자가 아닌 프레임워크에 있어서 필요에 따라 스프링에서 사용자의 코드를 호출한다. - 의존성 주입(DI: Dependency Injection) 기반 : 각각의 계층이나 서비스들 간에 의존성이 존재할 경우 프레임워크가 서로 연결한다. - 관점 지향 프로그래밍(AOP: Aspect-Oriented Programming) 기반 : 트랜잭션, 로깅, 보안과 같이 여러 모듈에서 공통적으로 사용하는 기능의 경우 해당 기능을 분리하여 관리 가능하다. ### 2022-07-29 ## 백준 2869 자바 달팽이는 올라가고 싶다 ```js 예제 입력에서 주어진 값인 2 1 5 을 위 식에 대입해보면 결과값은 5가 나온다. 하지만 실제로 걸리는 일 수는 4일이다. 이는 "정상에 올라간 후에는 미끄러지지 않는다" 라는 조건 때문이다. 즉, 낮에 만약 정점에 도착하면 더이상 미끄러지지 않는다는 것이다. 다른 예시를 들어보자. up = 3 down = 1 length = 7 이렇게 주어졌을 때와, up = 3 down = 1 length = 8 이렇게 주어진 두 케이스를 보자. 즉 up 일 때 나머지 블럭이 남아있다면 하루가 더 소요된다는 것이다. 그리고 가장 중요한 것이 있다. down 은 항상 up 보다 횟수가 하나 작다. 즉, 이렇게 생각 할 수 있을 것이다. "마지막에 도달할 때의 down 의 경우의 수(길이)를 뺀다." length / ( up - down ) 즉, up 과 down 의 차를 length 에서 나누면 잔여블록과 상관 없이 무조건 몫만 반환하게 된다. 근데, 문제에서 분명히 정점에 도달하면 미끄러지지 않는다는 조건이 붙어있다. 즉, 잔여 블록이 없으면 문제가 안되지만, 만약에 잔여블록이 있다면? 그러면 한 번 다시 미끄러진 다음에 올라가야 한다는 것이다. 이로써 up-down 의 차이 값보다 작은 나머지가 존재하면 다음날 up 때 올라가야하는 경우가 발생한다. 위 예시로 본다면 아래와 같다. ( 7 - 1 ) % ( 3 - 1 ) = 0 ( 8 - 1 ) % ( 3 - 1 ) = 1 전체 길이에서 down 값을 빼고, up - down 을 나누면 둘 다 몫은 3 이다. 1. ( 7 - 1 ) / ( 3 - 1 ) = 3 2. ( 8 - 1 ) / ( 3 - 1 ) = 3 그러나 길이가 8일 경우 down 을 빼고 ( up - down ) 을 했는데 나머지가 생긴다. 이유는 up 과 down 의 차이 값으로 정확히 나누어 떨어지는 것이 아니라 아직 잔여 블럭이 남았기 때문이다. 그렇기 때문에 down 을 한 번 더 하게 되고, 자연스레 up 또한 한 번 더 하게 되는 것이다. 즉, 하루가 더 소요 되는 것이다. 그렇기 때문에 다음과 같이 조건문에 따라 출력값이 달라진다는 것이다. int day = (length - down) / (up - down); // 나머지가 있을 경우 (잔여 블럭이 있을 경우) if( (length - down) % (up - down) != 0 ) { day++; } ※ 최종코드 import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner in = new Scanner(System.in); int up = in.nextInt(); // A int down = in.nextInt(); // B int length = in.nextInt(); // C int day = (length - down) / (up - down); // 나머지가 있을 경우 (잔여 블럭이 있을 경우) if ((length - down) % (up - down) != 0) { day++; } System.out.println(day); } } ``` ## CPU란? # CPU란? - 흔히 컴퓨터의 두뇌라고 불립니다. CPU는 컴퓨터의 많은 처리 장치 중 하나지만 가장 중요한 구성 요소입니다. 바로 컴퓨터를 통한 연산과 수행 그리고 프로그램을 실행하는 컴퓨터의 중요한 부분이니까요. - CPU는 출력을 전달하기 전에 컴퓨터의 RAM에서 입력을 가져와 명령문을 이해하고 처리합니다. - CPU는 컴퓨터와 노트북, 스마트폰, 태블릿, 스마트 TV에 이르기까지 모든 종류의 기기에 존재합니다. 작고 보통 사각형인 이 칩은 장치의 마더보드에 꽂혀있고 다른 하드웨어와 상호 작용하여 컴퓨터를 작동시킵니다. # CPU동작 - 데이터를 가져오기(Fetch) -> 데이터는 이진수(011010..)로 표시되며 RAM에서 CPU로 전달됩니다. 각 실행 작업은 모든 작업의 작은 부분일 뿐이므로 CPU는 다음에 어떤 실행이 나올지 알아야 합니다. - 디코딩(Decoding) -> 일단 명령을 가져와 IR에 저장하면 CPU는 명령 해독기라는 회로로 명령을 전달합니다. 명령어는 CPU의 다른 부분으로 전달하여 작동을 위해 전달되는 신호로 변환됩니다. 이것을 디코딩이라고 합니다. - 실행(Execute) -> 마지막 단계에서 디코딩된 명령문은 완료될 CPU의 관련 부분으로 전송됩니다. 결과는 대개 CPU 레지스터에 기록되며, 이 레지스터는 이후 명령문에 의해 참조될 수 있습니다. 계산기의 메모리 기능처럼 생각하시면 쉽게 이해하실 수 있습니다. # CPU 성능에 대한 이해 - 32비트와 64비트 프로세서는 데이터를 처리할 수 있는 수준으로 구분하시면 됩니다. - CPU는 앞서 말씀드렸듯이 2진수로 이루어진 많은 데이터를 처리해야 합니다. 프로세서는 한 단어의 비트 양에 의해 제한됩니다. 32비트 프로세서가 처음 설계되었을 때, 그 당시에 32비트의 데이터는 엄청나게 큰 데이터였죠. 그러나 무어의 법칙을 통해 CPU는 계속 발전되었고, 컴퓨터는 새로운 64비트 프로세서의 개발을 통해 4GB 이상의 RAM을 처리할 수 있었습니다. 하지만 64비트 프로세서를 사용한다고 모든 데이터를 64비트로 처리할 수는 없습니다. 바로 프로그램에서도 64비트를 지원해야 하기 때문이죠. ### 2022-07-28 ## httpsession session # HttpSession 인터페이스 - 둘 이상의 page request에서 사용자를 식별하거나, 웹 사이트를 방문하고 해당 사용자에 대한 정보를 저장하는 방법을 제공한다. - Servlet container는 HttpSession를 사용하여 HTTP client - HTTP server 간의 세션을 생성한다. 이 때, 세션은 한 명의 사용자에 해당한다. 서버는 Cookie, rewriting URL와 같은 방법으로 세션을 유지하면서 관리할 수 있다. 객체를 세션에 바인딩하여 사용자 정보를 유지할 수 있다 # 관련 메서드 - HttpSession's setAttribute("Key", Value) ->"Key"를 사용하여 객체를 세션에 바인딩한다. -> Value는 값으로 들어올 자료형을 예측할 수 없기에 Object형으로 업캐스팅하여 모두 받아낸다. - HttpSession's getAttribute("Key") -> "Key"로 바인딩된 객체를 돌려주고, "Key"로 바인딩된 객체가 없다면 null를 돌려준다. -> Value는 세션을 저장할 때 Object형으로 업캐스팅을 했으므로, 가져올 땐 원래대로 다운캐스팅 해야 한다. - HttpServletRequest's getSession(true) -> 이미 세션이 있다면 그 세션을 돌려주고, 세션이 없으면 새로운 세션을 생성한다. -> request.getSession()로 쓸 수 있다. - HttpServletRequest's getSession(false) -> 이미 세션이 있다면 그 세션을 돌려주고, 세션이 없으면 null을 돌려준다. # 로그인 할 때 세션 저장하기 예제 ```js public int loginProcess(HttpServletRequest request, UserVO userVO) { // 해당 사용자의 로그인 정보를 가져온다. UserVO userInfo = userMapper.selectUserView(userVO) UserSessionVO userSessionVO = new UserSessionVO(); if (userInfo != null) { // 조회된 정보를 sessionVO에 등록한다. userSessionVO.setUserId(userInfo.getUserId()); userSessionVO.setUserName(userInfo.getUserName()); // 세션을 가져온다. (가져올 세션이 없다면 생성한다.) HttpSession httpSession = request.getSession(true); // "USER"로 sessionVO를 세션에 바인딩한다. httpSession.setAttribute("USER", userSessionVO); } else { return FAIL; } return SUCCESS; } ``` # 저장한 세션 정보를 가져오기 예제 ```js // 세션을 가져온다. (가져올 세션이 없다면 생성한다.) HttpSession httpSession = request.getSession(true); // "USER"로 바인딩된 객체를 돌려준다. ("USER"로 바인딩된 객체가 없다면 null) UserVO userVO = (UserVO) httpSession.getAttribute("USER"); if(userSessionVO != null) { // 사용자 정보를 가져올 수 있다. userVO.getUserId(); // hong userVO.getUserName(); // 홍길동 } ``` ## 레지스터란? - CPU가 요청을 처리하는데 필요한 데이터를 "일시적으로" 저장하는 공간 # 레지스터가 RAM과는 어떠한 다른 역할을 하는가? - 레지스터 역시 RAM의 일종이긴 하지만 RAM과 구분되는 점은 물리적인 구성이 아닌 사용 용도에 따라 달라진다는 점이다. CPU가 하드디스크에 접근하기 위해서는 하드디스크의 데이터를 메모리로 이동시켜 접근해야 한다. 따라서 물리적으로 먼 길을 돌아가는 RAM을 생각하면, 자주 쓰이는 데이터들은 캐시로부터 데이터를 읽어들여 레지스터를 이용해 고속으로 데이터를 처리한다. # 레지스터의 종류 - 1. 범용 레지스터 - 2. 세그먼트 레지스터 - 3. 인덱스 레지스터 - 4. FLAG 레지스터 - 5. EIP 레지스터 # 레지스터별 역활 ```js ① 범용 레지스터(32비트) : 8개의 레지스터로 구성되며, 산술/논리 연산, 오퍼랜드(피연산자)를 저장하거나 포인터 역할함(메모리 주소 저장) ** 64비트의 경우 범용레지스터 EOO->ROO으로 변경됨(ex.RAX), R8~R15 레지스터도 추가됨. - EAX(Accumulator) : 곱셈과 나눗셈 명령에서 자동으로 사용, 함수의 리턴 값이 저장(누적 연산기). - EBX(Base) : 특정 주소를 지정, ESI나 EDI와 결합하여 인덱스에 사용됨. - ECX(Counter) : 반복 명령에서 반복 카운터로 사용, 반복할 횟수를 지정 후 수행됨. - EDX(Data) : EAX와 같이 쓰이며, 입출력 연산에서 간접주소 지정에 쓰임. **하위호환을 위해 X로 나뉘고, X는 다시 H/L 구역으로 나눠짐. **32bit를 사용하고 싶으면 EAX를 사용, 2바이트(16bit)만 쓰고 싶으면 AX를, 1바이트만 사용하고 싶으면 AH/AL 사용 - EBP(Base) : 베이스 포인터, 스택 프레임의 시작 지점 주소가 저장, 사용되고 있는 스택이 소멸되지 않는 동안에는 EBP의 값이 변하지 않는다. 현재 스택 프레임이 소멸되면 이전에 사용되던 스택 프레임을 가리키게 됨. - ESP(Stack) : 스택 포인터, 스택 프레임의 끝 지점 주소가 저장, PUSH/POP 명령어에 따라서 값이 4byte씩 변함 ``` ```js ② 세그먼트 레지스터(16비트) : 윈도우 OS는 프로세서가 메모리에 접근할 때, 세그먼트 레지스터를 사용해 가상 메모리를 물리 메모리로 변환함. //32bit, 64bit 환경이 되어서도 세그먼트 레지스터는 확장되지 X - CS(Code) : 코드 영역을 가리키는 레지스터, 코드의 시작주소를 포함함. (=명령어 주소 지정) - DS(Data) : 데이터 영역을 가리키는 레지스터 (=데이터, 상수) - SS(Stack) : 스택 영역을 가리키는 레지스터 (=지역변수) //위쪽 세개의 레지스터가 주로 쓰임. ES, FS, GS는 추가적인 데이터 세그먼트이다. - ES, FS, GS ``` ```js ③ 인덱스 레지스터(32비트) : 데이터와 명령어들의 오프셋 주소를 갖는다. - EDI(Desination) : 복사/비교할 때 데이터의 주소를 저장됨(읽기). - ESI(Source) : 복사/비교할 때 목적지의 주소가 저장됨(쓰기). ``` ```js ④ FLAG 레지스터(32비트) : CPU의 현재 상태나 동작을 제어하는 비트들로 구성되어있다.. 제어 플레그, 상태 플레그 두 가지로 구분할 수 있다. [제어 플레그] - DF(Direction) : 문자열을 처리할 때, 플래그가 0이면 데이터 이동 주소 증가, 1이면 자동 감소. - IF(Interrupt) : 플래그가 0일 때 외부 인터럽트(일시정지) 요구 무시, 1일 때는 외부 인터럽트 요구 수용. - TF(Trap) : 플래그가 0일 때 기존의 명령 실행, 1일 때는 내부 인터럽트 발생. [상태 플레그] - CF(Carry) : 산술 연산에서 빌림수 발생시 1로 설정. - AF(Adjust) : 16(8)bit 연산에서 빌림수 발생 시 1로 설정. - PF(Parity) : 연산의 결과가 짝수면 1, 홀수면 0으로 설정/ 패리티를 체크. - OF(Overflow) : 부호 "있는" 산술 연산의 결과가 오버플로가 발생했을 때 플래그를 1로 설정. - SF(Sign) : 산술 논리 연산의 결과가 음수일 때 플래그를 1로 설정. - ZF(Zero) : 산수 논리 연산의 결과가 0일 때 플래그를 1로 설정 ``` ```js ⑤ EIP 레지스터(32비트) : Instruction 레지스터라고도 불리며, 다음에 실행할 명령어의 주소를 가리킴. 분기문을 사용해 변경(분기 명령어 : jmp, call, ret) ``` ### 2022-07-27 ## 쓰레드 # 쓰레드란? - 프로그램(프로세스) 실행의 단위이며 하나의 프로세스는 여러개의 쓰레드로 구성이 가능하다. - 하나의 프로세스를 구성하는 쓰레드들은 프로세스에 할당된 메모리, 자원 등을 공유한다. - 프로세스와 같이 실행, 준비, 대기 등의 실행 상태를 가지며 실행 상태가 변할때마다 쓰레드 문맥교환(context switching)을 수행한다. - 각 쓰레드별로 자신만의 스택과 레지스터를 가진다. # 프로세스란? - 실행중인 프로그램이다. 프로그램을 실행하면 OS로부터 실행에 필요한 메모리를 할당받아 프로세스가 된다. - 프로세스는 프로그램을 수행하는 데 필요한 데이터와 메모리 등의 자원 그리고 쓰레드로 구성되어 있다. - 프로세스의 자원을 이용해서 실제로 작업을 수행하는 것이 바로 쓰레드이다. # 프로세스와 쓰레드의 차이 - 프로세스는 운영체제로부터 자원을 할당받는 작업의 단위이고 / 쓰레드는 프로세스가 할당받은 자원을 이용하는 실행의 단위이다. # 스택을 쓰레드마다 독립적으로 할당하는 이유 - 스택은 함수 호출 시 전달되는 인자, 되돌아갈 주소값 및 함수 내에서 선언하는 변수 등을 저장하기 위해 사용되는 메모리 공간이므로 스택 메모리 공간이 독립적이라는 것은 독립적인 함수 호출이 가능하다는 것이고 이는 독립적인 실행 흐름이 가능하게 한다. - 따라서 독립적인 실행 흐름을 위한 최소 조건으로 독립된 스택을 할당한다. # PC Resister를 쓰레드마다 독립적으로 할당하는 이유 - PC 값은 쓰레드가 명령어의 어디까지 수행하였는지를 나타나게 된다. - 쓰레드는 CPU를 할당받았다가 스케줄러에 의해 다시 선점당한다. 그렇기 때문에 명령어가 연속적으로 수행되지 못하고 어느 부분까지 수행했는지 기억할 필요가 있다. 따라서 PC 레지스터를 독립적으로 할당한다. # 쓰레드의 장점 - 쓰레드는 프로세스보다 생성 및 종료시간, 쓰레드간 전환시간이 짧다. - 쓰레드는 프로세스의 메모리, 자원등을 공유하므로 커널의 도움없이 상호간에 통신이 가능하다. ## CGI # CGI란? - 서버와 애플리케이션 간에 데이터를 주고 받는 방식 또는 컨벤션을 CGI라고 한다. ![](https://ifh.cc/g/X4QTfK.png) ![](https://ifh.cc/g/znaYG7.png) # 데이터 통신 과정 - 유저가 웹페이지를 요청했을 때 서버는 요청된 페이지를 보내준다. 하지만 유저가 웹페이지에서 특정 form을 채운 뒤 웹페이지를 보내면 이는 보통 애플리케이션에 의해 처리되어야 한다. 웹서버는 보통 form 정보를 처리해줄 애플리케이션 프로그램에 정보를 보내고, confirmation 메시지를 돌려준다. 예를 들어, 회원가입 정보라면 서버는 이 정보를 애플리케이션에 보내 회원가입 관련 로직이 수행되도록 할 것이고, 애플리케이션은 회원가입 로직을 수행한 뒤 결과를 서버에 다시 보내줄 것이다. 이렇게 서버와 애플리케이션이 소통할 때 CGI 기반으로 만들어진 프로그램이라면 CGI 스펙을 따라 소통이 이루어진다. 그러니까 CGI도 그냥 인터페이스인데, 무엇과 무엇 사이의 인터페이스냐면 웹서버와 요청을 받아 처리해줄 로직을 담고 있는 애플리케이션 프로그램 사이의 인터페이스인 것이다. 웹서버가 특정 언어로 쓰인 구체적인 프로그램이 아니라 이 인터페이스에 의존하고 있기 때문에 어떤 언어든 이 인터페이스를 구현하기만 한다면(CGI 스펙을 따른다면) 웹서버와 소통할 수 있다. # CGI 장점 - 언어, 플랫폼 독립적이다(스펙만 준수하면 된다). - 매우 단순하고 다른 server-side 프로그래밍 언어에 비해 advanced task를 훨씬 쉽게 수행할 수 있다. - 재사용할 수 있는 CGI 코드 라이브러리가 풍부하다. - CGI가 웹서버에서 실행될 때 안전하다. - CGI 코드를 수행하는데 특정 라이브러리가 필요하지 않기 때문에 매우 가볍다. # CGI 단점 - 느리다(요청이 올 때마다 DB connection을 새로 열어야 한다). - HTTP 요청마다 새로운 프로세스를 만들기 때문에 서버 메모리를 많이 잡아먹는다. (servlet은 요청마다 스레드를 만든다.) - 페이지 로드 사이에 데이터가 메모리에 캐시될 수 없다. ### 2022-07-26 ## 브라우저 # 브라우저란? - 인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 하고, 문서 검색을 도와주는 응용 프로그램이다. 우리가 일상생활에서 인터넷을 통해 검색을 할 때 주로 네이버나 다음과 같은 사이트에 접속하여 필요한 정보를 검색한다. 이 때 사이트에 접속할 수 있는 도구를 바로 '브라우저' 혹은 '웹 브라우저' 라고 부른다. # 종류 - 1. Google Chrome - 2. Apple Safari - 3. Naver Whale - 4. Microsoft Edge # 브라우저가 html 파일을 띄우는 과정 - url을 입력하여 해당 웹서버에게 데이터를 요청함. 보통, 먼저 시작점이 되는 index.html 를 다운받고 head 부분에 추가로 요청하는 js, css, 이미지, 외부소스 등을 다운받음. 브라우저의 렌더링 엔진은 전달받은 html 문서를 받아 아래와 같이 실행시킴. ![](https://ifh.cc/g/d554go.png) - 1.html 파싱하여 DOM 트리로 만듦 : 각 요소를 DOM node 로 변환 - 2.Render 트리 만듦 : css/style data 를 파싱(CSSOM)하고 DOM 과 CSSOM 을 합쳐 render tree 로 변환. - 3.Render 트리 배치(layout) : 각 node 를 화면의 정확히 어디 위치에 배치(layout) 시킬지 표시. (게코 엔진에서는 리플로우라고 함) - 4.Render 트리 painting : node 들이 레이아웃에 따라 UI 백엔드에 의해 그려짐. ## 서블릿 # 서블릿이란? - 클라이언트의 요청을 처리하고, 그 결과를 반환하는 Servlet 클래스의 구현 규칙을 지킨 자바 웹 프로그래밍 기술 - 예를 들어, 어떠한 사용자가 로그인을 하려고 할 때. 사용자는 아이디와 비밀번호를 입력하고, 로그인 버튼을 누릅니다. 그때 서버는 클라이언트의 아이디와 비밀번호를 확인하고, 다음 페이지를 띄워주어야 하는데, 이러한 역할을 수행하는 것이 바로 서블릿(Servlet)입니다. 그래서 서블릿은 자바로 구현 된 *CGI라고 흔히 말합니다. # 서블릿 특징 - 클라이언트의 요청에 대해 동적으로 작동하는 웹 어플리케이션 컴포넌트 - html을 사용하여 요청에 응답한다. - Java Thread를 이용하여 동작한다. - MVC 패턴에서 Controller로 이용된다. - HTTP 프로토콜 서비스를 지원하는 javax.servlet.http.HttpServlet 클래스를 상속받는다. - UDP보다 처리 속도가 느리다. - HTML 변경 시 Servlet을 재컴파일해야 하는 단점이 있다. # 서블릿 컨테이너 - 클라이언트의 요청(Request)을 받아주고 응답(Response)할 수 있게, 웹서버와 소켓으로 통신하며 대표적인 예로 톰캣(Tomcat)이 있습니다. # 서블릿 컨테이너 역활 1. 웹서버와의 통신 지원서블릿 컨테이너는 서블릿과 웹서버가 손쉽게 통신할 수 있게 해줍니다. 일반적으로 우리는 소켓을 만들고 listen, accept 등을 해야하지만 서블릿 컨테이너는 이러한 기능을 API로 제공하여 복잡한 과정을 생략할 수 있게 해줍니다.그래서 개발자가 서블릿에 구현해야 할 비지니스 로직에 대해서만 초점을 두게끔 도와줍니다. 2. 서블릿 생명주기(Life Cycle) 관리 서블릿 컨테이너는 서블릿의 탄생과 죽음을 관리합니다. 서블릿 클래스를 로딩하여 인스턴스화하고, 초기화 메소드를 호출하고, 요청이 들어오면 적절한 서블릿 메소드를 호출합니다. 또한 서블릿이 생명을 다 한 순간에는 적절하게 Garbage Collection(가비지 컬렉션)을 진행하여 편의를 제공합니다. 3. 멀티쓰레드 지원 및 관리 서블릿 컨테이너는 요청이 올 때 마다 새로운 자바 쓰레드를 하나 생성하는데, HTTP 서비스 메소드를실행하고 나면, 쓰레드는 자동으로 죽게됩니다. 원래는 쓰레드를 관리해야 하지만 서버가 다중 쓰레드를생성 및 운영해주니 쓰레드의 안정성에 대해서 걱정하지 않아도 됩니다. 4. 선언적인 보안 관리 서블릿 컨테이너를 사용하면 개발자는 보안에 관련된 내용을 서블릿 또는 자바 클래스에 구현해 놓지 않아도 됩니다.일반적으로 보안관리는 XML 배포 서술자에 다가 기록하므로, 보안에 대해 수정할 일이 생겨도 자바 소스 코드를 수정하여 다시 컴파일 하지 않아도 보안관리가 가능합니다. # 서블릿 동작 방식 ![](https://ifh.cc/g/WD6bsT.png) - 사용자(클라이언트)가 URL을 입력하면 HTTP Request가 Servlet Container로 전송합니다. - 요청을 전송받은 Servlet Container는 HttpServletRequest, HttpServletResponse 객체를 생성합니다. - web.xml을 기반으로 사용자가 요청한 URL이 어느 서블릿에 대한 요청인지 찾습니다. - 해당 서블릿에서 service메소드를 호출한 후 클리아언트의 GET, POST여부에 따라 doGet() 또는 doPost()를 호출합니다. - doGet() or doPost() 메소드는 동적 페이지를 생성한 후 HttpServletResponse객체에 응답을 보냅니다. - 응답이 끝나면 HttpServletRequest, HttpServletResponse 두 객체를 소멸시킵니다. ### 2022-07-25 ## @JsonIgnore / JsonIgnoreProperties # JsonIgnore - 특정 JSON 비노출 처리하기 ```js @Data //getter,setter 사용 @AllArgsConstructor public class User { private Integer id; @Size(min=2,message="Name은 두가지 이상 전달해 주세요") //최소 길이 2개 이상 private String name; @Past //미래 데이터를 쓸수가 없다는 제약조건 private String joinDate; @JsonIgnore private String password; @JsonIgnore private String ssn; } ``` # 결과값 ![](https://ifh.cc/g/H5b19q.png) - password와, ssn 객체에 @JsonIgnore을 선언해본다. - 결과로, 특정 도메인의 값이 노출 되지 않았다. ```js @JsonIgnore @JsonProperty("Name") private String myName; - myName 프로퍼티에 @JsonProperty("myName")를 추가함으로서 에러를 던지지 않으면서 JSON의 직렬, 역직렬화 할때 myName필드를 무시할 수 있습니다. @JsonIgnore(false) private String myName; - @JsonIgnore의 속성값으로(false)를 줄 수 있습니다 ``` # JsonIgnoreProperties ```js package com.example.restfulwebservice.User; import com.fasterxml.jackson.annotation.JsonIgnoreProperties; import lombok.AllArgsConstructor; import lombok.Data; import javax.validation.constraints.Past; import javax.validation.constraints.Size; @Data @AllArgsConstructor @JsonIgnoreProperties(value = {"password"}) public class User { private Integer id; @Size(min=2,message="Name은 두가지 이상 전달해 주세요") private String name; @Past private String joinDate; private String password; private String ssn; } ``` # 결과값 ![](https://ifh.cc/g/QXcVYH.png) - @JsonIgnoreProperties에서 특정 프로퍼티 값을 배열 형태로 지정해주면 비노출 처리 가능하다. ## HttpServletRequest, HttpServletResponse에 대한 이해 # 웹 브라우저 -> WAS 전송과정 ![](https://ifh.cc/g/l8nkra.png) # WAS가 웹브라우져로부터 Servlet요청을 받으면 - 1.요청을 받을 때 전달 받은 정보를 HttpServletRequest객체를 생성하여 저장 2.웹브라우져에게 응답을 돌려줄 HttpServletResponse객체를 생성(빈 객체) 3.생성된 HttpServletRequest(정보가 저장된)와 HttpServletResponse(비어 있는)를 Servlet에게 전달 # HttpServletRequest - 1.Http프로토콜의 request 정보를 서블릿에게 전달하기 위한 목적으로 사용 2.Header정보, Parameter, Cookie, URI, URL 등의 정보를 읽어들이는 메소드를 가진 클래스 3.Body의 Stream을 읽어들이는 메소드를 가지고 있음 # HttpServletResponse - 1.Servlet은 HttpServletResponse객체에 Content Type, 응답코드, 응답 메시지등을 담아서 전송함 # Header 정보확인하기 ![](https://ifh.cc/g/k2prhj.png) # URL(Uniform Resource Locator)과 URI(Uniform Resource Identifier) - URL(Uniform Resource Locator) : 실제 파일의 위치 ex) http://exam/work/url.htm (직접적으로 파일의 경로를 보여줌) - URI(Uniform Resource Identifier) : 파일의 위치를 알 수 있는 식별자 ex) http://exam/uri (rewrite 기술을 사용하여 만든 의미있는 식별자) request 정보안에 담겨있음 ![](https://ifh.cc/g/BBY7py.png) ### 2022-07-22 ## List # List 사용 예 - 특정 컬럼을 내림차순 / 오름차순 기준으로 list를 findall로 전부 보여주고 싶을때 사용 ```js [QuestionService] @Autowired private QuestionRepository questionRepository; public Page getList(int page) { List sorts = new ArrayList<>(); sorts.add(Sort.Order.desc("createDate")); Pageable pageable = PageRequest.of(page, 10,Sort.by(sorts)); return this.questionRepository.findAll(pageable); } ------------------------------------------------------------ [QuestionController] @Autowired private QuestionService questionService; @RequestMapping("/list") public String showQuestions(Model model, @RequestParam(value="page", defaultValue = "0") int page) { Page paging = this.questionService.getList(page); model.addAttribute("paging", paging); return "question_list"; } ----------------------------------------------------------- [question_list.html]

번호	제목	작성일시

질문 등록하기

``` ## CSRF # CSRF란? - 웹 어플리케이션 취약점 중 하나로 사용자가 자신의 의지와 무관하게 공격자가 의도한 행동을 하여 특정 웹페이지를 보안에 취약하게 한다거나 수정, 삭제 등의 작업을 하게 만드는 공격방법을 의미합니다. # 공격방법 - 이러한 공격을 하기 위하여 해커는 우선 공격을 할 사이트를 먼저 분석합니다. 예를 들어, 나무위키의 경우에 토론은 namu.wiki/topic/ 이라고 시작하며 뒤에 숫자가 붙는 형식인데 이 뒤의 숫자에 패턴이 있습니다.(실제론 토론이 개설된 순서대로 붙는 일련번호이다.) 그러면 이 패턴을 이용하여 일반적인 방법으로 접근할 수 없는 페이지를 오픈 한다든지, 개발에 사용되고 실제로 사용하지 않는 샘플 페이지를 찾아낸다든지 이러한 방법이 가능합니다. 그것이 아니라 웹페이지가 독자적 개발이 아닌 외부에서 이미 개발된 웹 어플리케이션을 사서 조금 수정한 것이라면 공격자는 경우에 따라서 해당 웹 어플리케이션을 구매하여 개인 서버에 설치를 합니다. 그 다음에 공격 가능 패턴을 분석합니다. 주로 공격자들이 찾는 것은 사용자 패스워드 변경페이지나 타 시스템과 로그인 연동 주소 패턴같은 인증 관련된 취약점을 찾습니다. 그 다음에 여기서 나온 취약점을 이용하여 공개된 게시판이나 메일을 이용하여 사용자가 해당 링크를 열게 만들면 공격이 완료됩니다. # 예시 - 만일, A라는 사이트의 사용자 개인 비밀번호 변경을 하는 주소 패턴이 abc.com/user.do?cmd=user_passwd_change&user=admin&newPwd=1234 라고 한다면 이러한 링크를 사용자의 메일로 XSS 형태로 보내고 메일을 읽게되면 해당 사용자의 패스워드가 1234로 초기화 됩니다. 이를 관리자에게 보내서 일반계정을 관리자 계정으로 바꾸도록 한다든지, 아니면 관리자 계정 패스워드를 바꾸는데 이용한다면 해당 사이트의 모든 정보가 해킹당하는데는 오랜 시간이 걸리지 않습니다. 참고로, img 태그도 GET 메소드를 사용해서 보내는 것이기 때문에 img를 이용할 수도 있습니다. 대부분의 사이트는 img를 필터링하지 않으므로, 혹은 필터링하지 못하므로 유용한 방법이 될 수 있습니다. 예를 들면 나무위키의 경우 `

` 와 같은 코드를 넣어주면 해당 문서를 볼 경우 로그아웃이 됩니다. 이는 나무위키뿐만이 아닌 대부분의 사이트의 문제입니다. # 방어방법 - 방어 방법 중 가장 기초적인 방법은 Referer 체크를 하는 방법이 있습니다. Referer는 HTTP 헤더에 있는 정보로 해당 요청이 요청된 페이지의 정보를 가지고 있는데 해당 정보는 Paros나 Zap, fiddler같은 프로그램으로 조작이 가능하지만 방법이 간단하여 소규모 웹사이트에 주로 이용되는 방법입니다. 그 외에는 패스워드 변경 같은 민감한 정보를 다룰 때에는 세션에 임의난수(토큰)를 발급하여, 해당 난수가 없는 상황에서 해당 동작들이 이루어지면 요청을 거부하는 방법을 통하여 사용자가 정말로 변경을 의도하는 경우에만 변경을 시켜주는 방법, 변경 시에 CAPTCHA를 이용하여 캡챠 인증코드가 없거나 틀리면 거부하도록 하는 방법 등이 이용되고 있습니다. 또한 GET/POST 등을 구분하여 주는 것 역시 유용합니다. img 태그 등을 이용할 경우 GET 요청으로 들어오게 될 것이고, 반면 흔히 하듯 form을 이용해 값을 받을 경우 경우 POST를 이용하게 되는 경우가 많기 때문입니다. 위의 방법들을 일일이 적용하기 귀찮다면, 대개 프레임워크에서 위의 방법들을 통합한 플러그인 등을 제공하는 경우들이 많으니 찾아보도록 합니다. 또한 form 대신 ajax(CORS가 비활성화되어 있어야 함)를 통한 JSON API만 사용하는 방법이 있습니다. ### 2022-07-21 ## MVC패턴 # MVC패턴이란?(Model, View, Controller의 약자) - 디자인 패턴이란 프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리해서 상황에 따라 간편하게 적용해서 쓸 수 있는 것을 정리하여 특정한 "규약"을 통해 쉽게 쓸 수 있는 형태로 만든 것을 말합니다. 어떠한 앱을 만든다고 한다면..그 앱을 유지보수를 하고 또 다른이들과 공유를 하면서 만들어야 할 떄 좀 더 쉽고 깔끔하게 만들 수 있는 방법을 우리는 고안해야 됩니다. 만약 이러한 방법들을 명확히 하지 않는다면.. 우리는 클래스 함수들을 일일히 다 만들어야 하게 될 겁니다. 라이브러리나 프레임워크가 그에 따른 예입니다. 예를 들어 그냥 jQuery를 이용한다면 $('#lucid')로 DOM을 선택할 수 있는 것을 그냥 순수Javascript를 사용한다면 document.getElementsByid('lucid')로 길게 써가며 찾아야 하겠죠. 예를 들어 어떠한 data를 만들고 이 data를 수정할 로직을 짠다. 그리고 그 data를 보여주는 부분을 만들 때 이거 하나하나가 로직이 분리가 안되있고 한꺼번에 정의가 되어있다면? 나중에 유지보수하기가 힘들겁니다. 그걸 "돕기" 위해 디자인패턴이라는게 나오는 것이며 이렇듯 "좀 더 쉽고 편리하게" 사용할 수 있게 만든 특정한 방법들을 디자인 패턴이라고 합니다. 그 디자인 패턴이라는 것은 스트래티지 패턴, 옵저버 패턴 등등 정말 여러가지가 있고 그 중에 하나가 바로 MVC패턴입니다. ![](https://ifh.cc/g/ZOq9gw.png) # 모델 - 애플리케이션의 정보, 데이타를 나타냅니다. 데이타베이스, 처음의 정의하는 상수, 초기화값, 변수 등을 뜻합니다. 또한 이러한 DATA, 정보들의 가공을 책임지는 컴포넌트를 말합니다. # 특징 - 1. 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 한다. - 2. 뷰나 컨트롤러에 대해서 어떤 정보도 알지 말아야 한다. - 3. 변경이 일어나면, 변경 통지에 대한 처리방법을 구현해야만 한다. # 뷰 - input 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타냅니다. 다시 말해 데이터 및 객체의 입력, 그리고 보여주는 출력을 담당합니다. 데이타를 기반으로 사용자들이 볼 수 있는 화면입니다. 뷰에서는 다음과 같은 규칙들이 있습니다. #특징 - 1. 모델이 가지고 있는 정보를 따로 저장해서는 안된다. - 2. 모델이나 컨트롤러와 같이 다른 구성요소들을 몰라야 된다. - 3. 변경이 일어나면 변경통지에 대한 처리방법을 구현해야만 한다. # 컨트롤러 - 데이터와 사용자인터페이스 요소들을 잇는 다리역할을 합니다. 즉, 사용자가 데이터를 클릭하고, 수정하는 것에 대한 "이벤트"들을 처리하는 부분을 뜻합니다. 컨트롤러 또한 다음과 같은 규칙을 이해해야 합니다. # 특징 - 1. 모델이나 뷰에 대해서 알고 있어야 한다. - 2. 모델이나 뷰의 변경을 모니터링 해야 한다. # mvb 패턴을 사용해야 하는 이유 - 사용자가 보는 페이지, 데이터처리, 그리고 이 2가지를 중간에서 제어하는 컨트롤, 이 3가지로 구성되는 하나의 애플리케이션을 만들면 각각 맡은바에만 집중을 할 수 있게 됩니다. 공장에서도 하나의 역할들만 담당을 해서 처리를 해서 효율적이게 됩니다. 여기서도 마찬가지입니다. ## IntelliJ 테스트 코드 실행 시 "Execution failed for task ':test'." 오류 # 문제상황 ```js Controller의 테스트 클래스를 추가하여 테스트 코드를 작성한 이후, 해당 메서드를 JUnit을 사용하여 검증하고자 하였을 때 아래와 같이 오류가 발생하였다. Execution failed for task ':test'. There were failing tests. See the report at: file:///{프로젝트 경로}/index.html Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights. ``` # 해결 ![](https://ifh.cc/g/SfAw5G.png) [File] > [Settings] > [Build, Execution, Deployment] > [Build Tools] > [Gradle] 메뉴로 이동한 뒤, 아래 사진에 표시된 "Run tests using:" 옵션에 대하여 "IntelliJ IDEA" 를 선택하여 적용한다. ![](https://ifh.cc/g/ZLvcAj.png) ### 2022-07-20 ## RequestParam # RequestParam 을 어떻게 받을까? - 일반적인 경우 : @RequestMapping의 GET 메서드 또는 @GetMapping에서 사용됨 ```js @Slf4j @Controller public class HelloController { @ResponseBody @GetMapping("/hello") public String hello(@RequestParam String username, @RequestParam int age) { log.info("username = {}", username); log.info("age = {}", age); return "ok"; } } ``` - @PostMapping으로 받는 경우 : @RequestParam을 써서 받을 수 있는 것은 HTML Form 태그에서 method 가 POST 전송일 때는 @RequestParam으로 값을 받을 수 있다. 그 이외의 값은 모두 Http body의 메시지로 받는다. ```js [question.detail]

----------------------------------------- @GetMapping("/create") public String questionCreate(@RequestParam String subject, @RequestParam String content) { return "question_form"; } ``` # 정리 - @RequestParam을 정리해보면 요청 매개변수에 들어있는 기본 타입 데이터를 메서드 인자로 받아올 수 있다. 여기서 요청 매개변수란 URL 요청의 localhost:8080?username=value&age=value 의 쿼리 매개변수와 HTML 태그의 Form 데이터가 해당한다. ## @NotNull, @NotEmpty, @NotBlank의 차이점과 특징 # @NotNull - 우선 @NotNull 은 위에 살펴본 것 처럼 이름 그대로 Null만 허용하지 않습니다. 따라서, "" 이나 " " 은 허용하게 됩니다. 그렇기 때문에 만약 "" (초기화된 String) )이나 " " (공백) 을 허용하지 않는다면 사용해서는 안됩니다. Null 이 들어오게 되면, 로직에 예상치 못한 오류가 발생하거나 문제가 생길 경우 사용해야 합니다. 즉, 초기화나 공백의 값이 들어와 저장은 되야하지만 Null 로 들어온 경우 오류가 나는 변수를 받을 때 사용하면 됩니다. ```js @Test public void 사용자_이름_DTO_NotNull_체크() { //given UserLoginRequestDto user = UserLoginRequestDto.builder() .name(null) .email("") .phone(" ") .build(); //when Set> violations = validator.validate(user); //then assertThat(violations.size()).isEqualTo(1); } name, email, phone 에 모두 @NotNull 이 걸려있다고 가정했을 때, 위의 테스트를 실행하면 통과를 하게됩니다. name 은 null 이 들어왔기 때문에 violations 에 검증이 되어 잘못된 값이라 판단하여 추가가 되고, email 같은 경우 ""(empty) 는 null 이 아니기 때문에 violations 에 추가되지 않게 됩니다. phone 의 경우 " "(blank) 이기 때문에 email 과 마찬가지로 null 이 아니기 때문에 violations 에 추가되지 않습니다. ``` # @NotEmpty - @NotEmpty 는 null 과 "" 둘 다 허용하지 않게 합니다. @NotNull 에서 "" validation 이 추가된 것입니다. 즉, @NotEmpty 는 null 과 "" 은 막히되, " " 은 허용이 됩니다. ```js @Test public void 사용자_이름_DTO_NotNull_체크() { //given UserLoginRequestDto user = UserLoginRequestDto.builder() .name(null) .email("") .phone(" ") .build(); //when Set> violations = validator.validate(user); //then assertThat(violations.size()).isEqualTo(2); } name, email, phone 에 모두 @NotEmpty 가 걸려있다고 가정했을 때, 위의 테스트를 실행하면 통과를 하게됩니다. name 은 null 이 들어왔기 때문에 violations 에 검증이 되어 잘못된 값이라 판단하여 추가가 되고, email 같은 경우 ""(empty) 는 ""(empty) 이기 때문에 violations 에 추가가 됩니다. phone 의 경우 " "(blank) 이기 때문에 null 과 empty 가 아니기 때문에 violations 에 추가되지 않습니다. ``` # @NotBlank - @NotBlank 는 null 과 "" 과 " " 모두 허용하지 않습니다. @NotEmpty 에서 " " validation 이 추가된 것입니다. 즉, 세개 중 가장 validation 강도가 높은 것으로,@NotBlank 는 null 과 "" 과 " " 모두 허용하지 않습니다. ```js @Test public void 사용자_이름_DTO_NotNull_체크() { //given UserLoginRequestDto user = UserLoginRequestDto.builder() .name(null) .email("") .phone(" ") .build(); //when Set> violations = validator.validate(user); //then assertThat(violations.size()).isEqualTo(3); } name, email, phone 에 모두 @NotBlank 가 걸려있다고 가정했을 때, 위의 테스트를 실행하면 통과를 하게됩니다. name 은 null 이 들어왔기 때문에 violations 에 검증이 되어 잘못된 값이라 판단하여 추가가 되고, email 같은 경우 ""(empty) 는 ""(empty) 이기 때문에 violations 에 추가가 됩니다. phone 의 경우 " "(blank) 이기 때문에 violations 에 추가가 되어 총 3개가 violations 에 추가가되어 성공하게 됩니다 . ``` # 결론 - Bean Validation 의 사용방법, 예외 처리하는 방법, 검증(테스트) 방법에 대해 설명하였습니다. 총 3개의 Validatior 는 사용법과 기능이 유사하기 때문에 쉽게 혼용되거나 잘못 사용될 수 있습니다. 따라서, 해당 DTO 에 대한 테스트를 Validator 에 따라 null , "", " " 에 구분하여 나눠서 추가해야 합니다. ### 2022-07-19 ## Converter # Cover를 사용할 떄 - 컨버터를 사용하면 엔티티의 데이터를 변환해서 데이터베이스에 저장할 수 있다. 우리 회사에서는 개인 정보와 같이 암호화/복호화 해야 되는 정보에 어노테이션이 붙어있다. ## 예제 - JPA를 사용하면 자바의 boolean 타입은 방언에 따라 다르지만 데이터베이스에 저장될 때 0 또는 1인 숫자로 저장된다. 그런데 데이터베이스에 숫자 대신 문자 Y 또는 N으로 저장하고 싶다면 컨버터를 사용하면 된다. ```js [Answer] @Getter @Setter @Entity @JsonIdentityInfo(generator = ObjectIdGenerators.IntSequenceGenerator.class) public class Answer { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Integer id; @Column(columnDefinition = "TEXT") private String content; private LocalDateTime createDate; private Boolean replyLike; @ManyToOne private Question question; @Converter class BooleanToYNConverter implements AttributeConverter{ @Override public String convertToDatabaseColumn(Boolean attribute){ return (attribute != null && attribute) ? "Y" : "N"; } @Override public Boolean convertToEntityAttribute(String dbData){ return "Y".equals(dbData); } } } -------------------------------------------------- [AnswerService] public void setLike(Integer answerId) { Answer answer = answerRepository.findById(answerId).get(); if(answer.getReplyLike() == true) { answer.setReplyLike(false); } else { answer.setReplyLike(true); } this.answerRepository.save(answer); } 이처럼 Converter를 통해 replyLike 변수를 설정하고 db에서 가져온 후 만약 true이면 false를 fasle이면 true로 변환 하면서 껏다켰다를 반복한다. ``` ## PostMapping # PostMapping - POST 통신을 할때는 @RequestMapping(method=RequestMethod.POST, ...) 를 이용하거나 @PostMapping을 이용한다. # 예제 ```js [AnswerController.java] @PostMapping("/create/{id}") public String createAnswer(Model model, @PathVariable("id") Integer id ,@RequestParam String content) { Question question = this.questionService.getQuestion(id); //질문만들기 this.answerService.create(question, content); return String.format("redirect:/question/detail/%s",id); } @PostMapping("/like/{questionId}/{answerId}") public String createAnswer(@PathVariable("questionId") Integer questionId, @PathVariable("answerId") Integer answerId) { this.answerService.setLike(answerId); return String.format("redirect:/question/detail/%s", questionId); } ----------------------------------- [question_detail.html] ``` # @RequestBody - 만약, 함께 받아야하는 데이터가 있다면, @RequestBody를 활용한다. # 예제 ```js [SearchVo.java] public class SearchVo { private String username; private String email; private int page; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public int getPage() { return page; } public void setPage(int page) { this.page = page; } @Override public String toString() { return "SearchParamVO{" + "username='" + username + '\'' + ", email='" + email + '\'' + ", page=" + page + '}'; } } -------------------------------------- [PostController.java] @RestController @RequestMapping("api") public class PostController { ... @PostMapping(value = "/search") public SearchVo search(@RequestBody SearchVo searchVo) { return searchVo; } } 주의할점! - GET 통신에서는 @RequestParam을 사용하지만, POST 통신에서는 @RequestBody를 사용한다. ``` ### 2022-07-18 ## thml 의 th: 관련 명령어 # 데이터 바인딩 - th:text, th:value, th:placeholder - p, span, div 등의 태그에서 데이터를 텍스트로 바인딩할 때 사용한다. th:utext 라는 속성도 있는데, utext의 경우 html 태그를 escape처리 하지 않기 때문에 보안에 취약해서 사용할 때 주의해야 한다. ```js @RequestMapping("selectStudentInfo") ModelAndView selectStudentInfo() { ModelAndView mav = new ModelAndView("/selectStudentInfo"); Student student = new Student(); student.setId("210000001"); student.setName("Anne Marie"); student.setAge(29); /** thymeleaf에서 사용할 object명, object를 ModelAndview에 넣어준다. */ mav.addObject("student", student); return mav; }

``` # 조건문 - th:if, th:unless - 조건문을 사용할 때 else 대신 unless를 사용한다. 주의할 점은 if문의 조건식과 unless의 조건식을 동일하게 해주어야 한다. ```js

합격입니다!!!

불합격.. 좀 더 노력하세요!

``` # form - th:object ```js @RequestMapping("selectStudentInfo") ModelAndView selectStudentInfo() { ModelAndView mav = new ModelAndView("/selectStudentInfo"); Student student = new Student("210000001", "Anne Marie", 29); List studentList = new ArrayList<>(); studentList.add(student); studentList.add(new Student("210000002", "Lukas Graham", 33)); studentList.add(new Student("210000003", "Christina Grimmie", 22)); /** thymeleaf에서 사용할 object명, object를 ModelAndview에 넣어준다. */ mav.addObject("studentList", studentList); return mav; } ``` # 반복문 - th:each, 상태변수 사용(index, count 등) - 리스트 객체를 반복할 때 사용한다. - th:each를 사용할 때 기본적으로 status 변수를 제공해주고 이를 이용하여 index나 count 등의 값을 사용할 수 있다. 기본적으로 변수명Stat 로 사용할 수 있으며, 변수명을 다르게 사용하고 싶을 경우 직접 명시할 수 있다. index의 경우 0부터 시작한다. ```js @RequestMapping("selectStudentInfo") ModelAndView selectStudentInfo() { ModelAndView mav = new ModelAndView("/selectStudentInfo"); Student student = new Student("210000001", "Anne Marie", 29); List studentList = new ArrayList<>(); studentList.add(student); studentList.add(new Student("210000002", "Lukas Graham", 33)); studentList.add(new Student("210000003", "Christina Grimmie", 22)); /** thymeleaf에서 사용할 object명, object를 ModelAndview에 넣어준다. */ mav.addObject("studentList", studentList); return mav; }

210000001 : Anne Marie 나이: 29 210000002 : Lukas Graham 나이: 33 210000003 : Christina Grimmie 나이: 22 ``` ## AllArgsConstructor / NoArgsConstructor # AllArgsConstructor - 필드에 쓴 모든생성자만 만들어줌 ```js @NoArgsConstructor @RequiredArgsConstructor @AllArgsConstructor public class User { private Long id; @NonNull private String username; @NonNull private String password; private int[] scores; } ``` # NoArgsConstructor - 기본 생성자를 만들어줌 ```js import lombok.NoArgsConstructor; @NoArgsConstructor public class Member { private String email; private String name; private int age; } public class Member { private String email; private String name; private int age; public Member() { } } @Test void noArgsConstructor() { Member member = new Member(); assertThat(member).isNotNull(); } ``` ### 2022-07-15 ## @JsonIdentityInfo # JsonIdentityInfo란? - N:M관계로 @OneToMany, @ManyToOne 양방향 관계 설정 후, 데이터를 불러오는 과정에서 무한재귀로 데이터를 불러와서 StackOverFlow가 되는 현상이 발생할 때 양방향 관계 엔티티 사이클 방지 # 예제 ```js package com.mysite.sbb.Domain; import com.fasterxml.jackson.annotation.JsonIdentityInfo; import com.fasterxml.jackson.annotation.ObjectIdGenerators; import lombok.Getter; import lombok.Setter; import javax.persistence.*; import java.time.LocalDateTime; @Getter @Setter @Entity @JsonIdentityInfo(generator = ObjectIdGenerators.IntSequenceGenerator.class) public class Answer { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Integer id; @Column(columnDefinition = "TEXT") private String content; private LocalDateTime createDate; @ManyToOne private Question question; } ------------------------------------------------ package com.mysite.sbb.Domain; import com.fasterxml.jackson.annotation.JsonIdentityInfo; import com.fasterxml.jackson.annotation.ObjectIdGenerators; import lombok.Getter; import lombok.Setter; import javax.persistence.*; import java.time.LocalDateTime; import java.util.List; @Getter @Setter @Entity @JsonIdentityInfo(generator = ObjectIdGenerators.IntSequenceGenerator.class) public class Question { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Integer id; @Column(length = 200) private String subject; @Column(columnDefinition = "TEXT") private String content; private LocalDateTime createDate; @OneToMany(mappedBy = "question", cascade = CascadeType.REMOVE) private List answerList; } 이처럼 Question과 Answer이 서로 정보를 주고받는 함수일때 계속 불러오는 재귀현상이 발생한다. 이럴때 @JsonIdentityInfo사용하면 반복되는 사이클을 방지할 수 있다. ``` ## Thymeleaf # Thymeleaf란? - Thymeleaf는 웹뿐만 아니라 다른 환경을 위한 최신의 서버-사이드 자바 Template Engine이며 , HTML, CSS, XM, JS 및 Text까지 수용(이는 다른 템플릿 엔진과 동일)한다. 타임리프의 주 목표는 유지관리가 쉬운 템플릿 생성 방법을 제공하는 것이며, 실제로 템플릿에 영향을 주지 않는 (HTML의 구조를 깨지 않는, 기존 HTML 코드를 변경하지 않고 덧붙이는 코드) 방식을 사용한다. 즉, Natural Templates 개념을 기반으로 한다. 이를 통해 디자인 팀과 개발 팀간 갈등, 격차 해소가 기대된다. # Thymeleaf 사용방식 - Thymeleaf를 사용하는 방법은 4가지가 있습니다. 변수식으로 사용하는 ${}와 메세지방식 #{}, 객체변수식인 *{}, 링크방식 @{}이 있습니다. # Thymeleaf 사용(build.gradle) ```js plugins { id 'org.springframework.boot' version '2.7.1' id 'io.spring.dependency-management' version '1.0.11.RELEASE' id 'java' } group = 'com.mysite' version = '0.0.1-SNAPSHOT' sourceCompatibility = '17' configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral() } dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' developmentOnly 'org.springframework.boot:spring-boot-devtools' runtimeOnly 'mysql:mysql-connector-java' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect' } tasks.named('test') { useJUnitPlatform() } implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-web' 이처럼 추가해주면 된다. ``` # Thymeleaf 사용(작업명.yml) ```js server: port: 8082 spring: thymeleaf: cache: false prefix: file:src/main/resources/templates/ datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/sbb?useUnicode=true&characterEncoding=utf8&autoReconnect=true&serverTimezone=Asia/Seoul&useOldAliasMetadataBehavior=true&zeroDateTimeNehavior=convertToNull username: sbsst password: sbs123414 jpa: properties: hibernate: show_sql: true format_sql: true use_sql_comments: true logging: level: org: hibernate: type: descriptor: sql: trace 이처럼 (작업명.yml)파일에 추가 ``` # Thymeleaf 사용(작업명.html) ```js 질문 상세

thymeleaf html 파일 사용시에 위에 써주면 사용가능 ``` ### 2022-07-14 ## 블록체인을 '채굴'한다는게 뭔가요? # 블록체인이 등장하기 전 - 온라인 거래들은 가운데에 서버를 두고 모든 거래들이 진행되고 내역들이 장부에 저장되기 때문에 중앙 서버를 해킹하여 장부를 조작하거나 돈을 빼가거나 시스템을 마비,파괴등을 할 수 있었다. # 블록체인이 등장 후 - 장부를 모두가 볼 수 있게 공개하고 장부들을 서로가 감시하고 공유할 수 있도록 설계 # 비트코인이 쓰는 Proof of Work 방식 - 참여하고자 하는 모든 사람들에게 장부 전체를 복사해서 전달, 이 장부에 동참하여 참여하는 모든 컴퓨터들을 채굴기라고 불르게 된다. - 이 장부들은 블록단위로 되어있다. 거래가 발생할 때마다 그 내역들은 모든 참여자들, 채굴기에 전달됨. - 10분마다 블록으로 묶여서 장부에 추가가 된다. - 서로 컴퓨터 사정에 의하여 블록 갯수가 다를때 가장 긴 블록이 핵심이다. 그 채굴기에서 나머지 채굴기들에게 블록이 전달된다. - 가상으로 가장 긴 블록을 만들어 사기를 치고 싶어도 블록마다 채굴값들이 다르게 연산되어 지는대 모든 채굴기들이 블록을 만드는 속도를 따라갈 수 없으므로 저절로 보안을 지킬 수 있게 된다. ## CascadeType # CASCADE란? - 부모 엔티티가 영속화될 때 자식 엔티티도 같이 영속화되고, 부모 엔티티가 삭제될 때 자식 엔티티도 삭제되는 등 특정 엔티티를 영속 상태로 만들 때 연관된 엔티티도 함께 영속 상태로 전이되는 것을 의미합니다. # Casecade Operations CascadeType.ALL: 모든 Cascade를 적용 CascadeType.PERSIST: 엔티티를 영속화할 때, 연관된 엔티티도 함께 유지 CascadeType.MERGE: 엔티티 상태를 병합(Merge)할 때, 연관된 엔티티도 모두 병합 CascadeType.REMOVE: 엔티티를 제거할 때, 연관된 엔티티도 모두 제거 CascadeType.DETACH: 부모 엔티티를 detach() 수행하면, 연관 엔티티도 detach()상태가 되어 변경 사항 반영 X CascadeType.REFRESH: 상위 엔티티를 새로고침(Refresh)할 때, 연관된 엔티티도 모두 새로고침 ### 2022-07-13 ## 시간함수 : LocalDate,LocalTime,LocalDateTime # LocalDate(날짜 출력) - LocalDate 클래스는 타임존 개념이 필요없는 날짜 정보를 나타내기 위해서 사용됩니다. 대표적으로 적용이 가능한 사례는 ‘생일’을 떠올릴 수 있을 것 같습니다. ```js LocalDate today = LocalDate.now(); System.out.println("Today is " + today); LocalDate birthday = LocalDate.of(1982, 7, 13); System.out.println("My birthday is " + birthday); LocalDate christmas = LocalDate.parse("2017-12-25"); System.out.println("Last Christmas is " + christmas); -- 출력 -- Today is 2018-06-17 My birthday is 1982-07-13 Last Christmas is 2017-12-25 위 예제 코드 처럼 LocalDate 클래스는 public 생성자를 제공하지 않기 때문에 객체를 생성할 때는 now()나, of(), parse()와 같은 정적 메소드를 사용하도록 되어 있습니다. 기본 포멧인 yyyy-MM-dd 형태의 문자열을 parse() 메소드에 넘길 수 있습니다. ``` # LocalTime(시간 출력) - LocalTime 클래스는 타임존 개념이 필요없는 시간 정보를 나타내기 위해서 사용됩니다. 예를 들어 기상 시간이나 취침 시간과 같은 개인 일정의 경우 대부분의 상황에서는 타임존 개념이 필요하지 않기 때문에 LocalTime을 활용할 수 있습니다. ```js LocalTime currentTime = LocalTime.now(); System.out.println("The current time here is " + currentTime); LocalTime currentTimeInParis = LocalTime.now(ZoneId.of("Europe/Paris")); System.out.println("The current time in Paris is " + currentTimeInParis); LocalTime timeToGoToBed = LocalTime.of(23, 30, 0); System.out.println("I go to bed at " + timeToGoToBed); LocalTime timeToGetUp = timeToGoToBed.plusHours(8); System.out.println("I get up at " + timeToGetUp); System.out.println("I still go to bed at " + timeToGoToBed); -- 출력 -- The current time here is 11:57:33.804 The current time in Paris is 04:57:33.806 I go to bed at 23:30 I get up at 07:30 I still go to bed at 23:30 객체 생성 방법은 LocalDate과 매우 흡사합니다. 기본 포멧은 HH:mm:ss.SSS 이며 plusXxx()나 minusXxx()와 같은 메소드를 통해서 시간이 변경된 새로운 객체를 반환할 수 있습니다. Java8 Date/Time API의 클래스들은 Immutable하기 때문에 한번 생성되면 내부 필드값을 바꿀 수 없기 때문입니다. ``` # LocalDateTime(날짜와 시간 출력) - LocalDateTime 클래스는 타임존 개념이 필요없는 날짜와 시간 정보 모두를 나태나기 위해서 사용됩니다. 즉, 간단하게 LocalDate와 LocalTime을 합쳐놨다고 보시면 됩니다. ```js LocalDateTime now = LocalDateTime.now(); System.out.println("Now is " + now); LocalDateTime now2 = LocalDateTime.of(LocalDate.now(), LocalTime.now()); System.out.println("Now is " + now2); LocalDateTime y2k = LocalDateTime.parse("1999-12-31T23:59:59.999"); System.out.println("Y2K is " + y2k); LocalDateTime dateOfBirth = LocalDateTime.of(1982, 7, 13, 14, 25, 00); System.out.println("My date of birth is " + dateOfBirth); LocalDateTime dateOfBirth2 = Year.of(1982).atMonth(7).atDay(13).atTime(14, 25); System.out.println("My date of birth is " + dateOfBirth2); -- 출력 -- Now is 2018-06-17T22:46:17.348 Now is 2018-06-17T22:46:17.408 Y2K is 1999-12-31T23:59:59.999 My date of birth is 1982-07-13T14:25 My date of birth is 1982-07-13T14:25 객체 생성 방법은 LocalDate, LocalTime과 대동소이하며 기본 포멧은 yyyy-MM-dd'T'HH-mm-ss.SSS 입니다. dateOfBirth2를 생성할 때는 정적 메소드 대신에 Year.of()로 시작하는 Fluent API를 사용하였습니다. 코드 가독성이 좋아지기 때문에 개인적으로 선호하는 방식입니다. ``` ## 문자비교 함수 : indexOf, contains, matches # indexOf( ) ,contains( ),matches( )의 메소드의 사용용도 - indexOf() : 대상 문자열에서 찾고자 하는 문자의 index값을 찾고싶을때 - contains() 대상 문자열에서 찾고자 하는 문자열이 포함되어있는지 여부를 알고 싶을때 - matches() 대상 문자열에서 정규표현식(숫자, 영문자, 한글)등이 포함되어있는지 여부를 알고 싶을때 # indexOf( )을 활용하여 문자열 검색 - indexOf(String str) 대상문자열에 인자값으로 주어지는 String값이 있는지 검색합니다. - indexOf(char ch) 대상문자열에 인자값으로 주어지는 char값이 있는지 검색합니다. - indexOf(String str, int fromIndex) 대상문자열에 첫번째 인자값으로 주어지는 String값이 있는지 두번째 인자값의 index부터 검색합니다. - indexOf(char ch, int fromIndex) 대상문자열에 첫번째 인자값으로 주어지는 char값이 있는지 두번째 인자값의 index부터 검색합니다. # indexOf 예제 ```js public class indexOf { public static void main(String[] args) { String s = "Hello welcome to the this place"; System.out.println(s.indexOf("welcome")); //문자열 검색 System.out.println(s.indexOf("t")); //단어 검색 System.out.println(s.indexOf("welcome",10)); //문자열을 10번째 index부터 검색 System.out.println(s.indexOf("t",10)); //단어를 10번째 index부터 검색 if(s.indexOf("welcome")!=-1) { System.out.println("문자가 포함되어 있습니다."); }else { System.out.println("문자가 포함되어 있지 않습니다."); } } } 가장 대중화 되어 있는 문자열 검색 방법은 String클래스의 indexOf()을 사용해서 찾는 방법입니다. indexOf()메소드는 매개값으로 주어진 문자열이 시작되는 인덱스를 리턴합니다. 만약 주어진 문자열이 포함되어 있지 않으면 -1을 리턴합니다. ``` # contains( )을 활용하여 문자열 검색 예제 ```js public class contains { public static void main(String[] args) { String s = "Hello welcome to the this place"; if(s.contains("welcome")) { System.out.println("문자가 포함되어 있습니다."); }else { System.out.println("문자가 포함되어 있지 않습니다."); } } } 문자열 검색만을 위한다면 contains를 활용하는것이 가장 효율적입니다. contains메소드는 문자열에 검색하고자 하는 문자가 있는지 확인하여 포함되어있다면 true를 포함되어있지 않다면 false값을 리턴합니다 ``` # matches( )을 활용하여 문자열 검색 예제 ```js public class matches { public static void main(String[] args) { String s = "Hello welcome to the this place"; //특정 문자열 검색 if(s.matches(".*welcome.*")) { System.out.println("문자가 포함되어 있습니다."); }else { System.out.println("문자가 포함되어 있지 않습니다."); } //영문자가 있는지 검색 if(s.matches(".*[a-zA-Z].*")) { System.out.println("영문자가 포함되어 있습니다."); }else { System.out.println("영문자가 포함되어 있지 않습니다."); } //숫자가 있는지 검색 if(s.matches(".*[0-9].*")) { System.out.println("숫자가 포함되어 있습니다."); }else { System.out.println("숫자가 포함되어 있지 않습니다."); } } } matches는 정규식을 이용하여 문자열을 검색합니다. 특정 문자열을 검색할때보다는 영문자나 숫자등의 정규표현식이 대상 문자열에 포함되어 있는지 아닌지 확인해야 할때 유용하게 사용되는 함수입니다. 포함되어 있다면 ture 포함되어 있지 않다면 false값을 리턴합니다 ``` ### Spring-boot JPA 어노테이션 @Entity, @Table, @Column, @Id @Lombok ## Spring-boot JPA 어노테이션 - 객체 - 테이블 맵핑 : @Entity, @Table - 필드 - 컬럼의 팹핑 : @Column - 기본키의 맵핑 : @Id - 조인 맵핑 : @ManyToOne, @JoinColumn # Entity - @Entity 어노테이션을 클래스에 선언하면 그 클래스는 JPA가 관리한다. 그러므로 DB의 테이블과 Class(VO, DTO)와 맵핑한다면 반드시 @Entity를 붙여주어야 한다. @Entity가 붙은 클래스에는 다음 제약사항이 필요하다. 필드에 final, enum, interface, class를 사용할 수 없다. 생성자중 기본 생성자가 반드시 필요하다. # @Entity의 속성 - name : 엔티티 이름을 지정합니다. 기본값으로 클래스 이름을 그대로 사용한다. # Column - @Column 어노테이션은 객체 필드와 DB 테이블 컬럼을 맵핑한다. # @Column의 속성 1. name : 맵핑할 테이블의 컬럼 이름을 지정 2. insertable : 엔티티 저장시 선언된 필드도 같이 저장 3. updateable : 엔티티 수정시 이 필드를 함께 수정 4. table : 지정한 필드를 다른 테이블에 맵핑 5. nullable : NULL을 허용할지, 허용하지 않을지 결정 6. unique : 제약조건을 걸 때 사용 7. columnDefinition : DB 컬럼 정보를 직접적으로 지정할 때 사용 8. length : varchar의 길이를 조정합니다. 기본값으로 255가 입력 9. precsion, scale : BigInteger, BigDecimal 타입에서 사용, 각각 소수점 포함 자리수, 소수의 자리수를 의미 # Id - JPA가 객체를 관리할 때 식별할 기본키를 지정한다. # Lombok - 기본적으로 웹 애플리케이션에서 사용하는 VO 객체는 , DB 테이블의 column 과 같은 이름의 private 변수를 가지고, getter setter 메소드를 정의 한 후 toString 메소드를 정의한다. 하지만 프로젝트가 커지면 커질수록 위에 말한 변수 , 메소드들이 기하급수적으로 늘어날 것이고, 늘어나면 늘어날 수록 추가도 귀찮을 뿐더러 관리도 힘들어져 결국에는 유지보수가 힘들어진다. 위의 문제를 타파한 라이브러리가 Lombok이다. ```js @ToString toString() 메소드를 생성한다. @ToString(exclude={“제외값”})으로 제외시키고 싶은 값을 설정할 수 있다. @Getter , @Setter getter() setter() 메소드를 생성한다. @EqualsAndHashCode equals(), hashCode() 메소드를 생성한다. @RequiredArgsConstructor 모든 멤버 변수를 초기화시키는 생성자를 생성한다. @Data 위에 언급한 5가지 어노테이션 설정을 모두 포함한다. ``` ## OneToMany - 이제 회원과 핸드폰 테이블을 기반으로 해서 설명을 진행합니다. 회원은 기본적으로 핸드폰이 없거나 1개 이상을 소지할 수 있습니다. 그러면 회원 하나에 핸드폰을 여러개 가지니 1:N 관계가 됩니다. 이것을 JPA 어노테이션으로는 @OneToMany라고 표현합니다. # OneToMany 속성 OneToMany 속성에는 다음과 같은 것들이 있습니다. 1. targetEntity -> 관계를 맺을 Entity Class를 정의합니다. 2. cascade -> 현 Entity의 변경에 대해 관계를 맺은 Entity도 변경 전략을 결정합니다. 속성값에는 CascadeType라는 enum에 정의 되어 있으며 enum값에는 ALL, PERSIST, MERGE, REMOVE, REFRESH, DETACH가 있습니다. 3. fetch -> 관계 Entity의 데이터 읽기 전략을 결정합니다. FetchType.EAGER, FetchType.LAZY로 전략을 변경 할 수 있습니다. 두 전략의 차이점은 EAGER인 경우 관계된 Entity의 정보를 미리 읽어오는 것이고 LAZY는 실제로 요청하는 순간 가져오는겁니다. 4. mappedBy -> 양방향 관계 설정시 관계의 주체가 되는 쪽에서 정의합니다. 5. orphanRemoval -> 관계 Entity에서 변경이 일어난 경우 DB 변경을 같이 할지 결정합니다. cascade와 다른것은 cascade는 JPA 레이어 수준이고 이것은 DB레이어에서 처리합니다. 기본은 false입니다. ### 2022-07-12 ## Autowired # Autowired란? - 필요한 의존 객체의 “타입"에 해당하는 빈을 찾아 주입 - ♠ 생성자 - ♠ setter - ♠ 필드 - 위의 3가지의 경우에 Autowired를 사용할 수 있다. 그리고 Autowired는 기본값이 true이기 때문에 의존성 주입을 할 대상을 찾지 못한다면 애플리케이션 구동에 실패한다 # Constructor Dependency Injection - 생성자 주입은 생성자에 의존성 주입을 받고자 하는 field를 나열하는 방법으로, 권고되는 방법의 하나 이다. ♠ 장점 -> 필수적으로 사용해야 하는 레퍼런스 없이는 인스턴스를 만들지 못하도록 강제함 -> Spring 4.3 이상부터는 생성자가 하나인 경우 @Autowired를 사용하지 않아도 됨 -> Circular Dependency / 순환 참조2 의존성을 알아 차릴 수 있음 -> 생성자에 점차 많은 의존성이 추가 될 경우 리팩토링 시점을 감지 할 수 있음 -> 의존성 주입 대상 필드를 final로 불편 객체 선언할 수 있음 -> 테스트 코드 작성시 생성자를 통해 의존성 주입이 용이함 ♠ 단점 -> 어쩔 수 없는 순환 참조는 생성자 주입으로 해결하기 어려움 -> 이러한 경우에는 나머지 주입 방법 중에 하나를 사용 -> 가급적이면 순환 참조가 발생하지 않도록 하는 것이 더 중요 # Field Dependency Injection - member field에 @Autowired annotation을 선언하여 주입받는 방법이다. ♠ 장점 -> 가장 간단한 선언 방식 ♠ 단점 -> 의존 관계가 눈에 잘 보이지 않아 추상적이고, 이로 인해 의존성 관계가 과도하게 복잡해질 수 있음 -> 반대로 Constructor injection과 Setter injection은 의존성을 명확하게 커뮤니케이션 함 .이는 SRP / 단일 책임 원칙에 반하는 안티패턴 -> DI Container와 강한 결합을 가져 외부 사용이 용이하지 않음 -> 단위 테스트시 의존성 주입이 용이하지 않음 -> 의존성 주입 대상 필드가 final 선언 불가 # Setter Dependency Injection - setter 메소드에 @Autowired annotation을 선언하여 주입받는 방법이다.(메소드 이름을 setter 대신에 다른 걸로 하여도 주입은 가능하지만 좋은 방법은 아니다) ♠ 장점 -> 의존성이 선택적으로 필요한 경우에 사용 -> 생성자에 모든 의존성을 기술하면 과도하게 복잡해질 수 있는 것을 선택적으로 나눠 주입 할 수 있게 부담을 덜어줌 -> 생성자 주입 방법과 Setter 주입 방법을 적절하게 상황에 맞게 분배하여 사용 ♠ 단점 -> 의존성 주입 대상 필드가 final 선언 불가 # 어떻게 @Autowired 어노테이션만으로 의존성 주입이 가능할까? - BeanPostProcessor라는 라이프 사이클 인터페이스의 구현체인 AutowiredAnnotationBeanPostProcessor에 의해 의존성 주입이 이루어진다. BeanPostProcessor는 빈의 initializing(초기화) 라이프 사이클 이전, 이후에 필요한 부가 작업을 할 수 있는 라이프 사이클 콜백이다. 그리고 BeanPostProcessor의 구현체인 AutowiredAnnotationBeanPostProcessor가 빈의 초기화 라이프 사이클 이전, 즉 빈이 생성되기 전에 @Autowired가 붙어있으면 해당하는 빈을 찾아서 주입해주는 작업을 하는 것이다. ## Optional 클래스 # java.util.Optional 클래스 - Optional 클래스는 Integer나 Double 클래스처럼 'T'타입의 객체를 포장해 주는 래퍼 클래스(Wrapper class)입니다. 따라서 Optional 인스턴스는 모든 타입의 참조 변수를 저장할 수 있습니다. 이러한 Optional 객체를 사용하면 예상치 못한 NullPointerException 예외를 제공되는 메소드로 간단히 회피할 수 있습니다. 즉, 복잡한 조건문 없이도 널(null) 값으로 인해 발생하는 예외를 처리할 수 있게 됩니다. # Optional 객체의 생성 - of() 메소드나 ofNullable() 메소드를 사용하여 Optional 객체를 생성할 수 있습니다. of() 메소드는 null이 아닌 명시된 값을 가지는 Optional 객체를 반환합니다. 만약 of() 메소드를 통해 생성된 Optional 객체에 null이 저장되면 NullPointerException 예외가 발생합니다. 따라서 만약 참조 변수의 값이 만에 하나 null이 될 가능성이 있다면, ofNullable() 메소드를 사용하여 Optional 객체를 생성하는 것이 좋습니다. ofNullable() 메소드는 명시된 값이 null이 아니면 명시된 값을 가지는 Optional 객체를 반환하며, 명시된 값이 null이면 비어있는 Optional 객체를 반환합니다. ```js Optional opt = Optional.ofNullable("자바 Optional 객체"); System.out.println(opt.get()); ``` # Optional 객체에 접근 - get() 메소드를 사용하면 Optional 객체에 저장된 값에 접근할 수 있습니다. 만약 Optional 객체에 저장된 값이 null이면, NoSuchElementException 예외가 발생합니다. 따라서 get() 메소드를 호출하기 전에 isPresent() 메소드를 사용하여 Optional 객체에 저장된 값이 null인지 아닌지를 먼저 확인한 후 호출하는 것이 좋습니다. ```js Optional opt = Optional.ofNullable("자바 Optional 객체"); if(opt.isPresent()) { System.out.println(opt.get()); } ``` 1. orElse() 메소드 : 저장된 값이 존재하면 그 값을 반환하고, 값이 존재하지 않으면 인수로 전달된 값을 반환함. 2. orElseGet() 메소드 : 저장된 값이 존재하면 그 값을 반환하고, 값이 존재하지 않으면 인수로 전달된 람다 표현식의 결괏값을 반환함. 3. orElseThrow() 메소드 : 저장된 값이 존재하면 그 값을 반환하고, 값이 존재하지 않으면 인수로 전달된 예외를 발생시킴. ```js Optional opt = Optional.empty(); // Optional를 null로 초기화함. System.out.println(opt.orElse("빈 Optional 객체")); System.out.println(opt.orElseGet(String::new)); ``` # 기본 타입의 Optional 클래스 1. OptionalInt 클래스 2. OptionalLong 클래스 3. OptionalDouble 클래스 클래스 저장된 값에 접근하는 메소드 Optional -> T get() OptionalInt -> int getAsInt() OptionalLong -> long getAsLong() OptionalDouble -> double getAsDouble() ### 2022-07-06 ## ResponseBody # 클라이언트와 서버의 비동기 통신 - 클라이언트에서 서버로 통신하는 메시지를 요청(request) 메시지라고 하며, 서버에서 클라이언트로 통신하는 메시지를 응답(response) 메시지라고 한다. 웹에서 화면전환(새로고침) 없이 이루어지는 동작들은 대부분 비동기 통신으로 이루어진다. 비동기통신을 하기위해서는 클라이언트에서 서버로 요청 메세지를 보낼 때, 본문에 데이터를 담아서 보내야 하고, 서버에서 클라이언트로 응답을 보낼때에도 본문에 데이터를 담아서 보내야 한다. 이 본문이 바로 body 이다. 즉, 요청본문 requestBody, 응답본문 responseBody 을 담아서 보내야 한다. 대표적으로 JSON이 있다. # 요청 본문에 담긴 값을 자바객체로 변환 - @RequestBody를 통해서 자바객체로 conversion을 하는데, 이때 HttpMessageConverter를 사용한다. @ResponseBody 가 붙은 파라미터에는 HTTP 요청의 분문 body 부분이 그대로 전달된다. 이때, RequestBody가 아니더라도 RequestMapping처럼 요청할수도 있다. # RequestBody - 이 어노테이션이 붙은 파라미터에는 http요청의 본문(body)이 그대로 전달된다. 일반적인 GET/POST의 요청 파라미터라면 @RequestBody를 사용할 일이 없을 것이다. 반면에 xml이나 json기반의 메시지를 사용하는 요청의 경우에 이 방법이 매우 유용하다. HTTP 요청의 바디내용을 통째로 자바객체로 변환해서 매핑된 메소드 파라미터로 전달해준다. ```js @RequestMapping(value = "/ajaxTest.do") public String ajaxTest(@RequestBody UserVO getUserVO) throws Exception { System.out.println(getUserVO.getId()); return "test/login.tiles"; } ``` # @ResponseBody - 자바객체를 HTTP요청의 바디내용으로 매핑하여 클라이언트로 전송한다. @ResponseBody 가 붙은 파라미터가 있으면 HTTP요청의 미디어타입과 파라미터의 타입을 먼저 확인한다. dispatcher-servlet.xml 의 annotation-drvien 태그 내에 선언하는 message-converter 에서 확인. ```js

text/html;charset=UTF-8

``` # @RequestBody / @ResponseBody 정리 - 클라이언트에서 서버로 필요한 데이터를 요청하기 위해 JSON 데이터를 요청 본문에 담아서 서버로 보내면, 서버에서는 @RequestBody 어노테이션을 사용하여 HTTP 요청 본문에 담긴 값들을 자바객체로 변환시켜, 객체에 저장한다. 서버에서 클라이언트로 응답 데이터를 전송하기 위해 @ResponseBody 어노테이션을 사용하여 자바 객체를 HTTP 응답 본문의 객체로 변환하여 클라이언트로 전송한다. ## RequestMapping # RequestMapping이란? - 특정 uri로 요청을 보내면 Controller에서 어떠한 방식으로 처리할지 정의를 한다. 이때 들어온 요청을 특정 메서드와 매핑하기 위해 사용하는 것이 @RequestMapping이다. # RequestMapping 예제 ```js @Controller public class EmployeeController { @RequestMapping("/employee-management/employees") public String getAllEmployees(Model model) { //application code return "employeesList"; } @RequestMapping("/employee-management/employees/add") public String addEmployee(EmployeeVO employee) { //application code return "employeesDetail"; } @RequestMapping("/employee-management/employees/update") public String updateEmployee(EmployeeVO employee) { //application code return "employeesDetail"; } @RequestMapping(value={"/employee-management/employees/remove","/employee-management/employees/delete"}) public String removeEmployee(@RequestParam("id") String employeeId) { //application code return "employeesList"; } } 위와 같은 형식의 url을 localhost:포트번호와 같이 작성하면 해당 페이지로 이동한다. ``` ### 2022-07-05 ## instanceof # instanceof - instanceOf 연산자는 객체가 어떤 클래스인지, 어떤 클래스를 상속받았는지 확인하는데 사용하는 연산자 # instanceof 예제 ```js public class ArrayList implements List { } public List { } 아래와 같이 ArrayList 객체가 있을 때, instanceOf를 사용하면 이 객체가 ArrayList인지, List로부터 상속받은 클래스의 객체인지 확인할 수 있습니다. ArrayList list = new ArrayList(); System.out.println(list instanceof ArrayList); System.out.println(list instanceof List); --------------------------------------------- 결과 true true ``` # object에 대한 instaneof 예제 ```js ArrayList list = new ArrayList(); System.out.println(list instanceof Object); ------------------------------------------------ 결과 true ``` # null 객체에 대한 instanceOf 예제 ```js ArrayList list = null; System.out.println(list instanceof Object); System.out.println(list instanceof ArrayList); System.out.println(list instanceof List); System.out.println(list instanceof Set); ------------------------------------------------ 결과 false false false false ``` # Generics의 instanceOf 예제 ```js ArrayList list = new ArrayList<>(); System.out.println(list instanceof Object); System.out.println(list instanceof ArrayList); System.out.println(list instanceof List); ------------------------------------------------ 결과 true true true false -------------------------------------------------- 하지만 Generic 클래스 내에서 T와 같은, 타입이 결정되지 않은 상태에서 instanceOf로 타입 체크는 할 수 없습니다. T는 컴파일 과정에서 실제 타입으로 변경되기 때문입니다. public void printListItem(List list) { if (T instanceof String) { for (T item : list) { System.out.println(item); } } } 아래와 같은 컴파일 에러 발생 Error:(41, 13) java: cannot find symbol symbol: variable T location: class example.InstanceOf public void printListItem(List list) { if (list instanceof List) { for (T item : list) { System.out.println(item); } } } ``` ## 싱글톤패턴 # 싱글톤 패턴이란? - 싱글톤(Singleton) 패턴의 정의는 단순하다. 객체의 인스턴스가 오직 1개만 생성되는 패턴 # 싱글톤 패턴 예제 ```js public class Singleton { private static Singleton instance = new Singleton(); private Singleton() { // 생성자는 외부에서 호출못하게 private 으로 지정해야 한다. } public static Singleton getInstance() { return instance; } public void say() { System.out.println("hi, there"); } } ``` # 싱글톤 패턴을 사용하는 이유 - 가장 먼저 떠올릴 수 있는 이점은 아무래도 메모리 측면일 것이다. 최초 한번의 new 연산자를 통해서 고정된 메모리 영역을 사용하기 때문에 추후 해당 객체에 접근할 때 메모리 낭비를 방지할 수 있다. 뿐만 아니라 이미 생성된 인스턴스를 활용하니 속도 측면에서도 이점이 있다고 볼 수 있다. - 다른 클래스 간에 데이터 공유가 쉽다는 것이다. 싱글톤 인스턴스가 전역으로 사용되는 인스턴스이기 때문에 다른 클래스의 인스턴스들이 접근하여 사용할 수 있다. 하지만 여러 클래스의 인스턴스에서 싱글톤 인스턴스의 데이터에 동시에 접근하게 되면 동시성 문제가 발생할 수 있으니 이점을 유의해서 설계하는 것이 좋다. # 싱글톤 패턴의 문제점 - 싱글톤 패턴을 구현하는 코드 자체가 많이 필요하다. 앞서 소개한 구현 방법외에도 정적 팩토리 메서드에서 객체 생성을 확인하고 생성자를 호출하는 경우에 멀티스레딩 환경에서 발생할 수 있는 동시성 문제 해결을 위해 syncronized 키워드를 사용해야 한다. - 테스트하기 어렵다는 것이다. 싱글톤 인스턴스는 자원을 공유하고 있기 때문에 테스트가 결정적으로 격리된 환경에서 수행되려면 매번 인스턴스의 상태를 초기화시켜주어야 한다. 그렇지 않으면 어플리케이션 전역에서 상태를 공유하기 때문에 테스트가 온전하게 수행되지 못한다. - 의존 관계상 클라이언트가 구체 클래스에 의존하게 된다. new 키워드를 직접 사용하여 클래스 안에서 객체를 생성하고 있으므로, 이는 SOLID 원칙 중 DIP를 위반하게 되고 OCP 원칙 또한 위반할 가능성이 높다. # 결론 - 싱글톤 패턴이 무엇이고, 어떤 이점과 문제점이 있는지 살펴보았다. 오직 한 개의 인스턴스 생성을 보증하여 효율을 찾을 수 있지만 그에 못지많게 수반되는 문제점도 많다. 싱글톤 패턴은 안티패턴으로 불릴 만큼 단독으로 사용한다면 객체 지향에 위반되는 사례가 많다. 스프링 컨테이너 같은 프레임워크의 도움을 받으면 싱글톤 패턴의 문제점들을 보완하면서 장점의 혜택을 누릴 수 있다. ### 2022-07-04 ## 클라우드 컴퓨팅 서비스 # 예제 - 업무팀이 어느 나라로 장기 파견을 갔다. 그런데 이 가상의 국가에서는 지낼공간을 마련할 방법이 2가지 있다. 첫째, 일터와 숙소로 쓸 가건물 하나를 빌린다. 둘째,가성비가 꽤 좋은 초대형 호텔을 이용하는 방법 그렇다면 건물을 빌리는게 호텔보다는 평당가도 싸고 우리 팀만의 넓은 공간이 확보가 될것이다. 그렇지만 건물 전체를 빌리는 거니까 필요 이상의 공간까지 값을 치르는 거고 그래서 내야하는 총 금액도 클 것이다. 반면 호텔에서는 팀에게 딱 필요한 공간만 방을 빌릴 수 있다. 상황에 따라서 더 빌리고 덜 빌리는게 가능할 것이다. 추가로 금액을 더 지불하면 추가적인 서비스까지 제공받을 수 있을것이다. 그렇지만 많은 서비스를 이용하게 되면 총 렌트비용보다 비싸질 수 있고 남이 관리하는 건물이므로 업무에 맞는 건물보다는 특화되지 않은 점으로 불편함을 겪을 수도 있다. - 그렇다면 첫번쨰 방식은 자체적으로 회사에 서버를 두고 운영하는 On-premise 방식이고 - 두번째 방식은 큰 호텔에서 제공하는 서비스가 클라우드 컴퓨팅 서비스이다. # 클라우드 컴퓨팅 서비스의 제공되는 단계 - 1. 하드웨어 -> IaaS(클라우드에서는 거의 하드웨어만 관리하고 , 내가 직접 가상서버 하나를 운영하고 관리) - 2. 가상서버 -> Paas(플랫폼이 서비스로 제공됨, 가상서버 또한 클라우드에서 관리, 내가 코드만 압축해서 업로드 하면됨) - 3. 소프트웨어 -> SaaS(아예 다 만들어진 소프트웨어 서비스를 제공, ex) 에버노트, 드랍박스, 구글닥스, 유튜브 등등) ## java script에는 왜 세미콜론을 써야 하나요? # java script에 세미콜론을 안써도 동작하는 이유 - 자바스크립트 엔진에 ASI(Automatic Semicolon Insertion) 작업이 돌아가는대 세미콜론이 들어가야 할 위치에 들어가있지 않으면 자동으로 넣어준 다음 코드를 실행함 # 그렇다면 왜 java script에 개발자들은 세미콜론을 붙일까? - 자바스크립트에서는 ASI 를 통하여 보통의 경우 자동으로 세미콜론이 들어가지만 개발자의 의도와는 다르게 세키롤론을 찍거나 안찍어 버리는 문제가 발생할 수 있음. # ASI가 인식하지 못하는 경우의 예제 ```js console.log("헬로") console.log("월드") 이러한 경우에는 개발자의 임의로 console.log("헬로"); console.log("월드")로 붙여주지 않으면 에러가 발생함 ``` ### 2022-07-01 ## 제네릭 # 제네릭이란? - 제네릭(Generic)은 직역하자면 '일반적인'이라는 뜻이다. 즉, 데이터 형식에 의존하지 않고, 하나의 값이 여러 다른 데이터 타입들을 가질 수 있도록 하는 방법이다. # 제네릭 선언 예제 ````js ArrayList list1 = new ArrayList(); ArrayList list2 = new ArrayList(); LinkedList list3 = new LinkedList(): LinkedList list4 = new LinkedList(); 이렇게 <> 괄호 안에 들어가는 타입을 지정해준다. 이렇듯 제네릭(Generic)은 클래스 내부에서 지정하는 것이 아닌 외부에서 사용자에 의해 지정되는 것을 의미한다. ```` # 제네릭의 장점 - 1. 제네릭을 사용하면 잘못된 타입이 들어올 수 있는 것을 컴파일 단계에서 방지할 수 있다. - 2. 클래스 외부에서 타입을 지정해주기 때문에 따로 타입을 체크하고 변환해줄 필요가 없다. 즉, 관리하기가 편하다. - 3. 비슷한 기능을 지원하는 경우 코드의 재사용성이 높아진다. # 제네릭의 사용방법 ```js 타입 설명 Type Element Key Value Number ``` # 제네릭 클래스 활용하기 예제 ```js // 제네릭 클래스 class ClassName { private E element; // 제네릭 타입 변수 void set(E element) { // 제네릭 파라미터 메소드 this.element = element; } E get() { // 제네릭 타입 반환 메소드 return element; } } class Main { public static void main(String[] args) { ClassName a = new ClassName(); ClassName b = new ClassName(); a.set("10"); b.set(10); System.out.println("a data : " + a.get()); // 반환된 변수의 타입 출력 System.out.println("a E Type : " + a.get().getClass().getName()); System.out.println(); System.out.println("b data : " + b.get()); // 반환된 변수의 타입 출력 System.out.println("b E Type : " + b.get().getClass().getName()); } } -------------------------------------------------------------------- 보면 ClassName이란 객체를 생성할 때 <> 안에 타입 파라미터(Type parameter)를 지정한다. 그러면 a객체의 ClassName의 E 제네릭 타입은 String으로 모두 변환된다. 반대로 b객체의 ClassName의 E 제네릭 타입은 Integer으로 모두 변환된다. 실제로 위 코드를 실행시키면 다음과 같이 출력된다. a data : 10 a E type : java.lang.String b data : 10 b E Type : java.lang.Integer ``` ## OS프로세스의 상태 변화 # OS 프로세스 상태 변화과정 - new -> (ready -> running) 반복 -> I/O or event wait이 발생 시 -> waiting -> (다시 ready -> running) 반복 -> CPU 마무리 작업 실행 -> terminated(종료) # java thread의 상태 종류 - 1. NEW -> 자바 스레드가 아직 시작하지 않은 상태 - 2. RUNNABLE -> 실행 중인 상태(다른 리소스를 기다리는 상태도 포함) - 3. BLOCKED -> critical section으로 들어가려고모니터 락을 얻기 위해 기다리는 상태 - 4. WAITING -> 다른 스레드를 기다리는 상태 - 5. TIMED_WAITING -> 제한 시간을 두고 다른 스레드를 기다리는 상태 - 6. TERMINATED -> 실행을 마치고 종료된 상태 # java thread dump - 실행 중인 자바 프로세스의 현재 상태를 담은 스냅샷 ### 2022-06-30 ## 큐와 힙 # priority queue(우선순위 큐) - 큐와 유사하지만 우선순위가 높은 아이템이 먼저 처리되는 큐 # 우선순위 큐 주요 동작 - insert - delete - peek # Heap - 힙은 주로 이진 트리(부모가 자녀를 최대 두개만 가질 수 있는 트리) 기반으로 구현 # 트리 - 부모-자녀처럼 계층적인 형태를 가지는 구조 # max heap - 부모 노드의 키가 자식 노드들의 키보다 크거나 같은 트리 - 여기서 노드란? 각각 하나의 자녀를 얘기하는것 # min heap - 부모 노드의 키가 자식 노드들의 키보다 작거나 같은 트리 # 힙 주요 동작 - insert - delete - peek # priority queue 와 Heap의 관계 - 힙의 키를 우선순위로 사용한다면 힙은 우선순위 큐의 구현체가 된다. - priority queue = ADT - Heap = data structure # 우선순위 큐와 힙의 사용사례 - 프로세스 스케줄링 ## 스택과 큐 # Abstract Data Type - 추상자료형 - 개념적으로 어떤 동작이 있는지만 정의하고 구현에 대해서는 다루지는 않음 # data structure - ADT에서 정의된 동작을 실제로 구현한 것 # stack - LIFO(Last In First Out) 형태로 데이터를 저장하는 구조 # stack 의 주요 동작 - push(스택에 저장) - pop(스택에서 빼냄) - peek(출력만함) # queue - FIFO(First In First Out) 형태로 데이터를 저장하는 구조 # queue 의 주요 동작 - enqueue(큐에 저장) - dequeue(큐에서 빼냄) - peek(출력만함) # 스택 사용 사례 : stack memory & stack frame # 큐 사용 사례 : producer / consumer architecture # 기술문서에서 큐를 만났을 때의 팁 - 항상 FIFO를 의미하지는 않음 ### 2022-06-29 ## StringBuilder # StringBuilder을 쓰는 이유 - 자바에서 String 객체는 변경 불가능하다. 한 번 생성되면 내용을 바꿀 수 없단 뜻이다. 따라서 하나의 문자열을 다른 문자열과 연결하면 새 문자열이 생성되고, 이전 문자열은 가비지 컬렉터로 들어간다. 100만 개의 문자열을 연결해야 하는 상황이 왔다고 가정하자. 그리고 100만 개의 문자열을 추가로 생성했다고 하자. 문자열끼리 연결하는 작업 시에는 내부적으로 여러 작업이 발생하고, 기존 문자열 값의 길이에 추가된 문자열의 크기를 더한 크기의 새로운 문자열이 생성된다. 이걸 100만 번 수행해야 하니 메모리를 많이 잡아먹게 되는 건 어찌보면 그렇게 되겠구나 싶다. 이 경우 고려해볼 수 있는 것 중 하나가 이 포스팅의 주제인 StringBuilder다. Stirng은 변경 불가능한 문자열을 생성하지만 StringBuilder는 변경 가능한 문자열을 만들어 주기 때문에, String을 합치는 작업 시 하나의 대안이 될 수 있다. # StringBuilder를 쓰지 않은 예제 ```js public class Main { public static void main(String[] args) { String result2 = "프로그래밍 - "; String java = "자바"; String android = "안드로이드"; String result = java + android; result2 += java += android; System.out.println(result); System.out.println(result2); } } // > 자바안드로이드 // > 프로그래밍 - 자바안드로이드 이 String 객체끼리 더하는 방법은 메모리 할당과 해제를 발생시키는데, 덧셈 연산이 많아진다면 성능적으로 좋지 않다. ``` # StringBuilder를 쓴 예제 ```js ex1 ) 일반문 public class Main { public static void main(String[] args) { StringBuilder stringBuilder = new StringBuilder(); stringBuilder.append("문자열 ").append("연결"); // String str = stringBuilder; // String에 StringBuilder를 그대로 넣을 순 없다. toString()을 붙여야 한다 String str = stringBuilder.toString(); // 두 println()은 같은 값을 출력한다 System.out.println(stringBuilder); System.out.println(str); } } --------------------------------------------------- ex2) 반복문 public class Main { public static void main(String[] args) { StringBuilder stringBuilder = new StringBuilder(); ArrayList list = new ArrayList<>(); list.add("첫 번째, "); list.add("두 번째, "); list.add("세 번째, "); list.add("네 번째, "); list.add("다섯 번째"); for (int i = 0; i < list.size(); i++) { stringBuilder.append(list.get(i)); } System.out.println(stringBuilder); } } // >> 첫 번째, 두 번째, 세 번째, 네 번째, 다섯 번째 ``` ## 스핀락 / 뮤텍스 / 세마포 # 스핀락 - 락을 가질 수 있을 때까지 반복해서 시도 - 단점 : 기다리는 동안 CPU를 낭비한다. # 뮤텍스 - 락을 가질 수 있을 때까지 휴식 (내가 락을 가질 수 있을 때 꺠어나서 실행) # 스핀락이 뮤텍스보다 좋을 때 - 멀티코어 환경이고 , critical section에서의 작업이 컨텍스트 스위칭보다 빨리 끝난다면 그때는 스핀락이 뮤텍스보다 이점이 있다. # 세마포 - signal mechanism을 가진, 하나 이상의 프로세스/스레드가 critical section에 접근 가능하도록 하는 장치 # 뮤텍스와 이진세마포와 다른점 - 뮤텍스는 락을 가진 락을 해제 할 수 있지만 세마포는 그렇지 않다. - 뮤텍스는 priority inheritance 속성(서로 경합을 해서 락을 취하려 하는 프로세서의 경우 우선순위가 낮은 프로세서의 우선순위를 높은 프로세서 만큼 올려주는것)을 가진다. 세마포는 그 속성이 없다. ### 2022-06-28 ## 동기화, 경쟁조건, 임계영역 # 하나의 객체를 두개의 스레드가 접근할 때 생기는 일 예제 ```js 상한귤을 골라내기(스레드 두개 사용) for (귤 in 귤박스) { if(귤 상태 is 불량){ badCounter.increment(); } } public class Counter{ private int state = 0; public void increment(){ state++; } -> LOAD state to R1 R1 = R1 + 1 STORE R1 to state 로 변환됨 public int get() { return state; } } ``` # 경쟁조건 - 여러 프로세스/스레드가 동시에 같은 데이터를 조작할 때 타이밍이나 접근 순서에 따라 결과가 달라질 수 있는 상황 # 동기화 - 여러 프로세스/스레드를 동시에 실행해도 공유 데이터의 일관성을 유지하는 것 # 위 예제를 동기화 시키기 예제 ```js 상한귤을 골라내기(스레드 두개 사용) for (귤 in 귤박스) { if(귤 상태 is 불량){ badCounter.increment(); } } public class Counter{ private int state = 0; public void increment(){ state++; } -> LOAD state to R1 R1 = R1 + 1 STORE R1 to state 로 변환됨 public int get() { return state; } } 해결법 : 스레드가 여러개가 있어도 해당 부분 increment 메서드를 하나의 스레드가 끝날때까지 하나의 쓰레드만 실행되게끔 함. (해결법 : 임계영역) ``` # 임계영역(critical section) - 공유 데이터의 일관성을 보장하기 위해 하나의 프로세스/스레드만 진입해서 실행 가능한 영역 # 임계영역의 해결책이 되기 위한 조건 - 1. mutual exclusion(상호배제) : 크리티컬 섹션에서 실행 할 수 있다. - 2. progress(진행) : 진행이 계속 될 수 있도록 해야 한다. - 3. bounded waiting(한정된 대기) : 어떤 스레드가 무한정 기다리고 있으면 안된다. ## CPU bound, io bound 의미 # CPU란? - 프로세서의 명령어를 해석하고 실행하는 장치 # IO란? - 파일을 읽고 쓰거나 네트워크의 어딘가와 데이터를 주고 받는 것 - 입출력 장치와 데이터를 주거나 받는 것 # 버스트 - 어떤 현상이 짧은 시간 안에 집중적으로 일어나는 일 # CPU 버스트 - 프로세스가 CPU에서 한번에 연속적으로 실행되는 시간 # IO 버스트 - 프로세스가 IO 작업을 요청하고 결과를 기다리는 시간 # CPU bound 프로세스 - CPU burst가 많은 프로세스 # CPU bound 프로세스의 예 - 동영상 편집 프로그램, 머신러닝 프로그램(연산작업이 많은 작업들) # IO bound 프로세스 - IO burst가 많은 프로세스 # IO bound 프로세스 예 - (일반적인) 백엔드 API 서버 # 참고 - CPU bound 프로그램에서 적절한 스레드 수는 number of CPUs + 1 - IO bound 프로그램은 여러 상황에 맞춰서 적절한 스레드 수를 찾아야 한다. ### 2022-06-27 ## 스레드 컨텍스트 스위칭이 프로세스 컨텍스트 스위칭보다 왜 더 빠른지? # 컨텍스트란? - 프로세스/스레드의 상태 : CPU, 메모리 등등 # 컨텍스트 스위칭이란? - CPU/코어에서 실행 중이던 프로세스/스레드가 다른 프로세스/스레드로 교체되는 것 # 컨텍스트 스위칭은 왜 필요한가? - 여러 프로세스/스레드를 동시에 실행시키기 위해서 # 컨텍스트 스위칭은 언제 발생하는가? - 주어진 TIME SLICE를 다 사용했거나 IO 작업을 해야하거나 다른 리소스를 기다려야 하거나등등 # 컨텍스트 스위칭은 누구에 의해 실행되는가? - OS 커널 : 각종 리소스를 관리/감독하는 역할 # 컨텍스트 스위칭 종류 - 다른 프로세스끼리 스위칭 : 프로세스 컨텍스트 스위칭 - 같은 프로세스의 스레드들끼리 스위칭 : 스레드 컨텍스트 스위칭 # 공통점 - 1. 커널 모드에서 실행 - 2. CPU 레지스터 상태를 교체 # 차이점 - 프로세스 컨텍스트 스위칭 : 가상 메모리 주소 관련 처리를 추가로 수행 # 컨텍스트 스위칭이 미치는 간접적인 영향 - 캐시 / 오염 # 결론 - 스레드 컨텍스트 스위칭은 메모리 주소 관련 처리를 하지 않기 떄문에 프로세스 컨텍스트 스위칭 보다 빠르다. ## 여러 컴퓨터 용어 설명 # 프로그램이란? - 컴퓨터가 실행할 수 있는 명령어들의 집합 # 프로세스란? - 컴퓨터에서 실행 중인 프로그램 - 각각의 프로세스는 독립된 메모리 공간을 할당 받음 - 명령어들과 데이터를 가짐 # CPU란? - 명령어를 실행하는 연산 장치 # 메인 메모리란? - 프로세스가 CPU에서 실행되기 위해 대기하는 곳 # IO - 파일을 읽고 쓰거나 네트워크의 어딘가와 데이터를 주고 받는 것 - 입출력 장치와 데이터를 주거나 받는것(마우스,키보드등등) # 단일 프로세스 시스템 - 한 번에 하나의 프로그램만 실행됨(또다른 프로그램을 실행할 경우 기존에 실행되고 있는 프로그램을 종료하고 실행해야함) - 단점 : CPU 사용률이 좋지 않음 - 해결책 : 여러개의 프로그램을 메모리에 올려놓고 동시에 실행시킴(멀티 프로그래밍) # 멀티 프로그래밍 - CPU 사용률을 극대화 시키는데 목적 - 단점 : CPU 사용시간이 길어지면 다른 프로세스는 계속 대기 - 해결책 : 프로세스는 한번 CPU를 사용할 때 아주 짧은 시간만 CPU에서 실행시킴(멀티테스킹) # 멀티테스킹 - 프로세스의 응답시간을 최소화 시키는데 목적 - 단점 : 하나의 프로세스가 동시에 여러 작업을 수행하지는 못함 / 프로세스의 컨텍스트 스위칭은 무거운 작업 / 프로세스끼리 데이터 공유가 까다로움 - 해결책 : 멀티스레딩 # 스레드의 특징 - 프로세스는 한개 이상의 스레드를 가질 수 있다. - CPU에서 실행되는 단위 - 같은 프로세스의 스레드들끼리 컨텍스트 스위칭은 가볍다. - 자신들이 속한 프로세스의 메모리 영역을 공유 # 멀티스레딩 - 하나의 프로세스가 동시에 여러 작업을 실행 # 결론 ```js 예제 1 : 싱글코어 CPU에 싱글-스레드 프로세스 2개 - 멀티태스킹 : O - 멀티스레딩 : X - 멀티프로세싱 : X 예제 2 : 싱글코어 CPU에 듀얼-스레드 프로세스 1개 - 멀티태스킹 : O - 멀티스레딩 : O - 멀티프로세싱 : X 예제 3 : 듀얼코어 CPU에 싱글-스레드 프로세스 2개 - 멀티태스킹 : X - 멀티스레딩 : X - 멀티프로세싱 : O 예제 4 : 듀얼코어 CPU에 듀얼-스레드 프로세스 1개 - 멀티태스킹 : X - 멀티스레딩 : O - 멀티프로세싱 : O 예제 5 : 듀얼코어 CPU에 듀얼-스레드 프로세스 2개 - 멀티태스킹 : O - 멀티스레딩 : O - 멀티프로세싱 : O ``` ### 2022-06-24 ## 변수와 객체와 메모리의 관계 # 어플리케이션이란? - 일반 사용자가 사용할 기능을 제공하는, 컴퓨터가 실행할 수 있는 명령어들의 집합 # 메로리란? - 실행된 어플리케이션이 상주하는 곳 # CPU란? - 명령어를 실행하는 주체 # 예제 ```js public class Main{ public static void main(String[] args){ int a = 7; int b = 3; int c = a + b; } } 어플리케이션이 실행되는 원리 CPU상에서 int a = 7을 실행하게 되고 , 그러면 메모리에 7을 저장한다. CPU상에서 int a = 3을 실행하게 되고 , 그러면 메모리에 3을 저장한다. CPU상에서 int c 를 a+b를 실행하게 되고, 그러면 메모리에 10을 저장한다. ``` # 메모리 구조 - 애플리케이션에 할당되는 메모리는 내부적으로 여러 영역으로 나뉨 - 그중 stack 메모리와 heap 메모리가 있음 - stack 메모리 : 함수나 메서드의 지역변수와 매개변수가 저장됨. 함수나 메서드가 호출될 떄 마다 스택 프레임이 쌓임 - heap 메모리 : 객체가 저장됨 # stack 메모리 예제 ```js public class Main{ public static void main(String[] args){ int a = 7; int b = 3; int c = a + b; } } stack메모리가 실행되는 원리 먼저 args 가 밑에쌓이고, 두번째로 int a = 7 , 세번쨰로 int b = 3, 네번째로 int a + b = 10으로 차곡차곡 쌓인다. ``` # Heap 메모리 예제 ```js public class Main{ public static void main(String[] args){ Counter c = new Counter(); } } public class Counter { private int state = 0; public void increment() { state++;} public int get() { return state; } } stack메모리가 실행되는 원리 먼저 args 가 밑에쌓이고, 두번째로 Counter c 객체 그 자체값이 아닌 메모리 주소값이 쌓이고, 세번쨰로 new Counter();의 스택프레임이 생기고 , heap 메모리에 state = 0; 의 메모리가 쌓인다 ``` # 쓰레기 객체의 삭제 - 참조할 수 없는 객체이며 이를 삭제 해주지 않으면 사용하지 않는 메모리를 잡아먹기 때문에 개발자가 직접 수동으로 찾아가면서 제거해주는 방식과 가비지 컬렉터(GC)를 통하여 알아서 삭제하도록 한다. ## 함수 # 함수(function)란? - 독립적으로 존재하며 임무(task)를 수행하는 코드들의 집합 - 함수 이름으로 호출 - 매개변수를 받을 수도 받지 않을 수도 있다. - 결과값을 리턴할 수도 있고 하지 않을 수도 있다. - 재사용이 가능하다 # 예제 ```python def checkBloodPressure(bloodPressure): if bloodPressure <= 90: return "low if bloodPressure >= 140: return "high" return "normal" print(checkBloodPressure(87)) #함수 호출 -> "low" 출력 print(checkBloodPressure(120)) #함수 호출 -> "normal" 출력 ``` # 메서드란? - 객체 혹은 클래스에 종속되어 임무를 수행하는 코드들의 집합 - 클래스나 객체의 상태 정보에 접근도 가능 # 예제 ```js class Counter { private int count = 0; public void increment() { count++; } public int get() { return count; } } ------------------------ 호출결과 Counter c1 = new Counter(); c1.increment(); c1.increment(); int result1 = c1.get(); Counter c2 = new Counter(); c2.increment(); int result2 = c2.get(); ``` ### 2022-06-23 ## 변수와 값 # 변수란 무엇인가? - '값'을 담을 수 있는 이름이 있는 '그릇' # 변수의 예제 ```js - int age(이름) = 36(그릇); - boolean success(이름) = true(그릇); - Car myCar(이름) = new Car("니로")(그릇); - channelName(이름) = "쉬운코드"(그릇) ``` # 변수는 값을 바꿔 담을 수 있다. ```js - int age = 36; - age = 37; - Car myCar = new Car("니로"); - myCar = new Car("카니발"); ``` ## 객체와 클라스 # 객체(Object)란? - 상태가 있고 행동을 하는 실체(ex.차,사람) - 클래스로 기술한 대로 실체화 된 것 # 클래스(class)란? - 어떠한 속성이 있고 어떻게 행동하는지를 기술한 설계도 - 내가 원하는 속성과 행동을 구체적으로 기술한 것 # 예제 ```js // 클래스 class Car{ private String name; private double speed; private Size szie; ... public void start() {} public void stop() {} } -------------------------------------- // 객체 Car myCar = new Car("니로"); Car yourCar = new Car("소나타"); Car ourCar = new Car("스포티지"); ``` ### 2022-06-22 ## Sorted Map # Map이란? - Key : value 형태로 데이터를 저장하는 구조 - !!중요한점 : Map에서 Key는 항상 unique해야 한다.!! # 사용하는 예(축구) - 월드컵에서 한 골이라도 넣은 한국 선수들의 이름과 각각 몇 골 인지를 저장하는 경우(Hash map) - 월드컵에서 한 골이라도 넣은 한국 선수들의 이름과 각각 몇 골 인지를 저장하는 경우 + 이름순으로 정렬하여라는 추가조건이 들어간 경우(SortedMap) # SortedMap이란? - Key : value를 Key에 대하여 정렬하여 저장하는 Map # SortedMap을 구현체로 한 Map의 종류 - ConcurrentSkipListMap - TreeMap # SortedMap과 Hash Map의 차이점 - SortedMap : 정렬을 얻고 시간을 줬다.(삽입, 삭제, 검색이 느리다) - Hash Map : 정렬이 없는대신 시간이 빠르다(삽입, 삭제, 검색이 빠르다) # 결론 - 정렬이 없는 경우에는 Hash Map을 쓰는게 속도가 빠르기 떄문에 유리하고 Key에 대한 정렬이 필요한 경우 SortedMap을 사용해야 한다. ## 아스키 코드 # 아스키코드란? - 컴퓨터는 문자를 문자로 기억하지 않는다. 그대신 순자로 기억하고 표현한다. 예를 들면 문자 'A'는 65로, 'B'는 66으로 표현한다. 그런데 사람마다 규칙을 개인대로 정하면 자칫 소통하는데 오류가 생길 것이다. 예를 들어 어떤 사람은 'A'는 1로, 'B'는 2로 표현 할 수 도 있을 것이다. 그래서 모든 사람이 공통적으로 쓸 수 있는 표준 규격이 필요한데, 이것이 바로 아스키(ASCII : American Standard Code for Information Interchange)다. 1967년에 만들어졌고 알파벳에 기초를 둔 문자 인코딩 방법이다. 아스키 코드에는 인쇄가 불가능한 33개의 제어문자 코드와 95개의 인쇄가 가능한 문자 코드가 있다. 아스키 코드는 0에서 127까지의 숫자를 이용하여 문자를 표현한다. 제어 문자 코드는 0부터 31까지 차지하며, 스페이스 문자부터 인쇄가 가능한 코드이다. 스페이스 문자는 32로 표현된다. 느낌표 문자(!)의 코드는 33이다. 이렇게 1씩 증가하며 문자들을 순차적으로 나열한다. 곧 'a'는 97, 'b'는 98이다. 표를 참고하면 이해하기 쉽다. # 아스키코드표

### 2022-06-21 ## Hash map # Hash map이란? - Key(ex:학생), value(ex:오영규) 값으로 저장하는 자료구조 # 특징 - 삽입, 삭제, 갱신, 탐색이 상수시간(데이터 크기에 상관없이)에 빠르게 처리됨. # 예제 ```js 인기투표 : 한국의 영화배우 투표 참여자 : 전국민 5,500만명 투표방식 : 투표용지에 이름을 적어 투표 들어간 함수 : hash map ------------------------------------- 전지현 : x표 김수현 : y표 하지원 : z표 최민식 : q표 공유 : w표 --------------------------------------- key / value 전지현 2 김수현 1 하지원 3 여기서 김수현이 1표가 나올 경우에 key / value 전지현 2 김수현 1 -> 2 로 변경 하지원 3 추가로 공유가 처음으로 나올 경우 key / value 전지현 2 김수현 1 하지원 3 공유 1 ``` #Hash function이란? - Hash map의 Key 값을 배열크기 내의 index로 바꿔주는 함수 - "전지현" 이라는 문자열이 들어오면 index 0에 저장하고 "김수현"이라는 문자열이 들어오면 index1에 저장하고 하면서 문자열을 int로 형변환하여 배열에 저장되게 하는 역활이다. 따라서, hash function을 설계를 잘해야만 충돌을 방지할 수 있다. #Hash map의 Hash 충돌이 발생하는 이유 - 서로 다른 key들이 같은 hash를 가질 때 발생 -> key1 != key2 But!!! hf(key1) == hf(key2) - Hash map에서 또다른 의미의 해시 충돌 -> hf(key1) != hf(key2) But!!!! hf(key1) % M == hf(key2) % M - key의 사이즈에 비해 hash map의 사이즈가 작기 때문 (예를들어 key의 값에 String 문자배열이 들어가있을 때 hash를 통해 Integer로 바꿔주게 되면 4바이트밖에 안되기 떄문에 사이즈 차이가 커서 계산을 하는것이 불가능하다) #결론 - 전체 배우수는 너무많다(유명한 사람들은 받을거고 없는 사람들은 거의 받지 못할 것이다) 그런데, 모든 메모리를 다 올려놓고 로직을 진행하게되면 데이터 손해가 크다. - 따라서, 그떄 hash map은 상수시간으로 데이터를 삽입, 삭제, 갱신, 탐색이 가능하기 떄문에 그때그때 필요한 메모리만 삽입, 삭제, 갱신, 탐색 하면서 로직을 구현하는게 이득일 경우에 사용한다. - hash map을 사용할 때에는 hash function 함수 충돌이 나지 않도록 설계를 잘해야 한다. ## Array의 index가 0부터 시작하는 이유 # Array의 2가지 표현요소 - 1. Array의 시작주소 - 2. 각 item의 사이즈(byte) # 예제 ```js int num[5] = {1,2,3,4,5}라 가정하고 - array의 시작주소 = 1000 이라 가정할 때 - 각 item의 사이즈 = int형이므로 4byte이다. 따라서 컴퓨터에서 배열을 표시하는 방법은 우선 메모리로 찾아가서 배열을 찾아간다. 그리고 array의 시작주소 + item의 사이즈 * index 번호로 계산한다. 따라서, 첫번째 배열 주소는 1000 + 4 * 0 = 1000; 1000 + 4 * 1 = 1004; 1000 + 4 * 2 = 1008; 1000 + 4 * 3 = 1012; 1000 + 4 * 4 = 1016; ``` ### 2022-06-20 ## 객체지향 프로그래밍이란? - 객체지향 프로그래밍(Object Oriented Programming)은 문제를 여러 개의 객체 단위로 나눠 작업하는 방식을 말합니다. - 대표적으로 계산기가 있다. # 특징 및 장점 - 객체지향 프로그래밍의 가장 큰 특징은 클래스를 이용해 연관 있는 처리부분(함수)과 데이터 부분(변수)를 하나로 묶어 객체(인스턴스)를 생성해 사용한다는 점입니다. - 객체지향 프로그래밍에서는 프로젝트를 독립적인 객체 단위로 분리해서 작업할 수 있기 때문에 여러 개발자와 협업해 규모가 큰 프로젝트를 진행할 수 있으며 유지보수측면도 뛰어나다는 장점이 있습니다. # 예제(계산기 더하기 1개 코드) ```js import java.util.*; public class Main { public static void main(String args[]) { 계산기의 "더하기" 기능을 구현한 코드는 다음과 같다. class Calculator { static int result = 0; static int add(int num) { result += num; return result; } public class Sample { public static void main(String[] args) { System.out.println(Calculator.add(3)); System.out.println(Calculator.add(4)); } } } public class Sample { public static void main(String[] args) { System.out.println(Calculator.add(3)); System.out.println(Calculator.add(4)); } } ``` # 예제(계산기 더하기 2개 코드) ```js import java.util.*; public class Main { public static void main(String args[]) { 그런데 만일 Sample 클래스에서 2대의 계산기가 필요한 상황이 발생하면 어떻게 해야 할까? 각 계산기는 각각의 결괏값을 유지해야 하기 때문에 위와 같이 Calculator 클래스 하나만으로는 결괏값을 따로 유지할 수 없다. 이런 상황을 해결하려면 다음과 같이 클래스를 각각 따로 만들어야 한다. class Calculator1 { static int result = 0; static int add(int num) { result += num; return result; } } class Calculator2 { static int result = 0; static int add(int num) { result += num; return result; } } public class Sample { public static void main(String[] args) { System.out.println(Calculator1.add(3)); System.out.println(Calculator1.add(4)); System.out.println(Calculator2.add(3)); System.out.println(Calculator2.add(7)); } } 똑같은 일을 하는 Calculator1과 Calculator2 클래스를 만들었다. ``` # 예제(객체를 활용한 더하기 코드) ```js import java.util.*; public class Main { public static void main(String args[]) { class Calculator { int result = 0; int add(int num) { result += num; return result; } } public class Sample { public static void main(String[] args) { Calculator cal1 = new Calculator(); // 계산기1 객체를 생성한다. Calculator cal2 = new Calculator(); // 계산기2 객체를 생성한다. System.out.println(cal1.add(3)); System.out.println(cal1.add(4)); System.out.println(cal2.add(3)); System.out.println(cal2.add(7)); } } Calculator 클래스로 만든 별개의 계산기 cal1, cal2(이것을 객체라고 부른다)가 각각의 역할을 수행한다. 그리고 계산기(cal1, cal2)의 결괏값 역시 다른 계산기의 결괏값과 상관없이 독립적인 값을 유지한다. 객체를 사용하면 계산기 대수가 늘어나더라도 객체를 생성만 하면 되기 때문에 클래스만을 사용하는 경우와 달리 매우 간단해진다. ``` ## 백준 4344번 평균은 넘겠지 # 문제내용 - 대학생 새내기들의 90%는 자신이 반에서 평균은 넘는다고 생각한다. 당신은 그들에게 슬픈 진실을 알려줘야 한다. - 각 케이스마다 한 줄씩 평균을 넘는 학생들의 비율을 반올림하여 소수점 셋째 자리까지 출력한다. # 입력예제 - 5 - 5 50 50 70 80 100 - 7 100 95 90 80 70 60 50 - 3 70 90 80 - 3 70 90 81 - 9 100 99 98 97 96 95 94 93 91 # 출력예제 - 40.000% - 57.143% - 33.333% - 66.667% - 55.556% # 풀이 ```js import java.util.*; public class Main { public static void main(String args[]) { Scanner sc = new Scanner(System.in); int C = sc.nextInt(); // 첫째 줄 케이스를 몇개할 건지를 입력받는 변수 선언 for(int i = 0; i < C; i++) { //for문을 통해 1부터 C변수로입력받은 만큼 반복 int N = sc.nextInt(); //한줄마다 몇개 있는지 확인해야 하므로 N 변수 선언 int[] arr = new int[N]; // N개의 갯수만큼 int형 배열에 담아주기 double sum = 0; // 더해줄 변수 sum선언 for(int j = 0; j < arr.length; j++) { //for문을 통해 1번쨰 숫자부터 N번째 숫자까지 반복하면서 더해주는 로직 arr[j] = sc.nextInt(); sum += arr[j]; } double avg = sum / N;; // avg 변수를 선언하여 평균을 구함. double gradecount = 0; // count를 세줄 gradecount 변수를 선언 for(int k = 0 ; k < arr.length; k++) { //for문을 통해 1번째부터 N번째 숫자까지 반복하면서 해당숫자가 평균보다 높은지를 비교하고 높다면 gradecount를 1씩 증가시키는 로직 if(arr[k] > avg) { gradecount++; } } System.out.printf("%.3f%%\n",(gradecount/arr.length)*100); //위의 로직값에서 소수점 3째짜리를 표현하기 위한 %.3f와 뒤에 %를 단독으로 사용할 수 없으므로 %%로 표현한 후 gradecount저장된 갯수를 전체 갯수에서 나눠 준 후 백분율 값이므로 *100을 해주면 된다. } sc.close(); } } ``` ### 2022-06-17 ## List / Set # 차이점 - List : 순서가 있는 Collection으로 List에 데이터를 넣는 순서가 보장되며, 그렇기에 특정 index로 아이템을 가져올 수 있다. - Set : 순서를 보장하지 않는 Collection이며 index로 특정 아이템을 가져올 수 없다.. # 예제(순서보장관련) ```js List의 경우 순서가 보장되는 Collection이기 때문에, 다음과 같이 index로 특정 아이템을 가져올 수 있습니다. String[] fruitsArray = {"apple", "banana", "kiwi", "mango"}; ArrayList fruits = new ArrayList<>(Arrays.asList(fruitsArray)); System.out.println("get(0) : " + fruits.get(0)); System.out.println("get(2) : " + fruits.get(2)); Output: get(0) : apple get(2) : kiwi ---------------------------------------------------------------- Set의 경우 순서가 보장되지 않기 때문에, add()의 순서와 저장되는 순서가 다릅니다. 이 순서는 Set의 구현에 따라서 달라질 수 있습니다. Set fruits = new HashSet(); fruits.add("apple"); fruits.add("banana"); fruits.add("kiwi"); System.out.println("fruits: " + fruits); Output: fruits: [banana, apple, kiwi] ``` # 예제(중복허용관련) ```js List는 중복을 허용합니다. 다음과 같이 중복된 값을 추가할 수 있습니다. List fruits = new ArrayList<>(); fruits.add("apple"); fruits.add("banana"); fruits.add("kiwi"); fruits.add("kiwi"); fruits.add("kiwi"); fruits.add(null); System.out.println("fruits: " + fruits); Output: fruits: [apple, banana, kiwi, kiwi, kiwi, null] ------------------------------------------------------- Set는 중복을 허용하지 않기 때문에, 다음과 같이 중복된 값을 여러번 넣으려고 시도해도 무시됩니다. Set fruits = new HashSet<>(); fruits.add("apple"); fruits.add("banana"); fruits.add("kiwi"); fruits.add("kiwi"); fruits.add("kiwi"); System.out.println("fruits: " + fruits); Output: fruits: [banana, apple, kiwi] ``` # 결론 - 장되는 데이터의 순서를 보장해야한다면 List를 사용해야 합니다. - contains(element)는 Collection에 데이터가 존재하는지 확인하는 메소드입니다. List의 contains 실행 속도는 O(n)이지만, Set는 O(1)으로 매우 빠릅니다. 탐색이 잦다면 Set를 고려해볼 수 있습니다. - 데이터가 많지 않다면 성능보다, 구조가 간단한 List를 고려해볼 수 있습니다. - 중복을 허용하지 않는 Collection이 필요하다면 Set를 고려해볼 수 있습니다. ## Abstract Data Type(추상자료형) / Data Structure(자료구조) # 차이점 - ADT :구현하고자 하는 구조에 대해 구현방법은 명시하지 않고 자료구조의 특성들과 어떤 Operations들이 있는지를 설명하는 자료구조의 형태 즉 , 일종의 '규칙'들의 나열이라고 볼수 있다. 대표적인 예로는 스택과 큐가 있다. - DS : 위에 ADT에 실제로 어떻게 구현하는지가 추가되면 DS가 된다. 결국 큐와 스택이란 것은 Array 또는 Linked List 에 규칙을 설정한 모습이다. # 예제 ```js 스택 (Stack)이 있을 때 사용자는 Push 또는 Pop을 이용하여 스택을 사용한다. 스택의 내부에서는 사용자의 명령을 받아 데이터의 LIFO (Last-In First-Out) 동작을 수행한다. 여기서, 스택을 ADT로 볼 수 있고 / 내부에서 동작하는 LIFO를 데이터 구조라고 한다. ``` # 스택의 특징 - 탑을 쌓을 때 위로 쌓는것만 가능하듯 한방향으로만 입력할 수 있으며 구조 중간에 값을 끼어 넣어 저장할 수 없다. 즉, 같은 크기의 자료를 정해진 한 방향으로만 입력, 저장, 삭제가 가능 - 대표적인 후입선출 구조(먼저들어온 게 늦게 나가고 늦게 들어온게 먼저 나간다.) # 큐의 특징 - 큐는 양방향의 입구로 한쪽에서는 데이터의 입력만이 이루어지고 다른 쪽에서는 데이터의 출력만이 이루어진다. - 결론적으로 선입선출(먼저 들어온게 먼저 나간다) 구조이다. ### 2022-06-16 ## ArrayList 와 LinkedList 차이점 # ArrayList란? - ArrayList는 중복을 허용하고 순서를 유지하며 인덱스로 원소들을 관리한다는 점에서 배열과 상당히 유사합니다. 배열은 크기가 지정되면 고정되지만 ArrayList는 클래스이기 때문에 배열을 추가, 삭제 할 수 있는 메소드들도 존재합니다. - 하지만 추가했을 때 배열이 동적으로 늘어나는 것이 아니라 용량이 꽉 찼을 경우 더 큰 용량의 배열을 만들어 옮기는 작업을 하게 됩니다. # ArrayList API를 보면서 특징 이해하기 - add(E element): 원소를 마지막에 추가하기 배열에 마지막에 원소를 추가하는 것이기 때문에 빠르게 추가할 수 있습니다. - add(int index, E element): 원소를 지정된 위치에 추가하기 배열에 마지막이 아닌 처음, 중간에 데이터를 넣어야 한다면 어떻게 될까요? 5번 인덱스까지 들어있는 배열에서 2번 인덱스에 원소를 추가한 상황이라면 2번 인덱스 부터 원소들을 뒤로 한칸씩 미뤄서 중간에 공간을 만드는 작업이 필요합니다. 이 과정에서 시간이 많이 걸리게 됩니다. - remove(int index): 원소의 인덱스로 삭제하기 마지막 원소를 삭제한다면 쉽게 삭제할 수 있지만 중간이나 처음의 원소를 삭제하게 되면 빈공간을 다시 채워야 하는 과정이 필요하기 때문에 비효율적입니다. - get(int index): 인덱스에 해당하는 원소 찾아오기 배열은 인덱스에 해당하는 원소를 O(1)에 찾아올 수 있기 때문에 탐색에는 매우 유리합니다. 간단하게 정리하면 ArrayList는 탐색은 빠르게 할 수 있지만, 중간에서 추가, 삭제가 빈번하게 일어나면 비효율적인 특징을 가지고 있습니다. # LinkedList란? - LinkedList는 내부적으로 양방향의 연결 리스트로 구성되어 있어서 참조하려는 원소에 따라 처음부터 순방향으로 또는 역순으로 순회할 수 있습니다. (배열의 단점을 보완하기 위해서 링크드 리스트(Linked list)라는 자료구조가 고안되었습니다.) # LinkedList API를 보면서 특징 이해하기 - add(E element): 원소를 마지막에 추가하기 LinkedList도 마찬가지로 add 메소드가 존재합니다. 그런데 LinkedList는 배열처럼 인덱스를 가지고 있지 않습니다. 따라서 원소를 추가하기 위해서는 Head에서 부터 마지막까지 찾아가야 하기 때문에 시간이 많이 걸립니다. - add(int index, E element): 원소를 지정된 위치에 추가하기 인덱스를 지정해서 추가하는 것도 마찬가지로 해당 위치로 가려면 Head 부터 탐색해서 가야하기 때문에 시간이 걸리게 됩니다. - remove(int index): 원소를 삭제하기 원소를 삭제하려면 배열의 경우는 삭제하면 빈 공간을 다시 채워주는 작업이 필요하지만, LinkedList는 삭제하려는 원소 앞 or 뒤로 가서 가르키는 값을 null로 바꿔주면 됩니다. - get(int index): 인덱스에 해당하는 원소 찾아오기 LinkedList는 ArrayList와 다르게 인덱스를 통해서 검색을 하는 것이 아니라 Head에서 부터 해당 원소 까지 검색해야 하기 때문에 O(n)에 찾을 수 있습니다. # ArrayList와 LinkedList 성능 차이 - 순차적으로 추가/삭제하는 경우에는 ArrayList가 LinkedList보다 빠르다. - 중간 데이터를 추가/삭제하는 경우에는 LinkedList가 ArrayList보다 빠르다. # ArrayList vs LinkedList 시간복잡도 - ArrayList -> 배열의 경우는 연속적으로 메모리상에 존재하고, 참조변수 하나당 4byte이기 때문에 시작배열 주소 + n * 데이터 타입의 크기를 통해서 원하는 인덱스에 쉽게 접근할 수 있습니다. - LinkedList -> LinkedList는 불연속적으로 위치한 각 요소들이 서로 연결된 것이라 처음부터 n번째 데이터까지 차례대로 따라가야만 원하는 값을 얻을 수 있습니다. 즉, LinkedList는 저장해야하는 데이터의 개수가 많아질수록 데이터를 읽어 오는 시간, 접근 시간(access time)이 길어진다는 단점이 있습니다. ## print / printf / println 차이 # system.out.print - 형식(int, float, double 등)에 구애받지 않는 문자를 그대로 출력하고 싶을 때 사용한다. - 엔터 입력시 버퍼(buffer)에 \n(개행문자)는 포함 안됨.(엔터 누르는 순간 엔터는 입력 안됨) 그래서 줄바꿈 필요 없을 때 println말고 print 사용하면 된다. # system.out.println - print와 동일하게 형식(int, float, double 등)에 구애받지 않는 문자를 그대로 출력하고 싶을 때 사용한다. - 차이점은 엔터 입력시 버퍼(buffer)에 \n(개행문자)가 같이 들어간다. (엔터 누르는 순간 엔터도 입력된걸로 간주) # system.out.printf - 형식을 신경써야할 때 사용(int, long, float, double 등) - 엔터 입력시 버퍼(buffer)에 \n(개행문자)는 포함 안됨. ### 2022-06-15 ## 문제 : 3명의 사람이 각각 1번씩 달린 뒤 쉬게해주세요. # 매개변수 사용버전 ```js class Main { public static void main(String[] args) { 사람 a사람 = new 사람(); 사람 b사람 = new 사람(); 사람 c사람 = new 사람(); a사람.달리다("a"); a사람.쉬다("a"); b사람.달리다("b"); b사람.쉬다("b"); c사람.달리다("c"); c사람.쉬다("c"); } } class 사람 { void 달리다(String 달리다) { System.out.println(달리다 + "사람이 달리고 있습니다."); } void 쉬다(String 쉬다) { System.out.println(쉬다 + "사람이 쉬고 있습니다."); } } ``` # 매개변수 사용X ```js class Main { public static void main(String[] args) { 사람 a사람 = new 사람(); 사람 b사람 = new 사람(); 사람 c사람 = new 사람(); a사람.달리다(); a사람.쉬다(); b사람.달리다(); b사람.쉬다(); c사람.달리다(); c사람.쉬다(); } } class 사람 { void 달리다() { System.out.println("사람이 달리고 있습니다."); } void 쉬다() { System.out.println("사람이 쉬고 있습니다."); } } ``` # 매개변수를 사용할 시 장점 - 각각의 메소드별 변수 System.out.prinln을 따로 사용하지 않아도 되서 편하다. - 가독성이 좋아진다. ## 백준 1110번 더하기 사이클 # 문제내용 - 0보다 크거나 같고, 99보다 작거나 같은 정수가 주어질 때 다음과 같은 연산을 할 수 있다. 먼저 주어진 수가 10보다 작다면 앞에 0을 붙여 두 자리 수로 만들고, 각 자리의 숫자를 더한다. 그 다음, 주어진 수의 가장 오른쪽 자리 수와 앞에서 구한 합의 가장 오른쪽 자리 수를 이어 붙이면 새로운 수를 만들 수 있다. 다음 예를 보자. 26부터 시작한다. 2+6 = 8이다. 새로운 수는 68이다. 6+8 = 14이다. 새로운 수는 84이다. 8+4 = 12이다. 새로운 수는 42이다. 4+2 = 6이다. 새로운 수는 26이다. 위의 예는 4번만에 원래 수로 돌아올 수 있다. 따라서 26의 사이클의 길이는 4이다. N이 주어졌을 때, N의 사이클의 길이를 구하는 프로그램을 작성하시오. # 입력예제 - 26 / 55 / 1 / 0 / 71 # 출력예제 - 4 / 3 / 60 / 1 / 12 # 풀이 ```js import java.io.*; public class Main { public static void main(String args[]) throws IOException{ BufferedReader bf = new BufferedReader(new InputStreamReader(System.in)); //BufferedReader 입력값 변수설정 BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out)); //BufferedWriter 입력값 변수설정 int N = Integer.parseInt(bf.readLine()); //BufferedReader는 String으로 받기 때문에 변수를 Integer.parseInt로 형변환 진행 int x = N; //int x 변수를 만들어 N을 담음. int count = 0; //int count 변수 설정 while(true) { int q = x / 10; //십의 자리 불러오는 변수 int r = x % 10; //일의 자리 불러오는 변수 int sum = q + r; //둘의 숫자를 더해주는 변수 x = r * 10 + sum % 10; // x 변수에 새롭게 구한 값 대입 count++; // count 더하기 if(x == N) { // x값과 N값이 같을 경우 while문 종료 break; } } bw.write(count + "\n"); // 받아온 값 뿌려주기 bw.flush(); bw.close(); br.close(); } } ``` ### 2022-06-14 ## 백준 10871번 : X보다 작은 수 # 문제내용 - 정수 N개로 이루어진 수열 A와 정수 X가 주어진다. 이때, A에서 X보다 작은 수를 모두 출력하는 프로그램을 작성하시오. # 입력예제 - 10 5 - 1 10 4 9 2 3 8 5 7 6 # 출력예제 - 1 4 2 3 # 풀이 ```js import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner in = new Scanner(System.in); int N = in.nextInt(); // 정수형 변수 N 입력받기 int X = in.nextInt(); // 정수형 변수 X입력받기 int arr[] = new int[N]; // 정수형 배열 arr 만들기 for (int i = 0; i < N; i++) { // for 문을 통해 0부터 N까지 순회하면서 배열 arr에 담기 arr[i] = in.nextInt(); } in.close(); for (int i = 0; i < N; i++) { // for문을 통해 배열 arr에 담긴 값 중 X보다 작은 값을 화면에 뿌려주는 역활 if (arr[i] < X) { System.out.print(arr[i] + " "); } } } } ``` ## BufferedReader / BufferedWriter # BufferedReader의 장점 - Java를 처음 접하시는 분들이 주로 받는 입력방식은 Scanner입니다. Scanner를 통해 입력을 받을경우 Space Enter를 모두 경계로 인식하기에 입력받은 데이터를 가공하기 매우 편리합니다. 하지만 그에비해 BufferedReader는 Enter만 경계로 인식하고 받은 데이터가 String으로 고정되기때문에 입력받은 데이터를 가공하는 작업이 필요할경우가 많습니다. Scanner에 비해 다소 사용하기 불편하죠. 하지만 많은 양의 데이터를 입력받을경우 BufferedReader를 통해 입력받는 것이 효율면에서 훨씬 낫습니다. 입력시 Buffer를 활용함으로써 작업속도 차이가 많이납니다. # BufferedReader 사용법 ```js BufferedReader bf = new BufferedReader(new InputStreamReader(System.in)); //선언 String s = bf.readLine(); //String int i = Integer.parseInt(bf.readLine()); //Int 입력은 readLine();이라는 메서드를 활용하시면 되는데요. 여기서 주의할점이 두가지가 있습니다. 첫번째는 readLine()시 리턴값을 String으로 고정되기에 String이 아닌 다른타입으로 입력을 받을려면 형변환을 꼭 해주어야한다는 점 두번째는 throws IOException을 통하여 예외처리를 꼭 해주어야한다는 점 Read한 데이터 가공 StringTokenizer st = new StringTokenizer(s); //StringTokenizer인자값에 입력 문자열 넣음 int a = Integer.parseInt(st.nextToken()); //첫번째 호출 int b = Integer.parseInt(st.nextToken()); //두번째 호출 String array[] = s.split(" "); //공백마다 데이터 끊어서 배열에 넣음 ``` # BufferedWriter 사용법 - BufferedReader를 사용하면 반드시 BufferedWriter를 통하여 버퍼를 호출하여 뒤처리를 해줘야함. ```js BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));//선언 String s = "abcdefg";//출력할 문자열 bw.write(s);//출력 bw.newLine(); //줄바꿈 bw.flush();//남아있는 데이터를 모두 출력시킴 bw.close();//스트림을 닫음 BufferedWriter 의 경우 버퍼를 잡아 놓았기 때문에 반드시 flush() / close() 를 반드시 호출해 주어 뒤처리를 해주어야합니다. 그리고 bw.write에는 System.out.println();과 같이 자동개행기능이 없기때문에 개행을 해주어야할 경우에는 \n를 통해 따로 처리해주어야합니다. ``` # BufferedReader와 BufferedWriter를 사용한 예제 ```js import java.io.*; public class Main { public static void main(String args[]) throws IOException{ BufferedReader bf = new BufferedReader(new InputStreamReader(System.in)); BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out)); int n = Integer.parseInt(bf.readLine()); for(int i = 0; i < n; i++) { String s = bf.readLine(); int a = Integer.parseInt(s.split(" ")[0]); int b = Integer.parseInt(s.split(" ")[1]); bw.write(a+b+"\n"); } bw.flush(); } } ``` # 주요 Method - BufferedReader(Reader rd) rd에 연결되는 문자입력 버퍼스트림 생성 - BufferedWriter(Writer wt) wt에 연결되는 문자출력 버퍼스트림 생성 - int read() 스트림으로부터 한 문자를 읽어서 int 형으로 리턴 - int read(char[] buf) 문자배열 buf의 크기만큼 문자를 읽어들임. 읽어들인 문자 수를 리턴 - int read(char[] buf, int offset, int length) buf의 offset위치에서부터 length 길이만큼 문자를 스트림으로부터 읽어들임 - String readLine() 스트림으로부터 한 줄을 읽어 문자열로 리턴 - void mark() 현재우치를 마킹, 차 후 reset() 을 이용하여 마킹위치부터 시작함 - void reset() 마킹이 있으면 그 위치에서부터 다시시각, 그렇지 않으면 처음부터 다시시작 - long skip(int n) n 개의 문자를 건너 뜀 - void close() 스트림 닫음 - void write(int c) int 형으로 문자 데이터를 출력문자스트림으로 출력 - void write(String s, int offset, int length) 문자열 s를 offset 위치부터 length 길이만큼을 출력스트림으로 출력 - void write(char[] buf, int offset, int length) 문자배열 buf의 offset 위치부터 length 길이만큼을 출력스트림으로 출력 - void newLine() 줄바꿈 문자열 출력 - void flush() 남아있는 데이터를 모두 출력시킴. ### 2022-06-13 ## try / catch문 # 자바 예외의 원리 - 파일을 읽는 프로그램을 실행시켰으나 파일을 찾을 수 없는 경우 - 문자열을 숫자로 변환하는 프로그램을 실행했으나 숫자로 변환할 수 없는 문자열인 경우 - 배열의 범위를 벗어나는 경우 - 이러한 오류들은 코드를 컴파일 할 때는 찾을 수 없으며 프로그램을 실행시켜서 위의 상황에 맞는 경우에만 에러가 발생합니다. - 자바는 이러한 오류에 대응하기 위해 '예외 처리' 기능을 제공합니다. # try catch 처리방식 1. try 블록 안에서 예외가 발생하면 그 순간에 코드 실행을 중단 2. 발생된 예외종류가 catch 블럭의 ( ) 안에 지정한 예외와 일치하면 그 안의 코드를 실행 3. catch 블록 안의 코드가 모두 실행되면 try catch 블록 다음에 등장하는 코드를 실행 # try - try 문 안에 있는 코드들이 에러가 발생하는 경우 catch 문으로 전달합니다. # catch - ry 에서 발생한 예외처리를 진행합니다. 참고로 catch 문에서 모든 예외처리를 할 수 있는 것은 아니며 발생한 예외처리 (위의경우 ArrayIndexOutOfBoundException) 을 처리할 수 있게 되어있어야 합니다. # 예외처리가 있을 경우 ( try catch 문 ) - 위의 코드에서 try catch 문으로 예외처리 되도록 변경하였습니다. try 내의 num[4] 에서 ArrayIndexOutOfBoundsException 에러가 발생했고 catch 문에서 예외처리를 진행합니다. ```js public class trycatchTest { public static void main(String[] args) { // TODO Auto-generated method stub try { int [] num = new int[3]; System.out.println("num 배열의 최대 길이는 3입니다."); num[4] = 0; System.out.println("num[4] 에 값을 입력했습니다."); } catch (ArrayIndexOutOfBoundsException e) { System.out.println("배열 길이가 맞지 않습니다."); } } } ``` # finally 구문 - finally 구문은 예외처리가 발생여부를 떠나 무조건 실행하도록 하는 구문입니다. ```js public class trycatchTest { public static void main(String[] args) { // TODO Auto-generated method stub try { int [] num = new int[3]; System.out.println("num 배열의 최대 길이는 3입니다."); num[4] = 0; System.out.println("num[4] 에 값을 입력했습니다."); } catch (ArrayIndexOutOfBoundsException e) { System.out.println("배열 길이가 맞지 않습니다."); } finally { System.out.println("배열을 다시 선언합니다"); int [] num = new int[5]; num[4] = 0; System.out.println(num[4]); } System.out.println("프로그램을 종료합니다"); } } ``` # 정리 - try 예외 발생을 조사하는 문장 검사 - catch 예외가 발생했을 때 실행시킬 코드 - finally 마지막에 반드시 실행시켜야 하는 코드 # public과 클래스 ```js public class MadPlay { /* * MadPlay 클래스가 public으로 선언되어 있기 때문에 * 다른 클래스에서 접근이 가능하다. */ } -------------------------------------------------- class MadLife { MadPlay madplay; public void someMethod() { madplay = new MadPlay(); } } ``` # default와 클래스 ```js package p1; class MadPlay { } class MadLife { // 같은 패키지에 있어서 접근 가능하다. MadPlay madplay; public void someMethod() { madplay = new MadPlay(); } } ------------------------------------------------ package p2; class MadMan { // 다른 패키지에 있어서 사용 불가능 하다. MadPlay madplay; } 위 예제를 보면 default 접근 지정자로 선언된 MadPlay 클래스와 같은 패키지에 있는 MadLife 클래스에서는 오류가 발생하지 않는다. 하지만 다른 패키지에 있는 MadMan 클래스에서는 Cannot be accessed from outside package와 같은 오류 메시지를 만날 수 있다. ``` # public과 멤버 - 멤버가 public으로 선언된 경우를 먼저 보자. 패키지의 내부, 외부 등 모든 클래스에서 접근이 가능하다. 물론 정적 멤버가 아닌 경우 인스턴스화 후에 접근해야 한다. ```js package p1; public class MadPlay { public String name; public void sayHi() [ System.out.println("hello~"); ] } class MadLife { public void someMethod() { MadPlay madplay = new MadPlay(); madplay.sayHi(); } } -------------------------------------------------- package p2; import p1.MadPlay; // 단, import 해야 한다. class MadMan { void someMethod() { MadPlay madplay = new MadPlay(); madplay.sayHi(); } } ``` #private과 멤버 - 멤버가 private으로 선언된 경우를 살펴보자. 이 접근 지정자는 기본적으로 비공개를 의미한다. 즉, 같은 클래스 내부 멤버에 의해서만 접근이 가능하다는 뜻으로 다른 어떤 클래스에서도 접근할 수 없다. ```js package p1; public class MadPlay { private void sayHi() { System.out.println("Hi~"); } } -------------------------------------------- class MadLife { public void someMethod() { MadPlay madplay = new MadPlay(); madplay.sayHi(); // 오류 } } ``` #protected와 멤버 - 같은 패키지에 protected로 선언된 멤버의 동작을 살펴보자. 부분적인 공개를 뜻하는데, 같은 패키지 내의 모든 클래스에서 접근이 가능하다. 혹은 다른 패키지의 클래스라도 해당 클래스를 상속 받았다면 접근이 가능하다. ```js package p1; public class MadPlay { protected void sayHi() { System.out.println("Hi~"); } } ------------------------------------------ class MadLife { public void someMethod() { Madplay madplay = new MadPlay(); madplay.sayHi(); } } ------------------------------------------------------ package p1; import p1.MadPlay; class MadMan extends MadPlay { public void someMethod() { // MadPlay 클래스의 멤버에 접근하는 것이다. sayHi(); // 인스턴스를 통해 접근하려면 상속받은 객체를 인스턴스화해야 한다. MadMan madMan = new MadMan(); madMan.sayHi(); } } class Madness { public void someMethod() { MadPlay madplay = new MadPlay(); // 오류. 상속 받지 않았다. madplay.sayHi(); } } ``` #default와 멤버 - 접근 지정자를 생략한 default를 살펴보자. 접근 지정자의 선언이 생략된 경우는 멤버가 default 접근 지정자임을 뜻한다. 이 경우에는 동일한 패키지 내에 있는 모든 클래스가 자유롭게 접근 가능하다. ```js package p1; public class MadPlay { void sayHi() { ... } } class MadLife { public void someMethod() { MadPlay madplay = new MadPlay(); // 같은 패키지에 있어서 접근 가능 madplay.sayHi(); } } ----------------------------------------- package p2; import p1.MadPlay; class MadMan extends MadPlay { public void someMethod() { // 상속해도 접근 불가 sayHi(); MadMan madMan = new MadMan(); madMan.sayHi(); // 역시나 접근 불가 } } class Madness { public void someMethod() { MadPlay madplay = new MadPlay(); madplay.sayHi(); // 접근 불가 } } ``` # 접근 지정자별 차이점 - public -> 클래스, 멤버 모든 외부에서 접근 가능 - protected -> 멤버 같은 패키지, 상속한 경우만 접근 가능 클래스에 적용할 수 없음 - default -> 클래스, 멤버 같은 패키지에 속한 경우만 접근 가능 접근 지정자를 생략한 경우를 말함 - private -> 멤버 오직 내부에서만 접근 가능 클래스에 적용할 수 없음 ### 2022-06-10 # assertEquals란? - JUnit에서 사용하는 메소드 # JUnit이란? - 자바를 위한 단위 테스트 라이브러리(오픈소스)이다. 자바 애플리케이션에 대한 단위 테스트를 쉽게 해 주는 테스트용 프레임워크 # 메소드 정의 - assertEquals(A, B) : 객체 A와 B가 같은 값을 가지는지 확인한다. # 예제 ```js import static org.junit.jupiter.api.Assertions.assertEquals; public class AppTest { @Test public void _1_더하기_1() { assertEquals(new Calc().run("1 + 1"), 2); } } public class Calc { public int run(String s) { return plus(s); } public int plus(String s) { String[] sBits = s.split(" \\+ "); int a = Integer.parseInt(sBits[0]); int b = Integer.parseInt(sBits[1]); return a + b; } } ``` ## chatAt # chatAt란? - string 타입으로 받은 문자열을 char 타입으로 한 글자만 받는 함수 # 문자열 받기 ```js "Hello World"를 charAt(0)을 통해서 첫 번째 문자열 "H"만 받아올 수 있습니다 밑의 System.out.print를 실행하면 "H"만 받아옵니다 String str = "Hello World"; System.out.print(str.charAt(0)); ``` # 숫자 받기 ```js a를 0으로 입력한 후 b에서 숫자로 받습니다 - 48을 하는 이유는 숫자 0-9까지는 유니코드상 48-57입니다 그래서 48을 빼서 b에서 숫자 0을 집어넣었습니다 String a = "0"; int b = a.charAt(0) - 48; System.out.println(b); ``` # charAt을 사용해서 홀수 번째 문자열, 짝수 번째 문자열 받기 ```js for문과 if - else를 응용해서 홀수, 짝수번째 문자열을 받는 식을 만들어봤습니다 charAt을 응용하면 이런 방식의 구문도 가능합니다 Odd는 "HloWrd" Even은 "el ol" 값을 출력해줍니다 String str2 = "Hello World"; String Odd = ""; String Even = ""; int length = str2.length(); for(int i = 0; i < length; i++) { if(i % 2 == 0) Odd = Odd + str2.charAt(i); else Even = Even + str2.charAt(i); } System.out.println(Odd); System.out.println(Even); ``` ## 클래스 형변환 # 클래스 형변환을 사용해야 하는 경우 - 부모타입으로 자식객체를 참조하게 되면 부모가 가지고 있는 메소드만 사용할 수 있다. 자식객체가 가지고 있는 메소드나 속성을 사용하고 싶다면 형변환 해야 한다. ```js public class Car{ public void run(){ System.out.println("Car의 run메소드"); } } public class Bus extends Car{ public void ppangppang(){ System.out.println("빵빵."); } } ``` # 부모타입으로 자식객체를 참조하게 되면 부모가 가지고 있는 메소드만 사용할 수 있다. ```js public class BusExam{ public static void main(String args[]){ Car car = new Bus(); car.run(); car.ppangppang(); // 컴파일 오류 발생 } } ppangppang()메소드를 호출하고 싶다면 Bus타입의 참조변수로 참조해야 한다. public class BusExam{ public static void main(String args[]){ Car car = new Bus(); car.run(); //car.ppangppang(); // 컴파일 오류 발생 Bus bus = (Bus)car; //부모타입을 자식타입으로 형변환 bus.run(); bus.ppangppang(); } } ``` - 객체들 끼리도 형변환이 가능하다. 단 상속관계에 있었을 때만 가능하다. - 부모타입으로 자식타입의 객체를 참조할 때는 묵시적으로 형변환이 일어난다. - 부모타입의 객체를 자식타입으로 참조하게 할때는 명시적으로 형변환 해주어 한다. 단 이렇게 형변환 할때에는 부모가 참조하는 인스턴스가 형변환 하려는 자식타입일 때만 가능하다. ###2022-06-09 ## 오버로딩과 오버라이딩의 차이점 # 1. 오버로딩 - 하나의 클래스 안에서 같은 이름의 메서드를 여러개 정의하는 것 - 일반적으로 하나의 클래스 안에 같은 이름의 메서드를 정의하게 되면 에러가 발생 - 매개변수의 개수가 달라야 한다. / 매개변수의 타입이 달라야 한다. ```js Ex1) 매개변수의 개수가 다른 경우 public int overloadTest() { return 0; } public int overloadTest(String test) { return 1; } Ex2) 매개변수의 타입이 다른 경우 public int overloadTest(String test) { return 1; } public int overloadTest(int test) { return 1; } ``` # 오버라이딩 - 조상 클래스로부터 상속받은 메서드의 내용을 변경(재정의)하여 사용하는 것 - 상속받은 메서드를 그대로 사용할 수도 있고, 필요에 따라 메서드를 재정의 하여 사용할 수도 있다. - 매개변수가 같아야 한다. / 리턴타입이 같아야 한다. ```js public class Parent { public void overridingTest() { System.out.prinln("부모 메서드의 내용"); } } class Child extends Parent { @Override public void overridingTest() { System.out.println("상속받은 부모메서드의 내용을 수정하여 자식메서드의 내용으로 재사용"); } } ``` # 결론 - 오버로딩은 같은 이름의 매서드를 생성하여 사용하는 것이고, 오버라이딩은 부모로 부터 상속받은 메서드를 재정의하여 사용하는 것. ###2022-06-08 # 자바의 생성자란? - 생성자는 간단하게 얘기하면 인스턴스가 생성될 때 호출되는 '인스턴스 초기화 메소드'이다. 따라서 인스턴스 변수의 초기화 작업에 사용되고, 인스턴스 생성 시에 실행되어야 할 작업을 위해서 사용된다. # 생성자 특징 - 생성자의 이름은 클래스의 이름과 같아야 한다. 생성자는 리턴 값이 없다. void 또한 사용하지 않는다. 생성자는 몇 가지 특징을 제외하면 메소드와 다르지 않다. 생성자는 메소드 처럼 클래스 내에 선언되고, 오버 로딩이 가능하므로 하나의 클래스에 여러 개의 생성자가 존재할 수 있다. # 매개변수가 있는 생성자 - 인스턴스를 생성할 때 매개변수가 있는 생성자를 사용한다면 인스턴스를 생성함과 동시에 원하는 값으로 초기화를 할 수 있어 보다 간결하고 직관적이다. ```js class Car { String color; String gearType; int door; Car() {} Car(String c, String g, int d) { // 매개변수가 있는 생성자 color = c; gearType = g; door = d; } } class CarTest { public static void main(String[] args) { Car c1 = new Car(); c1.color = "white"; c1.gearType = "auto"; c1.door = 4; Car c2 = new Car("white", "auto", 4); System.out.println("c1의 color=" + c1.color + ", gearType=" + c1.gearType+ ", door="+c1.door); System.out.println("c2의 color=" + c2.color + ", gearType=" + c2.gearType+ ", door="+c2.door); } } Car 클래스에서 기본 생성자를 포함해서 매개변수가 있는 생성자도 만들어주었다. main 클래스 CarTest를 보면 Car c2 = new Car("white", "auto", 4); 이 부분이 매개변수가 있는 생성자를 이용한 인스턴스 생성이다. Car c1은 기본 생성자에서 값을 초기화해주는 과정이 있어서 간결하지 못하고 직관적이지 못하다. ``` # 생성자간의 호출 ```js class Car { String color; String gearType; int door; Car() { this("white", "auto", 4); } Car(String color) { this(color, "auto", 4); } Car(String color, String gearType, int door) { this.color = color; this.gearType = gearType; this.door = door; } } class CarTest2 { public static void main(String[] args) { Car c1 = new Car(); Car c2 = new Car("blue"); System.out.println("c1의 color=" + c1.color + ", gearType=" + c1.gearType+ ", door="+c1.door); System.out.println("c2의 color=" + c2.color + ", gearType=" + c2.gearType+ ", door="+c2.door); } } 생성자 Car()에서 또 다른 생성자 Car(String color, String gearType, int door)을 호출했다. 이렇게 생성자 간의 호출에서는 생성자 이름 대신 this를 사용해야 한다. 그리고 Car()의 첫 번째 줄에서 호출하였다. 같은 클래스 내의 생성자들은 일반적으로 서로 관계가 깊은 경우가 많아서 이렇게 연결하고 호출하는 방식으로 구현하면 더 효율적이고, 유지보수도 쉬워진다. ``` # 자바 this의 의미 - 자바에서는 인스턴스 자신을 가리키는 키워드입니다. 이 단어는 클래스 안에서 볼 수 있는데 클래스 메소드의 매개변수와 멤버변수의 식별자(변수이름)이 겹치는 경우가 발생할 때 유용하게 사용합니다. # 예제 ```js class thisTest{ private int price; public int getPrice() { return price; } public void setPrice(int price) { this.price = price; } } 위의 코드에서 price를 설정하기 위해 setter 를 사용합니다. 매개변수와 멤버변수의 이름이 같습니다. 이런 때 this 를 사용하여 구분할 수 있습니다. setter 는 역할이 정해져 있기 때문에 같은 이름으로 사용합니다. 혹은 생성자에서 초기화 할 때도 비슷하게 사용합니다. ``` # 자바 예제 데이터 넣기 ```js public static void main(String[] args) { thisTest myClass = new thisTest(); myClass.setPrice(100); System.out.println(myClass.getPrice()); myClass.showThis(); } myClass 가 인스턴스인데 클래스 내부에서는 인스턴스를 부를 이름이 없습니다. 인스턴스 이름이야 각자 달라지기 때문이죠. this 를 사용하면 지금 다루는 데이터가 인스턴스라는 것을 알 수 있습니다. ``` # this 생성자 호출 ```js thisTest(){ this(0, "none product"); } thisTest(int price, String product){ this.price = price; this.product = product; } public static void main(String[] args) { thisTest ist1 = new thisTest(200, "apple"); System.out.println(ist1.getPrice()); System.out.println(ist1.getProduct()); thisTest ist2 = new thisTest(); System.out.println(ist2.getPrice()); System.out.println(ist2.getProduct()); } 결과값 : 200 apple 0 none product 위와 같이 메인 함수에서 사용합니다. 생성자에 매개변수를 넣지 않아도 기본 초기화가 가능합니다. 여기서 보면 this 가 나타내는 것은 결국 클래스 명인 thisTest 입니다. this 는 문맥에 따라 인스턴스를 가리키기도 하고 클래스를 가리키기도 합니다. 다소 변칙적이라 할 수 있죠. 물론 생성자 안에서도 this.price 와 같이 멤버변수도 사용할 수 있습니다. ``` ##2022-06-07 # 기본형 타입과 참조형 타입 # 1. 기본형 타입 - 기본형 타입은 다른 메소드에 매개변수로 전달될때 그대로 전달됨 # 2. 참조형 타입 - 참조형 타입은 다른 메소드에 매개변수로 전달될때, 변수의 주소가 전달됩니다. 예를들어 '몇번째 박스에 값이 있다'는 식으로 값이 들어있는 주소가 전달됨. ```js class ReferenceTypeExam { public static void main(String []args) { ReferenceTypeExam exam = new ReferenceTypeExam(); //기본형 변수value1을 addOne에 전달합니다. int value = 10; exam.addOne(value); System.out.println("기본형 변수의 값을 다른 메소드에서 변경한 결과: " + value); //참조형 변수arr을 addOne에 전달합니다. int []arr = {10}; exam.addOne(arr); System.out.println("참조형 변수의 값을 다른 메소드에서 변경한 결과: " + arr[0]); } public void addOne(int value) { value++; } public void addOne(int[] arr) { for(int i = 0; i < arr.length; i++){ arr[i] ++; } } } 출력 결과 기본형 : 10 참조형 : 11 ``` # for 문과 for each문의 설명과 차이점 # for문 - 특정값을 반복하여 변화시킬 때 사용(일반적인 경우 증가하거나 감소하는 모든 경우 사용) ```js for( 초기 값; 종료되는 조건 ; 값의 증감) { 반복 수행할 작업 } String[] numbers = {"one", "two", "three"}; for(int i=0; i GitHub -> Gatsby Cloud -> Your Users # 3. gatsby-cli로 프로젝트 생성 - cmd 진입 -> cd c:\work -> mkdir gatsby_projects -> cd gatsby_projects -> gatsby new ```js What would you like to call your site? √ · My Blog 2022 05 31 What would you like to name the folder where your site will be created? √ gatsby_projects/ my-blog-2022-05-31 √ Will you be using JavaScript or TypeScript? · JavaScript √ Will you be using a CMS? · No (or I'll add it later) √ Would you like to install a styling system? · No (or I'll add it later) ``` - 프로젝트 명 : My Blog 2022 05 31 - 언어 : 자바스크립트 - CMS : 선택안함 - 스타일링시스템 : 선택안함 - 기타 플러그인 : 선택안함 # 4. 프로젝트를 개발모드로 실행 - cd my-blog-2022-05-31 -> code. -> npm run start -> http://localhost:8000 # 5. github 프로젝트 생성 - 리포지터리명 : my-blog-2022-05-31 - 리포지터리 : https://github.com/ohyoungkyu/my-blog-2022-05-31 # 6. github에 푸시 - git init - git config user.name "GITHUB 아이디" - EX : git config user.name "jhs512" - git config user.email "GITHUB 이메일" - EX : git config user.email "jangka512@gmail.com" - git remote add origin GITHUB 원격지 리포지터리 주소 - EX : git remote add origin https://github.com/jhs512/my-blog-2022-05-31 - git add . - git commit -m "세팅" - git push origin master # 7. gatsby cloud 가입, 로그인, site 추가 후 배포 - [https://www.gatsbyjs.com/dashboard/organization/d749ec52-f49a-4bef-9f2e-e26a61b62590] 개츠비 클라우드 대시보드 - 가입 -> 꼭 GITHUB 계정으로 가입 Last Name : 성 EX : 홍 First Name : 이름 EX : 길동 나라 : 한국 용도 : 개인용 로그인 - Add a site - Click here to add an installation - Click here to authorize - my-blog-2022-05-31 Import - Next - Build Site ##2022-05-30 # Flex(Flexible Box) - 웹페이지의 레이아웃을 잡을 때 사용하는 CSS 속성으로, 레이아웃을 잡을 때 보통 display, float, position과 같은 속성을 이용한다. 하지만 이러한 속성들로 레이아웃을 구현하는 게 복잡하고 어려울 때가 있다. 그 한계를 극복하기 위해 CSS3에 flex라는 방식이 새롭게 추가되었다. flexible box, flexbox라고도 부르는 flex는 레이아웃 배치기능에 중점을 맞추어 고안되었기 때문에 기존의 방식들보다 훨씬 더 수월하게 퍼블리싱이 가능하다. # 기본적인 HTML구조 - 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고, 자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다. ```css

helloflex

abc

helloflex

``` # Flex 속성(컨테이너에 적용하는 속성) 1. display: flex; -> Flex 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지하게 되지요. 마치 inline 요소들 처럼요. height는 컨테이너의 높이만큼 늘어납니다. ```css .container { display: flex; /* display: inline-flex; */ } ``` 2. flex-direction;(배치 방향 설정) -> 아이템들이 배치되는 축의 방향을 결정하는 속성입니다. 즉 “메인축(오뎅꼬치)의 방향을 가로로 할거냐 세로로 할거냐”를 정해주는 거예요. -> 1 row (기본값) 아이템들이 행(가로) 방향으로 배치됩니다. 2 row-reverse 아이템들이 역순으로 가로 배치됩니다. 3 column 아이템들이 열(세로) 방향으로 배치됩니다. 4 column-reverse 이템들이 역순으로 세로 배치 됩니다 ```css .container { flex-direction: row; /* flex-direction: column; */ /* flex-direction: row-reverse; */ /* flex-direction: column-reverse; */ } ``` 3. flex-wrap(줄넘김 처리 설정) - 컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성 -> 1 nowrap(기본값) - 줄바꿈을 하지 않습니다. 넘치면 그냥 삐져 나가요. 2 wrap - 줄바꿈을 합니다. float이나 inline-block으로 배치한 요소들과 비슷하게 동작해요. 3 wrap-reverse - 줄바꿈을 하는데, 아이템을 역순으로 배치해요. 4 flex-flow - flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성 ```css .container { flex-wrap: nowrap; /* flex-wrap: wrap; */ /* flex-wrap: wrap-reverse; */ } ``` 4. justify-content(메인축 방향 정렬) -메인축 방향으로 아이템을들 정렬하는 속성 -> 1 flex-start (기본값) - 아이템들을 시작점으로 정렬합니다. flex-direction이 row(가로 배치)일 때는 왼쪽, column(세로 배치)일 때는 위 2 flex-end - 아이템들을 끝점으로 정렬합니다. flex-direction이 row(가로 배치)일 때는 오른쪽, column(세로 배치)일 때는 아래 3 center - 아이템들을 가운데로 정렬 4 space-between - 아이템들의 “사이(between)”에 균일한 간격을 만들어 줍니다. 5 space-around - 아이템들의 “둘레(around)”에 균일한 간격을 만들어 줍니다. 6 space-evenly - 아이템들의 사이와 양 끝에 균일한 간격을 만들어 줍니다. 주의! IE와 엣지(Edge)에서는 지원되지 않습니다 ```css .container { justify-content: flex-start; /* justify-content: flex-end; */ /* justify-content: center; */ /* justify-content: space-between; */ /* justify-content: space-around; */ /* justify-content: space-evenly; */ } ``` 5. align-items(수직축 방향 정렬) - 수직축 방향으로 아이템을들 정렬하는 속성 -> 1 stretch (기본값) - 아이템들이 수직축 방향으로 끝까지 쭈욱 늘어납니다. 2 flex-start - 아이템들을 시작점으로 정렬합니다. flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽이에요. 3 flex-end - 아이템들을 끝으로 정렬합니다. flex-direction이 row(가로 배치)일 때는 아래, column(세로 배치)일 때는 오른쪽이에요. 4 center - 아이템들을 가운데로 정렬합니다. 5 baseline - 아이템들을 텍스트 베이스라인 기준으로 정렬합니다. ```css .container { align-items: stretch; /* align-items: flex-start; */ /* align-items: flex-end; */ /* align-items: center; */ /* align-items: baseline; */ } justify-content: center; align-item: center; 를 해주면, 아이템을 이렇게↓ 한 가운데에 놓는 것도 매우 쉽습니다. ``` 6. align-content(여러 행 정렬) - flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성 -> 1 stretch (기본값) - 아이템들이 수직축 방향으로 끝까지 쭈욱 늘어납니다. 2 flex-start - 아이템들을 시작점으로 정렬합니다. flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽이에요. 3 flex-end - 아이템들을 끝으로 정렬합니다. flex-direction이 row(가로 배치)일 때는 아래, column(세로 배치)일 때는 오른쪽이에요. 4 center - 아이템들을 가운데로 정렬합니다. 5 baseline - 아이템들을 텍스트 베이스라인 기준으로 정렬합니다. ```css .container { flex-wrap: wrap; align-content: stretch; /* align-content: flex-start; */ /* align-content: flex-end; */ /* align-content: center; */ /* align-content: space-between; */ /* align-content: space-around; */ /* align-content: space-evenly; */ } ``` ##2022-05-28 #웹페이지 구성요소 = HTML + CSS + JS HTML ; 문서의 내용 CSS : 문서의 꾸밈(디자인) JS : 인터렉션(사용자가 클릭했을때 작동하는 것들) # 크롬 단축키 Ctrl + T : 새 탭 Ctrl + W : 끄기 Ctrl + Page Up : 좌로 Ctrl + Page Down : 우로 Home : 문서 최상단 End : 문서 최하단 ##2022-05-26 # Fetch가 나오게된 배경 - 비동기 통신 -> HTML에서 화면을 이동한다고 쳐보자. a href="" 방식으로 주소를 줘서 이동하는 것을 생각할 수 있을 것이다. 그러나 이 방식은 화면 전체를 교체하는 것이기 때문에 이동할 때마다 화면이 깜빡거리게 될 뿐더러 페이지의 용량이 크다면 전환하기까지 오래 기다려야만 한다. 전체 페이지를 다시 불러오며 중복되는 태그 역시 다시 불러오게 되는 것은 덤. 심지어 자바스크립트는 싱글 스레드 방식이기에 하나의 스레드에서 모든 것을 돌려야 한다. 이를 보완하기 위해 비동기 통신이라는 개념이 등장했다. 비동기 라는 용어에 대해 간단하게 말하자면 자바스크립트에서 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미한다. 비동기적 자바스크립트 동작을 하는 기술들을 통틀어 Ajax라고 부르는데, Ajax를 이용해서 데이터를 불러오는 동안 다음 코드를 진행하는 것이 가능해진다. # Fetch 사용하기(POST) - 프로토 타입 ```js fetch('url, options') .then((response) => response.json()) .then((data) => console.log(data)); ``` - GET 요청 ```js fetch("https://jsonplaceholder.typicode.com/posts/1", { method: "GET" }).then( (response) => console.log(response) ); // 상태코드 및 Header에 대한 정보 fetch("https://jsonplaceholder.typicode.com/posts/1") .then((response) => response.json()) .then((data) => console.log(data)); //자바스크립트 객체 형식으로 변환된다. ``` - POST 요청 ```js fetch("https://jsonplaceholder.typicode.com/posts", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ title: "Test", body: "I am testing!", userId: 1, }), }) .then((response) => response.json()) .then((data) => console.log(data)) ``` - PUT 요청 ```js fetch("https://jsonplaceholder.typicode.com/posts", { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ title: "Test", body: "I am testing!", userId: 1, }), }) .then((response) => response.json()) .then((data) => console.log(data)) ``` - DELETE ```js fetch("https://jsonplaceholder.typicode.com/posts/1", { method: "DELETE", }) .then((response) => response.json()) .then((data) => console.log(data)) ``` ##2020-05-23 # git - 워킹디렉토리/인덱스(주변 장바구니정도로 생각)/로컬저장소 - git init 저장소 생성 - touch a.txt(a.txt 생성) - git status(장바구니 확인) - git add a.txt(장바구니에 a.txt 추가) - git rm --cached a.txt(장바구니에서 a.txt 뺴내기) - git add . 싹다 담기 - rm a.txt 파일삭제(일반) - rm -rf .git (.git 폴더 제거(일반)) - git config user.name "깃허브아이디" (깃허브 아이디 등록) - git config user.email "깃허브이메일" (깃허브 이메일 등록) - git commig -m "작업내용" (깃허브 커밋) - git log (커밋기록 보기, 빠져나가는 키 q) # git 올리기 - https://github.com/new (이름 : exam_22_05_23) 생성 -> 저장소 주소 = https://github.com/아이디/exam_22_05_23 # git 삭제하기 - Settings -> 최하단, Delete this repository 클릭 -> 아이디 exam_22_05_23 하고 삭제진행 # 원격저장소 연결 - git init - config user.name / email 작업장 정보 설정 (이름,이메일 세팅) - git remote -v : 현재 연결되어 있는 원격저장소 - git remote add origin 저장소주소 : origin 이라는 별칭으로 원겨거장소 등록 - git remote remove origin : 원격저장소 삭제(저장소 주소를 잘못 등록하였을 경우) - git push origin master (연결되어 있는 저장소로 열기) - 저장소를 크롬으로 접속해서 확인 #CORS(Cross Origin Resurce Sharing) - CORS란? 교차 출처 리소스 공유라고 하며 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제다. 즉, 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행하게 된다. #cors의 반대개념 SOP(Same-Origin Policy) - SOP란? 같은 출저에서만 리소스를 공유할 수 있다 라는 규칙을 가진 정책 # CORS 기본 동작과정 - 1.클라이언트에서 HTTP요청의 헤더에 Origin을 담아 전달한다. 다른 Origin의 리소스 요청시 클라이언트는 HTTP요청을 보낸다. 이때 요청헤더의 Origin필드에는 요청을 보내는 Origin을 담아보낸다. - 2.서버는 응답헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 전달한다. 서버가 응답을 보낼때, 허락하는 Origin을 클라이언트에게 전달한다. - 3.클라이언트에서, 자신이 보냈던 요청의 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교한다. 자신이 보낸 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교하여 차단할지 말지를 결정한다. 만약 유효하지 않다면 그 응답을 사용하지 않고 버린다. (위의 경우에는 둘다 http://localhost:3000이기 때문에 유효한 경우이다.) # CORS 3가지 시나리오 - 1. 예비요청 -> 본 요청을 보내기 전에 브라우저 스스로 안전한 요청인지 확인하는 것 - 2. 단순요청 -> 예비요청을 보내지 않고 바로 서버에 본 요청을 한 후 서버가 이에 대한 응답의 헤더를 Acess-Control-Allow-Origin과 같이 보내주면 브라우저가 CORS 정책 위반여부를 검사하는 방식 - 3. 인증된 요청 -> 기존 예비요청에서 보안을 더 강화하고 싶을 때 사용 # CORS 해결방법 두가지 - 1. Chrome 확장 프로그램 이용 -> 'Allow CORS: Access-Control-Allow-Origin' 을 설치 해준다. 브라우저 오른쪽 상단에서 확장 프로그램을 활성화 시킬 수 있다. - 2. Access-Control-Allow-Origin 세팅하기 -> ex) res.setHeader('Access-Control-Allow-origin', '*'); res.setHeader('Access-Control-Allow-Credentials', 'true'); // 쿠키 주고받기 허용 ##2020-05-20 #post man - 개발자들을 위한 툴 - 접속 방법 : 포스트맨 설치 후 가입 => 포스트맨 실행 후 로그인 => workspace 생성 => collection => new 로 생성 => Ctrl + e(이름바꾸기) 로 원하는 이름 변경 => GET, POST 등 방식을 정한후 오른쪽에 해당 호스트 작성 2020-05-16 # 어려운점 - 프로그래머스 for in문을 이용하여 객체와 속성들을 연결하는 방법에 대한 이해가 어려움 - 백준[10171번,25083번] 고양이, 새싹 문제의 글씨를 어떻게 해야할지 햇갈림. # 현재 나의생각 - for in 문은 객체와 그에 관련된 속성들은 새로운 변수를 통하여 출력하는 것으로 보임 - 현재로써는 `이후 \부분에 \하나를 추가하여주면 그대로 출력 되는것으로 보임 # 총정리 - 현재로써는 if문과 while문 등의 반복문과 사칙연산 부분이 쉬운반면 obj, 문자열,숫자열등의 표시방법등이 어려운 것으로 보인다. ##2020-05-18 # Arrow function - 3개가 전부 같은뜻임 app.get("/", function (req, res) { res.send("Hello World!"); }); app.get("/a.html", (req, res) => { res.send("hi!"); }); app.get("/b.html", (req, res) => res.send("bye!")); ##2020-05-17 # xampp - 자바스크립트와 데이터베이스를 연동(회원가입, 글쓰기, 글수정) #mysql 클라이언트로 서버에 접속 Shell 을 누르고 mysql -u root로 접속 #MySQL -MySQL 서버(mysqld) -MySQL 클라이언트(mysql - 접속기로 사용되는게 sqlyog) # 코딩용 폰트 설치 구글 -> d2cording 검색 맨 윗줄 선택 -> gitgub로 이동되는대 오른쪽에 Releases 6 선택하고 맨 윗꺼 다운로드 -> 설치 ```sql #mysql #데이터 베이스 만들기 및 선택하기 create database a1; use a1; #데이터 베이스 삭제하기(조건부) drop database if exists a1; #테이블 생성하기(제약조건은 많을수록 좋다) CREATE TABLE todo ( id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, reg_date DATETIME NOT NULL, perform_date DATETIME NOT NULL, is_completed TINYINT UNSIGNED NOT NULL, content VARCHAR(200) NOT NULL ); DESC todo; #할일 추가하기 INSERT INTO todo SET reg_date = NOW(), perform_date = '2022-05-18 07:00:00', is_completed = 0, content = '기상'; # todo id 내림차순으로 정렬 SELECT * FROM todo ORDER BY id DESC; # 테이블 안에 있는 데이터를 모두 삭제 DELETE FROM todo; SELECT * FROM todo; # 테이블 안에 있는 데이터를 흔적도 없이 모두 삭제 TRUNCATE todo; SELECT * FROM todo; ```