분류 전체보기76 [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. [axios] 이미지 POST 기능이 제대로 동작하지 않을때 확인사항 이슈 상황 이미지를 다른 객체들과 같이 post 요청을 보내려고 하는데 이미지 post 기능이 정상작동되지 않고 null 값을 찍힌다 1. header 에 Content-Type을 multipart/form-data 로 지정했는지 확인한다 //이미지를 넣는 axios 호출 부분 SetImg(params) { return axiosService.post("v1/files", params, { header: { "Content-Type": "multipart/form-data", }, }); }, 2. FormData로 요청하는지 확인한다. let fd = new FormData(); fd.append("key", img소스 ); //axios 호출 let val = await axiosService.Set.. 2022. 12. 2. 이전 1 2 3 4 5 6 7 8 다음 반응형
