들어가며 상태 관리에 대해서 알아보기를 결심!.. 어디서부터 이미 먼저 작성된 많은 글들을 둘러보다 보니 음.. 🤨 먼저 알고 있어야 하는 이론이..... 이 부분에 대한 지식이 아주 얕은 상태인 걸 깨달았다. 지금의 나.. 어렴풋이 들어본 CSR과 SSR의 이름만 알고 있을 뿐.. 😓 모르면 찾아보면 되지!! 좋아 그럼 어디부터 알아볼까~ 하고 거슬러 올라가다 보니 먼저 열심히 찾고 읽고 보게 된 지점이 SPA부터 CSR, SSR이라서 정리해 보았다. SPA는 MPA와 비교되는 방식이라 함께 작성! 🥊 MPA vs SPA MPA (Multi Page Application) 여러 페이지로 구성된 웹 애플리케이션. 전통적인 웹 페이지 구성 방식이다. MPA의 렌더링 방식 인터랙션이 발생한다. (클릭 같은)..

프로젝트를 얼추 마무리하며 필수적인 기능 구현과 수정이 어느정도 끝난 상태에서 프로젝트를 일차적으로 마무리하며 돌아보는 글을 써볼까 한다. 간단하게 후딱 만들어보자! 하는 생각에서 시작해서, 5일 이내로 웬만한 작업을 다 마무리 한 것 같다. 처음에는 더 가볍게 만들어볼 생각이었지만 기획 단계에서도 약간의 욕심이 생겨서 직접 그림도 그려보고, 진행하면서 처음 간단하게 기획했던 것 보다 조금씩 더 얹어진 부분이 많았다. 😇 기획 이미지 우선 이미지들은 원하는 이미지 찾기 어려우면 내가 만들지 뭐.. 싶어서 트레이싱해서 그린 가위 바위 보. 게임이다보니 좀 통통 튀었으면 해서 네온컬러를 사용해보았다. 구상 처음 구상했던 것. 간단 그 자체!.. 랜덤으로 계속 돌아가는 이미지에서 버튼을 누르면 승패가 판가름 ..

들어가며 진행했던 미니 프로젝트인 가위바위보 게임에서 게임시작 페이지로 넘어가면 3초 카운트가 시작된다. 그런데 사파리 브라우저와 iOS 디바이스들에서는 Audio.play 함수가 동작하지 않는 것을 알게 되었다. 😱 크롬과 비슷하게 브라우저 정책상 사운드 자동재생이 바로 되지 않도록 막혀있는 것!... 그렇다면 천상 인트로페이지에서 버튼을 눌렀을 때 배경음악이 나오도록 했던 것처럼, 여기서도 무언가 눌렀을 때 게임이 시작될 수 있도록 해야하는데... (setTimout 메서드도 정상적으로 동작하지 않았다.) 사용성 부분에서는 조금 떨어질 수 있지만, iOS와 사파리 전용으로 게임 시작을 알리는 레이어를 깔아주기로 했다. 그럼 먼저 현재 접속하고 있는 브라우저가 무엇인지를 알아보는 것이 우선! navig..

선택 요소 외의 형제요소 클래스 모두 지우기 미니 프로젝트를 하다가 형제요소가 많은 상태에서 특정 요소를 선택했을 때만 is-active 클래스를 추가하고, 나머지 요소들은 is-active 클래스를 어떻게 지울 것인가...를 고민하다가 스택 오버플로우에서 보고 참고하게 되었다. 예전에 제이쿼리로는 한줄로 쉽게 했던 것 같은데 바닐라 JS로만 하려니까 아직 영 쉽지 않은 것!!... 아래 사진과 같이 현재 play-button 이라는 동일한 클래스를 가진 버튼이 3개 있고, 클릭한 요소에만 is-active를 추가, 나머지는 있었더라도 없애주는 것을 원했다. 해결 function handlePlayerImage(e) { e.preventDefault(); const buttonGroup = this.pa..

console. 자바스크립트를 이용해서 코드를 작성할 때, 콘솔을 통해서 값을 확인하는 일이 많다. 아마 콘솔에서 제일 많이 사용하는 메서드는 console.log 일 것이다! 그 외 현재 자주 사용하는 메서드가 있다면 가끔 객체 내부 구조를 파악하기 위해 사용하는 console.dir 와 로그를 다 지워버리는 console.clear() 정도?.. 내가 얕게 알고 있었던 console 객체의 몇몇 메서드들 이외에도 다양한 메서드들이 있다는 것을 이번 챌린지를 통해 알게되어 한번 정리해보려 한다. console.log 가장 많이 사용하는, 로그를 찍는 메서드다. 여러 개를 출력할 수도 있고, C언어의 printf처럼 입력한 문자를 치환하여 사용할 수도 있다! 하지만 우리에겐 더 익숙한 템플릿 스트링 ${..

classList DOM을 조작하여 클래스를 추가하거나 삭제할 때, class 명을 바꿀 때 등 다양한 상황에 사용할 수 있는 classList 프로퍼티. 챌린지를 진행하다 classList 프로퍼티 중 극히 일부의 메서드만 사용하고 있었다는 것을 깨달았다. 상황에 따라 코드를 더 깔끔하게 짤 수 있는 메서드도 있고 해서, 전체적으로 어떤 메서드가 있는지 한번 훑어보려 한다. add, remove 평소 사용했던 일부의 메서드.. 가장 간편해서 그런지 기억에 오래 남아있는 것인가 싶기도 하다. 🤔 아래와 같이 간단한 예시를 들 수 있다. 메소드 이름대로, 클래스를 추가하고 제거하는 메서드다. 여러 개를 나열할 수도 있다. let li = document.createElement('li'); li.class..

5월 회고 5월의 마지막 주 회고는 이것으로 대신하며 작성해보는 회고. 생각보다 빨리 지나갔고, 현재 진행형이지만 많은 고민을 했으며 여러 일들이 있었던 5월. 5월 한 달을 되돌아보며 무엇을 했는지 정리해보고, 나를 격려해보는 시간을 가지려 한다. 🙌 5월의 공부 leetCode 풀어보기 블로그에 포스팅한다고 해놓고 자꾸 미루고 있는 ~ 아직 못푸는 문제들도 많지만 (코테를 처음 풀어보는 것이니 당연하다) 컴퓨팅적인 사고 능력을 키우는 데는 좋은 것 같다. 여러 풀이 방식을 보며 다른 방식의 코드를 해석해보는 것도 의미 있는 것 같고. 하지만 방통대에서 습득한 알고리즘 이론 지식이 얕게 자리하고 있기 때문에 추가적인 강의가 필요한듯 하다. 드림코딩 자바스크립트 마스터리 완강 엘리쌤 강의는 유튜브로도 많..

자바스크립트 만으로 아날로그 시계 만들어보기를 진행했다. 먼저 아날로그 시계를 만든 뒤 따로 디지털 시계도 추가해줬다. 알게 된 점 CSS의 속성 중 transform-origin 으로 transform의 기준점을 잡을 수 있다. 침을 조절하는 각도를 지정하는 방식은 여러가지. 첫 번째 이슈 처음에 12시 방향으로 모든 침을 고정시키기 위해 rotate를 90도로 설정해주었더니, 12시 방향에 도착할 때 마다 transform이 요란하게 움직였다가 다시 돌아오는 것을 볼 수 있었다. (너무 빨라서 캡쳐 불가능..) 이건 아마 444도 까지 늘어났다가 급격하게 90도로 변경되며 생기는 문제같았다. 그래서 아래 같은 방식으로 모든 침이 12시 방향에 도달했을 때 transition 속도를 잠시 조정해주는 것..

문제 Given a non-empty array of integers nums, every element appears twice except for one. Find that single one. You must implement a solution with a linear runtime complexity and use only constant extra space. 정수의 배열에서 동일하게 짝지어지지 않는 하나의 수를 찾아 반환하는 문제. 풀이 let result = nums[0]; for (let i = 1; i < nums.length; i++) { result = result ^ nums[i]; } return result; 간단해보이면서도 묘하게 간단하지 않아서 결국 다른 코드를 보게 되었다..

이전 커밋을 수정하려다가 상황이 좀 꼬였다가 어떻게 다시 복구... (벌써 두 번째 😇) 하였으나 결론적으로 수정은 실패해서 !.... git rebase를 이용해 특정 시점으로 돌아가서 커밋을 수정해보려고 한다. 현재의 경우는 이미 오타 수정 커밋....을 해버렸는데 또 오타가 있음을 발견해버렸고!... 더 이상의 오타 커밋을 하고싶진 않아서 rebase를 써보려 한다. 이전에도 rebase를 썼음 좋았을 것을.. git rebase 해보기 터미널의 git log에서 바꿀 커밋의 해시를 복사한다 git rebase -i 해시 를 통해 리베이스 하러 들어간다. 그럼 현재 커밋된 페이지에 대한 부분이 나오는데, pick 커밋번호 커밋메세지 부분의 pick을 edit으로 수정 후 저장하고 나와준다. (참고로..