React - 버튼 클릭 이벤트 등록하기

리액트 컴포넌트에 이벤트 등록을 하는 방법에 대하여 알아보겠습니다. 일반적인 HTML에서 이벤트 등록하는 방법과 비슷하지만 몇가지 차이가 있습니다. 리액트에서는 camelCase를 사용합니다. onClick, onKeyup 이렇게 말이죠 이벤트 위와 같이 이벤트를 등록할 수 있습니다. function clickHandler(e) { alert('click') } 이렇게 clickHandler에 e 파라미터가 넘어오는데 e 매개변수로 preventDefault()와 stopPropagation() 을 사용할 수 있습니다. preventDefault는 이벤트의 기본 동작을 방지하고, stopPropagation은 이벤트가 상위 컴포넌트로 버블링 되는 것을 방지 할 수 있습니다 See the Pen Untit..

• format_list_bulleted Develop/React
• · 2023. 1. 14.
• textsms

React - useState를 이용하여 카운터 만들기

리액트 state에 대하여 알아보려고 합니다. 리액트 컴포넌트를 생성하고 난 뒤에는 state 값이 변경되면 다시 렌더링 됩니다. 상태가 변경되면 자동으로 다시 컴포넌트를 렌더링 되기 때문에 상태 변경만 해주면 됩니다. 1. useState 초기화 const [counter, setCounter] = React.useState(0); 먼저 useState 함수를 이용하여서 초기화를 합니다. useState 안에 들어간 0은 초기화할 때 사용하는 값입니다. 2. 각 버튼 클릭 이벤트에서 setCounter를 이용하여 상태 값을 변경합니다. setCounter 파라미터를 callback 함수로 작성하였는데, 이전의 counter를 가지고 와서 1을 더해주는 방식입니다. setCounter(counter =>..

• format_list_bulleted Develop/React
• · 2023. 1. 13.
• textsms

자바스크립트 배열 함수 정리 filter, every, some

자바스크립트에서 자주 사용하는 배열 함수에 대해서 정리하려고 합니다. filter filter(callback) 배열에서 callback 함수가 true 인 값만 배열로 반환합니다. const hero = ["superman", "batman", "pororo"] const result = hero.filter(person => person === "superman"); console.log(result); ["superman"] superman 값이 있는 배열이 반환됩니다. every every(callback) 배열 안의 값들이 callback 함수 조건을 통과하는지 판별합니다. true, false값을 반환합니다. const hero = ["superman", "batman", "pororo"] c..

• format_list_bulleted Develop/JavaScript
• · 2023. 1. 12.
• textsms

프론트엔드 기술 면접 질문과 답변

프론트엔드 개발자 이직 준비를 하면서 직접 질문을 받았던 내용을 대해서 정리해 보았습니다. 컴퓨터 공학 관련 질문, 자바스크립트, SPA 프레임워크, 웹 관련 질문과 프로젝트 경험 등 다양하게 질문을 하고, 꼬리에 꼬리를 무는 질문을 주로 많이 합니다. 아래 내용 참고하시고 면접에서 좋은 결과 있으시기를 바라겠습니다. 부족한 부분이나 피드백은 언제나 환영입니다😀 프로토 타입 프로토 타입이 무엇인가요? 자바스크립트 가장 상위의 프로토 타입 객체 모든 자바스크립트 객체는 Object.prototype을 상속받는다. 프로토 타입으로 할 수 있는 게 무엇인가요? 프로토 타입에 메서드 프로퍼티 추가 상속으로 기존 클래스의 메서드와 프로퍼티를 사용 Object.prototype은 무엇인가요? 자바스크립트 객체를 생..

• format_list_bulleted Develop/JavaScript
• · 2023. 1. 11.
• textsms

React - props를 이용하여 데이터 전달하기

리액트 props를 이용하여 데이터를 전달하여서 엘리먼트에 사용하는 방법입니다. 먼저 Hello라는 컴포넌트를 간단하게 만듭니다. function Hello() { return Hello } export default Hello 위와 같이 Hello 컴포넌트를 만들고 Hello 컴포넌트를 렌더링 하게 되면 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); Hello 글자가 나옵니다. 이제 Hello 컴포넌트 네임 props를 전달하여서 Hello 컴포넌트에 이름을 넣어보겠습니다. function Hello(props) { return Hello {props.name} } export default Hello..

• format_list_bulleted Develop/React
• · 2023. 1. 10.
• textsms

React 프로젝트 설정하기

간단하게 React 프로젝트를 설정해 보겠습니다. 1. Node 설치하기 먼저 컴퓨터에 Node.js가 설치되어 있어야 합니다. 아래 사이트에서 설치할 수 있습니다. https://nodejs.org/en/ 2. 터미널 열기 터미널을 열고 본인이 React 프로젝트를 설정하고 싶은 폴더로 이동합니다. 3. React 설정하기 터미널 창에 아래와 같이 입력합니다. npx create-react-app hello-react hello-react는 프로젝트 이름이며, hello-react 폴더가 생기며 자동으로 react 설치됩니다. 짜잔 설치 완료되었습니다. 이제 아래와 같이 입력하여서 react 프로젝트를 실행해보겠습니다. cd hello-react npm start 자동으로 localhost:3000이 ..

• format_list_bulleted Develop/React
• · 2023. 1. 9.
• textsms

자바스크립트 try..catch를 사용하는 이유

try…catch를 사용하는 이유 자바스크립트는 에러가 발생하면, 스크립트가 종료된다. try..catch문을 에러가 발생할 것 같은 곳에서사용하면 스크립트 종료 없이 아래와 같이 동작하게 된다. 동작 순서 error 발생 try문 중단 catch 동작 이후 스크립트 실행 아후스크립트가 종료하지 않고 계속 진행한다. try { wakeup(); // ReferenceError: wakeup is not defined } catch(e) { console.log(e); } throw throw 고의로 오류를 발생시킨다. 스크립트 오류는 아니지만, throw 문을 사용하게 되면 오류를 발생 시킬 수 있다. try { // do Something; throw '에러 발생'; } catch(e) { consol..

• format_list_bulleted Develop/JavaScript
• · 2022. 9. 27.
• textsms

jQuery merge - 배열 합치기

$.merge(first, second) 첫번째 배열에 두번째 배열을 추가하여 합치게 된다. 배열을 보존하면서 합치고 싶을때는? merge 하기 전에 함수를 만들어 준다. var newArray = $.merge([], array); Sample var hero = ['superman', 'batman', 'pororo']; var person = ['짱구', '짱아', '신형만']; var array = $.merge($.merge([], hero), person)); console.log(array); console.log(hero); 결과 ["superman","batman","pororo","짱구","짱아","신형만"] ["superman","batman","pororo"] jQuery.merge..

• format_list_bulleted Develop/JavaScript
• · 2022. 9. 22.
• textsms

자바스크립트 실행과 페이지 렌더링은 별개다

sample document.body.innerHTML = 'Hello'; var time = 3000; var date = new Date().getTime() + time; var curDate = new Date().getTime(); while(curDate < date) { curDate = new Date().getTime(); } 위 코드 실행 시 반복문에 다 돌고 난 뒤 페이지에 Hello가 찍히게된다. innerHTML은 동기코드인데 왜 반복문이 다 돌고나서 찍히게 될까? 자바스크립트 실행과 페이지 렌더링을 별개이다. 자바스크립트 실행 이후 페이지 렌더링을 실행하게 된다. 단, 디버깅으로 보게되면 먼저 'Hello'가 렌더링이 된다.

• format_list_bulleted Develop/JavaScript
• · 2022. 9. 21.
• textsms

자바스크립트 jQuery Deferred() 비동기처리 하기

비동기를 사용하는 이유 자바스크립트는 싱글 스레드 언어이다. 한번에 한가지일을 순차적으로 처리한다. 그러나, 웹은 방대한 자료를 가져오고, 효율적으로 사용하기 위해서 비동기적 프로그래밍이 필요하다 jQuery Deferred를 이용하여 비동기 함수 만드는 방법 Deferred() 비동기 함수로 만드려면 3가지 정도 과정이 필요하다. 1. Deferred() 객체 생성 var $dfd = $.Deferred(); 2. 프로미스 객체 return return $dfd.promise(); 3. 비동기 함수 실행 setTimeout(function() { console.log('async'); }, 300) 위 3가지 함수를 사용하면 아래와 같이 비동기로 사용할 수 있는 함수가 생기게 됩니다. function ..

• format_list_bulleted Develop/JavaScript
• · 2022. 9. 16.
• textsms