웹개발 블로그

React.js를 보다 더 강력하고 편하게 사용할 수 있는 기능들을 제공함 Next.js (리액트의 확장판) = 리액트js + 페이지 라우팅 빌트인 최적화 기능 다이나믹 HTML 스트리밍 미국의 Vercel이라는 회사에서 개발해서 현재 오픈 소스임 세계적으로 대단한 기술 ex 인프런도 Nextjs 이런 사랑을 받는 이유는? - Nextjs는 라이브러리가 아닌 프레임워크이기 때문이다. Nextjs는 Reactjs 전용의 웹 개발 프레임워크 Reactjs는 UI 개발을 위한 JS "라이브러리" ========================================= 0. 프레임워크 VS 라이브러리 - 🚨기능 구현의 주도권이 누구에게 있는가? 주도권이 개발자에게 있다 : 라이브러리 주도권이 개발자에..

1. State 변경2. Props (자식 컴포넌트는 state가 없어도 props가 변경되면 리렌더링 된다.)3. 부모가 리렌더링 발생시 자식도 리렌더링 발생함.(1,3번이 합쳐지는 현상)ㄴ 성능이 안 좋아 질 수 있음.ㄴ 관련이 없다면 따로 컴포넌트로 만들어주는게 좋다.

useRef 특징1.새로운 Reference 객체를 생성하는 기능2. const refObject = useRef();ㄴ refObject 변수는 '컴포넌트 내부의 변수'라고 보면된다. 해당 요소(컴포넌트)를 접급하여 조작하는 것도 가능하다. 3. 렌더링에 연향을 주지 않는다.💥선언const refObj = useRef();console.log(refObj)//{current:undefined} 💥 저장ref={refObj}설명 : refObj 레퍼런스 오브젝트에 저장됨. const refObject = useRef();...💥 접근refObj.current useRef와 useState는 컴포넌트 내부의 변수로 활용 가능1. 둘다 변수임(공통)2. 단, useState는 값이 변경되면 컴포넌트 리..

Event웹 내부에서 발생하는 사용자의 행동ex) 버튼 클릭, 메시지 입력, 스크롤 등 Handling다루다, 취급하다, 처리하다. ⭐Event Handling(이벤트 핸들링)이벤트가 발생했을 때 그것을 처리하는 것. (웹에서 발생하는 사용자 행동을 처리하는 것)ex1) 버튼 클릭 시 경고창 노출ex2) 콘솔의 메시지를 출력 정리클릭과 같은 이벤트가 발생했을 때 실행될 수 있도록 설정된 이러한 함수를 이벤트 핸들러라 부른다.이벤트 핸들러 : 이벤트를 클릭과 같은 이벤트들을 실질적으로 처리하는 함수익명함수 OR 화살표 함수 👀예제//클릭과 같은 이벤트가 발생했을 때 실행될 수 있도록 설정된 이러한 함수를//이벤트 핸들러 : 이벤트를 클릭과 같은 이벤트들을 실질적으로 처리하는 함수//익명함수 OR 화살표 ..

🔽eslint.config.js "no-unused-vars":"off","react/prop-types":"off"

프로그램을 개발할 때 필요한 다양한 기능들을 미리 만들어 모듈화 해 놓은것.npm 백화점 https://www.npmjs.com/ npm | HomeBring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Javawww.npmjs.com 검색창에 react를 입력해보면react에서 사용가능한 라이브러리들이 검색된다. ..

에러 메시지require is not defined in ES module scope, you can use import instead 경로원인common JS 모듈과  ES 모듈 시스템을 같이 사용할 수 없기 때문에 발생ㄴ 이런 에러를 마주치면 모듈 시스템을 착각하지는 않았는지 생각해보자!해결책순서1 : pakage.json 파일 열기순서2 : 맨 아래 중괄호 닫는 부분 위에 쯤 "type" : "module"입력하기

🔽이전 게시글 - Promisehttps://hyeonddobbi.tistory.com/456 [JS] Promise - 비동기 작업을 효율적이게 처리할 수 있는 JS 내장객체🔽콜백함수 사용법https://hyeonddobbi.tistory.com/454 [JS] 비동기 작업 - 콜백함수 사용하여 처리callback함수를 통해 바깥에서도 내부에 선언한 변수 사용가능하다.[예시1]3초뒤 sum 값 출력 add함수가 실hyeonddobbi.tistory.com✅asysn / await 키워드 사용async 키워드함수 앞에 붙는 키워드어떤 함수를 비동기 함수로 만들어주는 키워드함수가 프로미스를 반환하도록 반환async function getData(){//async 키워드를 통해 비동기 함수로 변환 ..

🔽콜백함수 사용법https://hyeonddobbi.tistory.com/454 [JS] 비동기 작업 - 콜백함수 사용하여 처리callback함수를 통해 바깥에서도 내부에 선언한 변수 사용가능하다.[예시1]3초뒤 sum 값 출력 add함수가 실행되면서, 내부에 있는 비동기함수가 실행된다.3초뒤  sum이 계산되고 인자값으로 sum을 주hyeonddobbi.tistory.com  ✅Promise비동지 작업을 효율적으로 결과를 처리할 수 있도록 도와주는자바스크립트의 내장 객체 Promise의 효능비동기 작업 실행비동기 작업 상태 관리비동기 작업 결과 저장비동기 작업 병력 실행비동기 작업 다시 실행기타 등등.....형태Promise 객체 안에서 ㄴ 비동기 작업(ex. setTimeout) 작성 3가지 상태 ..

체크박스가 3개 있는데현재 보여지고 있는 화면에 체크박스가 있으면 위치이동을 하지 않았나 스크롤위치가 중앙으로 이동하고 싶은데 왜 안될까?(화면에서 해당 컴포넌트가 보이는 상황, 사용자가 보기 편하게 중앙으로 스크롤이 이동했으면 하는 바람..) 일단 기록용으로 적어보겠다.1. 부모 컴포넌트 > 자식 컴포넌트ㄴ useRef , forwardRef https://hanna-log.tistory.com/entry/forwardRef-%EC%9E%90%EC%8B%9D-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%97%90-ref%EB%A5%BC-%EC%A0%84%EB%8B%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95 forwardRef: 자식 컴포넌트에 re..