기록들 https://github.com/ndgndg91

작년 2020년 11월 초부터 현재 재직 중인 회사 CPO 님과 2명이서 사이드 프로젝트를 하나 시작했다.   서비스 소개 영상이다. 제품의 아이디어 및 디자인 그리고 정체성 및 사용성에 대한 기획은 CPO 님이 그리고 나머지 기술 부문은 내가 맡아서 진행했다. 개발 스킬 향상을 위해서 혼자서 또는 개발자들끼리의 사이드 프로젝트를 진행한 경험은 많았지만, 사용자를 위한 제품을 만들기 위해서 진행한 사이드 프로젝트는 이번 경험이 처음이라고 할 수 있다. Slack 과 Notion 을 이용하여 프로젝트에 필요한 커뮤니케이션을 진행했고, 퇴근 후 각자 주당 평균 10시간 정도 투자해서 100일 안에 완성을 목표로 시작했다. 100일을 목표로 잡은 이유는 100일이 넘어가면 늘어지고 지쳐서 서로가 힘들어지기 때문에 다소 타이트할 수도 있고 넉넉할 수 도 있는 시간으로 적절하게 잡았다. 또한 .new 라는 도메인을 사용했는데, 구글에서 만든 도메인으로 도메인 구입 후 100일 이내에 도메인을 적용한 서비스를 출시해야 되며, 구글에서 만든 정책을 준수하는 서비스를 만들어야한다. 이러한 과정속에서 제품을 만드는 과정에서 개발이외에 부분에서도 많은 것을 느끼고 성장한 부분도 있지만, 나는 엔지니어로서 기술적인 부분에서 고생을 하고 배운 것들에 대해서 정리를 해보려고 한다. 그 첫 번째 주제가 바로 SSO 이다. 간단하게 SSO 의 개념에 대해 먼저 짚어보겠다. SSO 란 Single-Sign-On 의 약자이다. 우리나라말로 풀이하자면, 통합 인증 혹은 단일 인증 단일 계정 로그인 정도로 정리할 수 있다. 예시를 들자면, 우리 실생활에서 많이 사용하는 구글 서비스를 들 수 있다. 구글의 경우 한 번의 로그인을 통해서 Gmail, Youtube, Drive, Docs, Spreadsheet 등 여러 서비스를 사용할 수 있다. 구글의 여러 서비스의 경우, gmail 과 같이 mail.google.com 서브도메인으로 구성된 서비스도 있고, youtube 와 같이 youtu...

최근에 레거시를 유지 보수하면서, JS 및 JQuery 를 만지는 일이 있었다. 일을 하면서 select 태그의 option 태그를 selected 가 아닌, 특정 value 값을 기준으로 option 태그를 선택 후 해당 텍스트값을 가져와야 하는 작업이 필요했었다. 보통 select 태그를 사용하게 되면, selected 인 option 의 value 혹은 text 값을 핸들링 하는데, 해당 케이스는 보통 케이스와 달라서 아주 잠깐 당황했었다. 해결법은 물론 있다. 레거시를 만지면서, JQuery 를 최대한 걷어내고 있는데, JQuery 선택자를 이용하면 매우 간단하게 해결할 수 있다. 예를 들어, 아래와 같이 한 줄 이면 간단하게 해결이 가능하다. 근데, 요즘 JQuery 를 사용하지 않는데 이점이 더 큰것을 알아가고 있어서 JQuery 를 사용하지 않기로 결심했다. 따라서 namedItem 이라는 method 를 사용해보았다. https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/namedItem The  HTMLSelectElement.namedItem()  method returns the  HTMLOptionElement  corresponding to the  HTMLOptionElement  whose  name  or  id  match the specified name, or  null  if no option matches. name 혹은 id 속성을 이용해서 Element 를 선택한다. 아래에서 확인할 수 있듯이, Edge 와 IE 에서는 name 속성이 지원이 안된다고 한다. 따라서 id 속성을 이용하는것이 크로스 브라우징에 매우 유리하다. 그럼 우선 예제를 보자, 아래와 같이 fruits 라는 id 속성을 가진 sele...

우선, SOP가 뭐냐? wiki 백과 왈 ~ In  computing , the  same-origin policy  is an important concept in the web application  security model . Under the policy, a  web browser  permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same  origin .  same-origin policy는 웹어플리케이션 보안 모델에서 중요한 개념이라고 한다. 웹 브라우저는 첫 번째 웹 페이지에 포함 된 스크립트가 두 번째 웹 페이지의 데이터에 접근하는 것을 허용하지만 두 웹페이지 모두 동일한 출처 를 갖는 경우에만 허용된다고 한다. 그렇다면 , 동일한 출처가 뭐냐? 프로토콜/호스트/포트 가 동일한가 라고 한다. 예를들어, http://abc.dfg.com/temp/index.html 과 동일한 출처를 알아보자. http://abc.dfg.com/temp/login.html    =>  동일한 출처. http://abc.dfg.com/temp2/fake.html   =>  동일한 출처. https://abc.dfg.com/temp/real.html    =>  프로토콜 이 다르다. 따라서 동일한 출처가 아니다. http://abc.dfe.com:123/temp/isReal.html   => 포트 가 다르다. 따라서 동일한 출처가 아니다. http://dfe.abc.com/temp/good.html   =>    호스트 가 다르다.  ...

Object에 대해서 공부해 본 것,, 1. 같은 키를 사용하는 경우 나중에 작성된 키값으로 대체된다. 2. Object에 function 작성의 차이 es5, es6 3-1. 프로퍼티 디스크립터 - Object 'book' 프로퍼티에 대해서 아래와 같은 속성을 포함하여 get, set 속성을 설정 할 수 있다. 3-2. get, set 속성 ==> ES5 get, set 속성으로 getter 와  setter를 정희 3-3. ES6에서 getter와 setter 선언 형태 4. Object.is()     ===           :  값과 값 타입을 모두 비교     ==             :  값 타입은 비교하지 않고 값만 비교     Object.is() :  값과 값 타입을 모두 비교    === , Object.is() 차이점은    +0 과 -0을 비교할 경우 ===는 true,  Object.is()는 false를 반환    NaN 과 NaN을 비교할 경우 === false, Object.is()는 true를 반환 5. assign(): 오브젝트 프로퍼티 복사  파라메터들은 enumerable 오브젝트여야 한다. null, undefined의 경우 프로퍼티 값으로만 복사가 가능하다. assign()의 필요성 let dup = sports; 의 경우 얕은 복사가 발생한다. dup과 sports는 같은 object를 바라보는 문제가 발생한다. dup의 프로퍼티 값을 변경할 경우 sports의 프로퍼티 값에도 영향을 끼친다. 이러한 문제를 해결하기 위해서 as...

프로퍼티 이름 조합 문자열 조합 변수 값과 문자열 조합 디스트럭처링과 프로퍼티 이름 조합 Default Value 디폴트 값 적용 순서 Default 파라미터 파라미터 디스트럭처링 for-of Array 와 String NodeList 반복 디스트럭처링 for-of아 for-in의 차이 for-of Object 열거와 거듭 제곱 연산자

간단히 말해서, 변수에 분할 할당이다. four가 undefined라는 점 다차원 분할 할당도 가능하다는 점 ,를 사용해서 인덱스를 건너뛰고 할당, spread 연산자를 사용하여 할당 Object에도 분할 할당이 가능하다. Key에도 Value에도 함수의 파라미터로도 사용이 가능하다.