특정 페이지의 SNS 등 외부 공유를 위해 URL 링크를 생성하고 싶었다. 링크를 클릭하면 특정 팝업이 열린 상태로 페이지가 띄어지는 구조여야 하는데, 해보지 않은 작업이라 애를 좀 먹었다.

페이지 작업을 하던 중 팝업창 기능을 구현하고 있었다. 그리고 닫기 버튼을 누르는 기능에서 클릭된 버튼(event.target)의 부모를 찾아 해당 버튼을 자식으로 가진 팝업을 닫는 기능을 작업던 중 작은 문제가 발생했다.

몬스터 게임은 RPG 게임으로, 게임에는 크게 두 가지 모드가 있다. 모험, 휴식, 종료 중에서 선택하는 일반 모드와 모험을 떠나서 적을 만나게 될 때 돌입하는 전투 모드이다. 전투 모드에서는 적을 공격하거나 체력을 회복하거나 도망간다.웹게임 링크html, css 코드

planetscale 데이터베이스와 연결하고자 pscale connect 를 하는데 연결이 안되고 다음과 같은 에러가 발생했는데, 구글링 결과 그 이유를 공식문서에서 바로 알아냈다.참고: https://planetscale.com/docs/concepts/da

제로초의 NodeBird 강의 프로젝트를 직접 리뉴얼 하는중에 다음과 같은 버그를 발견했다.⇒ 게시물 작성 중 이미지를 업로드하는 기능은 type 이 file 인 input 에 onChange 이벤트를 걸고 업로드 리듀서가 디스패치되는 구조게시물을 작성하기 위해 “re

사용자가 로그인이 되지 않은 상태에서 마이페이지에 접근하려 하면 ‘로그인 후 이용바란다’ 는 메시지를 alert 으로 띄우고 싶어서 다음과 같이 작업했다. 클라이언트 상에선 잘 작동하지만 새로고침 혹은 url 로 접근시 다음과 같은 에러가 발생한다.원인은 간단했다. 서

v-model 을 이용해서 체크박스를 만들어보는 과제를 받았다. v-model 에 대한 개념을 잘 파악한 뒤, 우여곡절 끝에 체크박스를 구현하는데 성공했다. 그리고 여기서 그치지 않고 전체로 체크되는 체크박스도 한 번 구현해보았다.vue 에서는 부모에서 자식 컴포넌트로

웹스톰에서는 다음과 같이 누가 작성한 코드인지, 그리고 코드가 사용된 횟수를 알 수 있다.좋은 기능이긴 하나, 개인적으로 코드를 보는데 있어 좀 많이 불편했다😂 해당 기능을 끄거나 켜는 기능을 구글링하여 찾았고, 방법은 다음과 같다.settings > Editor

회사 사이트 고도화 작업에서 탭 메뉴를 구현하는 중에 에러가 떴다. 에러의 원인을 해결하여 정리해보자. 탭기능 중 한 곳은 스와이퍼, 다른 한쪽은 스크롤 매직 라이브러리를 사용한 상황이다. 2탭인 상태에서 1탭을 다녀왔다가 다시 2탭을 돌아오면 스크롤 fixed 가 작

틱택토 게임은 오목게임과 룰이 같으며, 여기에선 3목으로 승부한다. 3 \* 3 = 9개의 칸 안에 o 와 x 를 턴마다 삽입하여 세 개 연속 같은 모양일 경우 승리하는 게임이다.웹게임 링크html, css 코드표를 나타낼 때, 대부분은 자바스크립트의 이차원 배열을

redux-toolkit: 리덕스 툴킷(redux toolkit) 은 리덕스를 불편한 점을 보완하기위해 나온 개발 도구이다. 리덕스는 복잡한 저장소 구성, 수많은 라이브러리에 대한 의존성, 그리고 하나의 작업마다 많아지는 코드양 등의 문제점이 있었다. 하지만 리덕스 툴

이전의 제로초 강의를 들으면서 만들었던 form 은 일일히 state 를 만들어 사용하거나 커스텀훅을 이용해 만들었는데, 이번엔 리액트의 react-hook-form 이라는 라이브러리를 이용해 폼을 다시 구현해보았다. state 를 만들 필요가 없고, 유효성 검사나 실

4개의 숫자를 제한된 기회 안에 맞추는 게임으로, 야구의 규칙 용어만 가져옴게임 규칙 : 1\. 상대편이 숫자 1~9 중 중복되지 않게 4개를 고름2\. 10 번의 기회가 주어지고, 그 안에 해당 숫자 4개를 순서포함해서 맞춰야함3\. 10번의 기회 동안 다음의 힌트가

nuxt 프로젝트에 vuex 를 설치해 $store 전역객체를 쓰려는 순간, $store 이 undefined 로 간주되어 다음과 같은 에러가 발생했다.크롬 개발자도구를 켰을 때도 패널에 Components, Timline, Routes 만 있을 뿐 Vuex 는 표시되

Prettier: 코드 정리 도구ESLint: 자바스크립트 코드에서 발견되는 문제시되는 패턴들을 식별하기 위한 정적 코드 분석 도구Prettier 설정을 위해 다음과 같이 루트 경로에 .prettierrc 라는 파일을 생성 후 작성뷰 cli 로 프로젝트를 생성할 때 o

vue 프로젝트 폴더로 접근 후 서버를 실행이때 eslint 에서 에러가 새로 업데이트되어 잘못 입력했을 시 다음과 같이 화면을 덮는 기능이 발생한다.이렇게 되면 화면을 조정할 수 없기 때문에 해당 기능은 꺼주도록 하자.eslint 빨간줄 기능이 작동하지 않을 때 ⇒

처음 제시된 단어의 맨 뒷글자를 앞글자로 사용하여 단어를 나열하는 게임으로, 한시간은 30초, 단어는 세 글자여야만 한다html, css 코드끝말잇기리팩토링 (or , and)리뉴얼 작업: 끝자리에 깜박거리는 애니메이션 효과를 넣어 첫글자로 입력해야할 글자를 시각적으로

자바스크립트, 프론트엔드 강좌 끝판왕으로 유명하신 제로초님 강의 중 자바스크립트의 정수를 모두 보여준 강의가 있는데, 바로 웹게임을 통해 배우는 자바스크립트 강의다.평소 웹사이트 하나에 구현되는 javascript 의 간단한 기능만 구현하다가, 본 강의를 통해 여러 다

React 프로젝트를 시작하려니 vscode extension 인 Prettier 가 먹히지 않아서 그 원인을 찾아보았다. 구글링해서 찾아본 결과는 다음의 세 가지 방법이었다.setting.json 에서 editor.formatOnSave 에 true 가 되어있도록 한

vue cli 를 설치할 떄 다음과 같은 에러가 났다.원인은 두 가지로 예상된다 전역 설치 시 관리자 권한이 아니기 때문에 에러가 발생함환경변수해결 방법:이전에 설치한 것을 삭제 후 전역적으로 재설치를 해준다.sudo npm uninstall --global vue-c