분류 전체보기328 [리액트] 리액트에서 이벤트 처리 (자주 사용하는 이벤트 핸들러 5가지) 1. 마우스 이벤트 onClick과 인자 전달 👉 onClick: 클릭하면 특정 함수가 실행되도록 하는 이벤트 핸들러 예시1) onClick 핸들러가 실행될때 즉 해당 요소를 클릭했을때 changeText라는 함수가 실행된다 import React from 'react' import { useState } from 'react' const Click = () => { const [text, setText] = useState('Hello') const changeText = () => { setText('Bye') } return ( { text } 클릭 ) } export default Click 예시2) 전달해주고싶은 인자가 있는 경우 화살표 함수를 핸들러에 바인딩한 후 인자로 넘겨준다 import .. 2022. 8. 9. [자바스크립트] 이벤트 총정리 (이벤트 종류, 이벤트 핸들러와 리스너, 버블링과 캡처링을 이용한 이벤트 위임) 이벤트란? 사용자나 브라우저가 자바스크립트를 사용해서 HTML 페이지(정확히 말하면 DOM)를 조작하는 것 이벤트는 사용자의 액션에 의해 발생한다 (마우스 클릭, 키보드 누르기, 페이지 불러오기 등) 이벤트가 발생하면 함수에 연결되며 해당 함수는 이벤트가 발생되면 실행된다 이벤트는 웹문서 영역 안에서 이루어지는 동작만을 의미한다 이벤트 종류 1. 페이지 로딩 이벤트 속성 설명 load 페이지의 로딩이 끝났을때 이벤트 발생 unload 현재 페이지에서 다른 페이지로 이동할때 이벤트 발생 resize 페이지 크기가 변경되었을때 이벤트 발생 scroll 페이지 화면이 스크롤 되었을때 이벤트 발생 abort 페이지 로딩이 중간에 중단되었을때 이벤트 발생 2. 마우스 이벤트 속성 설명 click 요소에 마우스를 .. 2022. 8. 9. [리액트] 클래스형 컴포넌트 라이프사이클 메서드 componentDidUpdate 예제 componentDidUpdate 문법 componentDidUpdate(prevProps, prevState) { // 업데이트 되기 이전의 Props, State 값을 받아옴 // 업데이트 된 값과, 업데이트 되기 이전의 값을 직접 비교해서, 함수를 실행시킴 // 모든 props, state 값중 하나라도 변경사항이 있을 경우 실행할 코드를 이곳에 넣는다 if (this.props.num !== prevProps.num) { // 특정 값이 업데이트 되었을 경우 실행할 코드를 이곳에 넣는다 // num 이 업데이트되었을 때 실행할 코드 } } 예제 import React, { Component } from 'react'; class Comp extends Component { constructor(p.. 2022. 8. 9. [리액트] 클래스형 컴포넌트 라이프사이클 메서드 componentDidMount 예제 componentDidMount 문법 componentDidMount() { // 렌더링 시 실행될 코드 } 예제 import React, { Component } from 'react'; class Comp extends Component { constructor(props) { super(props); this.state = { num: 0 } } // 랜더링시 실행되는 메서드이므로 화면에 컴포넌트가 출력되기 전에 num의 state 값이 10으로 변경된다 componentDidMount() { this.setState({ num: 10 }); } render() { return ( // 최종 출력되는 num 값은 10이다 {this.state.num} ); } } export default Comp; 2022. 8. 9. [리액트] 라이프사이클 useEffect와 componentDidMount, componentDidUpdate, componentWillUnmount 비교하기 1. mount 컴포넌트가 브라우저에 렌더링될 때 실행 componentDidMount componentDidMount() { // 렌더링 시 실행될 코드 } useEffect와 빈배열 useEffect(컴포넌트가 브라우저에 렌더렝될때 실행할 함수, []); 2. update 컴포넌트 내부 특정 요소가 업데이트될 때 실행 componentDidUpdate componentDidUpdate(prevProps, prevState) { // 업데이트 되기 이전의 Props, State 값을 받아옴 // 업데이트 된 값과, 업데이트 되기 이전의 값을 직접 비교해서, 함수를 실행시킴 // 모든 props, state 값중 하나라도 변경사항이 있을 경우 실행할 코드를 이곳에 넣는다 if (this.props.num.. 2022. 8. 9. [리액트] 클래스형 컴포넌트에서 일반함수, 화살표 함수 사용하는 방법 방법 1) 화살표 함수 사용 클래스에서 화살표 함수를 사용하는 방식은 정식 클래스 컴포넌트 문법은 아니다 다만 일반 함수를 사용할 경우 bind를 해줘야하는 번거로움이 있기 때문에 자주 사용한다 import React, { Component } from 'react' class Count extends Component { state = { number: 0 } countUp = () => { this.setState({ number: this.state.number + 1 }) } render() { return ( { this.state.number } +1 ) } } export default Count 방법 2) 일반 함수 사용 정식 클래스 컴포넌트 문법은 constructor를 사용해 state.. 2022. 8. 9. [Vue] 스타일 데이터 바인딩시 케이스스타일 문제 해결하기 Vue에서 데이터를 바인딩할때는 대쉬 케이스(dash case) - 기호를 가진 데이터를 사용할 수 없다. 대신 카멜 케이스(camel case)를 사용하면 자동으로 스타일 속성에 알맞게 변경이 된다. 또는 대쉬 케이스를 따옴표로 묶어주면 사용이 가능하다. 1. camel case 사용 2. 따옴표로 대쉬 케이스를 묶어준 후 사용 결과 2022. 8. 9. [Vue] 데이터값을 바인딩해서 클래스 이름 요소에 부여하는 방법 클래스 이름으로 데이터를 바인딩하기 위해서 :을 class 앞에 부여하였다 absolute는 false이므로 class 이름으로 들어가지 않고 fixed는 true이므로 class 이름으로 들어간다 참고로 객체에서 key와 value의 이름이 같을때 하나를 생략해줄 수 있다 결과적으로 아래의 코드와 같은 결과물이 나온다 2022. 8. 9. [웹개발] 인터넷 속도 강제로 느리게 만들기 (로딩 애니메이션 테스팅시 유용) 1. 개발자 도구 (Ctrl + Alt + i 또는 마우스 오른쪽 클릭 후 개발자 도구 선택)으로 들어간 후 Network tab으로 들어가기 2. No throttling 선택하면 여러 옵션이 나온다. 조금 느리게 네트워크 속도를 줄이고 싶다면 Fast 3G로 선택하고 많이 느리게 네트워크 속도를 줄이고 싶다면 Slow 3G를 선택한다. 로딩 애니메이션을 테스팅할 때 유용하다 사용 후 옵션을 No throttling으로 변경해 원래 네트워크 속도로 돌아오는것을 잊지말자! 2022. 8. 9. [CSS] backdrop-filter 속성을 사용해서 특정 요소에 블러처리해주기 The brown fox jumps over the lazy dog. div { background-color: orange; font-size: 30px; padding: 20px; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; } div::after { border: 3px solid tomato; box-sizing: border-box; content: ""; width: 50%; height: 100%; position: absolute; top: 0; right: 0; backdrop-filter: blur(10px); } 2022. 8. 8. [CSS] 텍스트가 넘칠경우 생략해서 ... 보여주는 방법 The brown fox jumps over the lazy dog. div { background-color: orange; font-size: 30px; padding: 20px; } 텍스트의 길이가 해당 요소보다 긴 경우에는 자동으로 줄바꿈이 일어난다 div { background-color: orange; font-size: 30px; padding: 20px; width: 200px; } white-space: nowrap 속성을 추가하면 자동으로 일어났던 줄바꿈이 일어나지 않고 텍스트가 요소 길이를 넘어선채 출력된다 div { background-color: orange; font-size: 30px; padding: 20px; width: 200px; white-space: nowrap; }.. 2022. 8. 8. [자바스크립트] 동기와 비동기란? 비동기적 코드 callback, promise, async와 await 사용법 동기 방식과 비동기 방식 코드를 실행할때 순차적으로 또는 비순차적으로 실행하냐에 따라 동기적 비동기적으로 나뉜다. 1. 동기적 처리(Synchronous) 위에서 아래로 코드가 순서대로 실행이 되는 것을 동기적 처리라고 한다. 즉 지금 진행하는 작업이 끝이나면 다른 작업으로 넘어가고 그 작업이 끝이 나면 다른 작업으로 넘어가는 방식이 동기적 처리 방식이라고 한다. 2. 비동기적 처리(Asynchronous) 비동기적 처리 작업은 순서대로 진행하는 것이 아니라 한번에 여러개가 진행되는 것과 마찬가지다. 비동기적 처리는 주로 api요청, 파일읽기, 암호화, 복호화 등에서 자주 사용된다. 비동기적 처리를 사용하는데 주로 사용되는 방식으로는 1. callback 함수 2. promise 객체 3. async/a.. 2022. 8. 8. [자바스크립트] Lodash를 사용해서 배열 안에 같은 value를 가진 객체 데이터 삭제해주기 (데이터 고유화 작업) Lodash 설치 npm install lodash Lodash 패키지에서 uniqBy import하기 import _uniqBy from 'lodash/uniqBy' 사용법 https://lodash.com/docs/4.17.15#uniqBy Lodash Documentation _(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods that operate on and return arrays, collections, and functions can be chained together. Methods that retrieve a single value or may .. 2022. 8. 7. [Vue] template에서 데이터 접근시 사용하는 키워드 $data 사용법 $data로 data() 옵션에 선언한 데이터에 접근할 수 있다 첫번째 방법: 점 표기법 $data.type은 'movie'를 의미하고 $data.number는 10을 의미한다 두번째 방법: 대괄호 표기법 $data['type']은 'movie'를 의미하고 $data['number']는 10을 의미한다 예제 2022. 8. 5. [리액트] useEffect 훅을 사용해서 데이터 로딩 후에 실행하고 싶은 로직 구현하기 useEffect가 실행되는 시점 1. mount (컴포넌트가 브라우저에 렌더링될 때) & update (컴포넌트 내부 요소가 업데이트될 때) useEffect(컴포넌트가 브라우저에 렌더링될때 실행할 함수); 2. mount (컴포넌트가 브라우저에 표시될 때) useEffect(컴포넌트가 브라우저에 렌더링될때 실행할 함수, []); 3. mount (컴포넌트가 브라우저에 렌더링될 때) & update (컴포넌트 내부 특정 요소가 업데이트될 때) useEffect(배열에 있는 요소가 업데이트되는 시점에 실행할 함수, [업데이트 되는지 지켜볼 변수 또는 State]); 4. unmount (컴포넌트가 사라질 때) useEffect(() => {return 컴포넌트가 사라지기 전에 실행할 함수}) 예제 imp.. 2022. 8. 5. [리액트] 라이프사이클이란? 함수형 컴포넌트에서 사용하는 라이프사이클 Hooks 정리 라이프사이클이란? 정의 라이프사이클이란 컴포넌트가 우리 눈에 보이게된 그 순간부터 사라지는 순간까지 즉, 컴포넌트의 생애주기를 말한다. 라이프사이클 다이어그램 https://wavez.github.io/react-hooks-lifecycle/ React hooks lifecycle diagram wavez.github.io 추가설명 컴포넌트의 수명은 페이지에 렌더링되기 전 준비과정에서 시작해 페이지에서 사라질때 끝이 난다 라이프 사이클 메소드는 클래스형 컴포넌트에서만 사용할 수 있다 함수형 컴포넌트에서는 Hooks를 사용한다 라이프 사이클 메소드를 언제 사용할까? 컴포넌트가 처음 렌더링되었을때 특정작업을 하고싶을때 컴포넌트를 업데이트하기 전/후 특정작업을 하고싶을때 컴포넌트가 사라질때 특정작업을 하고싶을.. 2022. 8. 5. [리액트] 라이프사이클이란? 클래스 컴포넌트에서 사용하는 라이프사이클 메서드 정리 라이프사이클이란? 정의 라이프사이클이란 컴포넌트가 우리 눈에 보이게된 그 순간부터 사라지는 순간까지 즉, 컴포넌트의 생애주기를 말한다. 라이프사이클 다이어그램 https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl 추가설명 컴포넌트의 수명은 페이지에 렌더링되기 전 준비과정에서 시작해 페이지에서 사라질때 끝이 난다 라이프 사이클 메소드는 클래스형 컴포넌트에서만 사용할 수 있다 함수형 컴포넌트에서는 Hooks를 사용한다 라이프 사이클 메소드.. 2022. 8. 5. [리액트] moment, moment-timezone 모듈을 사용해 현재시간, 다른 나라 시간 데이터 불러오기 패키지 소개 momentjs https://momentjs.com/ Moment.js | Home Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620", "YYYYMMDD" momentjs.com 현재 시간 표시하기 (위치에 기반한 현재 시간) 1. 모듈 설치하기 yarn add moment 2. 해당 모듈 import 해오기.. 2022. 8. 5. [npm/한줄정리] 패키지 매니저(npm, yarn)으로 패키지 설치할때 @next 키워드의 의미 vuex라는 패키지를 yarn, npm으로 설치하려면 아래와 같은 코드가 필요하다. 여기서 나오는 @next 키워드는 다음 버전을 의미한다. npm install vuex@next --save yarn add vuex@next --save 터미널에 해당 코드를 입력하면 최신버전과 다음버전의 정보를 알 수 있다. npm info vuex 2022년 7월 1일 날짜로 가장 최신 버전의 vuex와 다음 버전의 vuex는 같기 때문에 @next 키워드는 필요하지 않다. 2022. 7. 8. [웹개발/한줄정리] 트리 쉐이킹(tree shaking)이란? 필요없는 코드를 제거함으로서 코드를 최적화하는것 2022. 7. 8. 이전 1 2 3 4 5 6 7 ··· 17 다음
