KBW's cosmos

스마트폰으로 웹페이지를 둘러볼 때 웹페이지가 App 스럽지 못하다는 생각을 해본적이 있을 것이다. 이는 테두리와 박스 때문이다. 또한 링크나 이미지를 길게 누르면 주소를 복사하거나 이미지를 저장할 수 있는 옵션이 나타난다. 이런 요소들은 웹페이지일 때는 상관없지만 App 처럼 동작하는 것을 방해한다. WebView의 기본 스타일과 동작을 제어할 수 있어야 App과 비슷한 느낌으로 웹페이지를 만들 수 있다. 이는 Webkit CSS의 속성을 통해 제어할 수 있다. html { -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); } -webkit-touch-callout 속성 : 화..

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React 🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub. github.com Zustand의 Persist라는 middleware를 사용하면 localStorage와 연동하여 자동으로 전역 상태 관리 내용을 localStorage에 저장시키고 관리할 수 있다. (위 링크 참고) localStorage는 브라우저를 닫아도 그대로 남아있기에 창을 닫아도 상태 값이 남아있어야 하는 경우 유용하게 사용할 수 있다. 필..

npx eslint --init 터미널을 키고 위 명령어를 입력하여 .eslintrc.js 파일 만들기 위와 같이 질문에 체크하면 된다. 중간에 Which style guide do you want to follow?에는 에어비엔비 스타일로 해도되고 취향것 하면 된다. 그럼 추가로 dependencies가 필요하다고 하는데 설치하면된다. 필자는 npm으로 설치했다. .eslintrc.js module.exports = { env: { browser: true, es2021: true }, extends: [ 'plugin:react/recommended', 'standard' ], parser: '@typescript-eslint/parser', parserOptions: { ecmaFeatures: {..

개발하면서 자주 사용하였지만 개념적으로 잡힌 느낌은 아니여서 포스팅하며 정리하고자 한다. 콜백함수 정의 : 함수에 파라미터로 들어가는 함수 콜백함수 용도 : 순차적으로 코드를 실행하고 싶을 때 사용 먼저 addEventListener를 보겠다. document.querySelector('.button').addEventListener('click', function(){ }) 해당 함수를 사용할 때 콜백함수를 집어넣게 되어있다. addEventListener도 함수인데 파라미터 자리에 또 하나의 함수를 집어넣고 있다. 이것을 콜백함수라고 한다. setTimeout에서도 마찬가지다. setTimeout(function(){ }, 1000) 안에 콜백함수를 집어넣게 한다. 그렇다면 함수안에 함수를 넣으려면 ..

예정된 발표일인 금요일 오전 10시 30분에 합격 발표가 났다. (조기 발표는 없었다..) 이전 기수에는 조기 발표도 있었고 오전 10시 발표, 2시 발표, 4시 발표 다양했다고 한다. 코딩 테스트 후기는 이전 포스팅에서 다뤘기에 이번 포스팅에서는 면접 위주로 다루겠다. 코딩 테스트를 비롯한 다른 내용이 궁금하다면 아래 글들을 참고하길 바란다. 소프트웨어 마에스트로란? ▼ 소프트웨어 마에스트로란? (소마 지원 규모, 목적) 최우수 SW 인재를 발굴해 체계적, 파격적 지원을 통해 SW 산업에 발전을 기여하겠다는 목적으로 기획된 정부 지원 사업이다. IT 관련 프로그램 중 가장 유명하고 인기가 많은 프로그램 중 하나이 kbwplace.tistory.com 소프트웨어 마에스트로 13기 1차, 2차 코딩테스트 ..

/* 이 글은 카일 심슨의 You Don't Know JS를 읽으며 배운 것들을 개인적으로 정리하고 기록하기 위한 글입니다. */ 자바스크립트의 강제변환이 유용한 기능인지, 언어 설계상 결함인지는 처음부터 큰 논란거리였다. 여기서는 강제변환의 좋고 나쁨을 충분히 이해하고 자신의 프로그램에 적절한지 스스로 현명하게 판단할 수 있는 역량을 갖추어 보겠다. 어떤 값을 다른 타입의 값으로 바꾸는 과정이 명시적이면 '타입 캐스팅(Type Casting)', 값이 사용되는 규칙에 따라 암시적이면 '강제변환(Coercion)'이라고 한다. 자바스크립트에서는 대부분 모든 유형의 타입변환을 강제변환으로 뭉뚱그려 일컫는 경향이 있어 '암시적 강제변환(Explicit Coercion)'과 '명시적 강제변환(Implicit ..

/* 이 글은 카일 심슨의 You Don't Know JS를 읽으며 배운 것들을 개인적으로 정리하고 기록하기 위한 글입니다. */ 다음은 가장 많이 쓰는 네이티브들이다. String() Number() Boolean() Array() Object() Function() RegExp() Date() Error() Symbol() - ES6에서 추가됨 네이티브는 사실 내장 함수다. 네이티브는 생성자처럼 사용할 수 있지만 실제로 생성되는 결과물은 예상과 다르게 자신이 감싼 원시 값의 타입이 아닌 object의 하위 타입에 가깝다. var a = new String("abc"); typeof a;// "object" 예를 들어 new String("abc")은 "abc"를 감싸는 문자열 래퍼를 생성하며 원시 값..

/* 이 글은 카일 심슨의 You Don't Know JS를 읽으며 배운 것들을 개인적으로 정리하고 기록하기 위한 글입니다. */ 들어가기 전에.. 포인터(Pointer) : Null 허용, 참조 대상에 대해 주소값을 할당 레퍼런스(Reference) : Null 허용 X, 참조 대상을 그대로 할당 즉, 포인터와 레퍼런스는 어떠한 대상을 가리킨다는 점에서는 같지만 포인터는 주소값, 레퍼런스는 값 그 자체를 할당한다는 점에서 다르다. (레퍼런스는 마치 일반변수처럼 접근이 가능하다.) 자바스크립트에서의 레퍼런스는 다른 언어의 레퍼런스/포인터와는 전혀 다른 개념으로, 또 다른 변수/레퍼런스가 아닌 오직 자신의 값만을 가리킨다. 다른 언어에서 값은 사용하는 구문에 따라 값 복사 또는 레퍼런스 복사의 형태로 할당..

/* 이 글은 카일 심슨의 You Don't Know JS를 읽으며 배운 것들을 개인적으로 정리하고 기록하기 위한 글입니다. */ 자바스크립트의 숫자 타입은 number 뿐이다. 정수, 부동 소숫점 숫자를 아우른다. 즉 자바스크립트에서 42.0은 '정수' 42와 같다. 숫자는 10진수가 디폴트이다. 아주 크거나 작은 숫자는 지수형(Exponent Form)으로 표시한다. (toExponential() 메서드로 표현할 수 있다.) var a = 5E10; a;// 50000000000 a.toExponential();// "5e+10" 문자열로 반환 (참고 : e는 10^n을 의미한다. E10은 10^10이다.) 숫자 값은 Number 객체 래퍼로 박싱할 수 있기 때문에 Number.prototype 메서..

/* 이 글은 카일 심슨의 You Don't Know JS를 읽으며 배운 것들을 개인적으로 정리하고 기록하기 위한 글입니다. */ 자바스크립트의 배열은 어떤 타입의 값이라도 담을 수 있는 그릇이다. 배열 크기는 미리 정하지 않고 선언할 수 있다. 배열을 사용할 때는 빈 슬롯이 있는 '구멍 난(sparse)' 배열을 조심해야 한다. var a = []; a[0] = 1; // 'a[1]' 슬롯을 건너뛰었다! a[2] = [3]; a[1];// undefined a.length;// 3 위와 같은 경우 실행은 되지만 문제가 생길 수 있다. a[1] 슬롯 값은 undefined가 될 것 같지만 명시적으로 a[1] = undefined 한 것과 똑같지는 않다. 또 앞전에서 배열은 객체의 하위타입이라고 했다. 따..