본문 바로가기
728x90
반응형

source-code229

JavaScript _ addEventListener Callback함수에 파라미터 넘기기 세상 긴 제목과 그렇지 않은 내용. JavaScript에서 addEventListener를 사용할 경우... 이런 식으로 사용하는 경우가 많다. 즉 addEventListener의 첫 번째 인자로 해당 event를, 두 번째 인자로 이벤트 발생 시 실행될 함수를 적어주는 것. 그런데 만약, 요 두번째 함수(콜백 함수)에 파라미터를 넘겨야 한다면? 이렇게 써주면 당연히 안된다. 왜? → 이러면 JS 파일을 읽어내려가는 순간 imgDragStart()란 함수가 실행되고 말 테니까! 우리가 원하는 건 touchstart라는 이벤트가 발생됐을 때 imgDragStart함수가 실행되는 것. 따라서 함수 실행을 잠시 미뤄야 한다 === 화살표 함수를 통해 가능! 쨔잔. 이렇게 써주면 된다. 그런데 이렇게만 하면.... 2021. 7. 12.
CSS _ Animation 가만히 있는 것보다는 이리저리 움직이는 게 사람들이 이목을 끌 테다. CSS에서는 Animation이란 속성을 통해 이를 이용할 수 있다! https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations CSS 애니메이션 사용하기 - CSS: Cascading Style Sheets | MDN CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프 developer.mozilla.org 사실 엄청나게 설명이 잘 돼있기는 하다! 예전에는 애니메이션 같은 효과를 주기 위해선 JS가 필수적이.. 2021. 6. 28.
terser 사용하기 React나 Next.js를 사용하면 배포 시 (거의) 자동으로 build 파일을 생성할 수 있다. 그런데 요 build 파일의 역할은? → 필요 없는 공백이나 주석을 삭제해 파일의 용량을 줄이고, 서버 측에서 이해할 수 있는 언어로 변환하거나, 아무나 해당 스크립트를 해석할 수 없도록 암호화한다! 여기서 문제, 그렇다면 라이브러리 없이 그냥 HTML, CSS, JS 파일을 배포해야 할 때는? 해당 JS 파일을 직접 build 해줘야 한다! https://github.com/terser/terser terser/terser 🗜 JavaScript parser, mangler and compressor toolkit for ES6+ - terser/terser github.com 관련된 여러 패키지 중 t.. 2021. 6. 22.
한글 서브셋 폰트 웹 페이지를 만들 때 폰트는 빠질 수 없는 존재다! 모든 글씨가 브라우저 기본 폰트나 희한한 궁서체로 되어있다면... 바로 나가기 버튼행. 마음에 드는 (무료)폰트를 다운로드한 후, CSS를 통해 해당 폰트를 적용시켜주면 된다. 그런데 문제... 폰트의 크기가 무지막지하게 크다! 2021.05.12 - [Deploy] - Lighthouse로 performance 측정하기 Lighthouse로 performance 측정하기 우리의 친구 개발자 도구(F12)는 개발 시 유용한 도구들을 제공한다. (console이라던지... console이라던지...) 그중 페이지 performance의 전반적 결과를 측정할 수 있는 Lighthouse를 사용해보자! 크롬 개발 23life.tistory.com 해당 글에 .. 2021. 6. 15.
patch-package 사용하기 역시 groomer 페이지를 만들다 발생한 issue. 메인 페이지의 Carousel 기능(흔히 말하는 슬라이드! 영어로는 Carousel로 표현한다)을 위해... Swiper라는 라이브러리를 사용했다. https://swiperjs.com/react Swiper React Components Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 다양한 효과를 적용할 수 있고, 커스텀도 손쉬운데... 문제는 기본 색상이나 위치를 디자인에 맞게 수정하는 것! 개발 환경에서는 node_modules에서 해당 스타일 파일을 찾아 수.. 2021. 5. 24.
API 활용하기 API란 뭘까? 윽. 보기만 해도 정신이 혼미해진다. 간단히 이해하자면... 우리가 만든 웹 서비스에 필요한 기능들 중 널리 쓰이는 녀석들을 쉽게 가져다 쓸 수록 한 것! 오늘은 그 중에서도 카카오 맵과 카카오 소셜 로그인을 이용할 예정. 1. 카카오 디벨로퍼 가입 및 애플리케이션 만들기 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오 계정이 있다면 누구나 Kakao Developer가 될 수 있다. 만세! 별 다른 회원가입 없이 존재하는 카카오 계정으로 로그인 후 약관에 동의하면..... 2021. 5. 23.
CRA에 Next.js 적용하기 3 - Next.js 기본 구조 - AWS Amplify 배포 관련 이슈 1. Artifact directory doesn't exist: build build란 디렉터리를 찾지 못해 발생하는 에러. next build를 실행하면 .next라는 파일에 서버/클라이언트에게 제공될 build 파일이 생성되는데... → Amplify 측에서 build 디렉터리가 없다고 판단해버린다. - 해결책 yarn build시 .next란 폴더 말고 build라는 폴더에 build 하면 해결. next.config.js 폴더에 다음을 추가해 custom할 수 있다. 2. Non-Zero Exit Code detected 에러 코드 자체는 build 파일 내 강제 exit 코드가 있어 build가 중지되어 발생한 것. but .. 2021. 5. 14.
CRA에 Next.js 적용하기 2 2021.05.13 - [Frontend/React] - CRA에 Next.js 적용하기 1 CRA에 Next.js 적용하기 1 첫 단추는 언제나 중요하다. 개발 전 CTO님이 말씀하신 "SSR이 어쩌고... 검색 엔진이 어쩌고..." 그때는 별생각 없이 흘려 들었더랬다. 이제야 문제를 깨닫고 SSR을 적용시키려하는데... 여기서 문제 23life.tistory.com Next.js가 어찌 돌아가는지 대...충이나마 감을 잡았으니! CRA으로 만든 기존 앱에 이를 적용시켜보자. 1. 기본 환경 설정 이전에 썼던 글을 참고! → 설치 및 package.json 수정, pages폴더 생성까지 진행하면 된다. 2. 구조 변경하기 한번 더 짚고 넘어가자면... Next.js는 기본적으로 최상위 루트의 pages.. 2021. 5. 13.
CRA에 Next.js 적용하기 1 첫 단추는 언제나 중요하다. 개발 전 CTO님이 말씀하신 "SSR이 어쩌고... 검색 엔진이 어쩌고..." 그때는 별생각 없이 흘려 들었더랬다. 이제야 문제를 깨닫고 SSR을 적용시키려하는데... 여기서 문제, 이미 프로젝트는 CRA을 바탕으로 개발이 끝난 상황! 따라서 어쩔 수 없이 기존에 작성된 코드에 Next.js를 입혀야 한다. 으악. CRA에 Next.js 적용하기 1. 필요 모듈 설치 일반적으로는 create next-app을 통해 기초 세팅을 자동으로 진행한다. 하지만 이미 CRA으로 애플리케이션을 제작한 상태이므로... 손수 설치해주자. react, react-dom, next를 add 해주면 된다. 2. 기본 환경 설정 Next.js는 pages라는 폴더를 필요로 한다! → 요 pages.. 2021. 5. 13.
728x90
반응형

티스토리툴바