난쟁이가 적어올린 작은코딩

최종 프로젝트를 끝마쳤다.

모두와 함께 — Fri, 23 Oct 2020 13:01:42 +0900

10월 15일 드디어 최종 프로젝트를 마쳤다!

시간이 조금만 더 있었으면.. 하는 마음이 너무 컸지만, 막상 발표를 마치니 속이 후련한 마음이 더 컸다. 아무래도 정말 프로젝트 기간 동안 열심히 했다는 의미가 아닐까 싶다.

느낀 점은 마지막으로 미루고, 프로젝트를 진행하면서 경험했던 사건들, 개인적으로 아쉬웠던 점, 프로젝트할 때 어떻게 하면 더 좋을지에 대해 다뤄볼까 한다.

주제와 구현할 기능에 대해 긴 시간을 갖지 않는 게 좋다

국비지원 학원 기준으로 3~4개월 배운 내용으로 복잡한 기능을 구현하기엔 무리가 있다. 게다가 3~4개월 배운 내용을 바로 쓴다는 것도 버겁고 빠듯하기 때문에 주제를 선정할 때 팀의 수준을 고려해야 한다.

또한 4주라는 게 그렇게 긴 시간이 아니다. 주제 정하고 DB 설계하고 기능 어떻게 구현할지, UI 설계하다 보면 기능 구현할 시간은 그리 많지 않다. 게다가 제대로 정상 작동하는지 테스트도 필요하기 때문에 4주는 절대로 여유 있는 기간은 아니다. 그렇기 때문에 어느 정도 주제에 대해 미리 대비를 해두는 게 좋은 방법이긴 하다.

그래서 배운 기능을 확실하게 구현할 수 있고, 생각했을 때 너무 복잡하지 않는 주제를 선정하는 게 중요하다고 생각한다.

팀원을 너무 신뢰하지 말 것

나는 사람들한테 사람을 잘 신뢰하지 않는 것처럼 말하지만, 사실 난 사람을 너무 잘 믿는 성격이다..

팀 원 중 한 명이 취업을 이유로 그 팀원이 맡은 기능의 일부분을 나에게 인계해주었다. 받은 내용은 내가 생각한 프로젝트의 전반적인 내용과 맞지 않았고, 그렇게 많은 기능을 구현하지 않았다. (사실 이 부분은 그 팀원이 정말 구현할 기능이 얼마 없다고 생각한 건지 거짓말인지는 확실하게 모르겠다.)

프로젝트 일주일을 조금 남겨놓고 급하게 처음부터 다시 시작했다. 적잖이 당황했고, 어떻게 할지 생각이 많았지만, 이럴 때일수록 오히려 팀원들과 원활하게 소통했고, 넘겨받은 것들은 다행히 잘 구현이 되었다.

좋게 끝나 다행이었지, 만약 전반적인 분위기가 좋지 않고 어수선했다면 그야말로 멘붕이었을 것 같았다.

그런 의미에서 어느 정도의 의심은 필요하고, '나만 잘하면 돼'가 아닌, '좋은 결과물을 이끌어내자'라는 마음으로 다른 팀원들이 어떻게 진행되어가는지도 관심을 가져야 한다.

팀원들 사이에서 실력의 차이가 있을 수도 있다.

너무나도 당연한 말이다. 모두가 실력이 동등할 수 없다. 하지만 팀원 누군가 더 많은 내용을 알고, 학원에서 배운 내용보다 더 좋고 괜찮은 게 있어서 추천을 하고자 하면 나머지 팀원에겐 따로 공부해야 할 시간이 필요하다.

그래서 만약 프로젝트를 시작하기 전 팀원이 미리 정해졌다고 가정했을 때, 스터디 모임을 하는 것도 괜찮은 방법이라고 생각한다. 학원에서 따로 알려주지 않았지만 꼭 사용해보고 싶은 것이 있다면 스터디에서 각자 소개와 동시에 공부를 미리 할 수 있으니 부담감이 보다 적어질 것이다.

마치며,

팀 프로젝트 및 개인 프로젝트를 시작하는 사람들에게 나의 경험을 바탕으로 프로젝트를 하면서 있었던 일과, 아쉬운 점 및 느낀 점을 간략하게 정리해보았다.

나의 글을 통해 시작하려는 사람들이 어느 정도 도움이 되었으면 한다.

마지막으로, 내가 느끼기에, 기준 팀 프로젝트가 그래도 성공적으로 끝났다고 생각한다. 끝까지 포기하지 않고 같이해준 팀원들이 있기 때문이 아닐까 하는 생각이다. 함께 프로젝트했던 팀원들 모두 좋은 곳에 취직했으면 좋겠다 진심

jQuery $(this)

모두와 함께 — Tue, 29 Sep 2020 13:21:19 +0900

html에서 하나의 클래스를 가진 여러개의 태그들 중 하나를 클릭했을 때 클릭이벤트가 실행되는 코드를 짜고있었을 때, 해당하는 클래스의 모든 태그들이 이벤트가 실행되어 곤란했던 적이 있었습니다. 어쩔수없이 id를 설정하여 어찌저찌 메꾸고 넘어갔었던 기억이 있었습니다.

이게 일이 빈번해지고 코드도 보기 안 좋아지기 시작하면서 방법을 찾다 jQuery의 this를 알게되고나서 어떻게 해결할지에 대해 알게되었습니다.

그래서 이번 포스팅에서는 jQuery의 this, $(this)에 대해 알아보려 합니다.

먼저 코드를 보면서 시작하겠습니다.

<style>
    .number {
        clear: both;
        float: left;
        background-color: gray;
        margin: 5px;
        font-size: 1.5em;
        cursor: pointer;
    }
</style>
<body>
    <div class="number">1번입니다.</div>
    <div class="number">2번입니다.</div>
    <div class="number">3번입니다.</div>
</body>
<script>
    $(".number").on("click", function(){
        $(".number").css("background-color", "red").text("clicked.");
    });
</script>

body태그에는 class가 number인 세 개의 태그가 있습니다. 그리고 클래스가 number인 태그를 클릭했을 때 배경색과 텍스트가 바뀌게 설정했습니다.

그렇다면 '2번입니다.'를 클릭했을 때 '2번입니다.'만 css가 적용이 되어야합니다. 먼저 클릭하기 전 화면을 보겠습니다.

최초의 화면

처음 로딩 된 화면입니다. 여기서 '2번입니다.'를 클릭하게 되면,

'2번입니다.'를 클릭했을 때

위처럼 모든 태그가 변하게 됩니다. 이유는 하나를 클릭했어도 class가 number인 태그에 css를 변경하도록 설정했기 때문입니다. 그렇다면 어떻게 해야 클릭했을 때 해당하는 태그만 css를 변경시킬 수 있을까요?

<script>
    $(".number").on("click", function(){
        $(this).css("background-color", "red").text("clicked.");
    });
</script>

중간에 $(".number")에서 $(this)로 변경된 모습을 확인할 수 있습니다. jQuery의 $(this)를 이용하면 클릭한 클래스의 해당 태그만 css가 변경됩니다.

최초의 화면

처음의 화면에서 '2번입니다.'를 클릭하면,

'2번입니다.'를 클릭했을 때

해당 태그를 클릭 한 부분만 css가 변경됩니다.

참고자료

www.everdevel.com/jQuery/this/

Oracle on delete cascade

모두와 함께 — Mon, 28 Sep 2020 18:10:34 +0900

혼자서 코딩을 하던 중 특정 데이터가 삭제되지 않는 것을 확인했습니다. 연습용으로 작은 웹 사이트를 만들어봤는데, 회원 DB가 삭제되지 않았습니다. 이유는 회원테이블(USER TABLE)로 참조키가 설정되어있었기 때문이었습니다. 제가 구축하던 웹 사이트는 회원의 DB가 사라지면 오류가 발생하기 때문에 탈퇴를 한 회원이라면, 회원을 '탈퇴한 회원'으로 수정하고 나머지 회원의 개인정보를 null로 수정하였습니다.

그래도 만약에 자식으로 거슬러 내려가서 일일이 삭제하지않고, 바로 부모쪽에서 바로 삭제할 수 있는 방법을 알고싶었고, 다행히도 그러한 설정이 있어 이번 포스팅에서 알려드릴까 합니다.

on delete cascade

FOREIGN KEY를 이용하면 데이터를 외부에서 참조할 수 있습니다. 예를들어 USER 테이블의 userid라는 기본키가 있고, USER테이블에서 userid를 참조하고 있는 MYPAGE의 userid라는 참조키가 있다고 가정을 할 때, USER테이블의 userid를 함부로 update, delete를 할 수 없습니다. 이유는 다른 테이블에서 사용 중이기 때문에 함부로 변경할 수 없기 때문입니다.

방법은 여러가지겠지만 크게 두가지로 나눌 수 있습니다. 해당 기본 키를 참조하는 모든 참조키를 삭제하고나서 기본키를 삭제하거나, on delete cascade를 사용하여 관련된 모든 키를 삭제하는 방법이 있습니다.

이번에는 on delete cascade를 사용하여 삭제하는 방법에 대해 알아보겠습니다.

CREATE TABLE TEST1(
    PK_COLUMN1 VARCHAR2(100),
    CONSTRAINT TEST1_PK PRIMARY KEY (PK_COLUMN1)
);

위는 TEST1이라는 테이블에 PK설정을 하였습니다.

CREATE TABLE TEST2(
    PK_COLUMN1 VARCHAR2(100),
    COLUMN2 VARCHAR2(100),
    CONSTRAINT TEST2_FK_PK_COLUMN1 FOREIGN KEY(PK_COLUMN1) REFERENCES TEST1(PK_COLUMN1)
    ON DELETE CASCADE
);

TEST2라는 테이블에서 TEST1의 컬럼을 참조하여 FK를 설정하였습니다. 맨 아랫줄을 보면 ON DELETE CASCADE설정을 하였습니다. 이는 원래의 PK인 TEST1테이블의 PK인 PK_COLUMN1의 데이터를 삭제했을 때 그 데이터에 참조된 데이터들을 모두 삭제하겠다는 설정입니다.

다음으로 테이블에서 데이터를 추가하겠습니다.

INSERT INTO TEST1 VALUES('MENU1');
INSERT INTO TEST1 VALUES('MENU2');

INSERT INTO TEST2 VALUES('MENU1', '김밥');
INSERT INTO TEST2 VALUES('MENU1', '튀김');
INSERT INTO TEST2 VALUES('MENU2', '오뎅');
INSERT INTO TEST2 VALUES('MENU2', '라면');

위의 두줄은 TEST1에 데이터를 추가했고, 나머지는 TEST2에 데이터를 추가했습니다. TEST2의 VALUES는 순서대로 PK_COLUMN1, COLUMN2입니다.

TEST2테이블을 조회하면 아래와 같은 데이터가 출력됩니다.

다음은 TEST1테이블에서 PK로 설정된 PK1_COLUMN1의 데이터인 MENU1을 삭제해보겠습니다. 원래라면 삭제가 되지 않지만, FK 설정 당시 ON DELETE CASCADE를 설정했기 때문에 삭제가 될 수 있음을 확인 할 수 있습니다.

DELETE FROM TEST1 WHERE PK_COLUMN1 = 'MENU1';

위의 쿼리를 실행하면,

MENU1이라는 데이터가 삭제됨과 동시에 TEST2의 FK인 PK_COLUMN1의 MENU1이라는 데이터도 삭제된 것을 확인할 수 있습니다.

자료참조

wakestand.tistory.com/205

m.blog.naver.com/PostView.nhn?blogId=pjt3591oo&logNo=220617636202&proxyReferer=https:%2F%2Fwww.google.com%2F

Javascript document.querySelector(All)

모두와 함께 — Sat, 26 Sep 2020 23:31:29 +0900

1. 처음 jQuery를 접할 때

처음 웹개발을 시작하고 아무런 배경없이 그저 받아들이기만 했을 때 html은 무엇이고, css는 무엇이며 javascript는무엇인지 전혀 모르고 그저 따라치기만 바빴습니다.

얼렁뚱땅 며칠 하다가 jQuery로 넘어가면서 편리하다고들 하는데 도대체 무엇이 편리한지도 정확히 모른 채 그저 공부해야 할 게 하나 더늘었다는 생각만으로 기능들을 익히기에 분주했습니다.

작은 프로젝트들을 하며 jQuery가 개발하는 입장에서 좋은 기능이라는 걸 깨달았고, 별 무리없이 계속 쓰고 있었습니다. 모르는 것을 뒤져보다 우연히 요즘은 제이쿼리를 잘 안쓰는 추세라는 글을 보았고, 왜 안쓰는지 찾아보았습니다.

당연히 이유를 몰랐습니다. 왜냐하면 DOM의 정확한 개념을 견지하지도 않고 그저 화면에 나오기만 하면 되는 기능들만 익히니 어떻게 접근해서 어떻게 결과가 나오는지는 거의 알지 못합니다. 사실 지금도 마찬가지구요,,

프로젝트에서 jQuery 의 사용을 그만두겠다고 결심한 이유

jQuery 를 이제 그만 사용해야겠다고 느낀 이유들을 정리해보았다.

medium.com

위의 링크는 jquery가 어떤이유에서 그닥 추천하지 않는지를 설명하는 포스팅입니다.

2. Vanilla Javascript를 공부해야겠다고 결심한 이유

제가 느끼기에 적어도 웹개발은 강력한 framework를 기반으로 탄탄한 웹 어플리케이션을 구축하는 것을 선호하는 것 같다고 느꼈습니다.

이러한 framework들은 초반에 진입이 힘들다는 단점이 있지만, 어느정도 익히고 나면 틀에서 크게 벗어나지 않고, 제한되어있어 보다 개발에 있어 높은 완성도를 자랑한다는 장점이 있습니다.

servier, jsp에서 spring, springboot로, jquery에서 react, vue로 전환되는 추세도 이 때문이 아닐까 조심스레 생각해봅니다.

Vanilla JS에 보다 더 다가가기 위해 오늘은 document.querySelector에 대해 공부해볼까 합니다.

3. document.querySelector

1) querySelector

<div class="test">Hello</div>

class="test"인 div태그입니다.

이 태그를 선택하려면 jQuery에서는,

$(".test")

위처럼 표시할 수 있습니다.

document.querySelector에서는,

 document.querySelector(".test")

위처럼 입력합니다.

이외에도 javascript에서는 querySelector 말고도 다른 기능이 있습니다.

document.getElementsByClassName("test")

만약 태그의 내용 'Hello' 에서 Hi로 변경한다면,

$(".test").html("Hi"); //jQuery

document.querySelector(".test").innerHtml = 'Hi'; // Javascript

둘다 위와 같이 변경이 가능합니다.

마찬가지로 class뿐만 아니라 id에도 가능합니다.

<div id="test">Hello</div>

$("#test") //jQuery

document.querySelector("#test") //javascript
document.getElementById("test") //javascript

2) querySelectorAll

<div class="test">Hello1</div>
<div class="test">Hello2</div>
<div class="test">Hello3</div>
<div class="test">Hello4</div>

만약 jQuery에서 class가 test인 태그에 빨간색 글씨를 준다면, class="test"인 모든 태그의 텍스트가 빨간색이 됩니다.

$(".test").css("color", "red");

출력결과

하지만 document.querySelector를 쓴다면,

document.querySelector('.test').style.color='red';

출력결과

위처럼 맨 윗줄만 css가 적용이 됩니다.

jQuery의 기능처럼 해당하는 모든 class name에 css를 적용하려면 querySelectorAll를 사용하면 됩니다.

하지만 배열로 가져오기 때문에 모든 class에 css를 적용하려면 반복문을 이용해야합니다.

var testList = document.querySelectorAll('.test');
for ( var i = 0; i < testList.length; i++ ) {
    testList[i].style.color = 'red';
}

출력결과

참고자료

www.codingfactory.net/10413

jeonghwan-kim.github.io/2018/01/25/before-jquery.html

git branch

모두와 함께 — Wed, 23 Sep 2020 11:56:13 +0900

처음 git을 시작할 때 굳이 필요하나 싶었지만 이것저것 손대는 것이 많아지면서 정말 git의 소중함을 깨닫곤 합니다. 토이프로젝트를 만들거나 팀프로젝트를 할 때도 git은 정말 요긴하게 쓰입니다. 저는 팀 프로젝트를 하면서 branch를 사용해 좀 더 수월하게 정리를 할 수 있었는데요, 어떻게 사용했는지 정리차 포스팅을 결정했습니다.

먼저 branch에 대해 먼저 알아보려합니다.

1. branch란?

출처 : https://velog.io/@luna238/Git-branch%EA%B5%AC%EC%A1%B0%EC%99%80-git%EB%AA%85%EB%A0%B9%EC%96%B4

하나의 프로젝트에서 독립적으로 어떠한 작업을 진행하기 위한 개념입니다. 이는 진행하려는 프로젝트의 영향을 끼치지 않기 떄문에 동시에 여러 작업을 동시에 진행할 수 있습니다.

따로 만들어진 브랜치는 다른 브랜치와 병합할 수 있는 장점이 있고, 어떻게 진행되는지 한눈에 파악도 가능합니다. 그래서 혼자 프로젝트를 할 때도 편리하지만, 여러명이서 같이 하는 팀 프로젝트에서의 깃은 더욱 편리함을 제공합니다.

개념소개는 이정도로 하고, 명령어와 함께 설명하겠습니다.

2. git branch 명령어

1) 브랜치 생성

$ git branch "브랜치 이름"
$ git branch new-branch

말 그대로 branch라는 명령어로 브랜치를 생성할 수 있습니다. 브랜치의 이름을 'new-branch'라고 한다면, 두번째 줄과 같이 입력하면브랜치는 생성됩니다.

2) 브랜치 전환

$ git checkout "브랜치 이름"
$ git checkout new-branch

처음 브랜치는 master로 지정되어있습니다. 브랜치를 전환하고자 할 때에는 checkout이라는 명령어와 전환하고자 하는 브랜치이름을 같이 입력하면 브랜치가 전환됩니다.

3) 브랜치 병합

$ git merge "브랜치 이름"

브랜치를 병합하는 명령어는 merge입니다. 여기서 어떻게 병합할건지를 먼저 생각해야합니다.

new-branch를 master에 병합하기 위해서는 HEAD가 new-branch로 향한 상태로 merge를 진행합니다.

$ git checkout new-branch
$ git merge master

그럼 브랜치인 new-branch가 master로 병합하게 됩니다.

4) 브랜치 삭제

$ git branch -d "브랜치 이름"
$ git branch -d new-branch

위의 명령어를 입력하면 브랜치는 삭제가 됩니다.

마치며,

얼마전 학원에서 마지막 팀프로젝트가 끝났습니다. 깃으로 branch 생성도 해보고, merge도 하면서 git의 분산 버전관리시스템을 느껴보고싶었습니다. 끔찍하긴 하지만 merge conflict도 어떻게 해결할지도 나름 궁금하기도 했구요. 하지만 팀원중에 git을 안해본 사람도 있었고, 그닥 중요성을 못느끼는 사람도 있어 결국은 압축파일로 합쳤었습니다.

git은 아무래도 기본적인 push나 commit, add, pull, clone 등등 이러한 명령어들도 어느정도 시간이 필요한데, 팀프로젝트 기간은 아무래도 타이트하다보니 git을 사용해보자고 고집피우기엔 좀 이기적일것같다는 판단이어서 결국엔 하지 못하여 아쉬움은 있었지만, 그래도 혼자서 프로젝트의 일부분을 branch로 push 하는 등 척이라도 해보았습니다. 물론 한계는 있었지만요 ㅎㅎ.

결과적으로 좋은 경험이었고 다음에는 git을 적극 활용하여 좋은 팁이 있다면 다시 돌아오겠습니다.

참고자료

backlog.com/git-tutorial/kr/stepup/stepup1_1.html

MyBatis 동적 태그

모두와 함께 — Mon, 21 Sep 2020 20:29:26 +0900

스프링으로 연습삼아 혼자서 프로젝트를 하던 도중 화면에서 한번에 데이터를 여러개로 받아 그 갯수만큼 insert처리를 해야하는 기능을 구현해야했는데요, 모르는게 많은 저는 막막했습니다.. 다행히도 바로 생각난 건 막연하게 for문을 이용하는 건 어떨까? 하는 생각으로 시작했습니다.

구글링과 사놓은 책들을 뒤져보다 mybatis에서 foreach라는 태그를 사용하여 해결했습니다. 이 외에도 mybatis에서는 여러가지의 동적 태그들이 있습니다. if, choose, trim 등등,, 그래서 mybatis의 동적태그에 대해 복습하는 겸 정리를 해볼까 합니다.

정리하기 앞서 동적 태그를 좀 더 매끄럽게 사용할 수 있게 해주는 태그에 대해 먼저 알아보겠습니다. trim이라는 태그엔데, 이 태그는 단독으로 사용되지 않는다는 것이 특징입니다.

trim 태그

trim 태그는 하위에서 만들어지는 SQL문을 조사하여 추가적인 SQL을 처리해주는 태그입니다.

trim태그의 속성에 대해 몇가지 알아보겠습니다.

이름	설명
prefix	해당 태그 내에서 가장 앞에 붙음
prefixOverrides	해당 태그 내에서 쿼리가 가장 앞에 해당하는 문자를 지워줌
suffix	해당 태그 내에서 가장 뒤에 붙음
suffixOverrides	해당 태그 내의 가장 뒤에 해당하는 문자를 지워줌

위의 목록을 통해 예시를 들어보겠습니다.

- 예시 1

SELECT COLUMN1, COLUME2 
  FROM TABLE 
 WHERE PK_COLUMN1 = #{key1}
   <trim prefix="AND (" prefixOverrides="OR" suffix=")">
     <if test="key2 != null">
     	OR PK_COLUMN2 = #{key2}
     </if>
     <if test="key3 != null">
     	OR PK_COLUMN3 = #{key3}
     </if>
   </trim>

위의 prefix 태그를 보면, prefix="AND ("라는 것을 볼 수 있습니다. 이는 where절의 조건을 이어주는 AND를 뜻하며, prefixOverride="OR"은 trim 태그 내의 맨 앞의 문자가 OR일 때 해당 문자를 지워주는 역할을 합니다. suffix=")"은 말 그대로 맨 뒤에 붙은 문자입니다.

위의 SQL문의 trim태그내의 if문이 모든 조건을 만족한다면, 해당 SQL문은 아래처럼 해석됩니다.

SELECT COLUMN1, COLUME2 
  FROM TABLE 
 WHERE PK_COLUMN1 = #{key1} 
       AND(PK_COLUMN2 = #{key2} OR PK_COLUMN3 = #{key3})

- 예시 2

UPDATE TABLE
  <trim prefix="SET" suffixOverrides=",">
    <if test="key1 != null">COLUMN1 = #{key1},</if>
    <if test="key2 != null">COLUMN2 = #{key2},</if>
    <if test="key3 != null">COLUMN3 = #{key3},</if>
    <if test="key4 != null">COLUMN4 = #{key4},</if>
  </trim>

예시 1에 없던 suffixOverrides를 사용하였습니다. suffixOverrides는 맨 끝의 문자가 해당문자와 일치할 때 제거해주는 역할을 합니다. trim태그 안의 if문을 전부 만족하는 조건이라면 해당 SQL문은 아래처럼 해석됩니다.

UPDATE TABLE SET 
COLUMN1 = #{key1},
COLUMN2 = #{key2},
COLUMN3 = #{key3},
COLUMN4 = #{key4}

trim 태그정리는 이정도로 마치고, 본격적인 동적 태그들에 대해 알아보겠습니다.

if는 조건이 true가 되었을 때 태그 내의 SQL문을 처리합니다.

<if test="key1 != null">
  COLUMN1 = #{key1}
</if>

위처럼 해당 if문의 test가 true일 때, 태그 내의 SQL문을 출력합니다.

choose

if와 달리 choose는 여러 상황들 중 하나의 상황에서만 동작합니다. 마치 Java의 if ~ else와 유사합니다.

<choose>
    <when test="key1 != null">
    	COLUMN1 = #{key1}
    </when>
	<when test="key2 != null">
    	COLUMN2 = #{key2}
    </when>
	<when test="key3 != null">
    	COLUMN3 = #{key3}
    </when>
    <otherwise>
    	COLUMN4 = #{key4}
    </otherwise>
</choose>

위의 choose태그 안에서 when이라는 태그가 있습니다. 이는 조건식을 뜻하며 Java에서 else if와 유사한 의미를 가집니다. choose태그의 마지막 otherwise는 Java의 else와 유사한 의미를 가지며, choose태그 내에서 when태그의 조건의 나머지를 뜻합니다.

foreach

foreach태그를 알아보기 전 foreach태그의 속성에 대해서 먼저 알아볼 필요가 있습니다.

이름	설명
collection	전달받은 인자이며, List 또는 Array만 사용 가능
item	전달받은 인자 값을 alias명으로 설정
open	구문이 시작될 때 입력 할 문자열
close	구문의 맨 마지막에 입력 할 문자열
separator	반복되는 사이에 입력 할 문자열
index	반복되는 구문 번호로, 0부터 순차적으로 증가함

아래 예시를 보겠습니다.

SELECT COLUMN1, COLUMN2
  FROM TABLE
 WHERE COLUMN1 in
    <foreach item="item" index="index" collection="list" open="(" seperator="," close=")">
    	#{item}
    </foreach>

전달받은 파라미터의 타입은 list이고, list의 alias설정은 item의 "item"으로 설정하였습니다. foreach태그 맨 앞과 끝은 "(", ")"이며, 반복될때마다 ","를 붙이게 됩니다.

만약 배열의 길이가 2인 list의 배열이라고 가정한다면,

SELECT COLUMN1, COLUMN2
  FROM TABLE
 WHERE COLUMN1 in (#{item[0]}, #{item[1]})

위와 같은 결과를 출력합니다.

마치며,

사실 foreach문에 대해 자세히 알아보려했는데, 글이 너무 길어질 것 같아 따로 포스팅을 하기로 결정했습니다. 개인적으로 위의 태그 중 foreach와 trim을 좀 까다로워했었고, 단순한 SQL문이라면 모를까, 조금 복잡해지기라도 저처럼 숙련도가 없는 사람들은 오랜시간 고민을 해야합니다.

다행히도 주관적으로 mybatis는 직관적인 언어라고 생각해서 그런지 그 구조가 복잡한거라고는 생각하지 않지만, 다음 foreach태그를 중점적으로 포스팅 할 때에는 혼자 고민했었던 사례를 예시로 어떻게 풀어나갔는지 적어보려 합니다.

참고자료

코드로 배우는 스프링 웹 프로젝트(이병승) www.yes24.com/Product/Goods/64340061

java119.tistory.com/85

kim0404.tistory.com/19

java119.tistory.com/103

JavaScript event.preventDefault()

모두와 함께 — Thu, 17 Sep 2020 00:45:42 +0900

최근 조원들과 최종 프로젝트를 하면서, jsp파일에서 클릭을 했을 때 바로 컨트롤러로 넘어가지 않고, 유효성 검사를 마친 후 넘어가도록 설정하고싶었습니다.

html에서 a태그나 button(submit타입)태그를 클릭하면 페이지가 이동하거나 새로고침이 됩니다.

하지만 페이지가 이동하거나 새로고침이 되는 동작을 막고싶은 경우 javascript의 preventDefault를 사용하면 이를 해결할 수 있습니다.

prefentDefault()를 사용하여 제가 생각한 로직을 정리하였습니다.

button 태그 클릭 -> event.preventDefault()를 통해 잠시 이벤트를 막음 -> form태그 안의 내용의 유효검사 실시 -> return 혹은 form.submit()

이를 통해 예시를 들어 설명하겠습니다.

<body>
    <h1>값을 입력하세요</h1>
    <form id="frm" type="post" action="test">
        <input type="text" id="value" name="text">
        <input type="submit" id="btn" value="button">
    </form>
</body>
<script>
    $("#btn").on("click", function(e){
        e.preventDefault();
        var frm = $("#frm");
        var text = $("#value").val();

        if(text == '') {
            alert("값을 입력해주세요.");
            return;
        } else {
            $("#value").val("");
            alert("입력한 값은 "+text+"입니다.");
            frm.submit();
        } 
    })
</script>

body태그의 form태그가 있습니다. form태그에는 두개의 input태그가 있는데, 이는 text타입 하나, submit타입 하나입니다. 입력칸에 값을 입력하면 입력한 값을 경고창에 표시하고나서 submit이 되고, 만약 값이 없다면 값을 입력하라는 경고창과 함께 submit이 되지 않게 설정했습니다.

아래 출력결과와 함께 설명하겠습니다.

body태그의 내용입니다.

빈 값을 입력했을 때의 결과입니다.

이번에는 'hello'라는 문구와 함께 버튼을 클릭하겠습니다.

입력한 값을 나타내는 경고창과함께 확인 버튼을 클릭하면 submit이 되어 페이지가 이동하게 됩니다.

참고자료

programming119.tistory.com/100

HTML data 속성

모두와 함께 — Wed, 16 Sep 2020 10:34:20 +0900

**1. data-* 속성이란?**

data-* 속성은 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 HTML과 DOM 사이에서 교환할 수 있는 방법입니다.

모든 사용자 지정 데이터는 해당데이터를 지정한 요소의 HTMLElement 인터페이스, dataset 속성을 통해 사용할 수 있습니다.

**2.data-* 특징**

dataset을 통하여 값을 가져갈 때 속성에 접근하는 방법은 data 속성의 data- 부분을 뺀 뒷부분만 사용하며 사용하는 부분의 첫번째 영단어는 소문자로, 두번째는 단어의 첫글자는 대문자로 표기합니다.(camelCase로 변환하기 때문입니다.)

다시 말하자면, dataset은 자바스크립트이기 때문에 속성명을 camelCase로 변환합니다. 예를들어 data-create-date라면 , dataset 안에는 createDate로 저장됩니다. 반대로 dataset.monthSalary라고 했다면, data-month-salary가 되는 것 입니다.

3. 입력방법

- 예제(Example)

<button type="button" id="btn" data-code-id="1234" data-type="b">버튼</button>

버튼태그를 입력했습니다. 여기서 data-code-id 와 data-type에 대해 어떻게 변수에 저장할지 알아보겠습니다.

1) JavaScript

var codeId = document.getElementById("btn").dataset.codeId;
var type = document.getElementById("btn").dataset.type;

자바스크립트는 getElementById를 이용하여 dataset의 값을 변수에 담았습니다. 여기서 위의 태그에 data를 빼고, camelCase로 변환한 것을 확인할 수 있습니다.

2) jQuery

var codeId = $("#btn").data("codeId");
var type = $("#btn").data("type");

jQuery에서는 button태그의 id속성을 이용하여 data()의 값을 변수에 담았습니다. JavaScript와 같이 camelCase로 변환한 것을 확인할 수 있습니다.

참고자료

developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/data-*

www.zerocho.com/category/HTML&DOM/post/5a76d1eaabd090001b981ba6

bman-note.tistory.com/7

처음 배우는 사람에게 있어 다회독의 중요성

모두와 함께 — Wed, 16 Sep 2020 00:20:07 +0900

이번 포스팅은 지극히 주관적인 생각입니다.

지극히 개인적인 생각이지만 일반적으로 교육용 서적은 1 회독으로 그 책의 내용을 모두 이해할 수 있다고 생각하지 않는다. 반드시 최소 2 회독은 해야 그나마 책의 저자가 의도하는 바의 의미를 알게 된다고 생각한다.

참 신기하다. 첫 회독 때 무언가 알 것 같기도 하지만 며칠 지나면 금세 잊고 만다. 하지만 2 회독부터는 책의 앞 내용을 예측하면서 점차 머릿속에 흐릿하고 연결되지 않은 개념들을 선명하게 이어주는 듯한 이미지를 연상케 한다.

다회 독은 곧 반복이다. 반복은 중요하다. 머리가 남들과 다르게 비상하여 한 번만 보고도 모든 것을 이해하거나 기억을 한다면 이에 해당하지 않겠지만, 보통 사람들과 같이 금방 잊고, 몇 번에 걸쳐야 이해할 수 있는 정도라면 반복은 매우 중요하다. 그렇다면 다회 독은 읽는 사람으로 하여금 노력한 시간에 대한 보상을 줄 수 있을까?

한 권의 책 다독하기 vs 한 권씩 여러 권 읽기

사실 이 문제는 정말 많은 생각을 하게 만든다. 다회 독을 중요시하는 나 조차도 절반 정도는 한 번 보고 마는 정도니 말이다. '답은 난센스다.'라고 말하고 싶지만, 굳이 하나를 뽑자면 한 권의 책 다독하기를 선택한다.

한 번 읽고 마는 책들은 원래 알고 있던 내용에서 뭔가 부가적인 내용을 더하거나, 개인적인 노하우를 알려주는 책들이다. 혹은 나의 입장에서 교양 정도로 이해할 수 있는 정도의 부류의 책이다.

하지만, 지금 내가 몸 담고 있는 IT업계의 프로그래밍 서적에서 매우 기초의 개념부터 시작하는 내용의 두꺼운 책이라면 반드시 다독을 하려는 마음으로 책을 구매한다. 그 이유에 대해서 알아보자.

책의 저자는 책을 쓰는 순간부터 결말을 알고 있다.

보통 작가는 책을 쓰는 순간 결말, 또는 줄거리를 어느 정도 생각하고 책을 쓴다. 이는 처음에 목차를 정해두고 그 목차에 맞게 책을 써 내려간다. 그리고 그 내용들은 책의 문맥에 맞게 이상한 길로 새 나가지 않는다.

하지만 독자는 다르다. 특히나 처음 배우는 독자들은 목차에 대해 어느 정도 흐름을 잡고 가더라도 그 책을 따라 공부하다 보면 결국 당장 눈앞에 내용을 공부하는데 바쁜 사람들이다. 설령 본인의 페이스에 잘 맞춰 나가더라도 첫 회독에서의 이해는 그 뒤의 내용을 알고 있는 책의 저자만큼 이해하기에는 책의 저자가 생각하는 이해에는 미치지 못할 것이다.

인과관계는 내가 어떤 입장이냐에 따라 그에 대한 이해가 다르다. 그 뒤의 내용을 모를 때의 이해도 이해가 맞다. 하지만 뒤의 내용을 알고 나서의 이해는 그 이해의 깊이가 다르다. 그런 이유에서 공부하는 입장에서, 특히 개념을 다룬 책을 읽을 때는 최소 두 번이라도 읽으려는 이유가 이 때문이다.

에빙하우스의 망각곡선

독일의 심리학자 헤르 밍 에빙하우스는 새로운 정보를 기억하려는 시도가 없을 때 기억에 얼마나 남아 있는지에 대해 망각곡선을 통해 보여준다. 망각곡선의 그래프는 며칠, 몇 주에 걸쳐 새로운 정보를 의식적으로 복습했을 때의 기억력이 상승하는 것을 확인할 수 있다.

에빙하우스의 망각곡선을 통해서도 같은 내용을 복습(반복)하는 것이 어떠한 이점을 주는지에 대해 확인할 수 있다. 그러므로 현재 본인에게 있어 중요한 개념을 공부해야 하는 책이 있다면 반복을 통해 개념을 익히면 그 반복된 학습을 통해 얻게 된 개념을 어떻게 사용할지에 대해 보다 명확하게 알 수 있다.

마치며,

'한 권으로 다회 독을 하는 것이 1 회독으로 여러 권을 읽는 것보다 더 효율이 있을까?'에 대한 나의 물음은 '자신에게 있어 정말 중요한 내용을 다루는 것이라 생각하면 적어도 나는 그게 좋다고 생각한다.'라는 답을 내려주고 싶다.

나에게 있어 다회 독은 정말 지루하지만 그만큼 얻는 것이 분명히 있다. 어쩌다가 이 글을 읽는 독자분들에게 추천하고 싶다.

Java Lambda 반복문 출력

모두와 함께 — Sat, 12 Sep 2020 22:45:58 +0900

요즘들어 스프링을 공부하다보면 람다식이 가끔 나올 때가 있었습니다. 처음에는 람다식인줄도 모르고 무작정 따라치기만 했었는데, 나중에 람다인 것을 알게 되고나서도 그저 따라치기만 했었습니다. 그러다가 코드리뷰를 하면서 조금 복잡해지기 시작하면 보통 람다에서 많이 막히는 일이 빈번히 일어나게되어 어느정도 정리가 필요할 것 같아 포스팅을 하기로 마음먹었습니다.

이번 포스팅에선 람다의 개념과, 컬렉션 프레임워크에서 어떻게 배열들을 처리하는지에 대해 알아보려 합니다.

1. 람다란?

JDK 1.8버전에 새로 추가가 된 람다(Lambda)는 메서드를 하나의 식(expression)으로 표현한 것 입니다. 람다식은 함수를 간략하면서도 명확한 식으로 표현할 수 있게 해줍니다. 메서드를 람다식으로 표현하면 메서드의 이름과 반환값이 없어지므로, 람다식을 '익명 함수(anonymous function)'이라고도 합니다.

2. 람다식 작성방법

평소 알고있는 메서드 작성방법입니다.

int max(int a, int b) {
	return a > b ? a : b;
}

위의 메서드를 람다식으로 변환한다면,

(int a, int b) -> {return a > b ? a : b;}

위처럼 변환을 할 수 있습니다.

위처럼 반환값이(return)이 있는 경우, return문 대신 식으로 대신할 수 있습니다. 식의 연산결과가 자동적으로 반환값이 되는데, 이때는 문장이 아닌 식이므로 끝에 세미콜론(' ; ')을 붙이지 않습니다.

(int a, int b) -> a > b ? a : b

위처럼 반환값을 생략한 채로 람다식을 작성할 수 있습니다.

또한 매개변수의 타입을 생략할 수 있습니다. 그 이유는 리턴문을 생략하는 이유와 같은데, 추론이 가능하기 때문입니다.

(a, b) -> a > b ? a : b

위처럼 간단하게 식을 작성할 수 있습니다.

2. 컬렉션 프레임워크 에서의 람다

컬렉션 프레임워크 인터페이스에 디폴트 메서드가 추가되었는데, 그 중 함수형 인터페이스를 사용하고있습니다. 그 중 일부를 보겠습니다.

인터페이스	메서드	설명
Collection	removeIf	조건에 맞는 요소를 삭제
Iterable	forEach	모든 요소에 작업을 수행
List	replaceAll	모든 요소를 변환하여 대체
Map	forEach	모든 요소에 작업을 수행

다음은 예제입니다.

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

public class Lambda4 {
	public static void main(String[] args) {
		ArrayList<Integer> list = new ArrayList<>();
		for(int i = 0; i < 10; i++) {
			list.add(i);
		}
		
		//list의 모든 요소를 출력
		list.forEach(i -> System.out.print(i + ","));
		System.out.println();
		
		//list에서 2 또는 3의 배수를 제거한다.
		list.removeIf(x -> x%2 == 0 || x % 3 == 0);
		System.out.println(list);
		
		list.replaceAll(i -> i * 10);
		System.out.println(list);
		
		Map<String, String> map = new HashMap<>();
		map.put("1", "1");
		map.put("2", "2");
		map.put("3", "3");
		map.put("4", "4");
		
		// map의 모든 요소를 {k, v}의 형식으로 출력한다.
		map.forEach((k,v) -> System.out.print("{" + k + "," + v + "},"));
		System.out.println();
	}
}

처음 변수 list를 선언하고, for문을 이용하여 list에 0부터 9까지의 수를 배열로 담았습니다.

list.forEach를 통해 0~9를 출력하되, String타입의 문자열 ","를 중간에 삽입하여 출력하였고,

boolean 타입의 removeIf 메서드를 호출하여 2 또는 3의 배수를 배열에서 제거한 후 출력했습니다.

마지막으로 Map 형태의 key와 value를 삽입한 변수 map에서 forEach를 통해 key와 value를 설정하여 출력하였습니다.

밑은 출력결과입니다.

참고자료

자바의 정석(남궁성 저) book.naver.com/bookdb/book_detail.nhn?bid=10191151