본문 바로가기

분류 전체보기57

[프로젝트] whack a mole 디자인 작업 믿기 어렵겠지만 두더지다. 픽셀 하나하나를 찍어 만들었다.. 간단해 보이지만 전혀 간단하지 않았고.. 이걸로 깨달았다 디자이너와 친하게 지내야겠다^^ 오늘 한 작업을 생각해보면 뭘 많이는 했는데 약간 맘에는 안드는.. 그런 날인거 같다 일단 저번에 작업한 와이어 프레임에서 디자인으로 넘어가면서 좀 더 직관적으로 보이는 부분이 있어서 좋았다. 일단 피그마로 작업하면서 폰트를 가져다 쓰는게 안되서 그 부분이 불편했는데 확실히 디자인 툴을 다루는 건 어렵다는 걸 또 한번 느꼈다. 그래도 멀리서 보니 두더지같은..ㅎㅎ 디자인은 주변에 디자이너 친구들에게 조언을 받아서 보완해야 할 것 같다 그래도 일단 이걸 베이스로 해서 코딩을 시작할 수 있어서 한시름 놨다 여기서 UI적인 고민을 좀 하자면 게임 시작 화면에서 .. 2023. 5. 6.
[JS] 명시적 this 바인딩이 없을 때 어떤 것을 참조하는지 설명해보세요. (전역, 일반 함수, 메서드, 콜백함수, 생성자함수) 함수 호출 방식과 this 바인딩 자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다. 다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프(Lexical scope)는 함수를 선언할 때 결정된다. this 바인딩과 혼동하지 않도록 주의하기 바란다. 함수의 호출하는 방식은 아래와 같이 다양하다. 함수 호출 메소드 호출 생성자 함수 호출 apply/call/bind 호출 var foo = function () { console.dir(this); }; // 1. 함수 호출 foo().. 2023. 5. 5.
[JS] 함수와 메서드의 차이에 대해서 설명해보세요. 함수와 메서드 함수와 메서드의 차이점은 호출 방식에 따라 다르다. 함수를 호출하는 객체가 있는 경우 메서드라고 말하며, 함수를 호출하는 객체가 없는 경우 함수라고 말한다. let obj = { show1: function() { console.log('show1() 메서드 호출'); } } function show2() { console.log('show2() 함수 호출'); } obj.show1();// 메서드 show2();// 함수 위 예제에서 show1() 함수는 객체 obj의 프로퍼티이며, obj 객체를 통해 호출했으므로 메서드이다. 반면에 show2() 함수는 객체를 생성하지 않고 직접 호출했으므로 함수이다. 함수를 호출하는 전역 객체 위 예제에서 show2() 함수는 객체 없이 호출되는 것처.. 2023. 5. 5.
2023.05.05 27살의 어린이날 사실 어린이 날이 그냥 보통의 공휴일로 느껴진건 몇년 된거 같다. 하지만 요새 하루종일 컴퓨터 화면과 벽만 보니까 뭔가 사람이 메말라 가는 거 같아서(라는 핑계로) 기분 전환겸 어린이날 이라는 이유로 겸사겸사 짱구를 보러 가기로 했다. 어제 개봉했다고 하니 누가 봐도 어린이 날을 노리고 개봉한 셈이다. 그래서 그 노림수에 당해주기로 했다. 친구는 한정판 티켓이 탐나서 씨네큐라는 청라에 있는 영화관을 예매 했고 영화는 조조였기 때문에 우리는 8시에 만났다..ㅋㅋ 그래도 비가 와서 생각보다 도로에는 차가 없었고 무사히 제시간에 도착했지만 이미 티켓은 품절이었고ㅋㅋㅋㅋㅋ 짱구 얼굴의 마우스패드를 하나씩 받았다. 생각보다 영화는 재밌었고 오랫만에 영화관에 가서 그런지 몰라도 기분전환은 확실하게 하고 왔다. cg.. 2023. 5. 5.
[JS] 실행 컨텍스트에 대해서 설명해보세요. 실행 컨텍스트란? context === 문맥 자바스크립트의 코드의 앞뒤 내용을 이해하기 위한 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. '전역 컨텍스트': { 변수객체: { arguments: null, variable: ['name', 'wow', 'say'], }, scopeChain: ['전역 변수객체'], this: window, } 소스코드 평가와 실행 모든 소스코드는 실행에(런타임) 앞서 평가 과정을 거치며 코드를 실행하기 위한 준비를 한다. 자바스크립트 엔진은 평가와 실행을 나누어 처리하고 평과 과정에서는 실행 컨텍스트를 생성. 변수 함수등의 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 렉시컬 스코프에 저장한다. var x; x = 10; 런.. 2023. 5. 5.
[JS] 자바스크립트의 비동기에 대해서 설명해주세요. 싱글스레드인 자바스크립트의 비동기가 가능한 이유 사람은 혼자서 앞과 뒤를 동시에 볼 수 없고, 공부를 하면서 잠을 자는 등의 업무를 동시에 진행할 수 없다. 자바스크립트 역시 싱글 스레드로 한 번에 하나의 코드만 실행시킬 수 있다. 따라서 애니메이션이 지속됨과 동시에 상품 상세페이지로 이동하기 위한 클릭 등의 작업이 불가하다. 하지만 이 글을 읽는 사람 모두가 알듯이, 브라우저에서 이와 같은 업무가 가능하다. 왜 그럴까? 용어: 스레드(Thread) 스레드는 어떠한 프로그램이 실행되는 작업을 말한다. 싱글 스레드는 한 번에 하나의 작업만 수행할 수 있으며, 멀티 스레드는 한 번에 여러 개의 작업을 수행할 수 있다. 이는 '이벤트 루프(Event Loop)' 덕분이다. 이벤트 루프 브라우저 환경을 그린 것.. 2023. 5. 4.
[프로젝트] 두더지게임(Whack-a-mole) 기획안 기능 9개의 두더지 구멍이 처음 화면에 나옴 게임을 시작하는 "시작" 버튼이 있음 시작되면 1초 후부터 두더지가 구멍에서 랜덤하게 나옴 두더지가 나타난 곳을 클릭할 경우, 두더지를 잡은 것으로 간주 두더지가 나타난 구멍을 사용자가 3초 내에 클릭하지 않을 경우, 두더지를 잡지 못한 것으로 간주 사용자가 두더지를 잡거나 제한 시간(3초)가 초과되었을 경우, 1초 후 랜덤으로 두더지가 나와야 함 다음 번에 두더지가 등장하는 구멍은 이전의 구멍과 다른 구멍 사용자가 두더지를 잡을 수 있는 기회는 10번으로 제한 10번의 시도가 끝난 후→**(잡은 두더지 숫자 /10) X 100** 으로 계산하여 사용자의 점수를 화면에 표기 점수가 표기된 후, 사용자에게는 "재시작" 버튼 나타나게 함 "재시작" 버튼을 누를 경.. 2023. 5. 4.
[JS] 이벤트 버블링, 캡쳐링에 대해 설명해주세요. 1. 이벤트 전파 DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파되는데 이것을 이벤트 전파라고 한다. 캡처링단계 → 타깃단계 → 버블링단계 순서로 전파된다. 2. 이벤트 전파가 있는 이유 그럼 왜 이렇게 복잡하게 이벤트가 구성되어져 있을까? 이에 대해서 대표적으로 다음 두가지 이유 정도 뽑을 수 있을 것이다. - 논리적인 이유 자식 요소가 부모 요소 영역 안에 위치하고 있기 때문에 자식 요소만을 클릭하였다 하더라도 부모 요소도 클릭한 셈이 되기 때문이다. 만일 위의 그림에서 타겟인 button 영역을 클릭해도 div영역 안에 있기 때문에 논리적으로 div 영역의 이벤트도 같이 발생하는 것이 옳을 것이다. - 성능적인 이유 이벤트 등록 코드를 줄일 수 있다. 3. .. 2023. 5. 3.

티스토리툴바