분류 전체보기 (200) 썸네일형 리스트형 [week7] useEffect, customHook 안녕하세요 OB 김건휘입니다🌊. 이번 시간에는 useEffect 훅을 딥다이브 해보는 시간을 가져보도록 하겠습니다. 📌Effect란? 즉, effect는 컴포넌트가 렌더링된 이후 특정 작업을 수행하기 위한 도구를 의미한다. 이를 구현하기 위해 useEffect 훅을 사용하며, 이는 리액트 함수형 컴포넌트에서 부작용(side effect)을 처리하는 방식이다. 📌부작용(Side Effect)이란?부작용은 컴포넌트의 렌더링 외에 발생하는 모든 작업을 의미한다.API 호출 (데이터 가져오기/저장하기)구독 설정/해제 (실시간 통신, 이벤트 리스너 등)DOM 수정 (DOM 직접 접근)타이머 설정 (setInterval이나 setTimeout 사용) 🧐왜 useEffect의 호출을 두 번 수행할까?//App.. [Week 06 🤝] CICD 안녕하세요! 물결웨비 OB 박채연입니다! 😋 이번주차 호기심스 주제가 CICD였는데요,가현이랑 협의 후(?) 제가 CI 부분, 그 중에서도 테스트 부분을 중점적으로 다루게 되었습니다!현업에서는 많이 사용한다고 하지만, 직접 사용하는 걸 본 적이 없어서 더 어려웠지만 ,, 그래도 언젠가는 공부해야 할 내용이니까 !이번 기회에 한번씩 눈에 익혀두면 도움이 되지 않을까 생각합니다! 🤔 정말 어렵고 햄드네요 ..배도 고프네요 .. 모두모두 파이팅 ! https://www.notion.so/chaeneey/CI-f567a39d19e94e21b67376d37b167199#153de3f57d0e80ac87e9e0cb0d41744b CI - 테스트 코드 및 테스트 자동화 | Notion👇🏻 테스트 코드에 대.. [week 6] CI/CD 안녕하세요 ~ YB 김가현입니다 😶6주차 CI/CD에 관한 아티클인데요 ! 저는 CD 부분을 위주로 작성하였습니다.간략하게 CD가 무엇인지, 어떠한 플랫폼들이 있는지, Github Actions를 통한 자동화와 AWS S3 배포 실습까지 준비해보았습니다 ..! 이따 저녁에 만나요 ~!!!!!(실습이 상당수를 차지할 것 같아, 관련 내용은 조금 더 다듬어서 올려두도록 하겠습니다) [week 6] CI/CD | Notion프론트엔드 관점에서의 CI/CD 알아보기toothsome-coaster-0a4.notion.site [Week 05] 프로토타입과 클래스 상속, 객체지향 안녕하세요~~ 오랜만에 돌아온 자스핑입니다!!이번주는 프로토타입, 클래스, 상속, 객체지향에 대해 알아보았습니다. 프로퍼티 프로토타입 프로토타입 프로퍼티 프로퍼티 프로토타입 프로토타입 프로퍼티 😵💫😵😵💫😵시작합니다!!! https://harsh-lunge-188.notion.site/1522ba38c24180248fdef85fe382e814?pvs=4 프로토타입과 클래스 상속 + 객체지향 | Notion19장 - 프로토타입harsh-lunge-188.notion.site [week 05] 프로토타입 안녕하세요! 물결웹팟 OB 박채연입니다 😋 이번주차 .. 정말 어려운 개념인 프로토타입 / 클래스 상속 / 객체 지향에 대해 공부한 내용 가져왔습니다!이해하면서 정리하느라 정신없는 노션 글이 되었네요 허허.이번주차도 빠이팅 ,,, 이 내용을 언젠가는 술술 말할 수 있길 🙏🏻🧎🏻♀️ https://chaeneey.notion.site/009bf99de6054d9b8314843137685c2c?pvs=4 프로토타입 / 클래스 상속 / 객체지향 | Notion프로토타입chaeneey.notion.site [Week 05] 프로토타입과 클래스 상속 안녕하세요 YB 김고은입니다! 오늘은 19장 전반에 걸친 프로토타입과, 25장 일부에 나와있는 클래스 상속을 다뤄보도록하겠습니다책의 범위는 다음과 같습니다. 프로토타입 19장 (p.260-311)클래스 상속 25장 (p.448 - 466 ) 특히, 프로토타입의 경우에 객체 상속이 포인트인거 같아서프로토타입으로 상속하는 이유랑 간접 참조를 위주로 작성해보겠습니다클래스 상속의 경우, 상속 주고 받는 형식을 위주로 작성했습니다 :) 프로토타입객체 지향 프로그램 언어인 자바스크립트의 핵심 개념인 상속은, 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속 받아 그대로 사용할 수 있는 것을 말한다 이때 JS는 프로토타입을 기반으로 상속을 구현해서, 중복을 제거하는데 이 방식에서 기존의 코드를 적극 활용하는.. [Week 6] React Profiler, React.lazy, Debounce, Throttle 1. React ProfilerReact Profiler는 React Developer Tools의 일부로 제공되며, 애플리케이션 렌더링 성능을 측정하는 데 도움을 준다.성능을 측정하고자 하는 부분을 녹화한 후 중지를 누르면 컴포넌트별 렌더링 여부와 렌더링 시간 등을 볼 수 있다. Profiler 사용법import { Profiler } from 'react';function App() { return ( );}onRender 콜백 함수onRender 콜백 함수는 Profiler가 렌더링이 완료될 때마다 호출되며, 이 함수는 렌더링된 컴포넌트의 성능 데이터를 제공한다.onRender 함수는 다음과 같은 입력값을 받는다.id: 렌더링된 프로파.. 🏄♀️ 리심스 6주차 - 리액트 성능 최적화 성능 최적화 방법 몇 가지를 소개해보겠다.1. React Profiler는 프로그래밍 방식으로 React 트리의 렌더링 성능을 측정할 수 있다. Propsid: 성능을 측정하는 UI 컴포넌트를 식별하기 위한 문자열onRender: 프로파일링된 트리 내의 컴포넌트가 업데이트될 때마다 React가 호출하는 onRender 콜백으로, 렌더링된 내용과 소요된 시간에 대한 정보를 받고 있다. onRender 콜백render 함수의 파라미터들의 의미는 각각 다음과 같다.function onRenderCallback( id, // 방금 커밋 한 프로파일 러 트리의 "id"소품 phase, // "mount"(트리가 방금 마운트 된 경우) 또는 "update"(다시 렌더링 된 경우) actual.. 이전 1 2 3 4 5 6 ··· 25 다음
