kycoco018의 등록된 링크

키자드에 등록된 총 45개의 포스트를 확인하실 수 있습니다.

Naver Blog

스프링 부트 시작하기

이전 팀프로젝트는 스프링 프레임워크를 사용했으나 다음에 들어가는 프로젝트는 스프링부트를 사용하여 진행하기로 토의를 진행하였습니다. 스프링 부트와 스프링 프레임워크의 크게 다른점은 우선 스프링은 톰캣서버를 사용하였으나 부트같은경우는 별개의 서버를 설치할 필요가 없다는 점이며 starter를 통하여 dependency처리가 가능하여 굉장히 간편하다는 점입니다. 우선 메이븐과 그래들의 간단한 특징을 살펴보도록 하겠습니다. **메이븐 아파치 메이븐은 자바용 프로젝트 관리 도구이며 아파치 라이센스로 배포되는 오픈 소스 소프트웨어 입니다. 프로젝트를 진행하면서 사용하는 많은 라이브러리를 쉽게 사용할 수 있도록 관리해주는 도구입니다. 메이븐의 특징으로는 라이브러리들과 연관된 다른 라이브러리도 연동이 된다는 점입니다. 이 뜻이 무엇이냐? 메이븐은 네트워크를 통해서 연관된 라이브러리까지 같이 업데이트를 해준다는 점입니다. 메이븐의 기능을 이용하기위해서는 POM.xml 이라는 파일을 사용합니다. 약자

원문보기 내부링크
Naver Blog

팀프로젝트 #4

이번 포스팅은 카카오맵api를 불러오고 커스텀이미지와 커스텀오버레이를 만지는 방법을 설명해드리겠습니다. 저도 처음에 캠핑카프로젝트의 정비소 부분을 맡게되면서 지도를 만지게 될거라 생각했지만 생각외로 지도를 불러오는 것은 너무나도 쉬운 일이였습니다. 우선 카카오맵api를 위해 카카오맵으로 이동하겠습니다. https://apis.map.kakao.com/web/ Kakao 지도 API Kakao 지도 API를 이용해보세요. 다양한 샘플과 상세한 매뉴얼로 개발자분들의 시간을 아껴드리겠습니다! apis.map.kakao.com 여기로 이동하게되면 다음과 같은 화면이 나타나게됩니다. 우선 api를 사용하기위해서는 우리가 저번시간에 했던 것 처럼 인증키를 받아야하기때문에 카카오맵api 인증키를 받도록 합시다. 그 다음에 왼쪽 사이드메뉴에 가이드나 샘플부분에 카카오맵에 관련된 script가 있습니다. 우선 저희는 지도를 표시하여야하기때문에 사이드메뉴의 가이드부분으로 이동하고 가장 처음인 시작하기

원문보기 내부링크
Naver Blog

팀프로젝트 #5

이번 포스팅에서는 팀프로젝트 두번째 과제인 자동차 정비내역에 대해서 포스팅하겠습니다. 우선 자동차 정비내역은 캠핑카 라는 데이터에 종속되는 부분입니다. 정비소내역과는 다르게 따로 탭을 구성하지않았으며 프로젝트내에 캠핑카 라는 과제를 수행한 사람의 데이터와 묶어서 진행하였습니다. 참고하시는 분들은 이런식으로 코드를 짜면 되는구나 정도로 봐주시면 되겠습니다. 우선 DB부터 설명드리겠습니다. CREATE TABLE `car_reinfo` ( `repair_no` int NOT NULL AUTO_INCREMENT, `car_regid` int NOT NULL, `comp_name` varchar(250) NOT NULL, `garage_name` varchar(45) NOT NULL, `repair_info` varchar(3000) NOT NULL, `repair_date` varchar(200) NOT NULL, `repair_price` varchar(300) DEFAULT NULL,

원문보기 내부링크
Naver Blog

1-1. JavaScript 란?

자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어이며 HTML로는 웹의 내용을 작성 CSS로는 웹을 디자인 자바스크립트로는 웹의 동작을 구현할 수 있습니다. 자바스크립트는 주로 웹브라우저에 사용되며 Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다. 1-1 자바스크립트 코드 배우기 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JavaScript Intro</title> <script> document.write("<h2>여러분을 환영합니다!!</h2>") </script> </head> <body> <noscript> <p>여러분의 웹 브라우저가 자바스크립트를 지원하지 않습니다!</p> </noscript> </body> </html> codepen을 활용하여 스크립트 코드 실행해보기 ... codepen.io 위 사이트에 가셔서 HTML

원문보기 내부링크
Naver Blog

1-2. JavaScript의 기초

자바 스크립트가 가지고 있는 언어적 특징입니다. 1. 자바스크립트는 객체 기반의 스크립트 언어입니다. 2. 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어입니다. 3. 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있습니다. <인터프리터 언어> 인터프리터 언어란 소스코드를 바로 실행하는 컴퓨터 프로그램 또는 환경을 말합니다. 인터프리터는 소스코드를 한줄 한줄 읽어들이면서 실행하는 프로그램입니다. 인터프리터 언어의 종류 : 자바스크립트 , HTML , SQL , python , 액션스크립트 등이 있습니다. <컴파일> 인터프리터와 달리 컴파일은 소스코드에서 목적코드로 옮기는 것을 말합니다. 소스 파일을 작성한 후 해당 파일을 컴파일(compile)하여 사용자가 실행할 수 있는 실행 파일(.exe)로 만들어 사용합니다. 컴파일로 사용되는 언어의 종류로는 JAVA, C++ , C , C# 등이 있습니다. <인터프리터언어와 컴파일언어의 장단점>

원문보기 내부링크
Naver Blog

1-3. JavaScript 소개

자바스크립트를 사용하여 웹 프로그래밍에서 할 수 있는 일은 다음과 같이 매우 다양합니다. 자바스크립트는 HTML의 '내용', '속성', '스타일' 을 변경할 수 있습니다. 바로 소스코드를 보면서 HTML의 '내용', '속성', '스타일' 을 변경해보도록 하겠습니다. 버튼(onclick) 이벤트를 사용하여 text 내용 변경하기 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JavaScript 내용변경하기</title> </head> <body> <h2 id="change">이 내용은 변경될 것 입니다.</h2> <button onclick="document.getElementById('change').innerHTML = '변경되었음'">내용 변경하기</button> </body> </html> 이와 같은 소스코드를 코드펜 홈페이지 HTML 부분에 작성해보시기 바랍니다. ... codepen.io 다음과

원문보기 내부링크
Naver Blog

Visual Studio Code 사용하기

이 블로그를 시작하면서 원래의 목적은 개인 공부용으로 리마인드 하려는 계획이였으나 저와 같은 비전공자가 처음 접하는 경우의 수를 계산하여 vscode를 어떻게 사용하며 공부하고있는지 간략하게 작성하려고합니다. 우선 vscode를 검색하여 다운로드를 실시한뒤 좌측 상단에 file을 클릭하여 New Text File을 클릭 다음과 같이 Untitled-1 이라는 영역이 생긴 것을 확인 할 수 있습니다. 이 부분에 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title> JS의 자바스크립트 </title> </head> <body> <h2>JS의 자바스크립트에 오신걸 환영합니다.</h2> </body> </html> 위 소스코드를 작성하신뒤 Ctrl + S 를 누르시면 저장탭이 열립니다. 여기서 사용자가 원하는 폴더 및 파일명을 작성하시면 html 파일이 생성됩니다. 그리고 그 파일을 열게되면 위와 같이 인터넷창이 열리

원문보기 내부링크
Naver Blog

1-4. 자바스크립트 문법

프로그램은 컴퓨터가 실행할 수 있는 명령(instruction)으로 이루어지며 컴퓨터 프로그래밍에서 컴퓨터가 실행할 수 있는 명령들을 실행문(statement)이라고 합니다. 즉, 프로그램이란 특정 결과를 얻기 위해서 컴퓨터에 의해 실행되는 실행문의 집합이라고 할 수 있습니다. 자바스크립트의 문법 자바스크립트의 실행문은 세미콜론(;)으로 구분됩니다. var a = 10; var result = a + 3; 자바스크립트는 대소문자를 구분합니다. 자바스크립트에서 변수나 함수의 이름, 예약어 등을 작성하거나 사용할 때에는 대소문자를 정확하게 구분해서 사용해야합니다. var java = 10; var Java = 20; //변수 java와 Java는 서로 다른 두개의 변수로 인식됩니다. Var Script = 30; //변수의 선언은 var 키워드로만 할 수 있으며 Var 와 같은 경우는 작동되지 않습니다. 리터럴(literal) 리터럴은 직접 표현되는 값 그 자체를 의미합니다. 다음

원문보기 내부링크
Naver Blog

1-5. 자바스크립트 출력

자바스크립트는 여러 방법을 통해 결과물을 HTML 페이지에 출력할 수 있습니다. 자바스크립트에서 사용할 수 있는 출력 방법은 다음과 같습니다. 1.window.alert() 메소드 2.HTML DOM 요소를 이용한 innerHTML 프로퍼티 3.document.write() 메소드 4.console.log() 메소드 메소드(method)와 프로퍼티(property)에 대한 자세한 사항은 자바스크립트 객체의 개념에서 다시 다루도록 하겠습니다. window.alert() 메소드 자바 스크립트에서 가장 간단하게 데이터를 출력할 수 있는 방법은 window.alert() 메소드를 이용하는 것 입니다. window.alert() 메소드는 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달합니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title> JS의 자바스크립트 </title> <script> funct

원문보기 내부링크
Naver Blog

1-6. 자바스크립트 적용

HTML 문서에 자바스크립트를 적용하는 방법에는 다음과 같은 방법들이 있습니다. 1. 내부 자바스크립트 코드로 적용 2. 외부 자바스크립트 파일로 적용 내부 자바스크립트 코드 자바스크립트 코드는 <script>태그를 사용하여 HTML 문서 안에 삽입할 수 있습니다. <script> document.getElementById("text").innerHTML="여러분을 환영합니다"; </script> 이렇게 삽입된 자바스크립트 코드는 HTML문서의 <head>태그나 <body>태그 또는 양쪽 모두에 위치할 수 있습니다. 다음 예제는 <head>태그에 코드를 삽입한 예제입니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JS의 자바스크립트</title> <script> function todayDate() { document.getElementById("date").innerHTML = Date(); } <

원문보기 내부링크
Naver Blog

2-1. 자바스크립트 기본 타입

타입(data type) 이란 프로그램에서 다룰 수 있는 값의 종류를 의미합니다. 자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있으며 이것을 기본 타입이라 합니다. 자바스크립트의 기본 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있습니다. 원시 타입(primitive type)은 다음과 같습니다. * 숫자(number) * 문자열(string) * 불리언(boolean) * 심볼(symbol) : ECMAScript 6부터 제공됨 * undefined 객체 타입(object type)은 다음과 같습니다. * 객체(object) var num = 10; //숫자형 타입 var myName = "홍길동"; // 문자열 타입 var str; //undefined 숫자(number) 자바스크립트는 다른 언어와는 달리 정수와 실수를 따로 구분하지 않고 모든 수를 실수 하나로만 표현합니다. 또한 매우 큰 수나 매우 작은 수를 표현할 경우에는 e 표기법을 사용 할 수

원문보기 내부링크
Naver Blog

2-2. 자바스크립트 타입 변환

자바스크립트는 타입 검사가 매우 유연한 언어입니다. 자바스크립트의 변수는 타입이 정해져 있지 않으며 같은 변수에 다른 타입의 값을 다시 대입할 수도 있습니다. 타입 변환(type conversion) <예제> <body> <h1>자바스크립트 타입 변환</h1> <h1>같은 변수에 다른 타입의 값 대입</h1> <p id="result"></p> <script> var num = 20; // 변수의 선언과 함께 초기화 document.getElementById("result").innerHTML = num + "<br>"; num = "이십"; // 문자열 대입 document.getElementById("result").innerHTML += num + "<br>"; var num; // 한 변수를 여러 번 초기화할 수는 있으나, 재선언은 할 수 없습니다. document.getElementById("result").innerHTML += num; </script> </body> 다

원문보기 내부링크
Naver Blog

2-3 자바스크립트 변수

변수의 선언과 초기화 변수(variable)란 데이터(data)를 저장할 수 있는 메모리 공간을 의미하며 그 값이 변경될 수 있습니다. 자바스크립트에서는 var 키워드를 사용하여 변수를 선언합니다. 자바스크립트에서는 선언되지 않은 변수를 사용 / 접근하려고하면 오류가 발생할 수 있습니다. 단 선언되지 않은 변수를 초기화할 경우에는 자동으로 선언을 먼저 한 후 초기화를 진행합니다. var month; // month라는 이름의 변수 선언 date = 25; // date 라는 이름의 변수를 묵시적으로 선언 선언된 변수는 나중에 초기화 할 수 있고 선언과 동시에 초기화 할 수도 있습니다. <body> <h1>자바스크립트 변수</h1> <h2>변수의 선언과 초기화</h2> <p id = "date"></p> <script> var month; //변수 선언 var date = 25; // 변수 선언 / 초기화 동시진행 month = 12; //변수 초기화 document.getElemen

원문보기 내부링크
Naver Blog

프로그래머스 코딩테스트 하는방법

이번 블로그는 코딩테스트 관련된 블로그를 작성해보겠습니다. 제가 알고있는 사이트 중에서 코딩테스트를 연습할 수 있는 사이트는 백준 과 프로그래머스가 있습니다. 저는 프로그래머스를 자주 이용하고있으니 프로그래머스 코딩테스트 연습방법을 알려드리겠습니다. 우선 프로그래머스를 검색하신뒤 사이트에 접속하셔서 회원가입 및 로그인을 진행해주세요 그 뒤에 메뉴에있는 코딩테스트 연습을 클릭해주신뒤 상태는 안푼문제 / 난이도는 0~5단계를 설정 / 언어는 java c++ javascript kotlin python 등의 언어를 선택할 수 있습니다. 이중에 저는 이미 풀었지만 평균 구하기를 클릭하여 들어가보겠습니다. 우선 좌측에 평균 구하기에 문제설명, 제한사항, 입출력 예를 보시면 입출력 예에 대해 설명 해드리겠습니다. arr 는 배열을 의미합니다 즉 배열 [1,2,3,4] 의 평균을 구하여 return 값인 2.5가 나와야한다는것을 의미합니다. 아래있는것은 2번째 테스트 케이스 라고 생각하시면 됩니

원문보기 내부링크
Naver Blog

코딩테스트 자릿수 더하기

이번엔 자릿수 더하기 코딩테스트를 시작해보겠습니다. 우선 입출력 예로는 * n = 123 answer = 6 으로써 1+2+3 이 완성되야 합니다. * n = 987 answer = 24 으로써 9+8+7 이 완성되어야 합니다. 아래는 제가 풀이한 식입니다 ( 답 스포 주의) 우선 프로그래머스 코딩테스트 페이지가 아닌 vscode이므로 n이라는 변수를 123 으로 지정해줍니다. 그 후에는 while 문을 사용합니다 while문은 while(조건식) { } 으로 실행됩니다. 조건식이 참이라면 { } 값에 있는 함수 또는 출력을 반복하는 아주 편리한 함수입니다. 밑에 if문의 사용법은 if(조건문) { } 으로 실행되며 조건이 참이라면 { } 값에 있는 함수 또는 출력을 해주는 함수입니다. if문 조건은 위에 제한사항에 나타난 100,000,000의 범위로 잡아주었습니다. 그 뒤에 answer += n%10 ; 을 설명해드리겠습니다 (숫자 % 숫자) // 라고 생각하고 저는 n%10을

원문보기 내부링크
Naver Blog

코딩테스트 짝수와 홀수

이번에 해볼 문제는 짝수와 홀수 입니다. 이전에 했던 % 연산자를 이용해 아주 간단하게 해결 할 수 있습니다. 문제에나와있는 것처럼 num 은 int범위의 정수이며 홀수일경우에는 문자열 "Odd" 짝수일경우엔 문자열 "Even"을 반환하는 함수를 만드는 것 입니다. 풀이 ( 스포 주의 ) 제가 해석한 풀이입니다. if () {} else {} 문을 사용하여 풀어봤습니다. if ( 조건문) { 조건이 참일경우 실행 } else { 조건이 거짓일경우 실행 } 으로 간단하게 풀 수 있는 문제였습니다. num%2==0 // num의 변수가 2로 나누었을때 나머지가 0이되는 경우는 짝수이기때문에 answer 값에 "Even" 이라는 문자열을 대입했습니다 물론 반대되는 else에는 "Odd"를 대입했습니다. 그 결과 num = 3; 은 Odd 라는 결과가 나타나게됩니다 코드를 프로그래머스에 가져가기위해 일부분만 가져가서 코드를 실행해보도록 하겠습니다. 이렇게 해당되는 부분만 붙여넣고 코드를 실

원문보기 내부링크
Naver Blog

코딩테스트 약수의 합

이번엔 약수의 합을 구하는 코드를 짜보도록 하겠습니다. 우선 문제입니다. 입출력 예를 보게되면 12 의 약수는 1 2 3 4 6 12 입니다. 우선 코딩을 하기전에 먼저 그림을 그려보시는것이 효과가 있습니다. 자 약수라는것은 결국에 그 수를 약수로 나눴을때 정확히 떨어지는 수를 말합니다. 그러면 우리가 이전글에 했던 내용중에 % 연산자를 떠올릴 수 있을겁니다. 이번 문제역시 %연산자를 사용하여 굉장히 간단하게 풀이할 수 있는 문제였습니다. 문제풀이 해보도록 하겠습니다. ( 스포주의 ) 다음은 제가 짠 코드입니다. 이번에는 console.log() 함수를 사용하여 html 페이지에서 F12 를 눌러 콘솔창을 확인하면 값이 출력되는 것을 볼 수 있습니다. for문을 사용하여 i는 1부터 시작하며 n과 작거나같으며 i는 증감식은 ++ (1씩증가) 한다로 설정하였습니다. 그리고 조건문 if 에다가 n % i 로 나눴을때 나머지가 0 이 되는 값을 answer값에 더하기대입을 해주는 식으로

원문보기 내부링크
Naver Blog

코딩테스트 자연수 뒤집어 배열로 만들기

이번에 할 테스트는 자연수 뒤집어 배열로 만들기입니다. 문제입니다. 12345 를 answer[] 에 역순으로 각각의 숫자를 대입해주는 것입니다. 이전에 했던 %인자가 오늘도 등장하면 편하게 할 수 있을거라는 생각이 듭니다. 왜냐면 %는 나머지를 가져오기때문에 역순으로 배열에 넣기에 더할나위없이 편한 함수이기 때문입니다. 문제 풀이를 보겠습니다 ( 스포주의 ) n은 숫자이기때문에 length 를 알아보려면 toString() 메소드를 사용하여 문자열로 변경해주는 과정을 거쳤습니다. 그 뒤에 for문을 사용해서 5자리의 숫자이기때문에 i를 1부터 시작하여 5까지 1씩증가하도록 하고 while문을 사용하여 n이 0보다 클경우에 answer배열에 추가하는 메소드인 push(넣을값) 함수를 사용하여 answer에 숫자를 넣어주고 n은 다시한번 나누기 10을하고 소수점아래를 버리도록 Math.floor() 메소드를 사용하였습니다. 결과가 잘 도출되는지 console.log() 메소드를 사용하

원문보기 내부링크
Naver Blog

3-1. 산술 연산자

산술연산자(arithmetic operator) 자바스크립트는 여러 종류의 연산을 위한 다양한 연산자(operator)를 제공하고있습니다. 산술연산자는 사칙연산을 다루는 가장 기본적이면서도 많이 사용하는 연산자입니다. 산술 연산자는 모두 두 개의 피연산자를 가지는 이항 연산자이며 피연산자들의 결합 방향은 왼쪽에서 오른쪽입니다. 산술 연산자 설명 + 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더함 - 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺌 * 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱함 / 왼쪽 피연산자의 값을 오른쪽 피연산자의 값으로 나눔. % 왼쪽 피연산자의 값을 오른쪽 피연산자 값으로 나눈 후 그 나머지를 반환함 예제) <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JS의 자바스크립트</title> </head> <body> <h1>산술 연산자</h1> <script> var x =

원문보기 내부링크
Naver Blog

3-2 대입 연산자

대입 연산자(assignment operator) 대입 연산자는 변수에 값을 대입할 때 사용하는 이항 연산자이며 피연산자들의 결합 방향은 오른쪽에서 왼쪽이다. 또한 앞서 살펴본 산술 연산자와 결합한 다양한 복합 대입 연산자가 존재한다 대입 연산자 설명 = 왼쪽 피연산자에 오른쪽 피연산자의 값을 대입 += 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 더한 후 그 결괏값을 왼쪽 피연산자에 대입함. -= 왼쪽 피연산자의 값에서 오른쪽 피연산자의 값을 뺀 후 그 결괏값을 왼쪽 피연산자에 대입함. *= 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 곱한 후 그 결괏값을 왼쪽 피연산자에 대입함. /= 왼쪽 피연산자의 값을 오른쪽 피연산자의 값을 나눈 후 그 결괏값을 왼쪽 피연산자에 대입함. %= 왼쪽 피연산자의 값에 오른쪽 피연산자의 값을 나눈 후 그 나머지를 왼쪽 피연산자에 대입함 예제) <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-

원문보기 내부링크
Naver Blog

3-3. 증감 연산자

증감 연산자(increment and decrement operator)란 피연산자를 1씩 증가 또는 감소 시킬 때 사용하는 연산자로써 피연산자가 단 하나뿐인 단항 연산자입니다. 증감 연산자 설명 ++x 먼저 피연산자의 값을 1 증가시킨 후 해당 연산을 진행함 x++ 먼저 해당 연산을 진행하고 피연산자의 값을 1증가시킴 --x 먼저 피연산자의 값을 1감소시킨 후에 해당 연산을 진행함 x-- 먼저 해당 연산을 수행하고 나서 피연산자의 값을 1 감소시킴 예제) <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JS의 자바스크립트</title> </head> <body> <h1>증감 연산자</h1> <script> var x = 5, y = 5; document.write((++x - 3)+"<br>"); // 1 + x - 3 = 3 document.write(x +"<br>"); // 6 document.wri

원문보기 내부링크
Naver Blog

3-4. 비교 연산자

비교 연산자(comparison operator)란 피연산자 사이의 상대적인 크기를 판단하여 참/거짓을 반환하며 비교 연산자는 모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽이다. 비교 연산자 설명 == 왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반환함. === 왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참을 반환함. != 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않으면 참을 반환함. !== 왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않거나, 타입이 다르면 참을 반환함. > 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크면 참을 반환함. >= 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크거나 같으면 참을 반환함. < 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작으면 참을 반환함. <= 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작거나 같으면 참을 반환함. 자바스크립트에서 비교 연산자는 피연산자의

원문보기 내부링크
Naver Blog

3-5. 논리 연산자

논리 연산자(logical operator)란 주어진 논리식을 판단하여 참/거짓을 반환하며 &&연산자와 ||연산자는 두개의 피연산자를 가지는 이항 연산자이며 피연산자들의 결합 방향은 왼쪽에서 오른쪽입니다. ! 연산자는 피연산자가 단 하나뿐인 단항 연산자이며 피연산자의 결합 방향은 오른쪽에서 왼쪽입니다. 논리 연산자 설명 && 논리식이 모두 참이면 참을 반환함. (논리 AND 연산) || 논리식 중에서 하나라도 참이면 참을 반환함. (논리 OR 연산) ! 논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환함. (논리 NOT 연산) 다음은 논리 연산자의 모든 동작의 결과를 보여주는 진리표(truth table)입니다. A B A && B A || B !A true true true true false true false false true false false true false true true false false false false true 예제) <!DOCTYPE html> <

원문보기 내부링크
Naver Blog

4-1. 제어문

제어문이란 프로그램의 순차적인 흐름을 제어하기위해 조건문과 반복문을사용하는 실행문을 말합니다. 조건문이란 프로그램내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문이며 조건문중에서 가장 기본적이 되는 실행문은 if문입니다. 자바스크립트에서 사용할 수 있는 조건문의 형태는 아래와 같습니다. * if문 * if/else문 * if/else if/else문 * switch문 if문 if문은 표현식의 결과가 참(true)이면 주어진 실행문을 실행하고 거짓(false)이면 아무것도 실행하지 않습니다. 알고리즘을 어릴적에 보셨다면 쉽게 이해하실 수 있습니다. if문을 순서도로 표현하면 다음과 같습니다. tcpschool - 조건문 if문을 작성하는 방법입니다. if(표현식){ 표현식이 참일경우 실행될 실행문; } 예제) <h1>if 조건문</h1> <script> var a = 10 , b = 20; if(a < b){ // b가 a보다 클경우 실행문 실행 docume

원문보기 내부링크
Naver Blog

4-2. 반복문

반복문이란 가장 많이 사용되는 실행문중 하나로써 똑같은 명령을 일정 횟수(조건) 만큼 반복하여 수행하도록 제어하는 실행문입니다. 자바스크립트에서 사용할 수 있는 반복문의 형태는 다음과 같습니다. * while문 * do/while문 * for문 * for/in문 * for/of문 while문 과 do/while문 while문은 해당 조건이 참일경우 해당 while문안의 실행문을 반복 실행하게됩니다. while문의 문법은 다음과 같습니다. while ( 표현식 ) { 표현식이 참이 유지될 경우 반복적으로 실행할 실행문 } while문은 표현식이 참인지 판단하여 내부의 실행문을 실행하고 내부의 실행문이 전부 끝나게 되면 다시 표현식으로 올라와 다시 반복 수행하게 됩니다. 이 반복문을 루프(loop) 라고 합니다. 예제) <script> var a = 10 , b = 20; while(a < b){ document.write(a + "<br>") a++; } </script> 다음과 같이

원문보기 내부링크
Naver Blog

코딩테스트 최대공약수와 최소공배수

오늘 알아볼 코딩테스트는 최대공약수와 최소공배수입니다. 우선 문제코드 설명에앞서 저보다 뛰어난 코더들이 많고 저는 이제 자바스크립트를 배우는 코린이라는 점을 감안하여 코드를 확인해주세요 코드가 지저분할 가능성이 높습니다 우선 문제입니다. 위와 같이 n=3, m=12라고 가정했을때 최대공약수는 3, 최소공배수는 12가 나와야합니다. 제가 해결한 코드입니다 ( 지저분 + 스포 주의) 코드해석은 소스코드 안에 주석처리하여 설명드리겠습니다. <script> var answer = []; var n = 3 , m = 12; var sum1=n , sum2=m; var num1 = 1 , num2 = 1; 우선 변수n 과 변수m 을초기화해줍니다. sum1과 sum2 변수는 최소공배수를 구할 때 사용할 예정입니다. num1과 num2 변수는 최소공배수를 구할 때 사용할 예정입니다. if(n>m){ // n이 m보다 큰 경우 실행되는 for문입니다. for(var i = n; i>=1 ; i--)

원문보기 내부링크
Naver Blog

코딩테스트 같은 숫자는 싫어

오늘 실시할 코딩테스트는 같은 숫자는 싫어 입니다. 배열에서 연속으로 나타나는 숫자들중 하나만 남기고 제거해버리는 메소드를 만들면 되겠습니다. 단 제거된 후 남은 수들을 반환할때는 배열의 원소들의 순서를 유지해야합니다. 문제풀이 소스코드를 통해 알아보겠습니다. <script> var arr = [1,1,3,3,0,1,1]; // answer= [1,3,0,1] var answer = []; arr.forEach((item, i, arr)=>{ // forEach문 사용 // item = 인자 , index = 배열의i번째 번호 , arr사용할 배열 if ( i == 0){ answer.push(item) //i==0일경우 answer 배열에추가 //arr[0] = 1 시작 숫자는 항사 고정이기때문에 이 식을통해 arr[0]번째 값을 먼저넣어줌 } else if( arr[i-1] !== item){ // i==0이 아닐경우 실행되는 조건문 // arr[i-1] 이 item(현재 조건문

원문보기 내부링크
Naver Blog

코딩테스트 이상한 문자 만들기

문제입니다. 문자열중에 각 단어의 짝수번째 알파벳은 대문자, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수를 만들면 되겠습니다. var str = s.split(' '); // 문자열 s를 split( 기준 ) 기준에 해당하는 구분으로 나눔(배열취급) for(var i = 0; i<str.length; i++ ){ //str에는 현재 try,hello,world 으로 길이3의 배열이 생성되어있음 for(var j = 0; j<str[i].length; j++){ // str[i] 에 해당하는 길이를 구하는 포문 if(j%2==0){ // length 길이에따라 짝수일경우 대문자 answer += str[i][j].toUpperCase(); } else{ // 홀수일경우 소문자 answer += str[i][j].toLowerCase(); } } // 단어사이에 공백추가해주기 if(i < str.length-1){ answer += ' '; } } split(' '); 를 사

원문보기 내부링크
Naver Blog

(java 이클립스) spring을 통해 게시판만들기

오늘은 (java 이클립스) spring을 통해 게시판을 만들어보겠습니다. 기본 설정은 다음에 정리해서 올리겠습니다. 제가 만든 파일은 다음과 같습니다. java 파일 // Mapper // 그리고 jsp (view) 입니다. 우선 service는 사용하지않고 DAO와 Controller 만 사용하여 게시판을 만들어보겠습니다. 저는 이클립스 21-03 ver을 사용하였고 mySQL은 8.0.31 버전을 사용했습니다. BoardDTO 를 사용하셔도되고 VO를 사용하셔도되고 Bean를 사용하셔도 무관합니다. 우선 db설정을 해주셔야하니 mySQL 작업을 들어가야합니다. CREATE TABLE `scott`.`board` ( `bno` INT NOT NULL AUTO_INCREMENT, `title` VARCHAR(45) NOT NULL, `content` VARCHAR(45) NOT NULL, `id` VARCHAR(45) NOT NULL, `reddate` DATETIME NOT NU

원문보기 내부링크
Naver Blog

Mapper,Controller, Service, DAO,DTO 알아보기

Spring boot 의 중요한 개념들을 알아보겠습니다. Spring boot는 mvc 구조를 따르기 때문에 mvc구조 그림으로 설명드리겠습니다. 화살표 ->와 <- 가 각각 의미하는 내용은다음과 같습니다. 그렇다면 그림은 무엇을 뜻하는지 알아보겠습니다. 각각의 그림은 다음을 뜻합니다. 다음과같이 사용자가 데이터를 호출(요청)하여 >>방향으로 진행하여 DB까지 진입한뒤 반대로 사용자가 호출(요청)했던 값을 다시 리턴 과정을 반복하여 역순으로 데이터를 전달해주는 것 입니다. Controller 는 사용자의 요청을 먼저 처리해주는 역할을하며 요청에따라 Service를 호출합니다. Service 는 비지니스 로직을 수행하여 데이터베이스에 접근하기위해 DAO를 이용하여 Controller가 요청한 결과값을 받아오는 역할을 수행합니다. DAO는 비지니스 로직(service 가 요청) 실행에 필요한 각각의 로직의 DB CRUD를 실행하는 역할 DB 는 DAO에서 받은 호출(요청)에 따른 코드를

원문보기 내부링크
Naver Blog

코딩테스트 시저 암호

문제는 다음과 같습니다. var s = "AB" 일때 n만큼 이동할경우 "BC" 가 된다 단 z 또는 Z는 a 와 A로 리턴할 수 있는 메소드를 만들어라. 아래는 소스코드입니다. 아직 배우는단계인 코린이라서 아는 함수와 메소드가 몇개 없어서 코드가 지저분하기때문에 더러움 주의 달아드리겠습니다.. <script> var s = "aAzZ"; var str=[]; // 변수s를 각각char로 담을 배열을 생성합니다. // 저는 ASCII 를 사용하여 문제를 풀겠습니다. var n = 4; var answer = ''; for(var i = 0; i<s.length; i++){ // 대문자 A-Z if(s.charCodeAt(i) > 64 && s.charCodeAt(i) <91){ // charCodeAt(변수) 는 변수를 char속성으로 바꿔주는 역할을합니다. // 즉 s(i)를 char로 변환하는것입니다. // 자바와 유사한 메소드로는 charAt(변수) 가 있습니다. // 만약 s

원문보기 내부링크
Naver Blog

#1 downy project 시작

downy project에 앞서 프로젝트 초기설정을 실시하겠습니다. 톰캣 서버 = Apache tomcat 9.0.70 버전 java-1.8 이클립스 21-03ver springframework- 4.3.14.RELEASE aspectj-1.8.9 Test - 4.12 mySQL 8.0.31ver [DB 연결 -메이븐 저장소] mariadb-java-client -> 2.7.4 mysql-connector-java -> 8.0.31 spring-jdbc -> 4.3.14 spring-test -> 4.3.14 [mybatis (ibatis)] mybatis : 3.4.4 mybstis-spring : 1.3.1 Spring은 아래 사진에 나타난 버전을 사용했습니다. 새 프로젝트를 만들어보겠습니다. Legacy Project를 만들어주신뒤 프로젝트명과 Spring MVC Project 를 선택해주시고 다음으로 넘어가주세요 프로젝트가 생성되면 프로젝트내에 pom.xml 설정을 해주도록하

원문보기 내부링크
Naver Blog

#2 downy project

이전에 초기설정을 모두 마무리했고 이번에는 #2 입니다. 톰캣서버를 연결하여 view를 만들어보겠습니다. 우선 홈컨트롤러입니다. 소스에도 보이듯 컨트롤러는 어노테이션 Controller가 작성되있는것을 확인하실 수 있습니다. logger.info 에 적혀있는 글귀는 해당 컨트롤러가 정상적으로 작동되면 console창에서 확인하실 수 있습니다. 해당 파일은 여러분들이 레거시프로젝트를 만들게되면 자동으로 생성되는것이니 복사붙여넣기하거나 따로 만드실 필요는 없습니다. package kr.co.an; import java.text.DateFormat; import java.util.Date; import java.util.Locale; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Controller; import org.springframework.ui.Model;

원문보기 내부링크
Naver Blog

#3 downy project (회원가입/로그인)

이번 게시글에서는 스프링을 사용한 아주 간단한 회원가입 및 로그인을 만들어보도록하겠습니다. 우선 데이터베이스 테이블을 작업해보도록하겠습니다. 저는 mySQL 을 사용하여 아래와 같이 member테이블을 작성하였습니다. CREATE TABLE `member` ( `m_no` int NOT NULL AUTO_INCREMENT, `m_id` varchar(45) NOT NULL, `m_pw` varchar(45) NOT NULL, `m_name` varchar(20) NOT NULL, `m_phone` varchar(13) NOT NULL, `m_brith` date NOT NULL, `m_addr` varchar(50) NOT NULL, `regdate` datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`m_no`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3 아까 서버설정했을때 사용된 스키마(schemas)의 이름은 d

원문보기 내부링크
Naver Blog

#4 downymuseum 게시글 전체리스트

오늘은 간단한 게시판과 로그인시스템을 만들어보도록 하겠습니다. 우선 게시판을 만들기 위해서 mySQL작업을 먼저 실시하겠습니다. mysql ERD를 멤버테이블과 보드테이블 다음과같이 설정해주었습니다. 게시판에 필요한 sql파일 xml파일 그리고 java파일들을 먼저 만들어주었습니다. 바로 Mapper작업부터 들어가도록 하겠습니다. 우선 게시판을 가게되면 가장 먼저 출력되어야하는것은 게시글들입니다. mysql쿼리문을 바로 작성해보도록 하겠습니다. <select id="list" resultType="kr.co.an.board.BoardDTO"> //resultType은 BoardDTO가 있는 위치로 지정 select * from board; //<board테이블에서> order by b_no desc; //b_no가 높은순서부터 정렬합니다(오래된게시글이 뒤로밀리도록) </select> 위와 같이 작성해주시면 되겠습니다. 다음은 BoardDTO작업을 실시하도록 하겠습니다. BoardDT

원문보기 내부링크
Naver Blog

bootstrap(부트스트랩) 템플릿 적용하기

부트스트랩 템플릿 적용하는 방법에대해서 설명드리겠습니다. 우선 부트스트랩 사이트로 이동합니다. https://startbootstrap.com/ Free Bootstrap Themes, Templates, Snippets, and Guides Start Bootstrap develops free to download, open source Bootstrap 5 themes, templates, and snippets and creates guides and tutorials to help you learn more about designing and developing with Bootstrap. startbootstrap.com 그 뒤에 아래 사진에 표시된부분을 클릭해주시고 마음에드는 템플릿을 고릅니다. 옆에 프리다운로드를 선택후 알집을 해제하시면 폴더가 나옵니다. 폴더내에 있는 assets css js 폴더를 resources 폴더에 붙여넣기해주신다음 index.html에 있는

원문보기 내부링크
Naver Blog

#5 downymuseum 로그인만들기

이번 시간에는 로그인을 만들어서 각각의 페이지마다 로그인세션을 유지시키는 부분까지 완성해보도록 하겠습니다 또한 로그인을 해야만 게시글 글쓰기가 작동할 수 있도록 만들어보도록 하겠습니다. 우선 로그인을 하기위해서는 로그인에 필요한 Mapper/DAO/DAOImpl/Service/ServiceImpl/Controller 를 추가해주어야합니다. DTO는 왜 없냐? 하시겠지만 LoginDTO를 만드셔도되고 기존에사용한 MemberDTO를 사용하셔도됩니다. 저는 MemberDTO를 그대로 사용하도록하겠습니다 제일먼저 Mapper작업을 해주도록 하겠습니다. <select id="login" resultType="kr.co.an.member.MemberDTO"> // DTO가 있는 패키지주소명을 resultType으로 적어주시며 파라미터는 생략할 수 있습니다. select * from member where m_id=#{m_id} and m_pw=#{m_pw} m_name=#{m_name}//n

원문보기 내부링크
Naver Blog

#6 downymuseum 게시판글쓰기(로그인세션유지)

이번에는 게시판 글쓰기를 만들어보도록 하겠습니다. 우선 DTO작업과 mySQL작업은 이전 게시판글리스트보기에 끝냈기때문에 빠르게 Mapper / DAO / Service / Controller / view를 작업해보도록 하겠습니다. 바로 매퍼작업부터 들어가겠습니다. 글추가(작성)은 insert into 쿼리문을 사용합니다. <insert id="write" parameterType="kr.co.an.board.BoardDTO"> insert into board (`b_title`,`b_content`,`b_regdate`,`b_readcnt`,`m_id`) value(#{b_title}, #{b_content},curdate(), 0 ,#{m_id}) </insert> 다음과같이 쿼리문을 작성했습니다. 여기서 한가지 꿀팁 파라미터가 너무길다 하시는분들에게 한가지 팁을 알려드리겠습니다. 해당 위치에있는 마이바티스config.xml파일에 들어가줍니다. 들어가서 configuration

원문보기 내부링크
Naver Blog

#7 downy museum 게시글상세보기/조회수증가

이번글에서는 게시글 상세보기와 조회수 증가에대해 알아보겠습니다. 우선 Mapper작업부터 해보도록 하겠습니다. <!-- 게시글 상세보기 --> <select id="detail" parameterType="java.lang.Integer" resultType="BoardDTO"> select * from board where b_no = #{b_no} </select> <!-- 게시글조회수 증가 --> <update id="readcntup" parameterType="java.lang.Integer"> update board set b_readcnt = b_readcnt + 1 where b_no = #{b_no} </update> 게시글 상세보기는 b_no라는 int값을 받아서 BoardDTO값을 반환하는 쿼리문을 작성해주시고 조회수 증가는 b_no만 불러와서 b_readcnt 를 update하면되기때문에 int값만 파라미터로 받아오면되겠습니다. 다음은 BoardDAO 입니다 S

원문보기 내부링크
Naver Blog

#8 downy museum 글 수정/삭제

이번 게시글에선 수정과 삭제를 한번에 다뤄보도록 하겠습니다 바로 Mapper작업부터 시작해보도록 하겠습니다. boardMapper <!-- 게시글 수정 --> <update id="update" parameterType="BoardDTO"> update board set b_content = #{b_content} where b_no = #{b_no} </update> <!-- 게시글 삭제 --> <delete id="delete" parameterType="java.lang.Integer"> delete from board where b_no = #{b_no} </delete> Mapper는 다음과 같습니다. 업데이트할 테이블명 / set(바꿀) 필드 / 바꿀필드의 번호 로 작성하였습니다. 즉 board 테이블의 b_no 번호의 content를 바꾸는 쿼리문입니다. 삭제는 board테이블에서 b_no 를 찾아서 삭제합니다. 게시글 수정은 수정된 content를 보내야하기때문에 파라

원문보기 내부링크
Naver Blog

Git 다운로드 / 사용법 (윈도우)

여러명과 프로젝트를 하기 위해서 내가 원하는 위치에 저장포인트를 놓고 사용하는 방법이 없을까 하는 분들에게는 Git을 사용하는 것을 권장드립니다. Git 다운로드방법 이후 모든 설정값은 기본값으로 만지지않고 next클릭 후 다운로드 완료했습니다. 제대로 깔렸는지 확인하기위해 깃배쉬를 실행시켜주시고 $ 뒤에 git을 적어주신뒤 다음과 같이 기본 명령어가 나온다면 git설치가 완료된 것 입니다. 이제 설치한 Git과 연결할 로컬저장소를 만들어 보겠습니다. 로컬저장소는 실제Git을 통해 버전 관리가 이뤄질 내 컴퓨터 안에 있는 폴더입니다. 저는 다음과 같이 폴더를 만들어서 사용했습니다. 그리고 iTshirt-cat 폴더내에 텍스트문서를 README.txt 로 붙여주세요 그리곤 다음과 같이 적었습니다. 저장후 닫아주시고 폴더내에 빈공간에 우클릭해주시면 아래와 같이 Git Bash Here을 클릭해줍니다. 위와 같이 주소 및 명령어를 기다리는 Git bash창이 열립니다. 그리고 git in

원문보기 내부링크
Naver Blog

GitHub 원격저장소 사용하기

이번에는 협업을위한 원격저장소를 사용해보도록 하겠습니다. 우리가 이전에 했던 로컬저장소와는 구분하는 개념으로 원격저장소 라고 부릅니다. GitHub에서는 원격저장소를 레퍼지토리(Repository) 라고 부릅니다. 로그인을 하신후 상단 네비게이션바 우측에 있는 +아이콘 클릭 -> New repository를 클릭합니다. 그러면 어떤 저장소를 만들지 세부 항목을 작성하는 페이지가 나옵니다. Repository name 에 iTshirt 라고 기재하겠습니다. 원격저장소 이름을 iTshirt 라고 하겠다는 의미입니다. Description에는 생성할 원격저장소에 대한 간단한 설명을 작성하는것이며 나머지 옵션은 별도로 변경하지않고 create버튼을 누릅니다. 이렇게 만들게되면 원격저장소의 주소를 갖게됩니다. 밑줄친 부분은 여러분의 username이 들어갑니다. 체크된 부분을 누르면 클립보드에 저장되며 다른 개발자와 함께 작업하고 싶다면 이 주소를 알려주면 되겠습니다. 이제 원격저장소 주소를

원문보기 내부링크
Naver Blog

팀프로젝트 시작

제가 다니는 국비학원에서 팀프로젝트를 시작한지 어언 두달이 다되가고있습니다. 이제 슬슬 마무리가되어 블로그를 작성하게 되었습니다. 저희 조는 캠핑카 대여 홈페이지를 만들기로하여 제가 맡은 부분은 정비소 / 차량정비내역과 부조장으로써 조원케어도 맡게되었습니다. 프로젝트 포스팅에서 다룰 내용은 1. 정비소 리스트/검색 (카카오맵 api 활용) 2. 정비소 등록 / 등록신청 3. 정비소정보 수정 4. 정비소정보 삭제 5. 정비내역 등록 6. 정비내역 수정 7 .정비내역 삭제 8. 그외 입니다. 먼저 DB부터 설명드리겠습니다. CREATE TABLE `garage` ( `garage_no` int NOT NULL AUTO_INCREMENT, `garage_name` varchar(45) NOT NULL, `garage_addr` varchar(300) NOT NULL, `garage_phone` varchar(45) DEFAULT NULL, `garage_state` varchar(45)

원문보기 내부링크
Naver Blog

팀프로젝트 #2

이번 포스팅에서는 정비소 리스트 (검색기능/페이징처리기능)을 포스팅하겠습니다. 우선 sql쿼리문을 작성하는 mapper를 작성하겠습니다. <!-- 정비소 검색조건에 해당하는 페이지조회 --> <select id="garage_select" resultType="kr.co.ccrent.dto.GarageDTO"> <![CDATA[ select * from campingcar.garage where garage_state > 0 and garage_name like CONCAT('%',#{keyword},'%') || garage_addr like CONCAT('%',#{keyword},'%') limit #{pageStart},#{perPageNum} ]]> </select> <!-- 정비소 검색조건에 해당하는 전체 게시물 수 조회 --> <select id="garage_select_count" resultType="int"> <![CDATA[ select count(garage_s

원문보기 내부링크
Naver Blog

팀프로젝트 #3

이번 포스팅에서는 정비소의 등록신청 / 등록 / 수정 / 삭제를 알아보겠습니다. 우선 sql쿼리문부터 작성하겠습니다. 우선 등록신청 / 등록에 관련된 쿼리문입니다. <!-- 정비소 등록신청 --> <insert id="garage_insert" parameterType="kr.co.ccrent.dto.GarageDTO"> insert into garage(garage_name, garage_addr,garage_phone,garage_state, garage_code,state_modify) values(#{garage_name},#{garage_addr}, #{garage_phone}, #{garage_state},#{garage_code},#{state_modify}) </insert> <!-- 정비소등록신청 리스트 --> <select id="garage_select_reg" resultType="kr.co.ccrent.dto.GarageDTO"> <![CDATA[ select

원문보기 내부링크
1