yellowgreenblue

[DB] 데이터 삽입과 수정(insert() vs save() vs update())

ygreenb — Mon, 5 Sep 2022 12:09:13 +0900

DB 메소드 차이 정리

Create, Update API를 구현하다 보면 빈번히 insert()와 update(), save() 함수를 사용하게 된다. 정형화된 템플릿처럼 메소드를 사용해왔는데, 정확히 db에서 어떤식으로 작동하는지에 대해서 알고있지 않았던 것 같아 정리해보기로 했다.

insert()와 update()는 명확하다. 하지만 문제는 save() 인데, 이 함수는 삽입에도 수정에도 사용해서 더 헷갈림을 유발했던 것같다. 그래서 삽입 시 insert()와 수정 시 update()를 각각 save()와의 동작방식을 비교해 차이점을 적어보았다.

삽입 시 insert()와 save()

insert : id가 동일한 값을 저장하려 한다면 오류 발생

save: id가 동일해도 저장한다(수정한다) 기존에 저장된 데이터 위에 덮어쓴다.

수정 시 update()와 save()

update : 특정 필드만 수정할 수 있다.

save : 필드단위로 수정되지 않고 데이터를 덮어쓰므로 이전데이터는 사라진다.

직접 예시를 들어보면 그 차이는 명확하다. 만약 하기와 같이 id, name, content 라는 컬럼을 가진 데이터가 있다고 하자.

{
  "id" : 1,
  "name" : "test",
  "content" : "기존내용"
}

여기서 name 컬럼의 내용만을 수정해보려고 한다.

먼저, update(1, { "name" : "update" }) 를 한다면 결과는 하기와 같다.

{
  "id" : 1,
  "name" : "update",
  "content" : "기존내용"
}

기존의 데이터는 그대로 남아있고, 수정된 내용의 name만 업데이트가 됨을 알 수 있다.

하지만, save({"id":1, "name" : "save" }) 를 한다면 결과는 하기와 같다.

{
  "id" : 1,
  "name" : "save",
}

기존의 데이터는 사라지고, 수정하려고 넣은 데이터로 덮어쓰워짐을 확인할 수 있다.

[Java] 문자열 비교 ==, equals() 차이점

ygreenb — Sat, 3 Sep 2022 17:08:29 +0900

예전에 알고리즘을 푸는 도중, String 변수를 무심코 == 연산자를 사용해 비교해 동작하지 않았던 경험이 있다. 물론 equals() 함수를 사용하니 잘 동작했는데, 그동안 이 둘의 차이가 뭔지 정확히 이해하고 있지 않았던 것 같아서 정리하려고 한다.

Java에서는 int와 boolean과 같은 일반적인 데이터 타입의 비교는 == 연산자를 사용해서 비교한다. 하지만 String같이 Class의 값을 비교할 때는 == 가 아닌 equals()라는 메소드를 사용하여 비교를 해야한다. 이 둘의 차이는 뭘까?

String 변수 생성 시 주소할당

String 변수를 생성할 때는 두가지 방법이 있다.

리터럴을 이용한 방식
new 연산자를 이용한 방식

위 두 가지 방식에는 큰 차이점이 있는데, 리터럴을 사용하게 되면 string constant pool이라는 영역에 존재하게 되고, new를 통해 String을 생성하면 Heap 영역에 존재하게 된다.
String을 리터럴로 선언한 경우, 내부적으로 String의 intern() 메서드가 호출되게 되고, 주어진 문자열이 string constant pool에 존재하는지 검색, 존재한다면 그 주소값을 반환하고 없다면 string constant pool에 넣고 새로운 주소값을 반환한다

String str1 = "apple"; //리터럴을 이용한 방식
String str2 = "apple"; //리터럴을 이용한 방식
String str3 = new String("example"); //new 연산자를 이용한 방식
String str4 = new String("example"); //new 연산자를 이용한 방식

주소값 비교(==)와 값 비교(equals)

==연산자와 equals()메소드의 가장 큰 차이점은 아래와 같다.

== 연산자	비교하고자 하는 두개의 대상의 주소값을 비교
equals() 연산자	비교하고자 하는 두개의 대상의 값 자체를 비교

기본 타입의 int형, char형등은 Call by Value 형태로 기본적으로 대상에 주소값을 가지지 않는 형태로 사용되지만 String은 일반적인 타입이 아니라 클래스이다. 클래스는 기본적으로 Call by Reference형태로 생성 시 주소값이 부여되기 때문에 String 타입을 선언했을때는 같은 값을 부여하더라도 서로 간의 주소값이 다르다.

문자열 비교

public class compare {
    public static void main(String[] args) {
        String s1 = "abcd";
        String s2 = new String("abcd");
		
        if(s1 == s2) {
            System.out.println("== 연산자 => 두 개의 값 같음");
        }else {
            System.out.println("== 연산자 => 두 개의 값 같지 않음");
        }
        
        if(s1.equals(s2)) {
             System.out.println("equals() 연산자 => 두 개의 값 같음");
        }else {
            System.out.println("equals() 연산자 => 두 개의 값 같지 않음");
        }
    }
}

출력 결과는 다음과 같다.

// == 연산자 => 두 개의 값 같지 않음
// equals() 연산자 => 두 개의 값 같음

[Java] int와 Integer의 차이

ygreenb — Fri, 2 Sep 2022 10:41:54 +0900

1. int vs Integer

int (primitive type, 원시형 타입)

int는 변수의 타입(data type, 자료형)이다.
자료형은 ‘data의 type에 따라 값이 저장될 공간의 크기와 저장형식을 정의한 것’ 이다.
자료형은 기본형(primitive type)가 참조형(referece type)으로 나뉨

Integer (wrapper class, 래퍼 클래스)

매개변수로 객체를 필요로 할 때
기본형 값이 아닌 객체로 저장해야할 때
객체 간 비교가 필요할 때

위와 같은 경우, 기본형을 객체 다루기 위해 사용하는 클래스들을 래퍼 클래스라고 함.
Integer은 int의 래퍼 클래스 라고 할 수 있음.

int vs Integer

int : 자료형(primitive type)	산술 연산 가능
int : 자료형(primitive type)	null로 초기화 불가능
Integer : 래퍼 클래스(Wrapper class)	Unboxing 하지 않을 시 산술 연산 불가능
	null 값 처리 가능 → SQL과 연동할 경우 처리가 용이
	DB에서 자료형이 정수형이지만, null값이 필요한 경우, VO에서 Integer을 사용할 수 있음.

2. int와 Integer 간의 변환

Boxing과 Unboxing

Boxing	primitive type → wrapper class 변환 (int to Integer)
Unboxing	wrapper type → primitive type 변환 (Integer to int)

// to int i from Integer ii
int i = ii.intValue();

//to Integer ii from int i
Integer ii = new Integer(i);

valueOf()와 parseInt()의 차이

Integer.valueOf(String)	Integer 클래스를 리턴하기 떄문에 산술 연산 불가능
Integer.parseInt(String)	int 형을 리턴하기 때문에 산술 연산 가능

*정수로 파싱할 수 없는 String을 파라미터로 전달하면 에러

Auto boxing/ unboxing

자바에서 모든 경우는 아니지만 대부분의 경우 자동으로 boxing/unboxing을 해줌

int i = 1;
Integer integer = i; // int to Integer (Auto boxing)
int i2 = integer; // Integer to int (Auto unboxing)

참고

https://velog.io/@hadoyaji/int와-Integer는-무엇이-다른가

https://includestdio.tistory.com/1

[Git] 원격 저장소 연결 및 끊기 원격브랜치 갱신, 조회, 삭제

ygreenb — Wed, 15 Jun 2022 17:28:42 +0900

협업을 하다보면 로컬 저장소(local repository)와 구분되게 원격 저장소(remote repository)를 연결해야 할 때가 있다.

현재 연결되어 있는 원격 저장소(remote repository) 확인

$ git remote -v

원격 저장소 연결

$ git remote add <원격remote이름> <git주소>

원격 저장소 연결 끊기

$ git remote remove <원격remote이름>

원격 브랜치 갱신 ( 원격 저장소에 있는 브랜치들을 가져온다.)

$ git remote update

원격 브랜치 조회

$ git branch -r

원격 브랜치 삭제

$ git push <원격remote이름> --delete <브랜치이름>

삭제된 연격 브래니를 원격 저장소에 반영하기

$ git remote prune <원격remote이름>

[Node.js] express를 backend로 하는 Create-react-app

ygreenb — Sat, 21 May 2022 17:01:09 +0900

1. 개발환경 세팅

이번 프로젝트에서 Node.js에서 많이 사용하는 프레임워크인 Express로 백엔드를 구성하고 Create-react-app으로 프론트를 구성해보려고 한다. 이번 포스팅에서는 Express 앱을 만들고 react앱과 서버를 연결해주려고 한다.

프로젝트의 전체 폴더 안에 back와 front폴더를 각각 나눠주고, back 폴더에는 express, front폴더에는 react 앱을 세팅해준다.

2. Express Generate 로 express 앱 만들기

Express-generator는 Express 환경을 간단하게 구축해주는 npm이다.

따라서 사용하면 쉽게 Node.js 개발을 할수 있다는 장점이 있다.

express-generator를 설치해서 Express App을 만든다. 설치는 아래와 같다.

$ npm install -g express-generator
# or:  yarn global add express-generator

그리고 express app을 만들어준다. (폴더이름을 back로 지정함) 아래와 같이 입력하면 backend라는 폴더가 만들어지고, 폴더 안에 express가 생성된다.

$ express back

express-generator 명령으로 바로 만들고싶다면 아래와 같이 입력하는 방법도 있다.
npx express-generator back

이제 해당 경로로 들어가서 npm install을 하고 npm start로 앱을 실행시킨다.

$ cd back
$ npm install   # or yarn
$ npm start

브라우저에서 http://localhost:3000/ 로 이동하면 앱이 잘 작동되는것을 볼 수 있다.

3. Create-reate-app 생성하기

따로 포스팅을 정리해 놓은 적이 있으니 여길 참고하자.

app을 생성할 때 폴더 이름을 front로 주었다.

$ create-react-app client

4. Express API에서 새 경로 주기

위에서 React-creat-app에서 만들어준 서버 역시 포트번호가 3000번이어서, 처음에 만든 express 서버와 경로가 겹친다. 나중에 두 앱을 동시에 실행시켜야하므로 이를 위해 서버의 포트번호를 바꿔주도록 한다.

bin폴더의 www파일에서 변경한다. 포트번호는 뭐든 상관없다.

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);

아니면 앱을 실행할 떄마다 터미널에 아래의 명령어를 사용해준다.

$ PORT=3001 node bin/www
# window user: set PORT=3001&&node bin/www

그게 번거롭다면 package.json의 script의 npm start명령으로 설정해줘도 된다.

"scripts": {
"start": "set PORT=3001&&nodemon ./bin/www"
},

nodemon

nodemon은 서버의 코드가 바뀔 때마다 자동으로 서버를 재시작해주는 모듈이다.

개발환경에서만 사용할 것이므로 devDpendency에 설치하도록한다.

5. Express API와 React 클라이언트 연결하기

front 폴더 안의 React app의 package.json 파일의 script 섹션 아래 proxy를 새롭게 추가해준다.

*Proxy : 서버와 클라이언트 사이에 중계기로서 대리로 통신을 수행하는 것

proxy에 적을 포트는 express 서버가 실행되는 포트이다.

"scripts": {
	"start": "react-scripts start",
	"build": "react-scripts build",
	"test": "react-scripts test",
	"eject": "react-scripts eject"
},
"proxy": "<http://localhost:3001>",

이렇게 하면 리액트 앱이 보내는 요청이 proxy에 명시한 server주소를 가리키게된다.

pakage.json ⇒ “proxy” : “http://localhost:3001”
React App calls ⇒ http://localhost:3000/api/users Server call ⇒ http://localhost:3001/api/users

참고 : https://daveceddia.com/create-react-app-express-backend/

[Java] 프로그래머스 : 문자열을 정수로 바꾸기(feat. String to Int)

ygreenb — Fri, 15 Apr 2022 07:38:52 +0900

https://programmers.co.kr/learn/courses/30/lessons/12925

코딩테스트 연습 - 문자열을 정수로 바꾸기

문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 제한 조건 s의 길이는 1 이상 5이하입니다. s의 맨앞에는 부호(+, -)가 올 수 있습니다. s는 부호와 숫자로만 이루어져있습니

programmers.co.kr

풀이

1. Integer.parseInt();
String -> Int 로 형변환을 해주면 한줄로 끝낼 수 있다.

int answer = Integer.parseInt(s);

2. 알고리즘으로 풀기
먼저 맨 앞에 부호가 오는 경우를 고려해야 한다.
'-' , 즉 음수가 오는 경우엔 boolean 변수 sign에 false을 준다.
부호가 아닌 숫자가 온다면 기존의 answer에 10씩 곱해서 자릿수를 늘려 숫자를 넣어준다.
마지막에 sign 즉 부호가 true(양수)이면 그대로, false(음수)이면 -를 곱해서 return 한다.

class Solution {
    public int solution(String s) {
        boolean sign = true; 
        int answer=0;
        for(int i=0; i<s.length();i++){
            char c = s.charAt(i);
            if(c=='-'){
                sign=false;
            }else if(c!='+'){
                answer = answer*10+(c-'0');
            }
        }
        return sign?answer:-answer;
    }
}

[JS] 이벤트(Event)와 이벤트 핸들러(Event Handle)

ygreenb — Thu, 14 Apr 2022 01:53:45 +0900

이벤트(Event)란?

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.

이벤트 타입

발생한 이벤트의 종류 (폼, 키보드, 마우스, HTML DOM, Window 객체 등)

// 마우스 클릭 이벤트 예시
<p onclick="changeText(this)">여길 클릭하세요!</p>
<script>
		function changeText(element) {
				element.innerHTML = "내용이 바뀌었습니다!";
		}
</script>

this : <p> 태그에서 나온 DOM 객체의 자기자신을 의미

이벤트 핸들러

이벤트가 발생했을 때 그 처리를 담당하는 함수 지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행

// 이 함수는 HTML 문서가 로드될 때 실행됨.
window.onload = function() {

		// 아이디가 "text"인 요소를 선택함.
		var text = document.getElementById("text");

		text.innerHTML = "HTML 문서가 로드되었습니다.";
}

객체나 요소에 이벤트 핸들러를 등록하는 방법 2가지

자바스크립트 코드에서 프로퍼티로 등록하는 방법

window.onload = function() { }// 이 함수는 HTML 문서가 로드될 때 실행됨

2. HTML 태그에 속성으로 등록하는 방법 onclick 속성에 자바스크립트 코드를 적어준다.

<p onclick="this.innerText = '클릭!'">클릭해 보세요!</p>

addEventListener()

객체나 요소의 메서드에 이벤트 핸들러를 전달하는 메서드

대상객체.addEventListener(이벤트명, 실행할이벤트핸들러(함수이름), 이벤트전파방식)

2번째 인자에 함수 이름만을 넣는이유는?
=> 2번째 인자로 함수 "객체"를 받아야 하는데(함수를 가리킴) 만약 clickBtn()(괄호포함)로 준다면 함수가 실행되고, 그 결과를 주게 되므로 실행되지 않는다.

간단하게 버튼을 클릭하면 텍스트가 뜨도록 하는 이벤트를 만들어 본다.

var elementId = document.getElementById("id");

function clickBtn(){
	document.getElementById("text").innerHTML = "버튼을 누르면 나오는 텍스트";
};

elementId.addEventListener("click", clickBtn);

addEventListener(”event”, function(){})

위처럼 함수이름을 등록해 addEventListener의 2번째 인자로 줄 수 있고,
인자 안에 바로 함수를 작성해 굳이 함수 이름을 만들어주지 않아도 된다.

var elementId = document.getElementById("id");

elementId.addEventListener("click", function(){
	document.getElementById("text").innerHTML = "버튼을 누르면 나오는 텍스트";
};

[JS] 노드(Node) 객체와 window 객체

ygreenb — Thu, 14 Apr 2022 01:47:04 +0900

노드(Node)와 노드 트리

노드(Node) : HTML DOM 에서 정보를 저장하는 계층적 단위

노드 트리 : 노드들의 집합으로 노드 간의 관계를 나타냄

자바스크립트에서는 HTML DOM을 이용하여 노드트리에 포함된 모든 노드에 접근할 수 있다.

노드 간의 관계

노드 트리의 모든 노드들은 서로 계층적 관계를 맺고 있다.

노드의 종류

문서 노드(document node) : HTML 문서 전체를 나타내는 노드
요소 노드(element node) : 모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드
주석 노드(comment node) : HTML 문서의 모든 주석은 주석 노드
속성 노드(attribute node) : 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가진다. 하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않는다.
텍스트 노드(text node) : HTML 문서의 모든 텍스트는 텍스트 노드

노드의 값

노드에 대한 정보는 다음과 같은 프로퍼트를 통해 접근할 수 있다.

nodeName(이름) , nodeValue(값), nodeType(타입)

// HTML 문서의 모든 자식 노드 중에서 첫 번째 노드의 이름을 선택
document.childNodes[0].nodeName;
// 아이디가 "heading"인 요소의 첫 번째 자식 노드의 노드값을 선택
document.getElementById("heading").firstChild.nodeValue;
// 아이디가 "heading"인 요소의 첫 번째 자식 노드의 타입을 선택
document.getElementById("heading").firstChild.nodeType;

nodeType 프로퍼티 값

childNodes[0].nodeType;  // 자식 노드 중에서 첫 번째 노드의 이름을 선택

nodeType 프로퍼티 값은 텍스트가 아닌 숫자로 표현된다.

대표적인 HTML 노드별 nodeType 프로퍼티 값

요소 노드:1
속성 노드: 2
텍스트 노드: 3
주석 노드: 8
문서 노드: 9

Window 객체

window 객체는 웹 브라우저의 창을 가르키며, window 객체를 이용하여 브라우저를 조작 할 수 있다.

메서드	설명
close()	현재 창을 닫는다.
open(링크, 새 탭 or 현재 탭, 설정)	새 창을 연다
setTimeout(함수, 밀리초)	지정한 초 뒤에 함수를 실행
alert(메세지)	팝업 창 생성
scrollTo(옵션)	옵션에 있는 좌표 값으로 스크롤

scrollTo()

원하는 위치로 스크롤

window.scrollTo(options): 현재 화면을 options에 해당하는 위치로 이동시키는 메소드
offsetTop : 선택된 영역의 상단까지의 거리를 절대 좌표로 반환하는 메서드

window.scrollTo(0, 1000);
window.scrollTo({
  top: 100,
  left: 100,
	// 부드럽게 올라가는 옵션
  behavior: 'smooth'
});

window.scrollTo({
            'behavior': 'smooth',
            'top':  target.offsetTop
        })

[JS] 자바스크립트와 DOM, HTML 요소 메소드

ygreenb — Thu, 14 Apr 2022 01:44:54 +0900

01. DOM 이란?

문서 객체 모델(Document Object Model)

문서객체모델(Document Object Model) : 객체지향 모델로써 구조화된 문서를 표현하는 형식

DOM은 프로그래밍 언어와 독립적이다. 주로 자바스크립트를 사용하지만, DOM의 구현은 어떠한 언어에서도 가능하다.

HTML 문서에 대한 인터페이스

DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스

DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 함

DOM의 종류

Core DOM : 모든 문서 타입을 위한 DOM 모델
HTML DOM : HTML 문서를 위한 DOM 모델. 가장 많이 사용
HTML 문서를 조작하고 접근하는 표준화된 방법 모든 HTML 요소는 HTML DOM을 통해 접근 가능
XML DOM : 문서를 위한 DOM 모델
XML 문서에 접근하여 그 문서를 다루는 표준화된 방법을 정의 모든 XML 요소는 XML DOM을 통해 접근 가능

Document 객체

Document 객체는 웹 페이지를 의미

웹페이지에 존재하는 HTML 요소에 접근하고자 할 떄는 반드시 Document 객체부터 시작해야 함!

Document 메소드

HTML 요소와 관련된 작업을 도와주는 다양한 메소드 제공

HTML 요소의 선택
HTML 요소의 생성
HTML 이벤트 핸들러 추가
HTML 객체의 선택

HTML 요소를 선택

새로운 HTML 요소를 선택하기 위해 제공되는 메소드

메소드	설명
.getElementById()	해당 아이디의 요소를 선택
.getElementsByClassName()	해당 클래스에 속한 요소를 모두 선택
.getElementsByName()	해당 name 속성값을 가지는 요소를 모두 선택
.querySelectorAll()	해당 선택자로 선택되는 요소들을 모두 선택
.querySelector()	해당 선택자로 선택되느 요소를 1개 선택

<div class="myDivClass" id="myDivId">Hello</div>

document.getElementById("myDivId")
document.getElementByClass("myDivClass")[0];
document.querySelector(".myDivClass") // class
document.querySelector("#myDivClass") // id

getElementsByClassName 같이 element 뒤에 s가 붙어 복수인 경우, console 창에 target을 찍어보면 Collection 즉, 배열타입으로 받게된다는 것을 알 수 있음. 그렇기 때문에 보통 맨 뒤에 [0]을 붙여 사용한다.

HTML 요소 생성 삭제(DOM 제어)

새로운 HTML 요소를 생성 및 삭제하기 위해 제공되는 메소드 (HTML DOM)

메서드/속성	설명
appendChild(append할 Element)	선택한 Element의 자식 Element 마지막에 추가
remove()	선택된 Element 삭제
removeChild(삭제할 Element)	선택된 Element의 자식 Element 삭제
createElement(만들 Element)	Element 생성, 그 후 appendChild()로 추가해줘야 함
firstChild/lastChild	first면 첫번째, last면 마지막 자식 Element 반환

function myFunction() {
  let para = document.createElement("P");
  para.innerHTML = "이것이 추가될 문장입니다.";
  document.getElementById("myDIV").appendChild(para);
}

HTML 이벤트 핸들러 추가

HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 속성

요소.onclick = function(){} // 마우스 클릭 이벤트와 연결될 이벤트 핸들러

[JS] 이벤트(Event)와 이벤트 핸들러(Event Handle)

이벤트(Event)란? 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다. 이벤트 타입 발생한 이벤트의 종류 (폼, 키보드,

hu-coding.tistory.com

02. 자바스크립트와 DOM

DOM 요소의 선택

// HTML <li> 요소를 선택
var selectedItem = document.getElementsByTagName("li");
// 아이디가 “id"인 요소를 선택
var selectedItem = document.getElementById(“id");
// 클래스가 "odd"인 모든 요소를 선택
var selectedItem = document.getElementsByClassName("odd");
// name 속성값이 "first"인 모든 요소를 선택
var selectedItem = document.getElementsByName("first");

DOM 요소의 스타일 변경

// 아이디가 "even"인 요소를 선택
var selectedItem = document.getElementById("even");
// 선택된 요소의 텍스트 색상을 변경
selectedItem.style.color = "red";

DOM 요소의 내용 변경

textContent

텍스트만 가져온다
스타일은 무시한다

innerText

마크업 언어가 적용된 상태로 읽어온다
스타일 또한 적용된 상태로 읽기 때문에 display: none; 한 값은 가져오지 못한다

innerHTML

HTML 요소를 반환하거나 변경할 수 있다
XSS 공격에 취약하니 주의

// 아이디가 "text"인 요소를 선택
var str = document.getElementById("text");
// 선택된 요소의 내용을 변경
str.innerHTML = ＂요소의 내용을 바꿉니다";

[JS] 자바스크립트 배열(array)과 sort(), split() 함수

ygreenb — Mon, 11 Apr 2022 19:33:30 +0900

Array (배열) 선언

하나의 변수에 여러 값을 저장할 수 있음

let array = [1,2,3,4,5]
console.log(array[0])

array.push(6)
console.log(array)

array.length

Sort (정렬) 함수

자바 스크립트 배열의 내장 함수 sort()는 배열 안의 원소를 정렬하는 함수이다.

arrayobj.sort(sortFunction)

arrayobj는 임의의 Array 개체이다. sortFunction는 요소 순서를 결정하는 데 사용되는 함수의 이름이다. 생략하면 오름차순, ASCII 문자 순서로 정렬된다.

문자정렬

var fruit = ['orange', 'apple', 'banana'];

fruit.sort(); // apple, banana, orange

숫자 정렬

위처럼 문자는 정렬이 잘 되지만, 숫자를 정렬하기 위해서는 sortFunction 인수에 함수를 지정해줘야 한다.

sortFunction 인수에 함수를 지정하면 아래의 값 중 하나가 반환된다.

첫 번째 인수가 두 번째 인수보다 작을 경우 -
두 인수가 같을 경우 0
첫 번째 인수가 두 번째 인수보다 클 경우 +

var score = [4, 11, 2, 10, 3, 1]; 

score.sort(); // 1, 10, 11, 2, 3, 4 
              // ASCII 문자 순서로 정렬되어 숫자의 크기대로 나오지 않음

/* 인수에 함수 추가 */
score.sort(function(a, b) { // 오름차순
    return a - b;
    // 1, 2, 3, 4, 10, 11
});

score.sort(function(a, b) { // 내림차순
    return b - a;
    // 11, 10, 4, 3, 2, 1
});

object 정렬

var student = [
    { name : "가", age : 33},
    { name : "다", age : 22},
    { name : "나", age : 11},
    { name : "라", age : 44}
]

/* 이름순으로 정렬 */
student.sort(function(a, b) { // 오름차순
    return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
    // 가, 나, 다, 라
});

student.sort(function(a, b) { // 내림차순
    return a.name > b.name ? -1 : a.name < b.name ? 1 : 0;
    // 라, 다, 나, 가
});

/* 나이순으로 정렬 */
var sortingField = "age";

student.sort(function(a, b) { // 오름차순
    return a[sortingField] - b[sortingField];
    // 11, 22, 33, 44
});

student.sort(function(a, b) { // 내림차순
    return b[sortingField] - a[sortingField];
    // 44, 33, 22, 11
});

Split

split() 메서드는 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눈다.

const str = 'This is an example.';

const words = str.split(' ');
// 띄어쓰기 기준으로 나눔
console.log(words[3]);
// expected output: "example."

const chars = str.split('');
// 문자 기준으로 나눔
console.log(chars[8]);
// expected output: "a"

const strCopy = str.split();
// 아무 일도 일어나지 않는다
console.log(strCopy);
// expected output: Array ["This is an example."]

yellowgreenblue

[DB] 데이터 삽입과 수정(insert() vs save() vs update())

DB 메소드 차이 정리

삽입 시 insert()와 save()

수정 시 update()와 save()

[Java] 문자열 비교 ==, equals() 차이점

String 변수 생성 시 주소할당

주소값 비교(==)와 값 비교(equals)

문자열 비교

[Java] int와 Integer의 차이

1. int vs Integer

int (primitive type, 원시형 타입)

Integer (wrapper class, 래퍼 클래스)

int vs Integer

2. int와 Integer 간의 변환

Boxing과 Unboxing

valueOf()와 parseInt()의 차이

Auto boxing/ unboxing

[Git] 원격 저장소 연결 및 끊기 원격브랜치 갱신, 조회, 삭제

[Node.js] express를 backend로 하는 Create-react-app

1. 개발환경 세팅

2. Express Generate 로 express 앱 만들기

3. Create-reate-app 생성하기

4. Express API에서 새 경로 주기

nodemon

5. Express API와 React 클라이언트 연결하기

[Java] 프로그래머스 : 문자열을 정수로 바꾸기(feat. String to Int)

풀이

[JS] 이벤트(Event)와 이벤트 핸들러(Event Handle)

이벤트(Event)란?

이벤트 타입

이벤트 핸들러

객체나 요소에 이벤트 핸들러를 등록하는 방법 2가지

addEventListener()

addEventListener(”event”, function(){})

[JS] 노드(Node) 객체와 window 객체

노드(Node)와 노드 트리

노드 간의 관계

노드의 종류

노드의 값

nodeType 프로퍼티 값

Window 객체

scrollTo()

[JS] 자바스크립트와 DOM, HTML 요소 메소드

목차

01. DOM 이란?

문서 객체 모델(Document Object Model)

HTML 문서에 대한 인터페이스

DOM의 종류

Document 객체

Document 메소드

HTML 요소를 선택

HTML 요소 생성 삭제(DOM 제어)

HTML 이벤트 핸들러 추가

02. 자바스크립트와 DOM

DOM 요소의 선택

DOM 요소의 스타일 변경

DOM 요소의 내용 변경

textContent

innerText

innerHTML

[JS] 자바스크립트 배열(array)과 sort(), split() 함수

Array (배열) 선언

Sort (정렬) 함수

arrayobj.sort(sortFunction)

문자정렬

숫자 정렬

object 정렬

Split