코드 땜장이

 기본적인 학습 예제는 끝났다고 판단이 되었다. 이번에 화부터는 간단하게 예제 파일들을 작성 해볼 것이다.  어떤 프로젝트를 하던지 날짜를 입력 받는 행위는 언제든지 하는 것 같다.  따라서 데이트피커를 작성 해보겠다.  아직 문법들이 익숙하지도 않고, 생각 해보니 scss 설정도 할 줄 모른다. 여러가지 환경 구성 먼저 익숙해져야 할 필요성이 있고,  또한 computed가 방식이 vue와 svelte가 좀 다르다보니, 전혀 반응이 없는등... 아직 깊은 연구가 더 필요 해 보인다.

 위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다.  아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다. https://vuejs.org/v2/api/#v-slot https://vuejs.org/v2/api/#slot  이번 예제도 딱히 이렇다할 만한 내용은 확인이 불가능 하였다. 어떤게 더 좋다 나쁘다 이런 감정조차 없는 그저.... 아 vue랑 svelte가 이정도 문법 차이가 있구나 정도랄까요...  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 svelte(stable)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

 위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다.  아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다.  참고로 MOTION, TRANSITIONS, ANIMATIONS, EASING, SVG, ACTIONS의 예제는 건너 뛰었습니다. https://vuejs.org/v2/guide/class-and-style.html  이번 예제는 딱히 이렇다할 만한 내용은 확인이 불가능 하였다. 어떤게 더 좋다 나쁘다 이런 감정조차 없는 그저.... 아 vue랑 svelte가 이정도 문법 차이가 있구나 정도랄까요...  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 svelte(stable)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다. https://vuex.vuejs.org/kr/guide/state.html https://vuex.vuejs.org/kr/guide/getters.html https://vuex.vuejs.org/kr/guide/mutations.html https://vuex.vuejs.org/kr/guide/actions.html  위의 가이드를 보면 vue는 상태에 가해지는 행위별로 나누어서 관리하는 것을 볼 수 있다.  하지만, svelte에서는 어떤 상태인지에 대해서 관리가 중접적으로 이루어지는 것 같다. 무슨말이 냐면, 읽기전용의 상태, 읽기쓰기가능한 상태, 다른상태들과의 관계가 있는 상태.  위의 두가지 방식 중에 뭐가 더 편할지는 아직은 판단이 불가능하다. svelte의 경우에는 중간 중간에 읽기전용 이였는데, 쓰기가 되어야 하는 경우도 있을 것이고, vue의 경우에는 어떤 상태들이 mutaion이 제공하고 있는지 확인 하기 꽤 귀찮기 때문이다.  하지만 svelte에서는 해당 상태를 참고하지 않게 되었을 때, 처리를 추가적으로 해줄 수 있는데, 이게 라이프사이클에서 mount함수의 리턴값이 unmount때 실행 되는 함수가 되듯이 처리하였다. 꽤나 신경 쓴것을 느낄 수가 있었다.  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 svelte(stable)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다. https://vuejs.org/v2/api/#mounted https://vuejs.org/v2/api/#beforeDestroy https://vuejs.org/v2/api/#mixins https://vuejs.org/v2/api/#beforeUpdate https://vuejs.org/v2/api/#updated https://vuejs.org/v2/api/#Vue-nextTick-callback-context  이번 리뷰가 라이프사이클이지만.... mixin이라는 녀석이 svelte에서는 신기하게 구현 되어있는 것을 볼 수 있었다.    위의 그림을 보면, onDestroy에 있는 예제 이지만, utils.js파일이고 해당 코드에서 라이프 사이클에도 관여할 수 있고, 안쪽에 있는 함수 data등등을 노출 시켜 줄 수 있다.   이건 vue관점에서 보면 mixin으로 볼 수 있을 것이다. 저 안에 onDestroy가 어떻게 동작 하는지 한번 뜯어보고 싶긴 하다.  위의 코드들을 vue스타일로 작성한 코드는 아래에 있다. 한번 확인해보고 적당히 판단 해보길 바란다.  아직은 깊은 수준내에서 비교하기가 학습이 되지 않아서, 한동안은 vue(2.X)와 svelte(stable)로 각각 만들어본 어플리케이션 예제들을 한번 올려보려고 한다.

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다.  아... 이번건 거의 매칭 되는 것이 없다 그나마 알아둬야 할 것이 아래와 같다 https://vuejs.org/v2/api/#ref https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model  오늘은 svelte가 데이터를 바인딩 함에 있어서 엘리먼트 속성을 다루는 것에 대해서 편안함을 느꼇다.  1. duration, currentTime [그림 - 1]  duration과 currentTime을 바인딩 해둔 것을 볼 수 있을 것 이다. 하지만 이건 duration의 경우에는 video태그가 준비가 완료 되었을 때 확인이 가능한 값이다. 즉 비디오 소스를 읽어서 이 영상이 몇초짜리 영상입니다. 이때 발생하는 것이지 해당 태그가 렌더링(mounted)되었다고 읽을 수 있는 값이 아니다.  하지만 svelte는 읽어준다...  currentTime의 경우에는 해당 video의 위치를 변경할 수 있다. 예를 들어 5초 앞으로 뒤로 같은 처리를 할 수있게 된다는 것이다. 이게 양방향 바인딩이 된다니...  2. clientWidth, clientHeight [그림 - 2]  이것도 참 골때린다 clientWidth와 clientHeight를 렌더링 시점에서 크기를 확인 하는 것이 아니라 변경까지도 감지해준다.  일반적으로 다른 프레임워크를 사용 하더라도, 첫 로딩시는 커녕 변경을 감지하기위해서는 resizeObserver와 같은 외장/내장 함수를 사용해야 한다.  그 외의 내용은 문법적인 차이라서 굳이 평을 하지 않겠지만, 위의 녀석들은 필요할때가 많은데, 코드가 지저분해지기 쉬운 녀석들이라 아주.....

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다.  오늘은 바인딩에 대해서 튜토리얼을 진행했다.  해당 튜토리얼은 양이 너무 많아서 반절정도 끊어서 진행 하도록 하였다.   https://kr.vuejs.org/v2/api/index.html#v-model   https://vuejs.org/v2/guide/forms.html#Text   https://vuejs.org/v2/guide/forms.html#Checkbox   https://vuejs.org/v2/guide/forms.html#Multiline-text   https://vuejs.org/v2/guide/forms.html#Select  바인딩 요소가 꽤 많다. 으으으으.....  그래서 좀 짤라서 하겟다 다음주에는 아주 많은 내용이다.. 저런  오늘은 svelte가 데이터를 바인딩 함에 있어서 그리고 외부라이브러리 취급 방식에 대해서 좀 얘기 해볼것이다.  1. numeric [그림 - 1] [그림 - 2]  위의 그림 - 1의 결과를 보면 처음에 설정해둔 a, b의 값이 문자열이기에 a + b => ab로 표현이 되어있다. 하지만, input들을 변경 후에 a + b => a + b 로 표현 되는 것을 볼 수 있다.  vue에서는 input의 이벤트를 숫자로 받을 것인지에 대한 키워드가 있다. v-model.number이런 방식이다.  일단 svelte에서는 type에 따라서 바인딩 되는 값의 타입이 고정이 되는 것 같아서 아쉽다.  2. group [그림 - 3]  그림 - 3에서 보면 checkbox와 radio가 서로 연관 되어있음을 표현 하기 위하여 bind:group이란 키워드를 써야 하지만 한번 제거...

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다.  오늘은 이벤트에 대해서 튜토리얼을 진행했다.   https://kr.vuejs.org/v2/guide/events.html   https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events  위의 내용만 같이 비교해봐도 될 정도이니 양이 그렇게 많지는 않다.  오늘은 svelte가 이벤트를 핸들링 하는 방식중에 눈에 띄는점이 두가지가 보였다. 1. 자연스러운 이벤트 버블  자식컴포넌트에서의 이벤트를 부모컴포넌트에게 전달하는 경우는 종종 있다.  => 자식 이벤트를 본인을 걸쳐서 부모에게 이벤트를 전달하는 경우 위의 경우에서 자신이 해당 이벤트를 소비 할거라면 이벤트 리스너를 걸고, 부모에게만 전달 할 것이라면 위처럼만 작성하면 된다. 뭐 물론 둘다 아니라면 작성자체를 안하면 되지요.  자 그러면 뷰에서는 어떻게 해야 할까요? 뷰에서는 해당 이벤트를 $emit 함수를 이용 하여 전달은 해줘야 한다.  2. 자 이제 아래코드를 보자.   아... 이건 좀 실망 스러운 형태이다. 대부분의 컴포넌트들에서 이벤트를 상위로보내는 행위는 자주 일어난다. 뭐 물론 내가 뷰에 익숙한 상태여서 그럴지도... 이벤트 하나를 보내기 위해서 위처럼 svelte 라이브러리에서 이벤트 발생시키기 위해서 createEventDispatcher가져와서 createEventDispatcher를 실행해서 이벤트 발생기를 생성하고, 해당 그 발생기에 이벤트를 상세하게 입력하는 것은 엄... 한 가지일을 위해서 세 가지 일을 하는것은 꽤나 불편하겠지....  위의 코드들을 vue스타일로 작성한 코드는 아래에 ...

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다.  컴포넌트 props ( https://kr.vuejs.org/v2/guide/components-props.html )  => svelte에서 지원하는 Spread props는 vue2.x버전에서는 지원 하지 않는다. 3버전은 아직 학습하지 않았기에 버전정보를 적어둔다.  조건부 렌더링 ( https://kr.vuejs.org/v2/guide/conditional.html )  리스트 렌더링 ( https://kr.vuejs.org/v2/guide/list.html )  Await blocks ( 와 이건 진짜 골때린다 이거 너무 좋은거 아니야? vue에서는 지원하는거 본 적 없다. )  해당 튜토리얼정도를 해보면서 느낀점은 세가지 정도 차이점을 느낄수 있었다.   1. Spread props는 있으면 편할지도 라는 정도지만 어차피 오브젝트로 감싸서 한번에 보낼수 있기에 딱히 있으면 좋고 없어도 괜찮지 이런생각이라 크게 언급하지는 않겠다.  2. 조건부 렌더링, 리스트 렌더링이 vue에서는 디렉티브로써 지원을 한다. 즉 태그안에 작성되어야 하는 내용이다. 하지만 props와 html의 기본적인 속성들 등등으로 인해 v-if와 v-for를 찾는 것은 꽤나 귀찮은 행위가 될 수 있다.  게다가 또하나의 문제점은 v-if와 v-for를 동시에 사용 하였을 때, 누구 먼저 해석될 것인가에 대해서이다. 뭐 물론 vue공식 가이드에 안내 되어있지만, vue의 2버전과 3버전이 다르다. 하지만 svelte의 경우에는 vue에서 template을 이용하는 것처럼 렌더링 요소에 관여되지 않을 요소로써 제공을 하고, 동시에 같이 쓰는 참담한 상황을 미연에 방지한다. 이러한 점은 프레임워크를 처음 이용해보...

위의 코드는 svelte 공식 사이트에서 제공 하는 코드를 맛보기 정도로 합쳐둔 코드이다. 아래에는 참조한 링크들을 적어두었고, vue에서 어떤것과 매치 되는지 적당하게 적어 두었다.  템플릿 문법 1. 문자열 ( https://svelte.dev/examples#hello-world ) 2. 속성 ( https://svelte.dev/examples#dynamic-attributes ) 3. html ( https://svelte.dev/examples#html-tags )  컴포넌트 스타일 ( https://svelte.dev/examples#styling )  컴포넌트 작성 ( https://svelte.dev/examples#nested-components )  이벤트 핸들링 ( https://svelte.dev/examples#reactive-assignments )  계산된 속성 ( https://svelte.dev/examples#reactive-declarations )  watch ( https://svelte.dev/examples#reactive-statements )  튜토리얼정도를 해보면서 느낀점은 vue에서는 해당 기능을 사용하기 위해서 data, watch, methods, computed 등등 코드에는 불필요한 선언(?)들이 필요 없어서 코드들이 간결해짐이 있다.  위처럼 구역대로 나누는 것에 대해서는 호불호가 갈리는 생각이 있을 수 있지만, 내가 생각하는 단점은 관련있는 변수와 함수를 같이 보기 어려움이 있다는 것이다.  코드는 웬만해서는 순서대로 보기 마련이고 중요한 것을 위에 작성이 되고, 복잡하거나, 꼭 보지 않아도 되는 코드들은 하단에 놓고 싶기 마련이다.  뭐 물론 svelte처럼 구역이 없이 작성하는 것은 또 다른 문제가, 함수보다 변수가 덜 눈에 뜨이기 때문에 함수를 읽는 도중 어떤 변수하나를 놓치게 되면, 코드 전체를 파악 하는데...

 같은 값인가에 대한 판단을 해주는 ==에 대해서는 예전에도 다루었던 적이 있다. https://sejiwork.blogspot.com/2021/03/blog-post_21.html    뭐 한 번 보면 == 이것이 왜 쓰면 안되는 지에 대해서 대충 느끼실 거지만 위의 것을 클릭하기 귀찮으신 분들을 위하여 짧은 예제를 작성하겠다.  짧은 코드지만, ==가 얼마나 불편한 녀석인지 감은 오실 것으로 보인다.  그렇다면 ===은 완벽 할까? 그렇게 생각한다면 아래 코드를 봐주시면 된다.  뭐 물론 NaN은 "숫자가 아닙니다."라는 뜻이긴 하지만 결국 전역에 붙어있는 변수이다.  이게 더욱더 불편한 것은 아래의 코드를 보자  null은 비교값이 진실이라는 것이다. null은 특정값을 가리키는 없다는 것인데, NaN처럼 거짓이 나오던 NaN이 참값이 나오던 일관성을 갖는 것이 더 맞다고 생각한다.  자 그러면 아래 코드를 보자. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/is Object.is는 두 값이 같은지에 대한 판단이다. null과 NaN이 원시타입이 아닌 것은 다들 알 것이다. 진짜 값이 같은것을 판단해주는 지는 의문이다. ==, ===, Object.is 모든상황을 고려 할 수 있는가?? 나는 불가능하다. 개발하는 동안 ==보다 ===가 부작용이 덜 한 것은 알겠지만... 실버불렛이 없는 이상 무조건 쓰지 말아야 하는가에 대한 언급에 대해서는 동의 할 수 없는 상황이다.

 yield* 표현식은 다른 generator 또는 이터러블(iterable) 객체에 yield를 위임할 때 사용됩니다. 즉 내가 할 일을 다른녀석에게 양도할 수 있다! 아래의 코드를 보자 function * func() { yield [ 42 , 43 , 45 ] yield '424345' yield childFunc() } function * childFunc() { yield 42 yield 43 yield 45 } const iterator = func() for ( val of iterator ) { console.log( 'val' , val ) } 별거업는 코드이긴 하나, 작성 한 사람의 의도를 벗어난 코드 일 수 있다. 결과를 한번 보자 뭐 물론 이것이 의도 일 수는 있지만, 웬만해서는 안 그럴 것이다 원햇던 것은 func 함수 안에서의 iterator 각각각을 순회 하는 것을 원 할 수 있을 것이다. 자 그럴때 쓸 수 있는 키워드! function * func () { yield * [ 42 , 43 , 45 ] yield * '424345' yield * childFunc () } function * childFunc () { yield 42 yield 43 yield 45 } const iterator = func () for ( val of iterator ) { console . log ( 'val' , val ) } yeild*을 이용해보자. 간단하게도 순회의 단위를 바꿀 수 있다.

 1. Object.preventExtensions Object의 확장을 막는다. const arr = [ 1 , 2 , 3 ] Object . preventExtensions ( arr ) arr [ 0 ] = 5 arr . pop () try { arr . push ( 3 ) } catch (err){ console . error (err) } console . log ( arr ) 실행결과를 보자 pop은 정상적으로 작동하나, push에 대해서만 안되는 것을 볼 수 있다. 2. Object.seal Object의 확장, 축소를 막는다. const arr = [ 1 , 2 , 3 ] Object . seal ( arr ) arr [ 0 ] = 5 try { arr . pop () } catch (err) { console . error (err) } try { arr . push ( 4 ) } catch (err){ console . error (err) } console . log ( arr ) 실행결과를 보자 pop과 push 둘다 안되는 것을 볼 수 있다. 3. Object.freeze Object의 확장, 축소, 변경을 막는다. const arr = [ 1 , 2 , 3 ] Object . freeze ( arr ) arr [ 0 ] = 5 try { arr . pop () } catch (err) { console . error (err) } try { arr . push ( 4 ) } catch (err){ console . error (err) } console . log ( arr ) 실행결과를 보자. push, pop도 막혔으며, 속성의 변경까지 안되었음을 확인 할 수 있다.

css에서 변수를 이용 하고 싶었던 때가 있었을 것이다. 위의 코드는 css에서 변수를 정의하고, 해당 변수를 사용 해보는 간단한 예제이다. 간단하게 내용을 뜯어보면 :root { --text-color: red; } // --text-color 변수에 red라는 값을 할당. .title { --text-color: green; } // 클래스가 title인 경우 --text-color 변수에 green라는 값을 할당. * { color: var(--text-color); } // 모든 태크에서 색상을 변수에서 색상을 가져오게 변경. Title 안녕하세요  그리하여 위처럼 title클래스를 가지고 있는 녀석은 녹색으로 일반 태그는 빨간색으로 보이게 된다. 조금더 꼬아보자. 위처럼 transform 처럼 여러속성을 정의할 수 있는 css속성에서는 변수 사용에 있어서 더더욱 절실하게 된다. css를 뜯어보자. .btn { transform: scale(var(--big, 1)) skew(var(--skew, 0deg)) } // scale을 --big변수를 참조하되, 정의 되어있지 않으면 1을 이용하게하고, skew를 --skew 변수를 참조 하되, 정의 되있지 않아면 0deg를 쓰게 하였다. .big { --big: 1.5; } // --big 변수에 1.5라는 값을 할당. .skew { --skew: 30deg; } // --skew 변수에 30deg라는 값을 할당. 위와 같이 정의 하여 4가지 경우를 각각 원하는 방식으로 정의를 할 수 있었는데, 만약에 변수를 사용 하지 않았다면,  .big { transform: scale(1.5) } .skew { transform: skew(30deg) } .big.skew { transform: scale(1.5) skew(30deg) } 위와 같이 조합 되는 css가지수에 따라 전부 정의해야 할 수도 있다. 종류가 많아지면 많아질수록 지옥이 될지도...

 1. Javascript Prototype 자 아래의 코드를 보고 이상한 점을 찾아보자. function Human ( name ) { this . name = name this . sayHello = function () { console . log ( ` 안녕하세요 . ${ this . name } 입니다 .` ) } } const sejiwork = new Human ( 'sejiwork' ) const sejinjja = new Human ( 'sejinjja' ) sejiwork . sayHello () //output: 안녕하세요 . sejiwork 입니다 . sejinjja . sayHello () //output: 안녕하세요 . sejinjja 입니다 . console . log ( sejiwork . sayHello === sejinjja . sayHello ) // output: false Human으로 만들어지 sejiwork, sejinjja객체에는 같은 동작을 하는 sayHello 함수가 각각 자신의 객체에서 정의가 되었다. 결과적으로 똑같은 일을 하는 함수임에도 불구하고, 불필요한 일을 하게 된 것이다. 위의 코드를 prototype을 이용하여 수정해보자. function Human ( name ) { this . name = name } Human . prototype . sayHello = function () { console . log ( ` 안녕하세요 . ${ this . name } 입니다 .` ) } const sejiwork = new Human ( 'sejiwork' ) const sejinjja = new Human ( 'sejinjja' ) sejiwork . sayHello () //output: 안녕하세요 . sejiwork 입니다 . sejinjja . sayHello () //output: 안녕하세요 . sejinjja 입니다...

 머나 먼 옛날, 군대를 다니던 시절 소프트웨어 유지보수를 하고있었던 시절이였다.  평화롭던 나날들을 보내고있었는데, 출근을 하였더니, 모든 계정에 대해서 블락이 되었던 때가 있었다. 뭘까? 뭐길래 전 유저들의 로그인 5회 실패시에 뜨는 계정블록이 되었을까?  일단 바로 수습에 들어갔다. 운영 데이터에서 로그인 실패수를 초기화 해주는 쿼리를 돌렸다. 이제 수습은 끝났고, 이제 원인을 찾아서 해당 문제를 해결해야 한다. 로그인 실패 카운트가 올라간 시간을 찾아보니, 같은 시간이였고, 문제가 컸음을 느꼇다. 한번의 시도로 전 유저들의 실패를 올릴수 있는 방법, 실패한 유저의 아이디 부분을 무시하고, 실패 카운트를 올리면 된다.  로그인 쿼리와 실패시 실패 카운트를 올리는 쿼리를 확인해보았다.  아뿔싸 로그인 쿼리는  PreparedStatement인데 반해, 실패 카운트는 Statement이였다. 전임자가 싸둔똥을 찾은 느낌은 매우 더러웠다. 시나리오는 이러했다. 누군가가 공격을 했고, 유저 아이디로 ' or 1=1 # 를 이용하여 로그인 시도를 한 것이다.  다른 분들은 위와 같은 문제를 후임자에게 겪게 하지 않았으면 하고자, 이 포스트를 적는다. 이번 포스트는 실험이 위주이므로 적당히 훑어 보시면 된다.  아래의 코드를 준비하자. package kr . co . sejiwork ; import java.sql.* ; public class Main { public static void main ( String [] args ) throws Exception { String url = "jdbc:mysql://localhost/test-user?serverTimezone=UTC" ; String id = "tester" ; String pw = "0000" ; Connection conn = DriverManager . getConn...

 어렸을 때, http를 처음 배울때, GET과 POST method를 배웠다.   해당 내용을 배울 때, GET은 URL에 파라미터를 보내게 되고, POST 소포처럼 데이터를 Body에 실어서 보내는 것으로 배웠고, 해당 내용의 차이로 GET방식은 많은양의 데이터를 보내지도 못하고, 주소창에 노출 되므로 보안상의 문제가 된다. 라는 식으로 배웠던 기억이 있다.  그때 당시에 그러면 POST만 있으면 되는 거 아닌가? 라는 생각을 하기는 했다.  위의 내용은 사용법의 차이일 뿐, 조금 다시 생각해볼 필요가 있다. GET메소드는 데이터를 조회(Read)하는 경우, POST의 경우 데이터를 변경하는 등의 Create(생성), Update(변경), Delete(삭제)하는 경우에 사용해야 한다는 내용으로 알고 있는 경우가 있다.  여러분들도 멱등성이라는 단어를 들어보았을 수도 있고, 안 들어본 개발자 또한 있을 것이다. 멱등성 은 수학에서 사용 하는 단어로 처음 들었을 때 난해한 단어긴 하다.  멱등성이란 간단히 예기하면, 연산을 여러 번 적용하더라도 결과가 달라지지 않는 성질을 의미한다. 예를들면 1*1 = 1이다 모든 수에 1을 곱하는 행위는 아무리 많이해도, 결과값이 달라지지 않는다. 0을 더하는 행위도 마찬가지이다.  즉 따라서, GET메서드는 여러번 요청한다고 하더라도 변경을 하지 않게 구현을 해야 하며(멱등성을 보장해야 한다.), POST의 경우에는 데이터를 변경할 수 있다.(비멱등성 함수이다.)  자 여기까지가 GET과 POST의 차이이다. 안전한 메서드 라는 개념이 없기 전까지는 말이다.  안전한 메서드 VS 멱등성 자 아래의 함수가 있다고 해보자.  function get(id) // Get method  function delete(id) // Delete method  function insert(data) // Post me...

이번에 소개드릴 내용은 이상한 자바스크립트이다. 1.  배열은 배열이 아닌것과 같다. 이게 무슨 소리일까? console . log ([] == ![]) console . log (+[] == +![]) 위의 항등 연산자는 결과가 어떻게 될까? 특이하게도 위의 결과 둘다 true가 찍힌다. 항등연산자에서 빈 배열은 0으로 값이 있는 배열은 1로 형변환이 가능해진다. [] == ![] 위의 []는 0으로 형변환이 되었고, ![]는 배열을 부정을 하여 false가 되었을 거다. 진위값 또한 false는 0으로 true는 1로 형변환이 가능해진다. 그렇기에 위처럼 둘다 true가 나오는 참사(?)가 발생했다. 2.  배열도 배열이 아닌것도 진실이 아니다. console . log ( true == []) console . log ( true == ![]) 이번 문제는 1번의 해석을 잘 풀어보면 풀수 있을 것이다. 맞다. 위의 결과는 둘다 false가 나온다. 분명 둘중 하나의 경우에는 true를 뜻하고 있어야 함에도 불구하고, 서로 다른이유로 [], ![]을 항등 연상자에서 거짓으로 판별 당했다. 3. 0보다 작거나 같지않지만, 0이하인것 console . log ( null == 0 || null < 0 ) console . log ( null <= 0 )  대부분의 분들이 위의 결과를 둘다 false라고 알고 있을 것이다.  여태 배워온 몇몇 언어들이 null, N/A에 대해서 비교를 제한하고 있는 경우가 많다. 비교를 하면 무조건 거짓이 나온다는 등 말이다. 아래 링크를 보면 자세하게 알 수 있겠지만, 관계연산자 인 경우 숫자형으로 변환시키는 것이 더욱 강제적으로 수행된다고 보면 된다. https://262.ecma-international.org/5.1/#sec-11.9.3 https://262.ecma-international.org/5.1/#sec-11.8.5 즉 아래의 주석과 같이 해석 되었...

 1. 배열에서 중복 데이터 제거. const data = [ 'sejiwork' , 'sejinjja' , 'sejinjja' , ' 홍길동 ' , ' 홍길동 ' , ' 홍길동 ' , ' 홍길동 ' ] const uniqueData = Array . from ( new Set ( data )) console . log ( 'uniqueData' , uniqueData ) const uniqueAlpha = Array . from ( new Set ( 'sadfsdafas' )) console . log ( 'uniqueAlpha' , uniqueAlpha )  위 처럼 Set은 생성자의 인자로 iterable 객체를 받을 수 있고, 해당 데이터에서 중복이 없어지는 특징 을 같고 있고,   Array.from은 length속성과 인덱싱된 요소를 같는 유사배열객체와, map과 set처럼 순회가능한 객체를 이용하여 배열을 만들 수 있기 때문에 간단하게 두가지를 이어서 중복을 제거 할 수 있다. 2. 배열 자르기 (앞에서) const data = [ 'sejiwork' , 'sejinjja' , 'sejinjja' , ' 홍길동 ' , ' 홍길동 ' , ' 홍길동 ' , ' 홍길동 ' ] data . length = 3 console . log ( data ) 배열의 길이를 변경만 해주었을 뿐인데, 앞에서 3개만 남았다. const stringData = 'abcde' stringData . length = 2 console . log ( stringData ) 아쉽게도 문자열은 지원하지 않는다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Gl...