끄적끄적 개발기록

안녕하세요 워누입니다!

지난 포스팅에 이어 이번에는 STS4 기본 설정 후 첫 프로젝트를 띄워보고자 합니다. 

우선 STS4를 실행해주세요!

첫번째로 세팅할 것은 JRE 설정입니다! 

이제 상단 매뉴에서 [Windows > Reference] 를 클릭해주세요.

Preference 창에서 [JAVA > Installed JREs] 매뉴로 접속해보면

위와 같이 STS에 이미 설치된 JRE가 있다는 것을 알 수 있습니다.

그렇지만 저는 이전 포스팅에서 JDK를 설치했었기 때문에 설치한 JDK로 세팅을 바꾸도록 하겠습니다!

.

오른쪽 위 [Add...] 버튼을 클릭해봅시다. 

여기서 [Standard VM]을 선택하고 [Next >] 버튼을 클릭해주세요!

여기서 [Directory]를 클릭한 후 JDK가 설치된 경로의 폴더를 선택해주세요.

그러면 아래와 같이 나올 것입니다!

이제 [Finish] 버튼을 클릭해서 완료해주세요!

그럼 아래와 같이 [Preferernce] 화면으로 돌아오면서 위에서 세팅한 JDK가 함께 추가된 것을 볼 수 있습니다.

새로 설치한 JDK 옆 체크박스를 클릭한 다음 [Apply] 버튼을 클릭해주세요.

이후 왼쪽 매뉴에서 [JAVA > Compiler]를 클릭해주세요!

JDK Compliance level에서 자신이 설치한 JDK 버전과 맞는지 확인해서 수정해주세요!

저는 11버전을 설치했기 때문에 11로 수정했습니다. 

버전 수정이 완료되었다면 [Apply] 버튼을 클릭해줍시다!

.

이번에는 인코딩을 설정해보겠습니다. 

왼쪽 매뉴에서 [General > Content Types]를 클릭해줍시다. 

화면 내 Content types 항목 중 Text를 클릭하여 Default encoding이 어떻게 나오는지 확인해주세요!

저는 아무것도 안 떠 있어서 아래와 같이 "UTF-8"을 입력해주었습니다.

저처럼 입력을 직접 해주신 분이 계시다면 오른쪽 [Update] 버튼을 꼭 클릭해주세요!

[Text] 항목에서 "UTF-8" 적용을 완료했다 하더라도 하위 항목 중

인코딩이 제대로 설정이 안되어있는 케이스들이 있을 수 있어요.

저의 경우에는 [Java Properties File]과 [Spring Properties File]이 "ISO-8859-1"으로 세팅이 되어 있었습니다!

이렇게 세팅되어 있는 경우도 있으니 꼭 찾아서 "UTF-8"로 설정을 변경하고 [Update]를 클릭해주세요. 

다음은 [General > Workspace] 매뉴로 이동해봅시다!

저는 이미 [Text file encoding] 항목에 "Other: UTF-8"이 잘 적용되어 있었습니다!

만약 다른 인코딩으로 세팅된 분이 있다면 여기도 "UTF-8"로 수정한 다음 [Apply] 버튼을 클릭해주세요!

.

인코딩 세팅을 마무리하고, 마지막으로 [Gradle] 매뉴로 이동해보겠습니다. 

[Java home] 항목에 [Browse] 버튼을 클릭하여 JDK가 설치된 경로를 입력합니다. 

그리고 위와 같이 [Authmatic Project Synchronization] 항목에 체크가 되어 있지 않다면 체크박스 버튼을 클릭해주세요!

위와 같이 되었다면 세팅이 정상적으로 마무리 된 것입니다. 

이제 [Apply] 버튼을 클릭한 후 [Apply and Close] 버튼을 클릭해서 [Preference] 화면을 종료해주세요!

.

다시 처음화면으로 돌아왔네요 ㅎㅎ

이제  [Project Explorer]에서 [Create new Spring Starter Project]를 클릭해줍시다!

저는 [Type]을 "Gradle - Groovy"로, [Java Version]을 "11"로, Name은 "Sample", Package 명은 "sample"로 했습니다. 

이 글을 보고 세팅하시는 분들은 PC 환경에 맞게 세팅을 수정해주시고 [Next >] 버튼을 클릭해주세요!

여기서는 스프링 부트 버전 및 의존성을 설정할 수 있어요!

지금은 간단한 웹 프로젝트를 실행할 예정이므로 아래 두 가지만 추가해줍시다🙂

[Developer Tools > Spring Boot DevTools]

[Web > Spring Web]

다른 의존성에 대한 도구들은 나중에 알아가보도록 하고 우선 [Next] 버튼을 클릭해줍시다!

이 화면에서는 Spring Boot의 구성 정보를 확인할 수 있습니다. 

아직 아무것도 모르므로 일단 [Finish] 버튼을 클릭해줍시다!

.....? 이 오류는 무엇인가...

오류 메세지:

'Import Getting Started Content' has encountered a problem.

NoMatchingConfigurationSelectionException

해당 내용을 구글링해서 찾아보니

Spring Boot 3.x 버전으로 사용하려면 JAVA 17 버전 이상으로 세팅이 되어야 한다는군요...

처음 다뤄보니 별 실수를 다하는군요..😂

여러분은 저같은 실수 하지 마시고 Spring Boot 버전을 JAVA 버전에 맞게 사용하세요!!

여튼 저는 생성했던 프로젝트를 삭제하고 아래와 같이 다시 생성했습니다. 

(나중에는 JDK 17 버전 다시 설치하고 돌아오겠습니다ㅋㅋ)

처음과 다르게 Spring Boot 버전을 2.7.11로 세팅하고 프로젝트를 생성했습니다!

.

이번에는 문제 없이 정상적으로 생성이 된 것 같군요..!

그렇다면 이제 실제로 Run을 시켜보도록 하겠습니다. 

.

프로젝트를 우클릭한 상태에서 [Run As > Spring Boot App] 을 클릭해주세요!

콘솔 창을 보면 위와 같이 출력된 것을 볼 수 있습니다! 

이 중에서 5번째 줄을 살펴보자면, 

STS에 내장된 Tomcat 서버가 8080 포트로 구동되었다는 사실을 알 수가 있습니다!

그럼 이제, Browser에 접속해서 결과를 볼까요?

.

브라우저를 하나 띄워주시고 "localhost:8080"을 입력해서 접속해주세요!

....??? 이번엔 또 무엇인가..싶겠지만 이번에는 다행히 정상적인 결과입니다. 

프로젝트를 띄우기는 했지만 화면에 보이는 부분은 자동으로 만들어지지 않기 때문에 이런 화면이 나온 것이죠!

.

프로그래밍의 첫 관문인 "Hello World!"를 띄워보면 조금이나마 감을 잡을 수 있을 것 같네요 ㅎㅎ

이번엔 sample package 밑에 Controller 패키지를 생성해봅시다!

위 화면에서 sample 패키지를 우클릭 한 후 [New > Package]를 클릭합니다!

화면을 띄웠다면 [Name]에 "sample.controller"를 입력해준 후 [Finish]  버튼을 클릭합니다. 

[Finish] 버튼을 클릭하여 완료하면 아래 화면과 같이

sample 패키지 안에 controller 패키지가 추가된 것을 볼 수 있습니다!

이제 controller 패키지 밑에 HelloWorldController 클래스를 생성해봅시다!

controller 패키지 우클릭 후 [New > Class]를 클릭해주세요!

Name에만 "HelloWorldController"라고 이름합시다. 

원래 Java에서는 [public static void main(String[] args)] 항목을 추가하지만

여기서는 그럴 필요 없이 여러 어노테이션들이 대신 기능을 수행해줄겁니다 ㅎㅎ

.

[Finish] 버튼을 클릭하면 아래와 같이 나올 겁니다. 

자, 이제 여기다가 아래의 코드를 작성해볼까요?

package sample.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloWorldController {

	@RequestMapping("/")
	public String hello() {
		return "Hello World!";
	}
}

코드에 대하여 짤막하게 설명하자면,

@RestController 어노테이션은 REST 컨트롤러 기능을 수행하도록 하는 어노테이션이며, 

@RequestMapping 어노테이션은 해당 메서드를 실행할 수 있는 주소를 설정하는 어노테이션입니다. 

여기서는 기본 주소를 " / "로 지정하였습니다. 

대충 설명했지만 나중에 조금 더 복잡한 코드가 나올 때 자세히 설명드릴 수 있을 것 같아요! 

우선 작성한 코드를 가지고 다시 한 번 프로젝트를 실행하겠습니다!

로그도 정상적으로 실행이 되었구요!

무사히 "Hello World!"도 띄웠습니다!

 .

조금은 다사다난 했지만 Spring Boot의 첫 발걸음을 뗀 기분입니다! 

첫 발걸음을 떼는 다른 분들은 저보다는 덜 실수하기를 바라며 이만 글을 마치겠습니다😀

감사합니다!

안녕하세요 워누입니다😀

여러 일이 있어 잠시 블로그 포스팅을 쉬었습니다만 다시 일상으로 복귀하고 회사에 취직되어 

다시 힘내서 복귀해보고자 해요:)

오늘은 HTML5, 그 중에서도 가장 기초적이지만 모든 이들이 많이 쓰는 "공간 분할 태그"에 대하여 포스팅하겠습니다!

HTML에 익숙치 않은 분들은 "공간 분할 태그"란 말도 이해가 안되거니와

'왜 공간을 분할할까?'라는 질문이 생길 수도 있을 것 같아 간단하게 설명하겠습니다. 

"공간 분할 태그"는 말 그대로 웹 페이지의 공간을 분할하기 위한 태그입니다. 

웹 페이지의 공간을 분할하면 우리가 원하는 레이아웃을 만들어내기 위함인데요,

쉽게 말해 더 예쁘게 꾸미고, Javascript를 활용하여 동적인 이벤트를 만들어낼 수도 있습니다!

"공간 분할 태그"의 종류는 <div>, <span> 이렇게 두 가지가 있으며,

<div> 태그는 block 형식으로 공간을 분할하고, <span> 태그는 inline 형식으로 공간을 분할합니다. 

글로만 보면 당연히 이해가 쉽지 않으니 예시 코드와 실행 결과를 함께 보실까요?

<html5 코드>

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
	<div>div 태그 1</div>
	<div>div 태그 2</div>
	<div>div 태그 3</div>
	<span>span 태그 1</span>
	<span>span 태그 2</span>
	<span>span 태그 3</span>
</body>
</html>

<실행 결과>

실행 결과를 보니 뭔가 다르다는 것을 알 수 있죠?

우선 <div> 태그는 줄바꿈이 되었고, <span> 태그는 줄바꿈이 없습니다!!!

그래도 태그의 명확한 차이점을 알아보기 위해 실행 결과 화면에서 개발자 도구를 실행해봅시다!

(키보드 F12 또는 Ctrl+Shift+I을 눌러주세요.)

이렇게 개발자 도구가 실행되었으면 맨 처음, "div 태그 1"에 마우스를 올려봅시다.

<div> 태그 구역이 표시된 것을 볼 수 있네요:)

입력한 라인 전체가 파란색으로 지정된걸 볼 수 있습니다❗

이번엔 "span 태그 1"에 마우스를 올려보겠습니다.

<div> 태그와 다르게 <span> 태그는 글자 크기에 맞게끔만 파란색으로 지정된걸 볼 수 있네요😮

정리해보면 <div> 태그는 웹 페이지의 너비만큼 차지하여 공간을 분할하는 태그이고, 

<span> 태그는 본인이 입력한 범위만 공간을 분할하는 태그임을 알 수 있었습니다.

위에서 언급한 것처럼 가장 기초적이지만 가장 많이 쓰이는 태그 중 하나에요!

❗❗❗❗ 당장 네이버에서 개발자 도구 실행한 다음 ctrl+f를 누르고

div, span을 각각 입력해보시면 아래와 같이 엄청 많이 나옵니다 ❗❗❗❗

이렇게 자주 사용되는 공간 분할 태그에 대해서 정리해보았습니다!

다음 포스팅에서는 태그에 의미를 부여하는 시멘틱 태그에 대해서 작성해보겠습니다!

오늘은 여기까지:)

읽어주셔서 감사합니다😊

안녕하세요 워누입니다😀

오늘은 자바스크립트를 입문하시는 분들이라면 꼭 알아야 할 상식 중 하나인

var 키워드와 let 키워드의 차이점에 대해서 포스팅해보고자 합니다. 

해당 내용은 가장 기본적이기에 자바스크립트 개발자(신입)로 입사지원 시 기술면접에서 물어보기도 하니,

필요하신 분들에게 도움이 되기를 바라며 글을 시작해보겠습니다!🤗🤗🤗

** 차이점만 간략하게 알고 싶으신 분들은 스크롤을 아래로 내려 표만 보셔도 됩니다(☞ﾟヮﾟ)☞ **

var 키워드, let 키워드 모두 아래처럼 변수 선언 시 사용한다는 것은 아실 거라 믿습니다!

var num1 = 12;

let num2 = 34;

두 키워드가 차이가 없다면 굳이 var, let을 구분하지 않았겠죠?

차이점을 알기 위해서 정확하게 알아두어야 할 개념이 두개 정도 있으니 함께 보면서 알아봅시다! 

1. 스코프(유효 범위)

특정 변수를 사용할 수 있는 유효 범위를 '스코프'라고 합니다.

흔히 조건문, 반복문, 대괄호 등으로 만들어 지는데요, 아래 간단한 예시로 보여드릴게요!

// 전역 스코프

{
    // 스코프 A
    
    {
        // 스코프 A-1
    }
}

{
    // 스코프 B
}

위 예시에서 대괄호로 감싼 부분이 하나의 유효 스코프입니다!

추가로 전역 스코프는 "가장 외곽에 있는 코드를 입력할 수 있는, 전체가 유효한 범위"라는 개념이고 이러한 전역 스코프를 포함해서 스코프의 갯수는 총 4개임을 알수 있습니다..!

이 개념을 잘 숙지하시고 아래 예시를 봐주세요!

(다른 html 코드는 생략하고 script 부분만 보여드릴게요!)

<script>

    {
        // 스코프 A
        var num = 12;
    }
    {
        // 스코프 B
        alert(num);
    }

    // 전역 스코프
    alert(num);
	
</script>

var 키워드로 스코프 A에서 선언 후 스코프 B와 전역 스코프에서 alert으로 출력 시

두 명령어 모두 정상적으로 실행되어 아래 이미지가 두번 출력됨을 알 수 있을 것입니다.

즉, var 키워드로 선언한 변수는 다른 스코프에서도 사용할 수 있다는 이야기가 되죠..!

그럼 이번엔 var 키워드를 let 키워드로 바꿔볼까요?

<script>

    {
        // 스코프 A
        let num = 12;
    }
    {
        // 스코프 B
        alert(num);
    }

    // 전역 스코프
    alert(num);
	
</script>

실행하면 정상적으로 alert이 뜨지 않을 건데요,

VS Code에서 실행하여 디버그 콘솔 창을 확인하거나

브라우저 실행 시 개발자 도구 등을 통해 아래와 같은 오류 메세지가 출력됨을 확인할 수 있습니다!

위 오류 메세지의 뜻은 num이라는 변수명이 정의되지 않았다는 의미인데요, 

이렇게 두가지 테스트를 통해 var 키워드와 let 키워드의 차이점을 확인했으니 한번 정리해보죠!

var 키워드 : 전역 스코프 위치에 변수를 선언하는 키워드

let 키워드 : 특정 스코프 내부에서만 유효한 변수를 선언하는 키워드

스코프 범위에 따라 구분을 해보았는데요,

이로 인해 let 키워드는 특정 스코프 내부에서만 변수를 사용 후 스코프를 벗어나면 영향을 끼치지 않아 메모리 등 시스템 자원을 적절하게 이용할 수 있는 반면 var 키워드는 그렇지 못하다는 단점이 있습니다🤔

위에서 설명드린 var 키워드의 특성을 제대로 이해하지 못하고 사용한다면 다양한 실수를 유발하기도 하는데요,

비동기 함수에서의 문제가 조금 대표적이기 때문에 잠깐 소개해드리도록 할게요!

<script>
	
    for(var i=0; i<3; i++){
        setTimeout(() => {
            alert(i);
        }, 1000*i);
    }
    
</script>

위 함수의 실행 결과를 한번 예측해봅시다. 

setTimeOut() 함수는 첫 번째 매개변수에 넣은 코드(함수)를 두 번째 매개변수에 넣은 시간 이후에 실행하게 만드는 함수인데요, 이 코드를 실행하면 0초 후 '0', 1초 후 '1', 2초 후 '2'를 출력할 거라 예상하실 거에요!

하지만 실제로 실행을 해보면...

...?

1초 간격을 두고 '3'을 3번 출력하게 되는데요,

1초 후에 i를 출력할 때 i는 이미 반복문을 수행 후 전역 스코프에 '3'으로 저장되었기 때문에 '3'만 3번 출력한 것입니다. 

let 키워드를 사용하지 않으면서 위 현상을 방지하기 위해서는 아래와 같이 코드를 수정해서 사용하여야 했습니다. 

<script>
	
    for(var i=0; i<3; i++){
        ((i) => {
            setTimeout(() => {
                alert(i);
            }, 1000*i);
        })(i);
    }

</script>

딱 봐도 복잡해보이죠?

함수로 한번 감싸놓고 사용할 변수를 전달하는 방식이다 보니 코드가 지저분해진 것을 볼 수 있어요...😮

그래도 실행해보면 아래와 같이 출력은 정상적으로 진행됩니다. 

하지만 이것을 let으로 바꾸면...!

<script>
	
    for(let i=0; i<3; i++){
        setTimeout(() => {
            alert(i);
        }, 1000*i);
    }
    
</script>

복잡하지도 않고 실행결과는 처음 예상한 것처럼 0, 1, 2를 순서대로 출력되는 것을 볼 수 있어요!

이런 식으로 var 키워드의 단점을 let 키워드로 보완할 수 있답니다!

2. 재선언

재선언이란 같은 이름으로 변수 또는 상수를 다시 선언하는 것을 말하는데요, 

var 키워드는 재선언을 허용하는 반면 let 키워드는 재선언을 허용하지 않습니다. 

VS Code를 통해 테스트한 결과를 바로 보여드릴게요!

var 키워드로 선언한 num1 변수는 재선언해도 문제 없이 넘어갔지만, num2는 재선언 시 이미 선언되었다는 뜻의 오류 메세지가 출력되었다는 것을 볼 수 있었습니다!

이렇게 보면 var 키워드 보다는 let 키워드를 쓰는게 좋겠다 생각이 드시겠지만, let 키워드는 ECMAScript 6에서 추가된 개념이기에 기존에 작성된 프로그램들은 대부분 var 키워드를 사용했을 것입니다!

또한 let 키워드는 인터넷 익스플로러에서는 지원하지 않기에 let 키워드를 사용하여 개발한 경우 인터넷 익스플로러에서는 정상적으로 동작하지 않는다는 특이사항이 있답니다.

(어차피 올해 하반기에는 익스플로러 이용 자체가 종료되어서 큰 의미를 두지 않아도 될것 같네요😐)

여기까지 두 키워드의 차이점을 알아보았습니다!

글이 너무 기니까 아래 표를 통해 한번 더 정리해보록 할게요:)

사실 이 간단한 내용을 작성하기 위해 위에서 쓸데없이 설명이 길었던 것 같긴 하지만

확실하게 알아두면 좋을 것 같아 정리해보았습니다!

자바스크립트 개발 입문자 분들에게 도움이 되길 바라며 여기서 글을 마무리하겠습니다:)

안녕하세요 워누입니다😀

오늘은 지난번 정규표현식 2번째 포스팅에서 언급했던 filter_var() 함수에 대하여 포스팅해보고자 합니다!

(이메일 유효성 검사를 하는 방법으로 정규표현식과 함께 소개하였으며 자세한 내용은 아래 링크로!!)

https://seoneu.tistory.com/43

PHP에서 제공하는 filter_var() 함수는 특정한 값을 검사하는 함수로,

두 번째 매개변수의 값에 따라 검사할 유형을 다르게 설정할 수 있습니다.

아래와 같은 형식으로 사용할 수 있습니다 

filter_var('검사할 값', 검사할 유형, (옵션));

'검사할 값'은 말 그대로 검사를 받을 대상(값)을 의미하며, 

'검사할 유형' 은 어떤 형식으로 검사할 건지를 결정할 수 있습니다!

검사할 유형에 따라 옵션을 사용할 수 있으며 자세한 내용은 아래 표를 참고해주세요🙂

제가 알아보기 쉽게 작성한 내용이다 보니

위 표의 내용에 대하여 더 자세히 알고 싶으시다면 PHP에서 제공하는 매뉴얼을 참고해주시면 됩니다.

https://www.php.net/manual/en/filter.filters.validate.php

그럼 이제 예시 코드를 보실까요?

간단하게 IP 검증하는 방법과 URL 검증하는 것 두 개 정도만 한번 보도록 하겠습니다!

(이번에는 요청-응답 페이지 없이 PHP 파일만 보여드리겠습니다🙂)

IP는 다음과 같이 검증합니다!

<?php

// 검증할 IP
$checkIP = "192.168.0.101" ;

// 검증
if (filter_var($checkIP, FILTER_VALIDATE_IP)) {
  echo $checkIP."은 정상적인 IP입니다.";
} else {
  echo "올바르지 않은 IP를 입력하셨습니다.";
}

?>

위 소스코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다. 

IP가 정상적으로 검증된 것을 볼 수 있습니다ㅎㅎ

검증하는 값이 IP 형식과 맞지 않다면 "올바르지 않은 IP를 입력하셨습니다."라고 나오겠죠?

다음으로 URL을 검증해봅시다!

<?php

// 검증할 URL
$checkUrl = "http://test.domain.com";

// 검증
if (filter_var($checkUrl, FILTER_VALIDATE_URL)) {
  echo $checkUrl."은 정상적인 url입니다.";
} else {
  echo "올바르지 않은 url을 입력하셨습니다.";
}

?>

위 소스코드를 실행하면 아래와 같은 결과를 얻을 수 있습니다. 

마지막으로 URL 검증할 때 사용할 수 있는 옵션을 적용해보겠습니다!

표에 소개된 URL 추가 검증 옵션 중 "FILTER_FLAG_QUERY_REQUIRED"를 사용하여 검증해봅시다!!

<?php

// 검증할 URL+Qurey
$checkUrl = "http://test.domain.com/example/test.php?query=value" ;

// 검증
if (filter_var($checkUrl, FILTER_VALIDATE_URL, FILTER_FLAG_QUERY_REQUIRED )) {
  echo $checkUrl."은 정상적인 url입니다.";
} else {
  echo "올바르지 않은 url을 입력하셨습니다.";
}
?>

위 소스코드를 실행하면 아래와 같은 결과를 얻을 수 있습니다. 

세번째 매개변수에 옵션을 넣어서 검증된 것을 볼 수 있습니다!

위 내용을 활용하여 PHP로 개발된 웹 페이지에서 특정 IP를 전달받는 경우, 회원가입 페이지를 구성하여 이메일을 검증하거나 숫자로 된 데이터(나이, 생년월일, 휴대폰 번호 등)를 검증하는 경우 등 나름 쓸만한 구석이 있을 것 같네요 ㅎㅎ

이 글을 읽어주시는 분들께서도 도움이 되었기를 바라며, 오늘 포스팅은 여기서 마무리하겠습니다😁

안녕하세요 워누입니다😀

오늘은 자바스크립트의 조건문 중에서 짧은 조건문에 대해 포스팅을 작성해보고자 합니다! 

흔히 조건문이라 하면 잘 아는 if 조건문, switch 조건문 그리고 삼항 연산자를 이용한 조건문이 있는데요,

자바스크립트에서는 논리합(||), 논리곱(&&) 연산자를 사용하여 '짧은 조건문'이라는 것이 있다고 합니다! 

본래 논리합(||), 논리곱(&&) 연산자는 양 변의 표현식 혹은 불(boolean) 데이터를 이용해

참(true)/거짓(false)을 도출하는 연산자인것은 대부분 다 아시는 사실인데

이를 어떻게 조건문으로 사용하는지는 생소한 분들이 꽤 있을 것이라 생각하고 한번 알아보도록 하겠습니다...!

1. 논리합(||)

연산자를 기준으로 양 변중 하나라도 참이면 true 값을 반환하는 연산자입니다. 

우선 아래 표현식을 한번 함께 보실까요?

true || (임의의 표현식 또는 값)

위 식에서는 좌변이 참이라서 우변에 어떠한 표현식이나 값이 오든 항상 true 값을 반환합니다!

자바스크립트는 이렇게 참이나 거짓이 확실한 경우 추가 연산을 진행하지 않는데,

위와 같은 식에서는 좌변이 항상 참이므로 우변의 식을 실행하지 않습니다. 

.

이를 거꾸로 생각하면, 아래와 같이 좌변을 false 바꾸면

자바스크립트는 우변의 식을 실행하거나 값을 가져오게 되겠죠?

false || (임의의 표현식 또는 값)

위 표현식의 원리를 이용하여 아래와 같은 형태로 조건문을 사용한다는 개념입니다. 

(임의의 표현식(조건)) || (좌변의 표현식의 거짓인 경우 실행할 내용)

이렇게 되면 좌변의 표현식이 거짓이라면 우변이 실행될 것입니다!

...

2. 논리곱(&&)

연산자를 기준으로 두 변 모두 참이면 true 값을 반환하는 연산자입니다. 

반대로 말하면 양 변중 하나라도 거짓이면 무조건 false 값을 반환한다는 이야기가 됩니다!

위 논리합을 이용한 조건문에서 설명한 개념을 대입해서 아래 2개의 표현식을 함께 보시기 바랍니다. 

false && (임의의 표현식 또는 값)

true && (임의의 표현식 또는 값)

좌변이 false인 경우라면, 무조건 거짓이기 때문에 자바스크립트는 우변을 실행하지 않을 것입니다. 

다만, 좌변이 true인 경우라면 우변을 실행한다는 이야기가 됩니다. 

즉, 아래 형식처럼 사용할 수 있다는 이야기가 되겠죠?

(임의의 표현식(조건)) && (좌변의 표현식의 참인 경우 실행할 내용)

...

자, 이제 실제 예시를 살펴보도록 하겠습니다. 

숫자를 입력받아서 홀수인지 짝수인지를 구분하는 프로그램을 만든다는 가정하에

맨 처음에 언급했던 if, switch, 삼항 연산자과 더불어 오늘 포스팅한 '짧은 조건문'을 각각 사용한 후

짧은 조건문이 정말 짧은지 비교해보도록 하겠습니다. 

(html의 <script> 부분만 작성했습니다.)

1. if 조건문

<script>
var input = Number(prompt('숫자를 입력하세요.'));
	
if(input % 2 == 0){
	alert('짝수입니다.');
} 
if(input % 2 == 1){
	alert('홀수입니다');
} 
</script>

2. switch 조건문

<script>
var input = Number(prompt('숫자를 입력하세요'));
	
switch(input%2) {
    case 0:
        alert('짝수입니다.');
        break;
    case 1:
    	alert('홀수입니다.');
        break;
    default:
    	alert('숫자가 아닌것 같네요.');
        break;
}
</script>

3. 삼항연산자 조건문

<script>
var input = Number(prompt('숫자를 입력하세요'));
	
(input % 2 == 0) ? alert('짝수입니다.') : alert('홀수입니다.');
</script>

4. 짧은 조건문 

<script>
var input = Number(prompt('숫자를 입력하세요'));

input % 2 == 0 && alert('짝수입니다.');
input % 2 == 0 || alert('홀수입니다.');
</script>

위 4가지를 이렇게 단순 비교해보았더니 삼항연산자 조건문이 더 짧게 작성된 것 같네요🤣🤣🤣

사실 제가 회사에서 업무를 진행할 때도 짧은 조건문 형태로 쓰여진 코딩 스타일은 접하지 못했었는데요, 

나름의 이유가 있었네요 ㅎㅎ (삼항연산자 조건문을 애용하는 분들은 정말 잘 쓰시더라구요..ㄷㄷ)

그래도 최근에 javascript를 공부하기 시작하면서 알게된 신기한 조건문이라 정리해보았습니다!

그럼 이만!!

안녕하세요 워누입니다😀 

오늘은 자바스크립트 함수를 이용해 alert 창에서 문자열 입력받는 방법과

boolean 자료형 처리하는 방법을 가지고 포스팅해보고자 합니다! 

기초적인 내용이지만 종종 써먹을 때가 있으니 한 번씩 봐두시면 좋을 듯 합니다😁

1. prompt()

문자열 자료형을 입력할 때 사용하는 함수인데요,

기본적으로 아래와 같이 사용합니다!

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		// 문자열을 입력받습니다.
		var input = prompt();
		
		// 입력받은 문자열을 출력합니다. 
		alert(input);
	</script>
</head>
<body>

</body>
</html>

예시 html 파일을 브라우저에서 실행하면 아래 이미지와 같은 결과를 얻을 수 있어요!

저는 여기다가 "자바스크립트"라고 입력해보겠습니다!

alert(input) 함수에 의해 "자바스크립트"라는 문자열을 그대로 출력한 것을 볼수 있네요ㅎㅎ

하지만 뭔가 2%가 부족합니다..😐

사용자에게 입력을 요구할 때, 위 예시처럼 빈 페이지에 입력칸만 주면 무엇을 입력해야 하는지 알 수 있을까요?

원하는 값을 받기 위해서는 어떤 값을 요구하는지 알려줘야겠죠??

prompt() 함수는 두가지 매개변수를 아래와 같은 형식으로 사용이 가능합니다.

prompt('Message', 'Default');

형식만 보면 이해가 되지 않으시죠?

Message에는 사용자에게 요구할 메세지를 기입하시면 되고, 

Default에는 입력란에 미리 입력시켜놓을 데이터를 기입하시면 됩니다. 

예시를 같이 보시죠~

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		// 문자열을 입력받습니다.
		var input = prompt('본인의 이름을 입력하세요.', '홍길동');
		
		// 입력받은 문자열을 출력합니다. 
		alert(input);
	</script>
</head>
<body>

</body>
</html>

위 HTML 파일을 브라우저에서 실행하면 아래와 같이 결과를 얻을 수 있어요!

이번에는 그냥 확인 버튼을 클릭하면...

보시다시피, 입력란에 있는 값을 그대로 전달하기 때문에 '홍길동'이라는 이름을 그대로 출력했습니다!

.

여기서 만약, 확인 버튼이 아니라 취소 버튼을 누르면 어떻게 될까요?

결과는..

이렇게 나온답니다!

아무런 입력값이 없었기 때문에 null을 출력하게 되었습니다.

문자열 입력받아서 처리하는 방법은 생각보다 간단하네요😁😁😁

2. confirm()

boolean 자료형을 입력받을 때 사용하는 함수입니다!

prompt()와 비슷한 형식으로 사용하시면 되구요, 

우선 아래 예시 소스부터 볼까요?

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		// boolean 데이터를 입력받습니다.
		var input = confirm();
		
		// 입력받은 문자열을 출력합니다. 
		alert(input);
	</script>
</head>
<body>

</body>
</html>

prompt() 함수와 비슷하죠?

이렇게 html 코드를 만들고 브라우저에서 실행하면 아래 화면처럼 나올 것입니다. 

여기서 확인 버튼을 클릭하면 true를, 취소 버튼을 클릭하면 false를 응답합니다. 

(아래처럼 결과를 얻을 수 있어요!)

confirm 함수 또한 질문을 매개변수로 넣을 수 있습니다!

우리가 흔히 보는 메세지로 예시를 한번 보여 드릴게요 ㅎㅎ

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script>
		// boolean 데이터를 입력받습니다.
		var input = confirm('약관에 동의하시겠습니까?');
		
		// 입력받은 문자열을 출력합니다. 
		alert(input);
	</script>
</head>
<body>

</body>
</html>

우리가 흔히 온라인 상에서 결제를 하거나 회원가입할 때 관련된 약관을 읽고 동의하여야만 다음 절차를 진행하는데요, 

가끔씩 alert 창으로 한번 더 확인하는 절차를 거칠 때 간단하게 사용할 수 있습니다 ㅎㅎ 

이외에도 '예/아니오' 같은 답을 필요로 하는 모든 요구사항에 대하여 confirm() 함수를 이용해 

간단하게 처리할 수 있습니다😁

이번 포스팅 내용도 도움이 되셨길 바라며 이만 마무리하겠습니다!

안녕하세요 워누입니다! 

오늘은 비주얼 스튜디오 코드(VS Code)에서 FTP 연결하는 방법을 포스팅해보겠습니다😃

우선 VS Code를 실행하면 아래와 같이 첫 화면이 보이실 겁니다!

해당 화면에서 마켓플레이스 검색창에 "ftp-simple"을 입력해주세요!

설치 버튼을 클릭하시면 바로 설치가 됩니다!

완료가 되면 아래 화면처럼 보일텐데요, 제가 설치할 때 최신버전은 0.7.6이었네요!

이렇게 설치가 완료되었다면 키보드의 'F1' 단축기를 누르거나,

명령어 입력창으로 직접 이동해서 'ftp-simple'이라는 명령어를 입력해봅시다! 

(엔터는 아직 누르지 마세요!!)

FTP를 연결하려면 어떤 서버에 연결할 것인지 먼저 세팅해줘야겠죠?

그래서 활성화된 명령어들 중에 "ftp-simple : Config - FTP connection setting"을 클릭해줍시다!

위와 같이 화면이 나올텐데요, 

ftp-simple-temp.json에서 연결할 FTP의 정보들을 세팅하면 됩니다!

JSON 파라미터의 명세는 아래 표를 참조해주세요⬇

작성을 마무리하셨으면 저장해주시고, 다시 명령어 창에서 이번에는

"ftp-simple : Open - Open the file directly from FTP server"를 입력하여 실행합시다!

명령어 입력 후 엔터를 누르면 아래와 같이 화면이 나올텐데요, 

JSON 파일에서 설정한 FTP 정보가 정상적으로 등록되어 있다면

목록에 위 사진과 같이 도메인명 혹은 IP 정보가 활성화되어 있을 것입니다. 

자신이 접근하려는 서버가 맞다면 클릭하신 다음 다시 명령창으로 돌아가 이번에는 

"ftp-simple : Remote directory open to workspace"를 입력합니다. 

명령어 입력 후 엔터를 누르면 아래와 같이 연결하려는 서버의 FTP 디렉토리가 보일 거에요!

이 중 접근하고자 하는 디렉토리를 클릭해줍시다 ㅎㅎ

(테스트 중인 회사들의 관련 자료들이 있어 가린 점은 양해 부탁합니다 ㅎㅎ) 

이 중 활성화하려는 디렉토리를 하나 클릭하면 오른쪽 아래에 잠깐 기다리는 alert이 나올 겁니다!

잠시 기다리다 보면 아래 화면과 같이 한번 더 alert이 뜰 텐데요,

(해당 단계만 번역기를 돌리기 위해 사진을 찍어두었어요 ㅎㅎ 파파고 만세~)

여기서 파란색 버튼을 클릭하면 연결이 완료됩니다.

이제 아래 화면과 같이 보인다면, 정상적으로 서버와 연결이 된 것입니다. 

이렇게 자신이 원하는 소스코드를 펼쳐서 수정하시면 되는데요, 

저장하면 자동으로 서버에도 반영이 되니 저장 전 백업은 필수입니다!!

.

이제 수정을 마치고 FTP 연결을 종료하고자 한다면 아래와 같이 명령어를 입력해주세요. 

"ftp-simple : Close all FTP connections."

이렇게 오늘은 VS Code에서 FTP 연결하는 방법을 포스팅해보았습니다! 

그럼 이만~

안녕하세요 워누입니다.

학교 과제와 기말고사, 그리고 회사를 퇴사하는 등 이슈가 많아서 한동안 블로그를 방치해버렸습니다..😂😂

이제 종강도 했고, 퇴사도 했으니 블로그를 다시 꾸준하게 작성해볼까 합니다!

그럼 바로 본론으로 진행해볼게요~

.

오늘은 PHP에서 API를 활용하여 다른 서버(URL)로 파일을 전송하는 방법을 포스팅하겠습니다!

이전 포스팅 중 PHP로 이미지를 업로드하는 방법이 있었죠?

https://seoneu.tistory.com/29

해당 페이지에서 언급했었던 것처럼 다른 서버로 파일을 전송할 때  "multipart/form-data" 설정을 반드시 해주어야 한다고 했었는데요, 이 설정이 무엇을 의미하는지 간략하게라도 알아야 제가 쓴 코드를 보고 이해하거나 직접 작성하실 때 이해를 하기 쉽겠죠?

위 페이지에서 포스팅한 내용 중 클라이언트 측의 샘플 코드를 잠깐 보겠습니다!

<!DOCTYPE html>
<html>
<head>
</head>
<title>파일 업로드 테스트</title>
<body>
<form name="reqform" method="post" action="fileUploadResult.php" enctype="multipart/form-data"> 
 <p>이미지 파일 업로드 테스트</p>
 <hr> <br>
 <input type="file" name="imgFile" /><br>
 <input type="submit" value="업로드" />
</form>
</body>
</html>

해당 소스에서 form 데이터 내 input type을 "file"로 설정했었던 적이 있었죠?"file" 속성은 말 그대로 파일 업로드를 위해 설정하는 속성인데요, 이를 form 데이터에 담아 서버 측으로 전송하는 원리입니다. 이 때, form 태그의 enctype을 "multipart/form-data"로 지정했었습니다. 

"multipart/form-data"로 보내는 이유를 알려면 먼저 HTTP 통신 원리와 Content-type을 알아야 합니다.

간략하게 설명을 드리자면 통신 원리는 매우 간단해요!

스펙에 맞게 클라이언트와 서버가 문자로 구성된 데이터를 송수신하는 것이라고 생각해주시면 됩니다. 파일을 전송한다고 해서 jpg 파일이나 txt 파일 자체가 전송되는게 아니라 파일 역시도 문자의 형태로 전송되는 것이고, 이러한 문자의 형태를 스펙에 맞추어 서버에 송신하는 것 뿐이거든요.  이미지, 텍스트, 동영상 파일 모두 문자열로 이루어져 있는데 확인하고 싶으신 분들은 아무 이미지 파일이나 동영상 파일 등을 메모장 등 텍스트 편집기로 열어보세요!

Content-Type은 Body에 전송되는 메세지(데이터)의 타입을 정의하는 속성으로 HTTP 요청 Header에서 정의합니다. 이 중에서 파일을 송신할 때 사용하는 속성값이 바로 "multipart/form-data" 형식인 것이지요. 

관련해서 참고하기 좋은 블로그가 있어서 공유해봅니다! 

https://velog.io/@shin6403/HTTP-multipartform-data-%EB%9E%80

상세 내용은 위에서 보시고 핵심인 PHP 코드를 같이 볼까요?

<?php
header("Content-Type:text/html; charset=utf-8;"); 

// 요청 데이터(API 요구 사항에 맞게 파라미터 설정)
$value_1 = "value";				// key_1에 대한 value 
$value_2 = "value";				// key_2에 대한 value


// 파일 절대 경로 설정 (예시)
$fileDir = "C:/Bitnami/wampstack-7.2.14-0/apache2/htdocs/img/test.jpg";

// 요청자 검증을 위한 암호화 데이터(수정 금지).
$userId = "ID";
$userPwd = "Password";
$EncryptBase64 = base64_encode($userId.":".$userPwd);

// 요청 데이터를 배열 형식으로 최초 set.
$data = array(
	'key_1' => $value_1,
	'key_2' => $value_2,
	'fileDir' => $fileDir,	// 파일경로
	'fileContents' => file_get_contents($fileDir)	// 파일 내용
);	

// 배열 형식의 데이터를 multipart/form-data 형식으로 변환
$postData = setMultipartFormData($data);

// 요청 API Header 정보(Api-Key 값은 전달받은 값 그대로 사용.)
$headers = array(
	'Content-Type: multipart/form-data;boundary=^*******^',
	'Content-Length: '.strlen($postData), 
	'Authorization: Basic '.$EncryptBase64
);

// 요청 URL 
$postUrl = "https://";

// 응답 파라미터 변수 선언 및 초기화
$response = "";

// API 호출 및 응답 데이터 저장
$response = reqPost($postData, $postUrl, $headers); 
	
// 응답 데이터 print
echo "Response : " . $response;

// api 요청
function apiCall($data, $url, Array $headers){
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, $url);
	curl_setopt($ch, CURLOPT_HEADER, true);
	curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);	
	curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 30);		//connection timeout 30
	curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);	
	curl_setopt($ch, CURLOPT_POST, true);			// API 호출 시 method를 post로 지정
	curl_setopt($ch, CURLOPT_POSTFIELDS, $data);	// Data 
	$response = curl_exec($ch);
	curl_close($ch);	 
	return $response;
}

// multipart/form-data 형식으로 변환하는 함수
function setMultipartFormData($arrayData){
	
	$fileData = $arrayData['fileContents'];
	$boundary = "^*******^";
	$data = "";
	unset($arrayData['fileContents']);

	foreach ($arrayData as $name => $content) {
		$data .= '--' . $boundary . '\r\n'
		. 'Content-Disposition: form-data; name="' . $name . '\"\r\n\r\n'
        . $content . '\r\n';
	}
		
	// 파일 데이터 저장
	$data .= '--' . $boundary . '\r\n'
		. 'Content-Disposition: form-data; name="file"; filename="' . $arrayData['fileDir'] . '"' . '\r\n'
		. 'Content-Type:application/octet-stream' . '\r\n\r\n';
	$data .= $fileData . '\r\n';
	$data .= "--" . $boundary . '--\r\n';

	return $data;
   }
?>

** 주의사항 : 요청 필드는 제가 임의로 작성해서 Key_1, Key_2 등으로 만든 것이지만 실제로는 API 명세서에서 요구하는 필드를 입력하여야 합니다. 일반적으로 파일 절대 경로나 파일명을 요구하므로 fileDir이라는 필드를 만들었지만 이는 제가 임의로 작성한 코드이므로 API 명세에 따라 수정이 필요합니다. 

또한 예시 코드로 작성하다보니 인증 방식 역시 HTTP 기본 인증 방식인 Basic Authorization을 선택하여 만들었습니다. 실제 코드를 작성하실 때 API 명세에 별도 암호화 방식을 요구할 수 있으니 주의하셔야 합니다.

이렇게 예시 코드를 작성해 보았는데요,

위에서 언급했던 "multipart/form-data" 파라미터는 $headers에 담아 HTTP header 정보에 담았습니다!

이중 가장 자세히 보아야 할 부분은 제가 임의로 만든 setMultipartFormData 함수입니다!

배열로 세팅한 $data를 매개변수로 받아 key-value 데이터와 파일 내용을 분리해서 다시 세팅하는 형태로 구성되어 있는데요, 굳이 이러한 과정을 거치는 이유는 multipart/form-data 형식을 준수하기 위함입니다!

우선 첫째로 $boundary 변수는 header에 Content-type=multipart/form-data 지정 시 함께 지정한 boundary와 같은 값을 가져야 합니다. 이유는 boundary가 HTTP 요청 Body 데이터 중 파일 데이터를 구분하기 위한 역할을 가지기 때문입니다. 

둘째로 $boundary 양 옆으로 "--" 기호와 "\r\n" 이스케이프 시퀀스를 넣어 놓았는데요,

먼저 "--" 기호는 body의 끝을 알리는 구분자이며 "\r\n" 이스케이프 시퀀스는 Header와 Body, Body 데이터 간의 구분을 위해 넣었다고 생각하시면 됩니다!

...?

이해가 되지 않는 부분들이 생기실 거에요..!

여기선 요청 Body 데이터만 세팅하는데 왜 또 header/body를 구분하느냐 말이죠??

이유는 body의 내용을 보시면 이해되실 거에요!!

body 데이터에서 Content-Disposition을 지정해주었죠? 이는 HTTP 응답 Header의 한 종류로 브라우저에 Content가 웹페이지로 나타낼지, 다운로드될지 정하는 속성이에요. 즉, $headers에 담은 HTTP 요청 Header 정보가 아닌 응답 Header 정보와 구분하기 위해 "\r\n"을 두번 써서 구분하는 것이랍니다 ㅎㅎ 

Body 데이터 간 구분은 "\r\n"을 한번 써서 구분합니다!

이외 자세한 HTTP 통신 규약은 아래 사이트를 참고해주세요!

https://www.donnywals.com/uploading-images-and-forms-to-a-server-using-urlsession/

추가적으로 응답 헤더 정보인

Content-Disposition, application/octet-stream에 대한 자세한 내용은 각각 아래 페이지를 참고해주세요!

Content-Disposition :

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition

Content-Type: application/octet-stream : https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

참고해야할 사이트가 많지만 찾아보면 분명 도움이 되실 내용들입니다!

.

제가 위에 작성한 코드들은 자바로 작성되어 있던 샘플과 위 페이지를 참고하여 만든 것으로,

필요하신 분들은 가져가서 작성해주셔도 무방합니다만 그냥 복사-붙여넣기하는 방식은 본인에게 제일 좋지 않은 개발습관이에요!

몇몇 분들께서 제 코드를 가져다가 본인이 작성한 코드라고 말하다가 신고되었다고 댓글로 알려주신 사례가 꽤나 적지 않네요..물론 바로 지워주시긴 하셨지만..

저 역시도 초급 개발자이다보니 많은 웹 페이지와 서적들을 보고 공부하느라 내용이 틀릴 수도 있으니 만약 제가 작성한 내용을 보시고 틀린 부분이 있다면 지적해주세요 ㅎㅎ

오늘 포스팅은 여기서 마치도록 할게요!

긴글 읽어 주셔서 감사합니다~~😃😃😃