좐's 블로그

Scroll 이벤트가 실행이 되지 않을 때

물류 프로그램 설계하느라 홈페이지에 신경을 많이 못쓰던 와중에 scoll 시 section 부분에 효과를 넣어달라는 요청이 와서 처리 하려하는 와중에 발생한 문제 문제의 코드document.addEventListener('DOMContentLoaded', () => { const sections = document.querySelectorAll('.scroll-area'); window.addEventListener('scroll', () => { console.log('fuck'); sections.forEach(section => { const sectionTop = section.offsetTop; const sectionHeight = sect..

컴팩트한 사용자 경험을 위한 Scroll -Snap 기법

홈페이지... 더 이쁘게... 진행시켜...!! 지난주에 완료 보고 후 젠킨스까지 입히고 약간의 꿀을 빨고자 했던 이번 주... 하지만 중국을 갔다 오신 대표님의 한마디에 또 다시 나는 css 의 늪에 빠지고 말았다 ㅠ 그래서 요구사항을 들어보니 다른 회사들 landing 페이지처럼 휙휙 넘어가는 메인 화면을 만들고 싶어 하시는 거 같았다. (실제오더 : 아니 그냥 쭉쭉해서 페이지 넘기는거처럼 넘어가게 좀 해바바) 이걸 또 찰떡 같이 번역해서 다른 회사들은 어떤 기능을 쓸까 파악해보니 Scroll-Snaps이란 속성을 사용하고 있다는 걸 알았다. Scroll-Snap 이란?? 사용자가 터치 혹은 스크롤 조작을 하였을 때 offset을 설정할 수 있는 속성 Scroll-Snap 속성과 활용법 scroll-..

React Custom hook 이용하여 인원 수 체크 하기

1. React Custom hook...? 리액트는 반복되는 로직에 피로감을 느끼는 개발자들을 위해 hook 을 커스텀해서 이용하는 아주 편리한 기능을 제공한다. Custom Hook 을 만드는 방법은 아주 간단하다. 그냥 함수 앞에 use 를 붙여주면 난 이 친구를 hook 으로 사용할거야! 라는 뜻이며 hook 을 사용할 때 유의해야 할 점과 그 특성을 공유한다. 하나의 컴포넌트에서 hook 이 실행되는 순서는 항상 같아야 한다. 그러므로 최상위 레벨 (at the Top Level) 에서 실행되어야 한다. ▪︎ if 블럭 안에서 쓸지 말 것 - 조건에 따라 실행이 안 될수도 있어서 ▪︎ for loop 블럭 안에서 쓰지 말 것 - 실행 횟수가 달라지고 실행이 안될수도 있어서 ▪︎ Function ..

React hook 의 개념과 사용법

1. Hook 이란? 기존 함수컨포넌트는 별도로 state 를 정의하거나 LifeCyle 에 맞춰 어떠한 코드를 실행 시킬 수 없어서 함수컴포넌트에 class 컴포넌트의 기능을 동일하게 사용하기 위해 사용 * hook 중 기본적으로 제공하는 기능들 말고 개발자가 커스텀해서 사용 할 수 있지만 hook 앞에 'use' 를 붙이는게 국룰이다!! 2. useState >> state 를 사용하기 위한 hook 예를 들어 이러한 코드에 useState 를 적용해 보자... * useState 사용법* const [변수명, set함수명] = useState(초기값); 이는 class 컴포넌트에서 setState 를 사용해서 변수를 업데이트하고 재랜더링하는 과정과 같다. 2. useEffect >> side eff..

<Next.js-TypeScript-React> - 1 기본 개요

Next.js 와 typeScript Next.js 는 리액트의 기능성을 살리면서 리액트만으로는 다룰 수 없는 영역을 포함하는 실전적인 웹 프레임워크 TypeScript 는 자바스크립트에 정적 타입 기능 등을 탑재한 프로그래밍 언어이다. SPA 의 등장과 SSR 그리고 CSR 서버 사이드 랜더링(SSR)과 클라이언트 사이드 랜더링(CSR)은 웹 애플리케이션을 렌더링하는 방법에 대한 차이점을 가지고 있습니다. 이를 이해하기 위해 먼저 SPA (Single Page Application)에 대해 설명하겠습니다. SPA (Single Page Application): SPA는 단일 페이지 애플리케이션으로, 초기에 모든 정적 리소스(HTML, CSS, JavaScript)를 한 번 로드한 후, 페이지 전환 시에..

[Javascript] Null, undefined, '' 에 대한 체크

[JavaScript] Null check, 빈 값 체크 v2019 JavaScript는 데이터형에 대해서 꽤 자유로운 언어입니다. var value = 1; // Number 형 1 console.log(value, typeof value); // 1 number value = "1" // String 형 1 console.log(value, typeof value); // 1 string 이렇게 처음에 value에 정수형 1을 넣고 변수 생성후에 로그를 찍으면 1인 정수가 나오고 문자형 '1'을 value에 넣을수 있습니다. 자바와 c 같은 타입을 확실히 검사하는 언어와는 다릅니다. 자바스크립트에서 어떤 값이 비어있는지 체크하려면 var value2 = "" if( value2 == ""){ cons..

[Javascript] File Drag and Drop 구현

let drwFileList = []; let addrwFileList = []; // 새로 등록된 파일 let deleteFileList = []; // Directory의 파일 중 삭제할 파일 이름 (function($) { const drwFile = $("#drwUpload"); drwFile.on('change', function () { if(!$.fileTypeCheck($(drwFile)[0].files[0].type)) { alert('jpeg,jpg,png,gif파일만 등록가능합니다.') } else { drwFileList.push($(drwFile)[0].files[0]); addrwFileList.push($(drwFile)[0].files[0]); $.addTableRow($(d..

[HTML, CSS] display : none 테이블 깨짐 현상 해결

프로그램에서 출원경로가 '개국' 일 경우에는 지정국 입력 칸이 사라지게 해야하는 로직을 짜는 업무 당연히 평소에 하던 대로 출원경로 select태그에 onchange 효과를 줘서 지정국 칸의 css 를 'display : block; > none;' 으로 토글하는 함수를 만들어 넣어 놓았다. 그런데... 띠..띠용 . . . 내가 생각했던 것과 달리 tr 이 깨져서 들어와졌다... 흠.. 이유를 찾기 위해 console 창을 열고 tr 의 style 요소를 확인해 보았다. tr 태그에는 display : block 이 아닌 table-row 라는 속성이 들어가게 된다. 오늘도 html css 짬바가 하나 늘었다.