본문 바로가기

전체 글75

[확장프로그램] 웹 사이트 컬러를 추출하고싶을때, Color Picker 추천 확장프로그램중에 퍼블리싱 및 프론트개발을 하면서 매우매우 잘 활용하고있는 도구를 추천해볼까 한다! 개발 과정에서 가끔 원하는 색상을 웹페이지에서 뽑아보고싶은경우가 많은데 그때 유용하다! 사실 다른 기능보다 그냥 컬러만 뽑아내는게 중요하기 때문에 그 기능에 특화된 웹스토어 앱을 찾았다. Native Eyedropper 이란 앱인데 정말 컬러 뽑아내는것에만 특화되어있고, 직관적이라 사용하기 매우 편리하다 해당 컬러피커를 추가해 준 후, 툴바에서 선택해서 피커로 해당 컬러를 바로 추출할 수 있다! > color picker 사이트 Color Picker - Native Eyedropper is used as a native eyedropper tool to detect the color of any pixel.. 2023. 4. 19.
[React] useEffect 와 CleanUp 작동방식 이해하기 + input 입력완료 후 감지 코드예시 useEffect 를 먼저 살펴보자면 리액트는 실제 DOM의 렌더링과 상태값의 변경을 감지해 화면에 올바르게 반응하는 것과 관련된 일을 한다. 그리고 이와 별개의 일들 즉, 호출과 통신 등 따른 기능과 그 호출에 따른 반응들의 관련된 이펙트들을 'side Effect' (사이드이펙트)라고 한다. 실제로 직접적으로 컴포넌트 함수에 들어가게 된다면 버그나 무한루프에 빠질 가능성이 높은 사이드 이펙트들은, 사이드 이펙트를 활용하기 위한 도구 useEffect를 사용해서 동작하도록 해야 한다. > useEffect 사용예시 useEffect(()=>{ // 실행 함수 넣어주는 곳 }, [ // 의존변수 넣어주는 곳 ]) useEffect는 두 개의 매개변수와 두 개의 인수와 같이 호출되며, 의존변수를 의 상태를.. 2023. 4. 9.
[React] 렌더링 상태 체크하기 (크롬 익스텐션 활용) 사실 이전에 리액트로 작업할 땐 렌더링상태를 체크할 수 있다는 사실을 몰랐기 때문에 어느 부분에서 렌더링이 되는지 몰랐었다. 하지만 막상 렌더링감지되는 기능을 깔아놓고 나니 나도 모르게 렌더링에 대해 신경을 많이 쓰게 되더라 이왕 하는거 최적화된 환경을 위해 설치 하는게 좋을 것 같았다. 크롬 웹스토어 https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 28ce1c171 on 3/22/2023... 2023. 4. 9.
[React] input 상태 업데이트 useState,useRef ref (reference) 에 대해 알아보자 ref 는 React에서 사용할 때, useRef 로 변수에 담아 사용이 가능하다. ref 기본기능을 간단하게 설명하자면 다른 DOM에 접근해서 작업이 가능하도록 해준다. ( 이외에도 활용되는 기능이 매우 많지만 input에 관해서만 적어내리도록 하겠다) useState 는 우리 모두가 알고 있듯이 React에서 상태를 관리할 수 있도록 도와주는 기능이다. // ref const ref = useRef(); // useState const [state, setState] = useState(null); useState는 이런식으로 상태가 관리된다 입력 > 상태함수 실행 > 함수로 인한 state값 업데이트 > input 필드 값 변경 ( ref에서 삭제가능 .. 2023. 4. 8.
[React] createPortal 사용해 효율적으로 모달 관리해주기 모달은 어디에 넣어야 할까? 사실 퍼블리셔로 시작한 나로써는 최적화적인 면도 중요하지만 DOM 의 구조를 잘 파악하고 체계적이고 직관적인 구조로 짜는것이 가장 베스트의 코드라 생각한다. 특히나 모달의 경우는 머리로는 구현이 쉽지만 상태 모달부터 시작해 기능과 submit 모달 등등 다양한 기능을 가지고 있다. 실시간으로 뿜어져나오는 여러 모달을 처리하기엔 최적화적인 코드를 사용하고싶지만 그것도 쉽지않다. 구조적으로 하위 내용과 div 로 감싸진 곳에선 모달을 사용하지 않는 편이 좋다. css 코드를 만지다보면 가끔 z-index 를 무작위로 사용하는 경우가 많은데 이 점을 고려하지 않고 모달작업을 하면 상위 position에 맞춰 모달이 본인에 위치를 잃어버린다. 하위에서 아무리 z-index 를 우겨넣.. 2023. 4. 8.
[javascript] 문자열을 숫자형으로 바꾸기 input 에 들어가는 모든 값들은 자동으로 type이 string 으로 바뀌어서 value 값에 찍히게 된다 이런경우 숫자형으로 변환해주는 가장 쉬운 두가지 방법이 있다. 1. Number()로 감싸준다 let stringNum = "12" let number = Number(stringNum) console.log(stringNum) // "12" console.log(number) // 12 2. string 숫자 앞에 + 를 넣어준다 let stringNum = "12" let number2 = +stringNum console.log(stringNum) // "12" console.log(number2) // 12 2023. 2. 25.
[Vue] firebase logEvent 연동하기 + Realtime 최근 하이브리드 앱을 적용하면서 기존에 사용하던 firebase 에 web 이벤트도 트래킹을 적용해야 했다. 사실 겉만 보면 좀 어렵게만 느껴지겠지만 개념만 간단하게 생각하면 매우 간단하다. (그냥 로그 찍는거다) 추후 서비스 업데이트를 위해 사용자들이 어떤 이벤트, 어디로 검색했는지를 보는것이 가능하다. 해당 코드는 Vue 내에 적용하기 쉽게 작동하도록 만들었다. 👉 firebase 설치 npm install firebase 👉 main.js const app = initializeApp(firebaseConfig(/* firebaseConfig key */)); const analytics = getAnalytics(app); const AnalyLog = (value) => { logEvent(an.. 2023. 2. 12.
[javascript] 모바일 검색창 숨기기 기능 구현 (터치 떨림 보정) 모바일에서 작동하는 검색창을 구현하려던 도중 터치아웃을 하는 순간 스크롤 감지에 의해 검색바가 깜빡이는 현상에 부딧혔다. 해당 버그를 수정하기 위해서 별의 별 짓을 다햇다.. lodash의 throttle 이나 touchout, touchstart 등등 여러가지 이벤트로 핸들링 하려고 해봤지만 깜빡이는 문제를 잡기 쉽지않았다.(스크롤이 워낙 민감하게 동작하기때문에..) 그러던 도중, 해당 글을 발견했고 jQuery 대신 javascript 로 구현한 로직을 짤 수 있었다. 사실, setInterval을 쓸 생각은 하지도 못했는데 덕분에 좋은 기능 구현을 할 수 있었다. :-) javascript var didScroll; var lastScrollTop = 0; var delta = 5; var navb.. 2023. 1. 30.
[CSS] 스켈레톤UI 적용하기 (체감 로딩시간) 스켈레톤 UI : skeleton 스플래시 스크린이나 트로버는 단순히 로딩 중임을 알려주기 때문에 사용자들은 언제쯤 로딩이 완료될지 아무런 추측을 할 수 없다. 반면, 스켈레톤 스크린은 완전히 로드된 페이지의 모습을 대략적으로 흉내내어 나타내기 때문에, 사용자에게 실제 로딩 진행 과정을 어렴풋이나마 보여주어 사용자의 체감 로딩시간을 줄일 수 있게 된다. 로딩할 각종 미디어 자원이 많은 유튜브, 페이스북 등에서 사용하고 있다. * 참고 스켈레톤 스크린 - 나무위키 이 저작물은 CC BY-NC-SA 2.0 KR에 따라 이용할 수 있습니다. (단, 라이선스가 명시된 일부 문서 및 삽화 제외) 기여하신 문서의 저작권은 각 기여자에게 있으며, 각 기여자는 기여하신 부분의 저작권 namu.wiki HTML CSS .. 2023. 1. 30.
masonry / infinite scroll / imagesLoaded 활용하여 핀터레스트 | 네이버 이미지 리스트화면 구현하기 벽돌처럼 차곡차곡쌓아진 디자인을 masonry 라고 이야기한다. 이번엔 사이즈가 제각각 다른 이미지를 활용해 이런 피드리스트를 구현해보았다. 추가로 스크롤링시 다음 페이지를 호출하는 방식을 사용했다. (infinite scroll) masonry 만 사용한 경우 발생되는 문제점이 애초에 해당 프로젝트는 pull-refresh 를 사용하고 있어서 제대로 영역을 감지 못하는 상태였다. 게다가 데이터 내부에 이미지를 받아오자마자 뿌려주다보니 이미지가 완전히 load 되기 전에 레이아웃이 실행되어 높이 영역이 계속해서 겹치는 현상이 발생했다. 그럼 어떻게 해결할 수 있을까? 라는 생각을 이것저것 해보다가 이미지가 완전히 load 되어 높이가 지정되었을 때, 적용하면 문제없이 구현이 가능할것이라고 생각했다. 사용.. 2022. 12. 9.
[React] 클릭(click)이벤트 기초정리 onClick react에선 이벤트 함수들은 'on~'으로 시작한다. 때문에 click 이벤트를 발생시키려면 onClick 이벤트를 호출해야하는데 onClick을 사용할때 함수명을 clickHandler 또는 clickHandler() 로 선언하는것에 차이가 있다. 보통 react에선 ()를 통해 함수를 식별하기 때문에 ()괄호를 붙여서 함수를 이벤트에 넣은 경우 JSX가 읽혀질때 click이벤트로 같이 호출된다. 때문에 click 시에만 동작하게 하려면 괄호를 제거하고 사용해야한다. 👉 예시 import React from "react"; import Card from "../UI/Card"; import ExpenseDate from "./ExpenseDate"; import "./ExpenseIte.. 2022. 12. 4.
[axios] 엑셀 파일 다운로드 기능 구현하기 엑셀 파일 다운로드 javascript 를 사용하여 a 태그에 받은데이터를 넣어서 동작 구현이 가능하다. api에 속성과 입력값에 따라 params 값을 설정해주고 responseType 을 설정해준다 axios({ url: "/report", methods: "GET", params: { year: this.year, month: this.month, xls: "Y", xlsLimit: "300" }, responseType: "blob" //responseType 설정 }).then(res => { const url = window.URL.createObjectURL(new Blob([res.data])); const link = document.createElement("a"); link.href .. 2022. 12. 4.
반응형

티스토리툴바