프론트엔드 킹왕짱이될테다 프론트엔드 킹왕짱이될테다

움직일 수 있는 태그 보이지 않음 this is a parfagraph 네이버 구글 개발자의 품격 order href 는 글로벌은 아님... --- 그리고 대표적인 local attribute 구글 구글

(1) Map key, value를 저장 (key에 어떤 데이터타입도 다 들어올 수 있다는 점이 객체와의 차이점 ) Map 은 키가 정렬된 순서로 저장됨 기능: 검색 및 추가(Set) , 삭제(delete), 제거(clear) , 존재여부확인(size) const myMap = new Map(); myMap.set("key","value")

ES6의 큰 특징으로 유명한 것들 말고, 찐으로 내가 몰랐던 문법들이다. 나머지 매개변수 function func(a,b,c, ...args){ console.log(...args) } func(1,2,3) func(1,2,3,4,5,6,7) /// 매개변수로 더 많은 파라미터들이 들어올 수 있다는 의미 일급객체로서의 함수 // 1. 변수에 함수를 할당할 수 있다. -> 함수가 마치 값으로 취급, 함수가 나중에 사용될 수 있도록 조치가 되었다. const sayHello = function () { console.log("hello") } // 2. 함수를 인자로 다른 함수에 전달할 수 있다. function callFunction(func) { func() // 매개변수로 전달받은 변수가 사실 함수다...

e.key 가 "Enter" 일 때 실행 할 함수를 넣을 수 있다. const enterPressHandler = (e: any) => { if (e.key === "Enter") { searchHandler(); // 이게 실행할 함수 } }; ... setSearchKey(e.target.value)} value={searchKey} onKeyDown={enterPressHandler} /> + 23/12/24 추가 export const enterToProcess=( e : any, func: ()=>void )=>{ if (e.key === "Enter") { func(); } }; 내 생각엔, 이렇게 util 함수로 빼놓고 파일 전체에서 불러서 써도 될 것 같다. 다져다 쓸 땐 이런식으로!! e..

이건 녹음 중에 사용자가 말을 멈춘 것이 감지되면 녹음을 자동으로 종료하는 기능이다. 하루하고 반나절을 걸려서 만들었다😭 분명 더 효율적인 방법이 있을 것 같은데 다른 사람들이 올려놓은 코드 이해도 못하고 갖다 쓰기 싫어서 그냥 만들었다. 1. 가장 먼저, 처음엔 컴포넌트로 recordWithDecibel을 만들어 데시벨이 잘 측정되는지를 확인했다. 신기한 것은? 여기서 mediaRecorder를 쓰지 않음 리액트의 기능만으로 구현됨 2. 녹음시작 후 데시벨이 잘 측정되는것이 확인된 후, return아래 jsx를 다 떼고 컴포넌트에서 커스텀 훅으로 만들었다. 이것이 바로 그 커스텀 훅. // useRecordWithDecibel.ts import React, { useEffect, useRef, useS..

자동로그인기능을 넣어달라는 요청을 받았다. 어떻게 구현할 수 있을지 고민하다가 네이버를 뜯어보기로 했다. 네이버 로그인시에 auth라는 요청이 생긴다. 페이로드는 이렇게 생겼다. revalidateOnReconnect 이걸로 자동로그인을 결정하는가했더니 아니었음 자동로그인 체크 한거랑 안한거 둘 다 false로 보내주고있음. 네이버도 쿠키로 로그인JWT토큰을 저장하는데 Max-age를 컨트롤해서 자동로그인 or 일회성 로그인을 하고있었던 것을 발견했다 자동로그인을 안하면 NID-JKL, NID_SES, NID_AUT 이 세개가 "세션"이고 자동로그인 하면 NID-JKL, NID_SES, NID_AUT 이 세개가 max-age가 생기는걸 알 수 있다. 했을 때 , 안했을 때 토큰을 뜯어보니 똑같았다. 하나..

이번 프로젝트에서 react-slick을 이용해 캐러셀을 구현하였고, apex-charts를 이용해 그래프를 그렸다. react-slick import import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; 세팅을 만들어준 다음, 태그에 세팅을 넣어준다. const StoryPageFinder: Settings = { slidesToShow: 5, arrows: true, nextArrow: , prevArrow: , infinite: false, vertical: true, slidesToScroll: 3, speed: 600, }; ... styled components에서도 이게 지원됨 Styled..

https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa (JavaScript) 쓰로틀링과 디바운싱 안녕하세요. 이번 시간에는 쓰로틀링(throttling)과 디바운싱(debouncing)에 대해 알아보겠습니다. 원래 예정에 없던 강좌이지만 요청을 받았기 때문에 써봅니다. 프로그래밍 기법 중 하나입니다(아니 www.zerocho.com 연속클릭 방지 구현시에 활용하기

중첩 라우팅...........

react-error-boundary 오늘 집에가서 열공빡공해보기 index.tsx const queryClient = new QueryClient({ defaultOptions: { queries: { retry: 0, useErrorBoundary: true, refetchOnWindowFocus: false, onError: () => {}, }, mutations: { useErrorBoundary: true, }, }, });

파라미터가 있다? 콜백함수

React Query https://tanstack.com/query/v4/?from=reactQueryV3&original=https://react-query-v3.tanstack.com/ TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue tanstack.com 리액트쿼리는 기존의 client state를 다루는 상태관리 라이브러리들과 다르게 sever state를 Fetching, Caching, 비동기적으로 업데이트 ..

console.log(3) //side effect const A = () => { //mount console.log(1) //update useEffect(()=> { console.log(4) },[]) //render return ( {console.log(2)} 1 ) } //31241 리액트 렌더링의 순서 mount -> render -> update -> mount (상태가 업데이트되면 mount가 다시 이뤄진다.) 마운트되는 상황 1. 부모컴포넌트의 update 2. 전역상태가 바뀜 3. 내부상태가 바뀜 4. 프롭스가 변경됨 side effect 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위 React에서는 side-effect처리를 위해 useEffect()함..

1. recoil install yarn add recoil 2. index.js에 Recoil Root 추가하기 import { RecoilRoot } from "recoil"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); 3. recoil폴더를 만들고 Atom.jsx import { atom } from "recoil"; export const Atom = atom({ key: "textState", // 유니크한 이름 짓기 default: { name: "LeeCJ", age: 30, }, // default value (aka initial value) 이니셜스테이트 }); default에 초깃..

컴포넌트를 분리하여 구조를 개선을 하는 이유: 코드의 가독성과 유지보수성을 향상시켜 코드 퀄리티를 올리기 위해 면접을 보러갔다가 컴포넌트 구조와 관련해서 좀 더 개선해보면 좋을 것이라는 조언을 받았습니다. 어제 하루는 FE팀원들과 상의하여 어떤 방식의 컴포넌트 구조가 좋은 것인지 각자 찾아보고 고민하는 시간을 가졌고, 오늘부터 수정을 시작했습니다. 리액트 공식홈페이지에서는 아래와 같이 컴포넌트를 표현하고있습니다. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. 컴포넌트는 UI를 독립적이고, 재사용 가능한 부분으로 분리해주며 각각을 고립시켜 생각할 수 있게 해줍니..