본문 바로가기

FrontEnd

 (96)
URL과 URLSearchParams 출처:https://www.zerocho.com/category/HTML&DOM/post/5b3ae84fb3dabd001b53b9ab 이번 시간에는 HTML5의 URL과 URLSearchParams 객체에 대해 알아보겠습니다. IE에서는 안 되지만, 모던 브라우저에서는 사용할 수 있는 기능입니다. 웹은 주소를 기반으로 동작하기 때문에 주소를 자유자재로 다룰 수 있으면 좋습니다. 특히, 쿼리스트링(sear부분)을 파싱하는 것과 같은 귀찮은 작업을 간단히 처리할 수 있어 편리합니다. 노드의 url 모듈과도 비슷합니다. 사용 예시를 봅시다. URL 생성자에 주소를 넣어 인스턴스화하면 됩니다. const url = new URL('https://www.zerocho.com:8080/category/HTML');..
useCallback에 관하여(fetch예시 나옴) 요약: useCallback은 2개의 인자를 취한다. 첫번째인자는 함수이고 두번째 인자는 배열이다. 그리고 배열의 값중 어느 하나라도 변경되었을때만 첫번재 인자로 전달된 함수 자체가 다시 반환된다. (우선 React.memo 예시는 제외하고 봄) 출처: https://www.daleseo.com/react-hooks-use-callback/#google_vignette React Hooks: useCallback 사용법 이번 포스팅에서는 useMemo() 함수와 더불어 성능 최적화에 사용되는 React의 useCallback() hook 함수에 대해서 알아보겠습니다. 함수 메모이제이션 useCallback()은 함수자체를 메모이제이션(memoization)하기 위해서 사용되는 hook 함수입니다. 첫번째..
hooks의 userState와 useRef의 다른점 hooks의 userState와 useRef의 다른점useState, useRef모두 DOM을 직접적으로 건드릴때 사용된다. 하지만 상태를 변화시킬때 setState를 사용하면 (return 문안에서)리랜더링이 되지만 useRef에 관한 상태변경은 리랜더링을 하지 않는다. ㅈ 따라서 화면은 바뀌길 원하지 않고 값만을 바꾸고 싶은 경우 useRef를 사용하면 됩니다!!!!
클래스 컴포넌트의 state속성에 대하여, ref 속성에 대하여 클래스 컴포넌트 안의 state역시 속성(property)이다. 그리고 클래스 컴포넌트의 속성은 변수와 같은 개념이라고 우선은 알아두자. 리엑트에서 데이터는 1. 변수에 넣거나 2. state에 넣는다. 리엑트를 웹앱처럼 동작하게 만들고 싶다면 중요한데이터는 state를 사용한다. state로 등록된 데이터가 바뀌면 그것은 곧 새로고침 없이도 리랜더링된다. 변수와 state로 관리되지 않는 것은 변경되어도 자동 re-rendering이 되지 않음. ====================================================================================== useState만 사용하면 해당 인수가 prop이 변경될 때마다가 아니라 처음에만 사용되기 때문에 작동하..
import와 require의 공통점과 차이점 그리고 module.exports와 export default 의 공통점과 차이점에 대하여 참고: https://velog.io/@ylyl/React-import-require React관련 동영상을 보면 어느곳에서는 import, export default를 사용하고 어느 동영상에서는 require, module.exports를 사용하는데, 시험삼아 두개를 서로 바꾸어 보아도 정상적으로 동작을 하였다. 이런 것을 보고 이것들의 차이점은 무엇인지 궁금하여 이글을 쓰게된다. 요약: import : es2015(React) 모듈 문법으로 정적 import 로써 항상 파일 상단에서만 사용된다. 이에반해 require은 Node의 모듈 문법(common.js)으로 동적 import에 해당하며 파일 어디에서나 사용가능하다. 쉽게 생각해서 React에서는 import 가 필요할때는 require를 쓰면 ..
React launch2! (매우중요) 출처:https://www.youtube.com/watch?v=6GECT2Jrr_g (실습 내용은 내 프로젝트파일인 REACTPROJECTS를 참고) pages폴더와 그 안에 Home.js파일을 만듬 // import React from "react"//jsx문법을 쓰기위해 필요함 // //JSX문법은 HTML태그를 사용할수 있으므로 아래와 같은 것을 return하는게 가능한 것임 // //함수형 컴포넌트의 예 // function Home(){ // return Home화면입니다. // } // export default Home; //클래스형 컴포넌트의 예 import React, {Component} from "react"; class Home extends Component{ render(){//..
npm에 대하여 출처: https://m.blog.naver.com/magnking/220961896609 npm은 Node Packaged Manager의 약자! 먼저 Node는 Node.js를 의미하는 것 같습니다. Packaged라는 것은 package로 만들어진 것들을 의미하는 것 같습니다. package는 모듈이라고도 불리는데 패키지나 모듈은 프로그램보다는 조금 작은 단위의 기능들을 의미합니다. 그리고 Manager는 잘 아시는 것처럼 관리자를 의미합니다. 이걸 합쳐보면 npm이라는 것은 Node.js로 만들어진 pakage(module)을 관리해주는 툴이라는 것이 됩니다. 이름처럼 npm은 Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램입니다. 개발자는 단 몇 줄의 명령어로 기존에 ..
자바스크립트의 this #자바스크립트 this #js this 출처: https://poiemaweb.com/js-this (this뿐만 아니라 apply/call/bind까지다루고 있다) 요약: Java와 달리 자바스크립트의 경우 Java와 같이 this에 바인딩(식별자와 데이터를 연결)되는 객체는 한가지가 아니라 해당 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라진다. 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다(하지만 내 생각에는 어떻게 호출했는가 뿐만 아니라 어떻게 선언 되었는가도 영향을 주는것 같다. 아래의 예시를 보면 객체안에 함수표현식 방식으로 선언된 함수에서의 this는 해당..

티스토리툴바