Bleeding edge

https://codevilot.github.io/IFBAEMIN/ Document codevilot.github.io 내가 만일 배민에서 일했다면?! 이라는 사이드 프로젝트이다. readme에 어떤 기술을 넣을지 차차 채워넣을 계획이고, 여기에도 생각나는대로 하나씩 뭘해서 좋았다나 어떤식으로 할거다를 넣을꺼다. 우선 넣을 것은 web Component이다. 사이트는 깃페이지를 쓰기 때문에 정적인 페이지의 한계가 조금 있을꺼같아서 넣고싶은게 많더라도 제한사항이 좀 있지 않을까 생각중이다. IF 시리즈에서 사용하게 될, before after는 자주 사용할꺼같으니 module화시켜서 하나 만들어두면 좋을꺼 같다. 요약 1.web component 넣을것 2.before after module화 시킬것

사이드 프로젝트를 시작해야겠다라고 생각을 한 일주일정도 하다가 어떤걸 할까? 고민하고 어떤 스택을 사용할까(해봐야 할 수 있는게 아직은 많지않지만) 시간은 얼마나 쓸까 생각을 해봤었는데.. 사이드 프로젝트 회고 게시판을 만들었다. Free talk에 쓸까하다가 Free talk에 넣기엔 너무 뭔가 쓸데없는 글과 섞일꺼같구 그리고 좀 더 사이드 프로젝트에만 쓰고싶은 글을 쓰고싶다. 사이드프로젝트는 제로베이스에서 정해준게 아닌이상, 1.내가 여기에서 일을 한다면 어떤걸 더 넣고싶다 2.내가 이건 잘 못하는데를 이 사이드 프로젝트로 공부하고 싶다에 중점적으로 넣어서 할 것 같다. 아마 첫 프로젝트에는 저번에 제로베이스에서 줬었던 web component를 좀 더 많이 써볼 계획이다. 이유는? 저번에 web c..

https://programmers.co.kr/learn/courses/30/lessons/42746 코딩테스트 연습 - 가장 큰 수 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 programmers.co.kr function solution(numbers) { let list = [] for (let i = 0; i b.concat(a) - a.concat(b)) le..

프로젝트를 하다보면 settimeout을 쓰더라도 이벤트가 두번 발생하는 경우가 있었는데 이를 사용하면 해결될꺼같다. 보통 이 둘을 배울 때, 같이 배우는데 둘의 용도와 사용방법이 다르다. 우선 둘의 뜻을 알아보자 debounce : de-는 not을 뜻하며 bounce는 튀어오르다. 즉 못튀어오르게 막는걸 이야기한다. 자바스크립트에서의 디바운스는, 이벤트 발생이 많을 때 가장 마지막 이벤트만을 실행시킨다. 뜻 자체는 목을 조르다이다. 벨브를 조여서, 유체의 흐름을 제한하는 걸이야기한다. 자바스크립트에서의 쓰로틀은 이벤트 발생이 많을 때 특정 밀리세컨드 동안 이벤트를 차단하고 단 한번만 실행시킨다​​. 둘이 같은거 같지만 debounce는 시행횟수, throttle은 시간에 관련된 제어방법이라 보면좋다...

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를 이용하여 만들 수 있다. 카메라 마우스를 활용..

https://yoon-dumbo.tistory.com/entry/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%88%98%EC%8B%9D-%EC%B5%9C%EB%8C%80%ED%99%94-javascript [프로그래머스] 수식 최대화 - javascript 문제 [programmers.co.kr/learn/courses/30/lessons/67257] 문제 설명 IT 벤처 회사를 운영하고 있는 라이언은 매년 사내 해커톤 대회를 개최하여 우승자에게 상금을 지급하고 있습니다. 이번 대회에서는 우승 yoon-dumbo.tistory.com function solution(expression) { var answer = 0 const regex1 =..