2023/멋쟁이사자처럼_FE517 [프로젝트] Whack-a-mole 기능구현 중 마주친 오류 기능 구현을 한 뒤 게임을 해 보았다. 스타트 버튼을 누르면 두더지가 나오고 두더지를 클릭하면 두더지가 사라지면서 점수가 올라가고 300ms 뒤에 두더지가 다른 구멍에서 등장한다. 근데 여기서 문제가 생겼다.. 10마리를 다 잡아도.. 점수가 90점밖에 안나온다.. (HOME 버튼은 css가 적용이 안된거 같다.. 하지만 이건 사소한 거니 나중에 대충 고치는걸로..ㅎㅎ) 그리고나서 곧바로 다른 오류도 발견했다..^^ 클릭하지 않아도 일정 시간이 지나면 두더지가 사라지고 다른 구멍에서 두더지가 나와야 되는데.... 클릭을 하지 않으면 그 두더지는 그대로 있고 새로운 두더지도 나오지 않는다..ㅋㅋㅋㅋㅋ큐ㅠㅠㅠ 로직 자체는 그렇게 복잡하다고 생각하지 않았는데.. 컴퓨터의 사고방식에 좀 더 가까워져야겠다... .. 2023. 5. 23. [GitHub] 쓸때마다 검색하는 명령어들^^ 파일 생성-레포 연결 git init 파일 내용 추가 git add . git commit -m “메세지” git remote add origin 깃헙 주소 git push origin main README.md 파일을 레포 만들 때 함께 만들면 항상 오류가 나서 그냥 함께 만들지 않게 되었다..ㅎㅎ 브랜치 생성-레포 연결(팀장) git branch 브랜치 이름 git branch git checkout 브랜치 이름 파일 내용 추가 git add . git commit -m “메세지” git pull origin main git push origin 브랜치 이름 브랜치 생성-레포연결(팀원) vsc열고 터미널을 열어서 git clone 레포주소 git branch 브랜치 이름 git branch git c.. 2023. 5. 7. [CSS] 맨날 검색하는 background 한번에 쓰기 background는 하위 속성이 많다. 각각 사용이 가능하지만 쓰다보면 한 가지만 사용하는 경우는 잘 없었다. 코드가 중복으로 너무 길어지는 것 같아서 한번에 적으려 하면 항상 찾아보게 되는데 그냥 블로그에 정리하고 이것만 보자 하는 생각에 정리하게 되었다. 1. 하위 속성의 종류 background-attachment : 배경 이미지를 뷰포트 내에서 고정할지, 아니면 자신의 컨테이닝 블록과 함께 스크롤할지 지정합니다. background-clip : 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지 지정합니다. background-color : 요소의 배경 색을 지정합니다. background-image : 요소의 배경 이미지를 한 개나 여러 개 지정합니다. background-.. 2023. 5. 7. [CSS] 컨텐츠를 숨기는 방법 정리 1. display:none; or visibility:hidden; 모든 사용자에게 컨텐츠를 숨긴다. 컨텐츠를 시각적인 부분에서 완전히 제거하는 방법으로 스크린리더기에도 읽히지 않는다. 텍스트만 숨기고 백그라운드 이미지를 보여주어야 할 때 사용할 수 없다. 만약 어떤 특정 이벤트가 일어날 때만 보여주고 싶다면 기본 설정으로 두고 자바스크립트에서 클래스를 부여하는 방법으로 많이 사용했다. 2. width:0px; height:0px; 0픽셀 조절 방법 HTML/CSS로 정의된 높이나 너비가 없는 요소는 일반적으로 페이지에서 제거하고 대부분의 스크린리더가 읽지 않는다. font-size:0px; line-height:0px 은 작동할수는 있지만, 화면에 여전히 가로 공간을 차지하게 된다는 단점이 있다. 검.. 2023. 5. 7. [JS] call, apply 메서드와 bind 메서드의 차이에 대해서 설명해보세요. 1. call() call()은 인수에 this 로 사용할 값을 전달할 수 있다. const peter = { name : 'Peter Parker' } function sayName() { console.log(this.name) } sayName() // undefined sayName()을 호출하면, undefined가 출력된다 왜 peter의 name이 출력되지 않을까? 그 이유는 현재 this는 window를 가리키고 있기 때문이다. 그렇다면 this가 peter를 가리키도록 하는 방법은? call() 을 사용하는 것 호출함수.call(this로 지정할 대상)을 하면 함수에서 특정 객체를 this로 지정할 수 있다. const peter = { name : 'Peter Parker' } func.. 2023. 5. 6. [프로젝트] 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. 이전 1 2 3 다음
