Juun의 개발 기록

자바와 자바스크립트, 개발 공부를 처음 시작하면 자바와 자바스크립트라는 이름의 '자바' 때문에 두개가 비슷하거나 같다고 생각할 수도 있다. 한 번씩 커뮤니티나 질문이 올라오는걸 보면 자바 게시판에 자바스크립트 질문 글이, 자바스크립트 게시판에 자바 질문이 올라오는 걸 종종 볼 수 있다. 자바와 자바스크립트 역사를 간단하게 살펴보면 이렇다. 자바는 Sun에서 개발한 언어로 자바스크립트보다 먼저 나왔다. 자바스크립트는 NetScape 사에서 개발하였고 초기엔 Mocha, LiveScript라는 이름으로 변경되었지만 자바가 인기가 많아짐에 따라 자바스크립트라는 이름을 쓰게 되었다고 한다. 그래서 자바와 자바스크립트는 엄연히 태생부터 다른 언어라고 볼 수 있다. 다만 공통점 몇 개를 살펴보자면 이렇다. 자바 v..

자바를 배우면 JSP, Servlet, Spring 에 대해서 많이 배우고 듣게 되는데 오늘은 하나씩 알아보도록 하자! JSP, Servlet, 스프링을 각각의 특징을 간단하게 알아보는 포스팅이라 자세한 지식은 다음에 포스팅하도록 하겠다! 서블릿(Servlet) 서블릿은 서버에서 웹페이지 등을 동적으로 생성하거나 데이터 처리를 위해 자바로 작성된 어플리케이션이다! (HTML in JAVA) 쉽게 풀어보자면 '클라이언트 요청을 처리하고 그 결과를 다시 클라이언트에 전송하는 서블릿 클래스의 구현한 자바 프로그램' 이라고 이해하면 된다! 서블릿에서 좀 더 확장시킨 개념이 스프링이라 생각하면 된다!! 스프링도 서블릿을 통해 동작을 하기 때문에! JSP (Java Server Page) 간단하게 HTML 안에 자..

MVC 패턴이란??? 모델-뷰-컨트롤러(model–view–controller, MVC)는 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다. 이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있다. MVC에서 모델은 애플리케이션의 정보(데이터)를 나타내며, 뷰는 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타내고, 컨트롤러는 데이터와 비즈니스 로직 사이의 상호동작을 관리한다. 출처 - 위키피디아, mvc 패턴 사전적 의미는 위키피디아에서 가져왔지만 감이 아직 안잡힌다... 핵심만 간단히 풀어서 적어보려 한다.먼저 MVC패턴을 설..

HTTP란? HTTP(HyperText Transfer Protocol)는 W3 상에서 정보를 주고받을 수 있는 프로토콜이다. HTTP는 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜이다. 예를 들면, 클라이언트인 웹 브라우저가 HTTP를 통하여 주로 HTML 문서를 주고받는 데에 쓰인다. HTTP는 상태를 가지고 있지 않는 Stateless 프로토콜이며 Method, Path, Version, Header, Body 등으로 구성된다! 그래서 HTTP는 클라이언트 정보를 저장하지 않아서 클라이언트를 구분하기 어렵다! ※ W3란 월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 ..

인텔리제이로 메이븐을 통해서 스프링 프로젝트를 생성중 생긴 오류이다. pom.xml에 properties, dependency, plugin을 추가하고 톰캣과 연결후 연결이 잘되었는지 확인하는 과정에서 생긴 에러이다! Project Structure -> Artifact에 Available Elements를 모두 삭제하고 다시 설정을 해줬는데도 안됐다! 이 에러 찾고 잡는다고 2시간정도 쌩 고생한거 같다... 해결방법 ideaProject / 만든 프로젝트 폴더에 들어가보면 src와 out 폴더가 있다. out 폴더에 WEB-INF 페이지가 없어 src에 있는 WEB-INF 폴더를 복사해서 붙여넣어주니 해결... 잘 모르시는 분들을 위해 경로를 적어보자면 ideaProject / 만든 프로젝트 폴더 / ..

2022.06.07 - [Practice] - [JavaScript] JS로 그림판 만들기, Fill 기능 구현하기! [7/8] [JavaScript] JS로 그림판 만들기, Fill 기능 구현하기! [7/8] 2022.06.07 - [Practice] - [JavaScript] JS로 그림판 만들기, paint 색상, 붓 사이즈 바꾸기! [6/8] [JavaScript] JS로 그림판 만들기, paint 색상, 붓 사이즈 바꾸기! [6/9] 2022.06.06 - [Practice] - [JavaScr.. puenti.tistory.com 저번 포스팅은 Fill 기능까지 넣어줬다! 이번 포스팅은 마지막 save 기능을 넣어주도록 해보자! canvas는 pixel을 다루는거라 기본적으로 image를 만들..

2022.06.07 - [Practice] - [JavaScript] JS로 그림판 만들기, paint 색상, 붓 사이즈 바꾸기! [6/8] [JavaScript] JS로 그림판 만들기, paint 색상, 붓 사이즈 바꾸기! [6/9] 2022.06.06 - [Practice] - [JavaScript] JS로 그림판 만들기, 그림 그려보기[5/9] [JavaScript] JS로 그림판 만들기, 그림 그려보기[5/9] 2022.06.06 - [Programming/JavaScript] - [JavaScript] JS로 그림판 만.. puenti.tistory.com 이제 fill 버튼 기능을 만들어보자 fill 버튼을 누르고 원하는 색상을 클릭하면 컨버스 색상이 클릭한 색상으로 변하게 되는 기능이다!! ..

2022.06.06 - [Practice] - [JavaScript] JS로 그림판 만들기, 그림 그려보기[5/8] [JavaScript] JS로 그림판 만들기, 그림 그려보기[5/8] 2022.06.06 - [Programming/JavaScript] - [JavaScript] JS로 그림판 만들기, 마우스 기능 추가하기 [4/9] [JavaScript] JS로 그림판 만들기, 마우스 기능 추가하기 [4/9] 2022.06.06 - [Programming/JavaScript].. puenti.tistory.com 이전 글에서는 그림을 그려주는 기능을 만들어보았다! 이번 포스팅은 paint 색상을 클릭하면 색상이 바뀌고 붓 사이즈를 바꿔주는 기능을 넣어보자 먼저 paint 색상을 바꾸는 기능부터 만들자 ..

2022.06.06 - [Programming/JavaScript] - [JavaScript] JS로 그림판 만들기, 마우스 기능 추가하기 [4/9] [JavaScript] JS로 그림판 만들기, 마우스 기능 추가하기 [4/9] 2022.06.06 - [Programming/JavaScript] - [JavaScript] JS로 그림판 만들기, save, fill 버튼, range 추가하기! [3/9] 저번 시간까지 기본적인 디자인은 마쳤다!! 이제 기본적인 디자인은 끝났으니 이제 JS를 해.. puenti.tistory.com 저번 포스팅에서 마우스로 좌표 기능까지 넣어봤다! 이번 포스팅은 그림을 그릴 수 있게 기능을 넣어보자! app.js const canvas = document.getElement..

2022.06.06 - [Programming/JavaScript] - [JavaScript] JS로 그림판 만들기, save, fill 버튼, range 추가하기! [3/8] [JavaScript] JS로 그림판 만들기, save, fill 버튼, range 추가하기! [3/8] 2022.06.06 - [Practice] - [JavaScript] JS로 그림판 만들기, 물감 추가하기 [2/8] [JavaScript] JS로 그림판 만들기, 물감 추가하기 [2/8] 2022.06.06 - [Practice] - [JavaScript] JS로 그림판 만들기, 캔버스.. puenti.tistory.com 저번 시간까지 기본적인 디자인은 마쳤다!! 이제 기본적인 디자인은 끝났으니 이제 JS를 해보자! 먼저 ..

2022.06.06 - [Practice] - [JavaScript] JS로 그림판 만들기, 물감 추가하기 [2/8] [JavaScript] JS로 그림판 만들기, 물감 추가하기 [2/8] 2022.06.06 - [Practice] - [JavaScript] JS로 그림판 만들기, 캔버스 만들기 [1/8] [JavaScript] JS로 그림판 만들기, 캔버스 만들기 [1/8] 3달 전쯤 배운 JS가 기억이 가물가물해서 간단한 미니프로젝트도 해볼.. puenti.tistory.com 이전 글에서 색상까지 추가해봤다!! 이제 이걸 저장하고 채워줄 버튼과 붓 두께를 설정해줄 range를 만들어보자! 먼저 index.html에서 save, fill 버튼과 range를 만들어준다 Fill Save 그 다음은 st..

2022.06.06 - [Practice] - [JavaScript] JS로 그림판 만들기, 캔버스 만들기 [1/8] [JavaScript] JS로 그림판 만들기, 캔버스 만들기 [1/8] 3달 전쯤 배운 JS가 기억이 가물가물해서 간단한 미니프로젝트도 해볼겸 JS로 간단한 그림판을 한 번 만들어볼게요!! 먼저 index.html, app.js, styles.css 를 만들어줄게요! styles.css @import "reset.css"; bo.. puenti.tistory.com 이전 글에서는 캔버스를 만들어봤다 이제 색칠할 물감을 추가해보자!! index.html 9가지 색상을 넣어준다! styles.css @import "reset.css"; body { background-color: #f6f9f..

3달 전쯤 배운 JS가 기억이 가물가물해서 간단한 미니프로젝트도 해볼겸 JS로 간단한 그림판을 한 번 만들어볼게요!! 먼저 index.html, app.js, styles.css 를 만들어줄게요! styles.css @import "reset.css"; body { background-color: #f6f9fc; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; display: flex; flex-direction: column; align-items: center; padding: 50px 0px; } .ca..

인터페이스(interface)란? 추상 메서드의 집합 실제 구현된 것이 없는 기본 설계도. 추상 메서드와 상수만을 멤버로 가질 수 있다. 두 대상(객체) 간의 연결, 대화, 소통을 돕는 중간 역할을 한다! 선언(설계)와 구현을 분리시키는 것을 가능하게 한다!! 인터페이스와 추상 클래스의 공통점 추상메서드를 가지고 있다! (미완성 설계도) 인터페이스와 추상 클래스의 차이 인터페이스는 추상 메서드의 집합, 추상 클래스는 추상 메서드만 가지고 있음! 인터페이스는 iv를 가질 수 없다. 그럼 우리는 왜 인터페이스를 사용할까? 클래스 작성에 도움을 줄 목적으로 사용된다!! 인터페이스의 작성 클래스 대신 인터페이스를 사용한다는 것 외에 클래스 작성과 동일 interface nameOfInterface { publi..

추상 클래스가 뭔지 알기 전에 추상 클래스를 왜 사용하는지부터 알아보자 추상화라는 뜻은 불명확하고 애매하다라는 의미를 가지고 있다. 왜 우리는 이런 불명확하고 애매한 추상 클래스를 사용할까?? 바로 변경에 유리하기 때문이다. 추상 클래스란(abstract class)? 클래스가 설계도라면 추상 클래스는 '미완성 설계도' 추상 메서드를 포함하고 있는 클래스 abstract class Player { int currentPos; // 현재 Play 되는 위치를 저장하기 위한 변수 Player() {// 추상클래스도 생성자가 필요 currentPos = 0; } } abstract void play(int pos); // 추상메서드 abstract void stop();// 추상메서드 void play() {..