자바스크립트 2021. 5. 28.
[JavaScript] 호이스팅(Hoisting)이란? (호이스팅의 개념과 예제)
🎣 Hoisting 🐟 Hoisting 이란? Hoist는 직역하면 들어(끌어)올리다 라는 뜻이다. 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것. 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위 의 최상단에 선언한다. 자바 스크립트 Parser가 함수 실행 전 해당 함수를 한번 훑고, 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효 범위 : 함수 블록(중괄호 : {}) 안에서 유효 즉, Hoisting이란 자바 스크립트 Parser가 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다. 🚨 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서..
JAVA/WhiteShip Java Live Study 2021. 5. 28.
[JAVA] 클래스란? (클래스, 객체, new, 메소드, 생성자, this...)
🍌 클래스 클래스 객체를 정의해 놓은 것 객체의 설계도 또는 틀 객체를 생성하는데 사용됨 클래스를 정의하는 방법 클래스란 객체를 정의한 것이므로, 클래스에는 객체의 모든 속성과 기능이 정의되어 있다. class Tv { // 속성(변수) String color; boolean power; int channel; // 기능(메서드) void power() { power = !power; } void channelUp() { channel++; } void channelDown() { channel--; } 🍌 객체 객체 실제로 존재하는 것. 사물 또는 개념 객체의 용도는 객체가 가지고 있는 기능과 속성에 따라 다름 클래스에 정의된 내용대로 메모리에 생성된 것 객체 만드는 방법 인스턴스화 클래스로부터 객체를..
JAVA/WhiteShip Java Live Study 2021. 5. 23.
[JAVA] 제어문
🍭 반복문(for each) for each 는 J2SE 5.0(Java Platform, Standard Edition) 부터 추가되었다. for each라는 키워드가 따로 있는 것은 아니고 동일한 for를 이용한다. 하지만 조건식 부분이 조금 다르다. 보통 다른 언어에서 for each 라고 많이 하므로 자바에서도 보통 for each 문이라고 말한다. 문법은 아래와 같다. for (type var: iterate) { body-of-loop } 위 iterate(: 반복하다) 는 루프를 돌릴 객체이고 iterate 객체에서 한개씩 순차적으로 var 에 대입되어 for 문을 수행하게 된다. iterate 부분에 들어가는 타입은 루프를 돌릴 수 있는 형태인 배열 및 ArrayList 등이 가능하다. 예..
일상 2021. 5. 21.
mStone Groove T 실리콘 라이트 그레이 게이트론 저소음 갈축 리뷰 (엠스톤 게저갈)
회사 키보드 덮개가 아주 더러워지고 타이핑도 썩 재밌지 않아 새 키보드를 장만했다. 아무래도 사무실에서 써야하다보니 저소음 모델로 찾아봤다. (기존엔 멤브레인을 쓰고 있었음) 처음엔 씽크웨이 듀가드 토체티 체리 저소음 적축 모델을 구매했다. 약 15만원이었다. 가격이 굉장했지만 유튜브에서도 좋다고 난리고 디자인도 너무 내 취향이었다. 그런데 너무 기대를 했던 것일까... 저소음 기계식 키보드는 처음이어서 그런가... 스프링 소리가 이렇게 심할 줄 몰랐다;; 짜증이 나서 영상을 찍을 생각도 못했는데, 쳐보면 종소리가 딩딩딩 울린다. 내가 키보드를 치는건지 종을 울리는건지ㅋㅋ 종소리 때문에 저소음이라는 의미가 사라져서 바로 환불해버렸다. (쿠팡 와우 무료 반품 굿!) 돈 아끼라는 신의 계시인가 생각하고 있었..
Vue.js/Nuxt.js 2021. 5. 21.
Nuxt.js 란? 개념과 예제 (SSR, CSR, Universal, asyncData, fetch...)
📢 들어가기 전에 이번 포스팅에선 Nuxt.js 의 개념과 구조에 대해 알아보고 간단한 예제를 구현해본다. CSR vs SSR Nuxt.js 에 대해 알아보기에 앞서, SSR과 CSR에 대해 알아보자. 이 두가지 개념은 Nuxt.js의 가장 큰 특징이라고 할 수 있다. CSR (Client Side Rendering) 클라이언트 사이드 렌더링. SPA(Single Page Application)에서 사용되는 방식이다. SPA란, 최초 한번 페이지를 전체 로딩한 후 데이터만 변경해서 사용할 수 있는 웹 어플리케이션을 말한다. 최초 페이지를 로딩한 시점부터는 페이징 리로딩(깜빡임) 없이 필요한 부분만 서버로부터 받아서 화면을 갱신하는 렌더링 방법이다. 필요한 부분만 갱신하기 때문에 페이지 이동이 자연스럽다...
JAVA/WhiteShip Java Live Study 2021. 5. 17.
[JAVA] 연산자 (화살표, 삼항, switch...)
산술 연산자 +, -, *, /, % 비트 연산자 &, |, ^ 관계 연산자 , ≤, ≥, ==, ≠ 논리 연산자 &&, || instanceof instanceof 란 참조변수가 참조하고 있는 인스턴스의 실제 타입을 알아보기 위해 사용하는 연산자이다. [참조변수] instanceof [타입/클래스명] 연산 결과는 boolean이다. 결과가 true이면 참조 변수가 검사한 타입으로 형 변환이 가능하다는 것을 뜻한다. 참고로, 값이 null인 참조변수에 대해 instanceof 연산을 수행하면 false를 결과로 얻는다. 조상타입의 참조변수로 자손 타입의 인스턴스를 참조할 수 있기 때문에, 참조 변수의 타입과 인스턴스의 타입이 항상 일치하지는 않는다. 때문에 조상 타입의 참조변수로는 실제 인스턴스의 멤버들..
JAVA/WhiteShip Java Live Study 2021. 5. 17.
[JAVA] 자바 데이터 타입, 변수 그리고 배열
프리미티브 타입 종류와 값의 범위 그리고 기본 값 종류 데이터 형 표현 범위 기본 값 할당되는 메모리 크기 논리형 boolean true 또는 false false 1 byte 문자형 char '\u0000' ~ 'uFFFF' (16비트 유니코드 문자 데이터) '\u0000' 2 byte 정수형 byte -128~127 0 1 byte short -32768 ~ 32767 0 2 byte int -2147483648 ~ 2147483647 (-21억 ~ +21억) 0 4 byte long 9223372036854775808 ~ 9223372036854775807(-100경 ~ + 100경) 0L 8 byte 실수형 float 1.4E-45 ~ 3.4028235E38 0.0F 4 byte double 4...
JAVA/WhiteShip Java Live Study 2021. 5. 15.
[JAVA] JVM이란? 개념 및 구조 (JDK, JRE, JIT, 가비지 콜렉터...)
JVM이란 무엇인가 Java Virtual Machine의 줄임말. 직역하면 '자바를 실행하기 위한 가상 기계(컴퓨터)'라고 할 수 있다. Java 는 OS에 종속적이지 않다는 특징을 가지고 있다. OS에 종속받지 않고 실행되기 위해선 OS 위에서 Java 를 실행시킬 무언가가 필요하다. 그게 바로 JVM이다. 즉, OS에 종속받지 않고 CPU 가 Java를 인식, 실행할 수 있게 하는 가상 컴퓨터이다. Java 소스코드, 즉 원시코드(*.java)는 CPU가 인식을 하지 못하므로 기계어로 컴파일을 해줘야한다. 하지만 Java는 이 JVM 이라는 가상머신을 거쳐서 OS에 도달하기 때문에 OS가 인식할 수 있는 기계어로 바로 컴파일 되는게 아니라 JVM이 인식할 수 있는 Java bytecode(*.cla..
Vue.js/Vuex 2021. 4. 8.
Vuex란? 개념과 예제
📢 들어가기 전에 이번 포스팅에선 Vuex가 무엇인지 알아보고, 간단한 예제를 구현해본다. Vue CLI로 설치한 Vue.js 프로젝트 환경에서 진행했다. Vuex를 시작하기 전에, 아래 방법으로 Vue.js 프로젝트를 설치해야한다. Intellij IDE 또는 WebStorm IDE File - New - Project - Vue.js npm npm i -g @vue/cli vue create '프로젝트 명' ✌ Vuex 란? Vuex는 한마디로 얘기하자면 상태(state)를 관리하는 라이브러리이다. 여기서 상태란 무엇일까? new Vue({ // 상태 data () { return { count: 0 } }, // 뷰 template: ` {{ count }} `, // 액션 methods: { in..
Spring/Spring Boot 2021. 4. 2.
Spring Boot Maven + Nuxt.js 연동하는 법 (CORS, Proxy)
📢 들어가기 전에 Intellij IDEA Community Edition 2019.3.2 에서 진행했다. 버전이 달라도 상관 없음. Spring Boot Maven 프로젝트와 Nuxt.js 를 연동하는 방법을 알아본다. Vue.js도 거의 동일한 방법으로 진행할 수 있다. 🍃 Spring Boot (Maven) File - New - Project 로 새 프로젝트를 생성한다. 초기 화면의 Create New Project 로 생성할 수도 있다. 클릭하고나면 위와 같이 New Project 라는 창이 뜰텐데, 여기서 좌측의 Maven 을 클릭한다. (Gradle 프로젝트를 생성하고자 할땐, Gradle 을 선택해주면 된다.) 위쪽의 Project SDK 도 선택해준 뒤 다음으로 넘어간다. (아마 각자의 ..
