귤죠아

귤을 좋아하는 프론트엔드 개발자

FrontEnd/React

발생 현상 마우스 오버관련 이벤트가 추가된 를 모바일에서 클릭시 바로 넘어가지 않고 두번 클릭해야 링크되는 현상 발생 PC는 전현 문제 없음 발생 원인 Touch 디바이스에서는 첫 클릭때 onMouseEnter, onMouseOver를 먼저 인식함 터치를 쓰기 위해 이벤트를 옮기거나 없애야함 수정 방법 어찌됐던 PC에서는 마우스 이벤트가 필요한 상황이라 찾아보던 중 비슷한 사례를 발견 react-device-detect를 이용하여 접속 기기가 터치식인지 확인 후 마우스 이벤트에 삼항 연산으로 터치식인 경우 false를 돌려보내 인식하지 못하게 해줌으로 해결 /* 수정 전 */ /* 수정 후 */ import { isMobile, isTablet } from 'react-device-detect'; fa..

2024. 1. 17.

Error

에러 내용 더보기 cross-env: command not found 에러 이유 너무나도 심플하게 진짜 cross-env 모듈이 존재하지 않아 발생한 에러 해결 corss-env를 설치해주면 해결됨 npm npm install cross-env yarn yarn add cross-env

2023. 3. 28.

FrontEnd/React

노마드 코더의 니콜라스 Next.js 기초 강의를 수강하며 정리한 내용입니다. Style 관련 CSS Modules next.js에서 style을 이용할 때 모듈로서 사용한다. css 파일 생성 시, filename.module.css 로 생성 하여 사용할 파일 내에 import 후 사용한다. 단 사용되는 파일마다 import를 해주어야 하고, 사용하는 태그마다 클래스명을 기억 해야 하는 등의 단점은 존재한다. /* NavBar.module.css */ .nav { background-color : tomato; } .a { color : white; text-decoration : none; } /* NavBar.js */ import styles from "./NavBar.module.css" imp..

2023. 3. 4.

FrontEnd/React

Next.js를 사용하는 이유? react공식 문서에 따르면 react는 js기반으로 만들어진 UI를 담당하는 라이브러리이다. 굳이 React를 잘 만들어 놓고 Next.js를 사용하는 이유는 무엇일까? React는 CSR방식으로 사용자에게 화면을 보여준다. Next.js는 pre-reloading 방식으로 화면을 그려 SSR 방식을 이용해 사용자에게 화면을 보여준다. 사용자가 화면을 변화하였을 때 브라우저는 빈 html을 받고 그 위에 그림을 그려나간다. 그렇게되면 사용자는 다 그리기 전까지 화면 하얀 화면을 보고 있어야 하는 단점이 생긴다. SSR 방식은 서버가 html을 미리 로드하여 이미 랜더링된 화면을 브라우저에게 전달하므로 사용자는 흰 화면을 보지 않고 바뀐 화면을 만날 수 있다. 미리 로드된..

2023. 3. 3.

FrontEnd

웹 브라우저가 그려지는 과정 사용자가 브라우저를 이용할 때 일련의 과정이 있지만 다 건너 뛰고 HTML파일이 웹 브라우저에 그려지는 과정을 알아보았다. HTML문서를 파싱하고, JS와 CSS를 읽어 DOM Tree를 생성하고 레이아웃을 작성하여 Paint해주는 일련의 과정을 거쳐 우리 눈에 보이는 화면이 그려지는데 브라우저마다 약간씩 다르기는 하지면 기본적으로 큰 흐름은 거의 동일하다고 한다. 1. HTML DOM Tree 아래와 같이 우리가 만든 HTML 문서가 있다고 가정해보자 HTML 삽입 미리보기할 수 없는 소스 DOM Tree는 루트 엘리먼트인 을 시작으로 각 엘리먼트에 대한 노드를 생성하여 트리 구조를 작성한다. 중첩 된 엘리먼트의 경우 자식 노드를 생성하고, 각 엘리먼트의 속성을 포함하여 기..

2023. 3. 1.

🎡

아래 내용은 패스트 캠퍼스의 "초격차 패키지 : 21개 프로젝트로 완성하는 인터랙티브 웹 개발 with Three.js & Canvas"를 수강하며 혼자 복습용으로 작성한 내용과 코드들 입니다. 따라서 수업 내용과 코드 자체는 약간 다를 수 있습니다. 수강 내용에서는 svg를 이용해 filter로 grooey효과까지 작성하였지만 복습용으로 만들면서 filter는 빼고 그냥 눈 내리는 효과처럼 위에서 아래로 작은 원들이 떨어지는 것으로 작업 하였다. 우선 canvas의 정보들을 담고 있는 canvasInfo로 오브젝트를 제작해 주었다 나는 원들의 색상을 다르게 하고 싶었어서 해당 컬러값들을 배열화 해줌 canvasInfo를 기반으로 내가 만들 캔버스 dom을 선택해서 getContext()를 2d로 설정해..

2023. 2. 20.