본문 바로가기

Language

(31)
[Java] Socket 통신 간단 예제 Intro 안녕하세요. 플리체입니다. 이번에는 Java Socket을 이용한 Client(클라이언트, 사용자)와 Server(서버) 간의 간단한 통신 예제를 소개시켜 드리겠습니다. 클라이언트는 서버에 연결 요청을 보내고, 서버는 클라이언트의 연결 요청을 수신합니다. 그 후, 서버와 클라이언트는 소켓을 통해 데이터를 교환할 수 있습니다. 단일 통신(1회) Server public class Server { public static void main(String[] args) { try { // 서버 소켓 생성 및 포트 지정 ServerSocket serverSocket = new ServerSocket(9999); // 클라이언트의 연결 요청 대기 Socket socket = serverSocket.acc..
[Spring] invalid source release: 11 오류 해결 방법 Intro 안녕하세요. 플리체입니다. Spring Boot 프로젝트를 생성 후에 IDE를 통해 프로젝트를 빌드시 [invalid source release: xx 오류]가 발생하였습니다. 생각보다 많이 발생하는 오류로 Intellij 기준으로 해결 방법을 공유해 드리려 합니다. 원인 : 프로젝트 Java version과 IDE내 Language level이 일치하지 않아 발생하는 오류 해결 방법 저는 기존 Java version이 1.8로 Intellij가 세팅되어 있었으며, 새롭게 생성한 Spring Boot의 Java version은 11이었습니다. Spring Boot 프로젝트를 생성하였을 때 Java 버전은 Maven: pom.xml Gradle: build.gradle 위 파일을 확인하여 변경해..
[JavaScript/jQuery] console과 객체의 주의점 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 내용은 jQuery를 이용해서 console과 객체의 주의점 입니다. Intro 저는 JavaScript 코드를 작성을 할때에 debugger보다 console.log()가 익숙하여 많이 더 많이 사용하는 것 같습니다. 최근에 소스를 분석하다가 객체를 console.log()를 통해서 확인 하는 과정에서 한참을 고민했던 경험이 있어서 소개해 드리려 합니다. 결과가 어떻게 나올지 같이 예상하고 고민해보면서 보시면 좋을 것 같습니다. 1. 객체 생성 & console.log 찍기 person이라는 이름을 가진 Object(객체) 하나를 생성하겠습니다. property(속성)으로는 이름과 나이까지만 간단히 생성하였습니다. var person = {'na..
[JavaScript/jQuery] Null 병합 연산자 '??' 안녕하세요! Plitche(플리체)입니다. 이번 포스팅의 내용은 jQuery를 이용해서 Null 병합 연산자(??)소개 입니다. Intro Script를 작성하면서 Null 체크는 빈번하게 사용할 일이 많습니다. 그때마다 비교적 길고 지저분한 코드들을 간단하게 줄일 수 있는 연산자 입니다. Null 병합 연산자(??)를 사용하지 않은 형태부터 동일한 결과의 코드를 차례로 예시를 들어 보여드리겠습니다. 1. 기본 연산자만 사용한 형태 해당 변수의 값이 Null일 때 '10' 이라는 값을 할당한다고 가정합니다. 그럼 data라는 변수가 있을때 해당 로직은 아래 사진과 같을 것입니다. var data = null if (data === null || data === undefined) { data = 10 }..
[Vue.js] 함께 공부하는 Vue 기초_04(사용자 입력 핸들링) 안녕하세요! Plitche(플리체)입니다. 이번 포스팅은 [Vue.js] 함께 공부하는 Vue 기초_04(사용자 입력 핸들링)입니다. 그 디렉티브 종류는 v-on과 v-model 두 가지에 대해서 간단히 살펴 보겠습니다. v-on Intro 사용자가 직접 앱과 상호작용 할 수 있도록 하기 위한 Vue의 디렉티브에 대해서 알아보겠다. v-on 라고 하며, Vue 인스턴스에서 메소드를 호출하는 이벤트 리스너를 추가 할 수 있다. 여기서 이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리킨다. 또는 이벤트 핸들러(event handler)라고도 한다. Code(코드) 먼저 아래 사진과 같이 HTML과 스크립트를 살펴보도록 하자. Process(순서) 태그의 id와 Vue의 el과 일치 시킨다..
[Vue.js] 함께 공부하는 Vue 기초_03(반복문) 안녕하세요! Plitche(플리체)입니다. 이번 포스팅은 [Vue.js] 함께 공부하는 Vue 기초_03(반복문)입니다. Intro 이번 포스팅도 지난번 Vue 조건문 사용하기에 이어서 반복문 사용법에 대해서 알아보자. 반복문은 Vue의 디렉티브 중 하나로 각 디렉티브는 고유한 기능이 있다. 문법은 v-for라고 사용하며, 배열의 데이터를 바인딩하여 화면에 목록 등을 표시하는데 사용할 수 있다. 수도없이 쓰게 될 문법이니 꼭! 잊어버리지 말도록 하자. Code(코드) 아래와 같이 HTML과 스크립트를 작성해보자. 결과는 당연히 아래와 같이 data에 본인이 배열형태로 작성한 값들이 표시 될 것이다. Process(순서) 태그의 id와 el을 일치시켜준다. data에 배열 형태로 text들을 넣어준다. 여..
[Vue.js] 함께 공부하는 Vue 기초_02(조건문) 안녕하세요! Plitche(플리체)입니다. 이번 포스팅은 [Vue.js] 함께 공부하는 Vue 기초_02(조건문)입니다. Intro 이번 포스팅도 지난번과 동일하게 공식홈페이지의 가이드를 기초로 하여 추가된 내용까지 따라해보는 내용이다. 지난번에 가장 기본적으로 어떻게 태그와 Vue를 연결하여 사용하는지 알아보았다. 이번에는 Vue의 조건문 사용법에 대해 간단히 알아보려 한다. Html (태그) 먼저 따라해보기 위해 아래와 같은 Html을 만들어 둔다. 이제 나를 볼 수 있어요! Vue에 대해 아직 아무것도 모른다지만 위의 태그 속성만으로도 대충 머리속에 드는 생각이 있을 것이다. 일단 if는 그냥 조건문이고, seen이 true이면 표시되나 보네!? v-는 뭐야? Vue인가? 정확하다!^^ Script..
[Vue.js] 함께 공부하는 Vue 기초_01 안녕하세요! Plitche(플리체)입니다. 이번 포스팅은 [Vue.js] 함께 공부하는 Vue 기초_01입니다. 기본적인 Html, CSS, Javascript를 배운 제가 최근에 많이 듣는 이야기가 '이거 vue로 하면 엄청 편할텐데..'였습니다. 때문에 그 뷰(vue.js)!가 도대체 뭔지 공부를 하기위해 겸사겸사 포스팅하려 합니다. 하나하나 처음부터 같이 공부해봐요! Intro 먼저 어떤 새로운 기술이나 언어를 공부하든 공식홈페이지의 가이드는 한번씩 읽는 것이 좋다. 나도 그렇듯 공식홈페이지라는 막연한 거부감에 확인 하지 않는 경우가 많은데, Vue는 한글화도 잘 되어있고 나도 많이 참고하여 포스팅 할 예정이라 한번씩은 추천드린다. 일단 Vue.js는 사용자 인터페이스를 만들기 위한 프로그레시브 프..