LazyWon Story

목차 문제상황 해결 문제상황 http://kenwheeler.github.io/slick/ 개발 중 autoplay: true 옵션을 주고 모바일(iOS, AOS)에서 확인 시, 첫 화면 로딩 시에는 autoplay가 동작하지만 스크롤 이후 혹은 해당 영역 터치 이후에는 autoplay가 작동하지 않았다. 아래 옵션을 추가하여 false로 설정했지만 소용없었다. pauseOnFoucs: false 포커스가 들어오면 슬라이드 이동 멈춤 pauseOnHover: false 마우스 호버 시 슬라이드 이동 멈춤 pauseOnDotsHover: false dot 호버 시 슬라이드 이동 멈춤 💡해결 구글링 한 결과 slick slider에서 제공하는 'slickPlay' 메서드를 사용하여 touchcancel, t..

목차 가장 최근 10개 파일만 남기고 삭제하기 가장 최근 10개 파일만 남기고 삭제하기 최근 파일 순으로 정렬하여 리스트 출력 $ ls -t 위에서 11번째 줄부터 리스트 출력. 가장 최근 10개 파일 리스트 보여주지 않는다. $ ls -t | tail -n +11 가장 최근 파일 10개만 남겨두고 나머지 삭제 $ ls -t | tail -n +11 | xargs rm -f

목차 문제 상황 해결 [css] height: 100% vs height: auto 문제 상황 slick 라이브러리를 이용하여 웹뷰에 롤링 배너를 구현하는 중에 iOS에서만 초기 렌더링시에 이미지가 정상적으로 출력되지 않는 문제가 발생했다. (아직까지 왜 iOS에서만 그런 현상이 일어나는지 파악하지 못했다 .. ) 위 사진처럼 상단 메뉴 바로 아래 롤링 배너가 있어야 하는데 이미지가 로드는 되었지만 잘리는 것처럼 보였다. css 파일 내 .slick-slide의 min-height:1px 이었는데 해당 사이즈가 min-height으로 잡히는 것이었다. 💡해결 구글링 끝에 stack overflow에서 아래와 같은 글을 발견했다. 위 방법으로는 해결되지 않았다. .slick-slide 내 height: 1..

목차 학습 주제 JWT의 이해 학습 주제 ch. 23 - 24 JWT를 통한 회원 인증 시스템 구현하기 💡 JWT의 이해 JSON Web Token의 약자로, 데이터가 JSON으로 이루어져 있는 토큰을 의미한다. 쉽게 말해, 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰이다. 두 개체가 서로 안전하게 정보를 주고받을 수 있도록 웹 표준으로 정의된 기술이다. 사용자의 정보 열람, 수정 등 개인적인 작업들을 수행할 수 있다. 세션 기반 인증 시스템 서버가 사용자가 로그인 중임을 기억하고 있는 것. 사용자가 로그인하면 서버는 세션 저장소에 사용자 정보를 조회하고 세션 id를 발급한다. 발급된 id는 브라우저의 쿠키에 저장한다. 이후에 사용자가 다른 요청을 보낼 때마다 서버는 세션 저장소에서 세션을..

목차 학습주제 React Router API 연동 Context API 학습 주제 13장. 리액트 라우터 14장. 외부 API 연동하기 Context API 💡 React Router router 기능을 구현하기 위해 외부 라이브러리 필요 사용 빈도가 가장 높은 react-router-dom 라이브러리 사용 프로젝트에 라우터 적용 프로젝트에 리액트 라우터 적용할 때는 src/index.js 파일에서 react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용하여 감싸면 된다. BrowserRouter 컴포넌트는 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해준다. Route 컴포넌트로 어떤 규칙을 가..

목차 Hooks 컴포넌트 스타일링 학습주제 8장. Hooks 💡 Hooks 클래스형 컴포넌트의 state관리와 Life cycle method 기능을 제공해 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해주는 기능이다. Hooks의 사용으로 기존의 클래스형 컴포넌트가 가지고 있던 복잡성, 재사용성의 단점들까지 해결해 준다. useState 가장 기본적인 Hook으로 상태 변수와 상태 업데이트 함수를 반환 함수형 컴포넌트에서 상태 관리를 하기 위해 컴포넌트 코드를 클래스 형태로 변환할 필요가 없어 매우 편리하다. 하나의 useState 함수는 하나의 상태 값만 관리할 수 있다. useEffect 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook. 클래스형 ..

목차 리액트를 다루는 기술 (개정판) 학습 시작 리액트를 다루는 기술 (개정판) 학습 시작 사내에서 리액트를 도입하고자 리액트 관련 가장 유명한 서적인 '리액트를 다루는 기술'을 이용한 자발적인 스터디 모임을 만들었다. 까먹기 전에 다시 한번 공부했던 내용들을 정리해보고자 한다. 회차 별 공부 내용 및 일정 chapter 페이지 분량 일정(분량) 1장. 리액트 시작 33 33 1주차 모임(428) 2장. JSX 55 22 3장. 컴포넌트 83 61 4장. 이벤트 핸들링 119 58 5장. ref:DOM에 이름 달기 141 83 6장. 컴포넌트 반복 157 74 7장. 컴포넌트의 라이프사이클 메서드 171 97 8장 Hooks 189 92 2주차 모임(506) 9장 컴포넌트 스타일링 217 125 10장 ..

목차 jQuery를 이용한 스크롤 이동 JavaScript를 이용한 스크롤 이동 홈페이지나 모바일 웹뷰에서 기본적으로 많이 사용하는 TOP 버튼 클릭시, 상단으로 스크롤바 이동시키는 기능을 만들려고 한다. jQuery를 덜어내는 작업 중, 순수 JavaScript에서 어떤 식으로 작성하는지 기록해보고자 한다. jQuery를 이용한 스크롤 이동 윈도우 스크롤 이동시키기 $(window).scrollTop(0); 애니메이션 효과 주면서 스크롤 이동시키기 $('html, body').animate({ scrollTop: 0 }, 200); JavaScript를 이용한 스크롤 이동 윈도우 스크롤 이동시키기 window.scrollTop(0, 0); 부드럽게 이동하는 애니메이션 효과를 지정하여 스크롤 이동시키기...

목차 변수 바람직한 변수명 모던 자바스크립트 기초 다지기를 위한 공부입니다. let, var, const 구분이 아직도 잘 안되고, 엉터리로 되어 있는 코드 처음부터 잘 만들고 싶어 짚어 넘어가 보려 합니다. 변수 var 오래된 변수 선언 키워드로 현재는 잘 사용하지 않는 키워드이다. 예전에는 자바스크립트의 변수 선인이 var 로만 가능했었다. var 로 변수 선언을 할 경우 가장 큰 특징은 중복 선언이 가능하다는 점이다. var a = 10; console.log(a) // 결과 10 var a = 20; console.log(a) // 결과 20 var a = 30; console.log(a) // 결과 30 var 를 사용하면 중복으로 같은 변수명을 계속 선언하고 값을 넣어도 에러가 나지 않으며, ..

목차 들어가기 앞서, 버전 정보 redis-cli 명령어 자주 사용하는 명령어 📌 들어가기 앞서, 버전 정보 OS : centos-release-7-9.2009.1.el7.centos-release Redis : 6.2.6 🟠 redis-cli 명령어 redis-cli 접속 로컬에 있는 1234번 포트의 redis 서버 접속 $ ./redis-cli -p 1234 127.0.0.1:1234> 다른 서버에 있는 1234번 포트의 redis 서버 접속 $ ./redis-cli -h 192.168.123.xxx -p 1234 192.168.123.xxx:1234> redis 정보 확인 해당 redis 서버 정보 확인 (Redis 서버 정보, 현재 접속해 있는 Client 정보, Memory 정보, Redis ..