일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- adb connect
- camera access
- vercel git lfs
- custom printing
- pnpm
- adb pair
- 이미지 데이터 타입
- Can't resolve
- silent printing
- Recoil
- Git
- device in use
- github pdf
- rolldown
- electron-packager
- Each child in a list should have a unique "key" prop.
- 티스토리 성능
- animation
- nextjs
- react-native-dotenv
- react-native
- ELECTRON
- augmentedDevice
- github 100mb
- ffi-napi
- github lfs
- Failed to compiled
- html
- camera permission
- dvh
- Today
- Total
목록Javascript (54)
Bleeding edge
FE 면접 질문을 검색하다보면, 종종 이벤트 버블링, 이벤트 캡쳐링에 대한 질문이 나온다. 마침 공부하던 영상에서 나왔고, 실제로 혼자 토이프로젝트를 만들다보면 만나던 이슈가 바로 이거였다니..!!하고 봐서 너무 신기하고 반가웠던 개념이었다. 버블링과 캡쳐링에 앞서서, 지금 버블링과, 캡쳐링에 이야기하는 셀렉터는 꼭 이 셀렉터가 아니라, depth위치를 기준으로 하위 셀렉터인지 상위 셀렉터인지를 구분하기위해 이야기를 하는 것이다. 예시 li를 누르면 ul에! 라고 할 때는, li가 하위 ul를 상위와 같은 관계에 있다면 div 안의 div에서도 같게 적용된다. Event bubbling : li를 눌렀는데 ul, header , body 즉, 상위 요의 셀렉터에 이벤트(클릭이나 마우스 다운과같은)가 전달..
Promise란? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 자바스크립트는 일반적으로 동기 처리를 하는 싱글 스레드 언어인데, 위에서 아래로 글을 읽듯이 하나 둘 처리하는 방식이다. 비동기 처리는 동시에 멀티로 처리하는 방식을 말한다. Promise는 왜 필요할까요? 서버와의 데이터를 요청하는데, 이 때, 데이터를 받아오기 전에 데이터를 처리하면 빈화면이 나오는데, 이를 보안하기 위한 방법중 하나가 프로미스입니다 Promise의 상태 3가지 Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태 Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태 Pending 상태는 ..
자바스크립트에서의 this는 무엇을 의미하는 걸까? 1. 전역 this node.js에서의 this, 브라우저에서의 this는 할 수 있는 것이 다르다. 예를들면 node.js에서의 this는 alert가 안되고, 브라우저에서의 this는 alert가 가능하다. 이렇게 가장 밖에서 쓰는 this를 전역 this라고 한다. (this.process.env는 node에는 있지만, 브라우저에서는 없다) 2. 함수 this function(){ console.log(this) } 함수에서의 this는 window, 전역을 이야기한다 3. 메소드 this const obj = { name : 'obj', method : function(){ return this.name } } 같은 depth의 this값을 불러..
1. 하이브리드 앱, 크로스플랫폼 앱을 만들 수 있다. 하이브리드 앱을 만들고 싶다면 IONIC 하이브리드 예시 - 아마존, 위챗 크로스플랫폼을 만들고 싶다면 리액트 네이티브 리액트 네이티브 예시 - Discord, Tencent, Pinterest, 페이스북, 인스타그램 2. 맥, 윈도우 리눅스를 이용한 데스크톱 소프트웨어를 만들 수 있다 JS와 electron을 이용해서 만들 수 있다 예시 VSC, slack skype github, atom 3. 비디오게임을 만들 수 있다 Phaser Js Impact JS, 또한 Node JS, socket.io를 이용하여 인터렉티브, 멀티플레이어 2D게임도 만들 수 있다 4. 3D VR AR을 만들 수 있다 3JS를 이용하여 만들 수 있다. 카메라 마우스를 활용..
Object.keys() 오브젝트의 키들 Object.values() 오브젝트 벨류들 Object.entries() 오브젝트 키와 벨류를 둘다 호출 할 때 사용한다. 키와 벨류는 알고있었는데, 엔트리같은 경우 유용할꺼같아서 메모해뒀다 !!
Value : String, Number, Object, Boolean 과 같이 한 개의 Value를 가지고 있음.(Object도 그 위치만의 한개의 값이다) Expression : 1개이상의 Value가 모여 Value를 만든다.(4칙 연산도 이중하나) Statement : If, For, While, Switch와 같이, Expression이나 Value를 통해서 행동을 제어한다. Identifier : 자바스크립트에서 이름을 붙일 때 사용하는 단어(일명 식별자) 식별자는 변수명 함수명 속성명 메소드명 식별자 규칙 키워드를 사용하면 안 된다. 숫자로 시작하면 안 된다. 특수 문자는 _와 $만 허용된다. 공백 문자를 포함할 수 없다. 식별자 관례 1. 생성자 함수의 이름은 항상 대문자로 시작한다. 예시..
아우.. eslint와 prettier을 어떻게 빠르게 추가할까?에 대해서 고민을 한참하고 검색을 해봤다. Step 1 우선 프로젝트의 폴더에 들어가서 터미널을 킨다(컨트롤+~) npm i -D eslint prettier eslint-config-prettier eslint-plugin-prettier 엔터. 위에 내용은 -D같은경우, eslint, prettier 등등 4개의 각 node package module을 설치를 하고 package.json에 데브 디펜던시리스트를 넣어주겠다는 단어이다. 그리고 그 뒤에 4개의 모듈들은 우리가쓸 eslint와, prettier와, 서로 충돌하지 않게하는 모듈(config prettier)와, eslint를 실행할 때, prettier을 실행하는 모듈(esli..
정규표현식(Regular Expression)은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용한다. 가입하는 form에서 많이 볼 수 있는데, 이메일을 받는다던가... 가입주소를 받는다거나... 비밀번호 조건을 체크할 때 사용한다. 사실, 이 정규식에 대해서 찾아보게 된 계기는 코딩테스트 문제를 풀다가 정규식을 7번정도 써야하는 문제가 있어서 공부하게 된건데.. 다른 짝지어 제거하기와 같은 문제에도 사용할 수 있을까하고 이리저리 시도를 하면서 시간을 날려먹었다. 정규식 사용법! 시작은 / 끝은, flag!로 flag는 g(전체 문자 일치) i(대소문자 무시하고 일치) m(여러줄일치)로 사용한다 사용하다보면, 보통 g를 많이 사용하니 g를 사용하면서, 정규식을 알아보자! /{중간내용}/g 이 중..
map( ) :string let arr = ['월', '화', '수', '목', '금' ] let map = arr.map( item =>item + '요일' ); map( ) : number let arr = [1, 2, 3, 4, 5] let map = arr.map(item => item* 2); map( ) : object let arr = [ {color : 'red' , text : 'a' }, {color : 'green' , text : 'a' }, {color : 'blue' , text : 'a' } ] let arrColor = arr.map((item) => item.color); filter( ) : Array arr.filter((item) => item.length >6); ..