Java Script
-
string 의 길이 제한, 근데 언어별로 길이가 다르다면..?Java Script 2022. 10. 12. 00:09
개발하는 서비스에서 이런 경우가 있었다. 검색어를 라벨모양의 컴포넌트에 넣어서 보여줘야하는데, 한글 기준 max length는 20자로, 20자 초과시 ellipsis 를 넣어주어야한다. 그런데 같은 기준으로 하자니 영어가 기준일 때는 영어 한 글자 한 글자가 차지하는 부피(& 바이트)가 작기 때문에 검색어가 영어일 때는 굳이 ellipsis를 지정해줄 필요가 없었다. 컴포넌트의 크기 기준이 모두 %로 되어있어 text-overflow:ellipsis; 를 사용하는 것도 애매.. (px로 넓이를 지정해서 사용해야한다.) 블록컴포넌트에서 사용해야하는건 알겠지만, 이상하게 꽂혀서 다른 방법을 찾아봤다. 1. textEncoder를 사용해서 해당 string을 encode 해준 다음, 길이를 측정하기. str..
-
[string] slice() vs substring()Java Script 2022. 5. 23. 21:58
알고리즘 클럽에서 발표했던 자료를 다시 번역하여 정리했습니다. substr()은 deprecated 되었기에 slice() 와 substring() 만 다시 비교 정리해보았다. slice() 해당되는 부분을 추출하여 새로운 string을 반환한다. let str = "Apple, Banana, Kiwi"; let part = str.slice(7, 13); // Banana 만일 음수가 매개변수로 주어지면 뒤에서부터 자리를 세어나간다. let part = str.slice(-12, -6); // Banana 하나의 매개변수가 주어지면 그 자리부터 나머지 string 이 반환된다. let part = str.slice(15); // Kiwi let part = str.slice(-12); // Kiwi s..
-
Delete와 Undefined, 그리고 garbage collectorJava Script 2022. 2. 12. 21:34
멘티 님이 궁금해하던 질문에 대답하려고 하다보니 엄청 깊게 들어와 버려서 정리한다! 의도적으로 값이 비어있음을 나타낼 때 사용하는 null은 'null' 이라는 글자의 사이즈만큼만 메모리를 사용한다. 하지만 선언한 후 값을 할당하지 않았음을 뜻하는 undefined는 실제 메모리를 차지한다. (여기부터 흥미롭다) delete 는 피연산자로 지정된 객체의 프로퍼티를 삭제해준다. 그러니까 객체를 통째로 삭제할 수는 없고 해당 프로퍼티만 삭제해주는 것이다. delete가 삭제해준 프로퍼티는 undefined를 값으로 가지며, var 로 정의한 (명시적으로 선언한) 프로퍼티들은 삭제할 수 없다. var hello = { name: 'sj', age: '20', } delete hello.age; // age라는..
-
커링_ CurryingJava Script 2021. 5. 6. 14:52
수업 중에 스치듯 지나갔던 커링에 대해서 좀 더 자세히 기록해볼 필요를 느꼈다. 커링은 여러개의 파라미터를 받는 함수를 분리해서, 한 개의 파라미터만 받는 여러개의 함수로 쪼개는 방법이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function curry(function) { // function(a)를 반환함 return function(a) { // ~클로저로 생긴 공간~ return function(b) { return function(a,b); }; }; } function add(a,b) { return a + b; } let curriedAdd = curry(add); console.log(curriedAdd(1)(2)); // 3 // curriedAdd(1) ..
-
Toy project - 카드맞추기 게임Java Script 2021. 4. 14. 19:04
모처럼 과제가 없고, 나도 방학이고! 스각코 사람들과 안그래도 토이 프로젝트로 이거 해보자고 했는데, 바로 그 다음 날에 이 프로젝트를 ㅋ님이 추천해주셔서 놀라웠다. 시작 버튼을 누르면 게임을 시작할 수 있다. 하나의 타일을 누를 때마다 숨겨졌던 그림이 보인다. 두 개의 타일의 그림이 같다면 다시 숨겨지지 않는다. 두 개의 타일의 그림이 틀리다면 일정 시간 후 다시 숨겨진다. 점수를 알 수 있다. 재시작 기능이 있다. 이 것 역시 스각코 사람들과 3일만에 만들었는데, 다른 사람들은 더 멋지게 만들었다... 느낀 점 & 개선된 점 Math.floor(Math.random)으로 무작위 숫자를 뽑아낼 수 있게되었다! dataset.value를 사용해 무작위 숫자가 두 개씩 타일에 배정되고, 이에 따라 심어놓은..
-
Toy Project - 계산기Java Script 2021. 4. 14. 18:50
솔직히 과제 3주차까지는 CSS 뭐야... 자바스크립트를 더 잘해봐야지 싶었는데, 다른 사람들이 과제를 한 것을 보니, 자극 받더라. 스각코 사람들과 카드맞추기 게임만들고, 3일만에 후다닥 만들어보았다. 기본 사칙연산되는데... 예외처리가 완벽하지 않아서 사칙연산이 연속적으로 입력될경우 에러난다 ^ㅠ^ 깨달은 점 & 나아진 점 좀 더 가독성이 좋은 코드를 쓰는 것을 고려하기 시작했다. (띄어쓰기나 인덴팅을 더 고려했다.) ev 요소를 함수의 인자로 넣어서 주르륵 돌릴 수 있다. 개선할 점 셀렉터를 남용하는건 아닐까? forEach와 querySelector를 활용해보자. 왜 여전히 코드가 복잡해보이는지 모르겠다. 아마 적절한 메소드를 내가 못사용하는 곳이 분명이 있을거다. string 을 숫자로 변환할 ..
-
This 판별하기Java Script 2021. 3. 26. 16:41
This 는 공부해도 해도 헷갈린다...! ㅋ님의 강의 + 책을 참고해서 공식을 적어보면 좀 덜 헷갈릴까....? This 는 함수가 호출되는 방식에 따라 참조하는 객체가 달라진다. 1. Regular Function call ( function (); ) Strict mode 가 아니면 -> 브라우저에서는 window, 런타임 환경에서는 global. Strict mode 라면 undefined. 2. Dot notation ( something.function(); ) .function 앞의 객체로 찾아가서 참조. 3. Call / Apply / Bind 위 세 가지는 this 에 사용가능한 메소드들이다. Call과 Apply는 둘 다 첫 번째 인자를 this 값으로 바인딩한다. function.ca..
-
CSS property의 순서Java Script 2021. 3. 25. 12:35
과제를 할 때 마다 '기한 내에 어떻게든 기능을 구현한다' 에 촛점을 맞췄고, 그 때마다 내게 익숙한 객체만을 사용해서 CSS에 속성 때려넣기를 반복했는데, 그러다보니 property에도 순서가 있다는 피드백을 받았기에 기록차 블로그글을 작성한다. 사실 CSS properties의 순서는 그렇게 중요하지 않다고 생각하는 사람들이 39%나 되지만 , CSS-tricks.com에서는 CSS properties의 순서에 따라 하나 이상의 value를 전달할 때에 예상치 못한 결과가 나올 수도 있다고 말하고 있다. (이하 예제 출처: css-tricks.com/ordering-css3-properties/) 여기 있는 두 개의 상자는 둘 다 border-radius 와 -webkit-border-radius를 ..