현재 리액트 환경에서 인스타그램 클론코딩 중이다. 인스타그램 메인 게시글의 “더보기” 버튼을 누르면 팝업이 나오는데, 거기서 “게시글로 이동” 을 누를 시 상세페이지로 이동하는데, 이 부분을 구현하려했다.하지만 게시글 상세는 두 가지의 형태를 띈다. 클라이언트 환경에서

개인프로젝트 중, 임의로 포커싱을 주는 작업이 필요했다. ⇒ 댓글 아이콘을 클릭하면 아래 댓글 폼이 포커싱 되도록작업은 간단했는데, useForm 의 setFocus 를 사용하면 될 일이었다. 하지만 어째서인지 포커싱이 되지 않았고, useRef 까지 사용했는데도 포커

인스타그램 클론 코딩 프로젝트 작업중, 더보기 버튼을 토글 클릭시 메뉴창이 뜨고 닫히도록 만들어놓은 상태이다. 여기서 나는 메뉴창 외의 영역에도 클릭할 시 메뉴창이 닫히도록 하고싶어했다. 찾던 내용중, 단순하게 전체영역을 태그로 감싼 후 해당 전역 태그의 onClick

next 프로젝트를 시작하려 초기 세팅중, 다음과 같은 eslint 에러 문구가 떴다.초기 eslintrc.json 는 다음과 같이 자동으로 설정되어있던 상황이다.next.js 초기 세팅(eslint, prettier) 관련 글을 서치하였는데, 위의 부분만으론 완벽하게

스크롤 기능을 막아야하는 상황에서 대부분은 body 에 overflow-y: hidden 을 주는 방법이 제시되지만, 그렇지 않은 경우 자바스크립트로 이를 처리해야한다.처음엔 아래와 같이 이벤트를 주었지만 작동하지 않았다 ㅠ두번째 시도로 아래와 같이 다른 이벤트에도 적

사용자 입력폼을 여러 단계로 작성할 수 있는 부분을 레이어 팝업식으로 띄어지는것이 아닌, 브라우저 상에서도 뒤로가기, 앞으로 가기가 가능한 랜딩페이지 형식으로 만들고 싶었다. 아래와 같은 사항때문이었다.4개의 페이지로 분리하면 페이지 이동 시 이전에 입력한 사용자의 입

이미 풀페이지 스크롤이 구현되어있는 상태특정 페이지내에서 슬라이드가 세로로 스크롤되는 구조로 만들어야 하는데, 풀페이지 스크롤 기능과 겹쳐 스크롤 이벤트를 구현하는데 쉽지 않았다..해당 페이지에 도달하면 body 의 스크롤을 막은 후 슬라이드를 실행하게 하고, 슬라이드

select 박스에서 품목의 종류 개수를 입력하면, 개수에 따라 input 칸이 추가되는 기능을 구현해보았다. (품목은 4개까지 입력 가능)개수를 변경시, 개수가 적어지면 적어진 개수만큼 뒤에서부터 input 삭제, 입력값이 같이 제출될 수 있으므로 그에 따른 valu

pagination 의 bullets 요소를 css 커스텀 하는것이 아닌, 특이한 모양의 아예 다른 버튼을 pagination 으로 만들고 싶어 svg 를 사용했다. 하지만 많은 난관이 있었는데, 기존 내장된 pagination 을 쓴다면 스타일만 바꾸면 되지만 아예

아웃룩 이메일 서비스의 서명을 등록할 때, 이미 만들어진 html 을 그대로 서명에 복사 붙여넣기 할 수 있는 기능을 만들고자 했고 이를 자바스크립트로 구현하려한다.왼쪽 form 에 이름, 번호 등을 입력하면 오른쪽 화면에 그대로 정보가 스타일이 입혀진 채 반영됨완성된

회원가입 탭에서 비밀번호를 입력 후 해당 비밀번호가 맞는지 한 번 더 확인하는 “비밀번호 확인” 인풋을 생성했다. react-hook-form 환경에서 useController 를 통해 Input 컴포넌트로 만든 상황이다.비밀번호가 맞지 않을 시 '비밀번호가 일치하지

약관동의 페이지를 만들때, 아코디언 형태로 약관내용을 클릭하면 확인할 수 있도록 하고 체크박스와 제목은 보이는 구조를 만들고 싶었다.⇒ 이용약관에서 누를 수 있는 제목버튼과 체크박스는 그대로 둔 상태로, 컨텐츠만 열리고 닫히는 구조하나의 기능을 하는 컴포넌트 내 존재하

텍스트를 복사하는 버튼 기능이 있어 리액트 환경 복사기능을 지원해주는 라이브러리를 활용해 아래와 같이 작업하였다.하지만 해당 버튼이 다른페이지에서도 중복 사용되어 컴포넌트로 다시 재구성하여 작업해보았다.복사가 되었다는 알림을 띄운 후 2초 뒤에

next 프로젝트에서 외부에서 가져오는 이미지를 업로드하는 작업 중 이미지가 안뜨는 현상이 발생했다.이미지 url 은 잘 가져와져 서버쪽 문제는 아닌것 같았고, src경로가 “/\_next/img~ 와 같이 정상적이지 않게 렌더링되어있었다.구글링 결과 그 원인은, N

TailwindCSS 를 사용하는데 자꾸 className={} 객체 형태로 자동완성되는 점이 너무 불편해서 설정을 바꾸고자 했다. 먼저 확장프로그램이 원인인가 싶어 모두 비활성화 시켜봤지만, 여전히 자동완성 기능은 그대로였고 이는 내장된 기능이란 것을 유추할 수 있었

문제 상황: 관리자가 업무일지에 댓글을 등록하는 기능을 만드는 중 댓글이 등록되어 해당 댓글이 속한 리스트 데이터가 변경 되었는데, 변경된 데이터가 클라이언트 측으로 바로 갱신되지 않는 문제가 발생했다. 이 때문에 사용자가 댓글을 쓴 바로 직후 화면이 업데이트 되지 않

이전에 vscode 환경에서 git 을 사용할 때는 일일히 터미널에 git add, commit, reset 등 명령어를 입력하여 관리했었다. 하지만 webstorm 편집기를 사용한 이후, 현재 저런 명령어들을 칠 필요없이 간편하게 git 을 다룰 수 있다. 이런 편리

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

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

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