본문 바로가기

분류 전체보기321

useSWR 정리 슬랙 클론 코딩을 진행하다가 아직 개념이 잘 이해가 되지 않아서 ... 데이터 fetch 를 위한 훅 SWR (Stale While Revalidate) 캐시를 재검증하는 동안 기존에 캐시된 데이터를 사용하게 하는 기술 캐시된 데이터를 활용할 수 있게 하여 데이터를 계속 호출하는데 시간을 쓰지 않고 캐시된 데이터를 이용하여 효율적으로 동작한다. 그리고 전역 상태관리에도 유용 react-query 라이브러리도 비슷한 기능을 수행한다고 함 axios는 필요할 때마다 api를 호출해야 데이터가 갱신되는데 반해, SWR은 포커싱을 다른 곳으로 옮겼다가 돌아오더라도 자동으로 재검증을 통하여 갱신을 해준다는 장점이 있다고 한다. 그래서 설정에 따라 원하는 순간과 주기로 재검증 하는 것도 가능하다고 함 useSWR은.. 2023. 4. 23.
팀플을 하면서 시도했던 드래그앤드롭 코드들.. 결국 dnd 라이브러리로 성공은 했지만 노가다와 삽질한 흔적을 남겨본다... // 드래그앤드롭 시안 1 const [originPos, setOriginPos] = useState({ x: 0, y: 0 }); const [clientPos, setClientPos] = useState({ x: 0, y: 0 }); const [pos, setPos] = useState({ top: 100, left: 0 }); const draggingRef = useRef(null); const draggingOverRef = useRef(null); const dispatch = useDispatch(); const onDragOver = e => { e.preventDefault(); }; const onDrag.. 2023. 4. 22.
슬랙 클론 코딩 - 1 백엔드 세팅해주기 MySQL : database(==Schema) -> table -> row 계층 구조 더보기 질문 잘하기! - 에러 메세지를 정확히 - 코드를 보여준다 - 줄넘김, 들여쓰기를 제대로한 코드를 첨부 - 어떤 작업을 하는 코드인지 - OS나 버전 기재 - 이미 시도해본 것들은 미리 기재 프론트 기본 세팅하기 .eslint .prettierrc 등 기본 파일 컴파일? tsc -> js tsc -> babel -> js ✔️ babel 과 webpack 설정 .. 아니 무슨 세팅이 이렇게 어렵나......그냥 따라치기만 했음 아직은 너무 어려운 개념 같다.. 코드 스플리팅 보통 웹팩에 의해 자바스크립트 파일은 하나의 파일로 합쳐지게 되는데 모든 자바스크립트를 묶어서 빌드하면 파일의 크기가 커.. 2023. 4. 21.
타입스크립트 기초 인터페이스 키워드 : interface 인터페이스명은 보통 i- 접두사를 붙여줘서 명명하지만 타입스크립트에선 지양한다. 그리고 첫글자는 대문자를 사용해준다. interface 인터페이스명 { 키: 타입; 키: 타입; ... } interface Student { studentID :number; studentName :string; age :number; gender :string; subject :stirng; courseCompleted : boolean; } 명시된 인터페이스는 타입처럼 사용해줄 수 있다! 인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 그 값으로 가지도록 강제된다! function getStudentDetails(studentID :number) :Student { retur.. 2023. 4. 20.

티스토리툴바