코딩병원

Frontend/React

[React] onKeyDown, onKeyUp, onKeyPress 차이

기존의 자바스크립트에서는 onkeydown, onkeypress, onkeyup 명으로 이벤트를 사용했었습니다. 하지만, react에서는 onKeyDown, onKeyPress, onKeyUp 이벤트는 camelCase 형식의 명칙을 사용합니다. onKeyDown, onKeyUp은 키를 누르고 떼는 동작 자체에 반응합니다. 문자, 숫자, Ctrl, Shift, Alt, F1~F12, Scroll Lock, Pause, Enter를 인식하고 한/영, Print Screen은 인식하지 못합니다. onKeyPress는 위와 달리, 문자가 실제로 입력됐을 때 반응합니다. Ctrl, Shift, Alt, F1~F12, Scroll Lock, Pause, Enter, 한/영, Print Screen 등을 인식하지 ..

2022. 1. 1.

Frontend/Debug Log

Each child in a list should have a unique "key" prop. 해결 방법

이번 글에서는 Warning: Each child in a list should have a unique "key" prop. 에러 해결 방법에 대하여 알아보겠습니다. Warning: Each child in a list should have a unique "key" prop. [에러가 발생한 코드] class TestComponent extends Component { render() { let arr = ["코딩병원", 119, "코딩병원"]; return( {arr.map((item) => {item})} ) } } [에러 원인] react에서 map() 메서드를 사용하기 위해서는 배열의 각 Item마다 독립적인 key 값을 설정해야 합니다. 하지만, 위의 코드를 보니 key prop과 관련한 세..

2021. 12. 21.

Frontend/Debug Log

Adjacent JSX elements must be wrapped in an enclosing tag. 해결 방법

이번 글에서는 Adjacent JSX elements must be wrapped in an enclosing tag. 에러 해결 방법에 대하여 알아보겠습니다. Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...? [에러가 발생한 코드] import React, { Component } from 'react'; class TestComponent extends Component { constructor(props) { super(props); this.state = {test: '코딩병원'}; } render() { return( {this.state.test} 119 ); } } export ..

2021. 12. 20.

Frontend/React

[React] 함수형 컴포넌트 사용하기

함수형 컴포넌트 클래스형 컴포넌트는 state, 라이프 사이클 기능, render 함수 등을 제공해줍니다. 함수형 컴포넌트는 클래스형 컴포넌트와 달리, state가 없고 생명주기 함수를 사용할 수 없습니다. 하지만, 함수형 컴포넌트는 이러한 기능들을 제공하진 않지만 hook의 도입으로 해결이 가능하게 되었습니다. 공식문서에는 클래스형 컴포넌트보다는 함수형 컴포넌트와 hook을 사용하는 것을 권장하고 있습니다. 상위 컴포넌트에서 props와 context를 파라미터로 전달받아 사용하기 때문에 render() 함수가 없으므로 return만 사용해 화면을 그려줍니다. 따라서, 클래스형 컴포넌트보다 선언도 편하고 메모리 사용도 덜한 효과를 갖고 있습니다. 소스 예제 함수형 컴포넌트를 사용하는 간단한 코드를 보며..

2021. 12. 19.

Frontend/React

[React] props 기본값으로 정의하기

props 란? React가 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체를 “props” ("properties"의 줄임말)라고 합니다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 객체입니다. props 기본값으로 정의하기 defaultProps를 이용하여 props의 기본값을 정의해주시면 됩니다. 정말 간단한 코드를 보며 살펴보겠습니다. App.js (상위 컴포넌트) import './App.css'; import TestComponent from './Component/TestComponent' function App() { return ( ); } export default App; TestComponent.js (하위 컴..

2021. 12. 16.

Frontend/Debug Log

Objects are not valid as a React child 해결 방법

이번 글에서는 Objects are not valid as a React child (found: object with keys {키1, 키2}). If you meant to render a collection of children, use an array instead. 에러 해결 방법에 대하여 알아보겠습니다. Objects are not valid as a React child (found: object with keys {키1, 키2}). If you meant to render a collection of children, use an array instead. [에러가 발생한 코드] App.js import './App.css'; import TestComponent from './Compon..

2021. 12. 15.

Frontend/React

[React] jQuery 사용 방법

이번 글에서는 React에서 jQuery를 사용하는 방법에 대해서 알아보도록 하겠습니다. jQuery는 가장 인기 있는 자바스크립트 라이브러리인데요. 이벤트 처리, 애니메이션 등 자바스크립트의 기능을 간단하고 빠르게 구현할 수 있도록 지원해주고 있습니다. 이러한 jQuery를 React에서 사용하려면 어떻게 해야되는 지 알아보도록 하겠습니다. 1. CMD창을 열어 해당 프로젝트 경로로 이동해서 [npm install jquery]를 입력합니다. 2. jquery를 임포트해줍니다. import $ from 'jquery'; 이러면 세팅이 끝나 제이쿼리 사용이 가능합니다. 아주 간단하죠? 확인해봅시다. 다음은 h2 태그를 클릭하면 알림창이 나오는 예제입니다. import React, { Component }..

2021. 12. 14.

Frontend/Debug Log

Parsing error: Identifier '변수명' has already been declared. 해결 방법

Parsing error: Identifier '변수명' has already been declared. 해결 방법에 대하여 알아보겠습니다. 이 에러는 Javscript ES6이상을 사용하면 어디서든 발생할 수 있는 에러입니다. 따라서, Javscript뿐만 아니라 Javscript기반인 React, Vue, TypeScript 등에서도 발견할 수 있습니다. [에러가 발생한 코드] let tempStr = '자바스크립트'; let tempStr = '리액트'; console.log(tempStr); // Parsing error: Identifier 'tempStr' has already been declared. [에러 원인] 1. 이미 선언한 let 변수 tempStr을 다시 선언해서 발생 2. le..

2021. 12. 13.

Frontend/Debug Log

Assignment to constant variable 해결 방법

Assignment to constant variable 에러 해결 방법에 대하여 알아보겠습니다. 이 에러는 Javscript ES6이상을 사용하면 어디서든 발생할 수 있는 에러입니다. 따라서, Javscript뿐만 아니라 Javscript기반인 React, Vue, TypeScript 등에서도 발견할 수 있습니다. [에러가 발생한 코드] const tempStr = '자바스크립트'; tempStr = '리액트'; console.log(tempStr); // Assignment to constant variable [에러 원인] 1. 이미 선언한 const 변수 tempStr에 새로운 값을 할당했을 때 발생 2. const 변수는 재할당을 허용하지 않음 [해결 방법] const는 값이 변하지 않는 상수입..

2021. 12. 12.

Frontend/Debug Log

Invalid DOM property `tabindex`. Did you mean `tabIndex`? 해결 방법

이번 글에서는 Invalid DOM property `tabindex`. Did you mean `tabIndex`? 에러 해결 방법에 대하여 알아보겠습니다. Invalid DOM property `tabindex`. Did you mean `tabIndex`? [에러가 발생한 코드] import Reaect, { Component } from 'react'; class HeaderComponent extends Component { render() { return ( [start React Js] ) } } export default HeaderComponent; [에러 원인] JSX는 JavaScript를 확장한 문법입니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모..

2021. 12. 7.

Frontend/Debug Log

Invalid DOM property `class`. Did you mean `className`? 해결 방법

이번 글에서는 Invalid DOM property `class`. Did you mean `className`? 에러 해결 방법에 대하여 알아보겠습니다. Invalid DOM property `class`. Did you mean `className`? [에러가 발생한 코드] import Reaect, { Component } from 'react'; class HeaderComponent extends Component { render() { return ( // 에러가 발생한 위치 [start React Js] ) } } export default HeaderComponent; [에러 원인] JSX는 JavaScript를 확장한 문법입니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, Jav..

2021. 12. 7.

Frontend/React

[React] props란?

props 개념 React가 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체를 “props” ("properties"의 줄임말)라고 합니다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 객체입니다. props가 어떤식으로 코드에서 사용되는지 간단한 예제를 통하여 알아보도록 하겠습니다. 아래의 예제는 "hello, hayan”을 렌더링하는 예시입니다. const Welcome = (props) => { return hello, {props.name} } ReactDOM.render( , document.getElementById('root') ); // 출력 결과 hello hayan 위의 예시는 다음과 같은 일들이 일어납니다. 1. ..

2021. 7. 30.

Frontend/React

[React] state란?

state 개념 state는 함수 내에 선언된 변수처럼 컴포넌트의 렌더링 결과물에 영향을 주는, 데이터를 갖고 있는 객체입니다. 아래의 코드를 통하여 state가 어떤식으로 코드에서 사용되는지 알아보도록 하겠습니다. class Welcome extends React.Component { constructor(props) { super(props); this.state = {name: 'mindragon'}; // 2. 직접 state를 세팅 } render() { return( Hello, {this.state.name} // 3. state의 name 값 호출하며 렌더 ); } } ReactDOM.render( , // 1. Welcome 컴포넌트 호출 document.getElementById('ro..

2021. 7. 29.

Frontend/React

[React] && 연산자로 If문 처럼 표현하기

JSX 안에는 중괄호를 이용해서 표현식을 포함 할 수 있습니다. 그 안에 JavaScript의 논리 연산자 &&를 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있습니다. function GetUnreadTextInfo(props) { const unreadTexts = props.unreadTexts; // ['react', 'test', 'hello'] return ( Hello! {unreadTexts.length > 0 && // unreadTexts.length = 3 You have {unreadTexts.length} unread texts that are {unreadTexts.join(', ')} } ); } const textZip = [ 'react', 'test', 'hello'] Re..

2021. 7. 28.

Frontend/Javascript

[JavaScript] 실무에 유용한 Array API 함수들

1. make a string out of an array (배열을 문자열로만들기) const fruits = ['apple', 'banana', 'orange'] const result = fruits.join(); console.log(result); // 'apple,banana,orange' join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다. /** * Reverses the elements in an array in place. * This method mutates the array and returns a reference to the same array. */ 1-1. make an array out of a string (문자열을 배열로 만들기) const fru..

2021. 6. 11.

Frontend/Javascript

[JavaScript] function 정리 (ES6)

Javascript 함수(Function)에 대해 알아보겠습니다. 아래 doSum 함수는 함수를 선언한 것이고 보시면 num1, num2 인자를 받고 그 합을 반환해줍니다. 이와 같이 선언하여 사용할 수도 있고 아니면 printSum() 변수처럼 선언하고 변수에 함수를 대입하여 표현할 수도 있습니다. function은 Object입니다. 따라서, doSum.length, doSum.prototype 등의 프로퍼티들을 사용할 수 있습니다. function doSum(num1, num2) { // 함수 선언식 return num1+num2 } doSum(1, 2); // output = 3 const printSum = function(num1, num2) { // 함수 표현식, anonymous funct..

2021. 6. 8.

Frontend/jQuery

[Jquery] not() - 나머지 요소를 선택하는 방법

이번에는 not() 메소드로 선택한 요소 중에서 특정 선택자를 제외한 나머지 요소를 선택하는 방법에 대하여 알아보겠습니다. not() 메소드 선택한 요소 중에서 특정 선택자의 요소를 제외한 나머지 요소를 모두 선택합니다. 즉, 지난 글에 포스팅된 filter() 메소드와는 반대의 기능을 가지고 있습니다. 예제를 통하여 not() 메소드를 다루어 보도록 하겠습니다. 아래 소스는 button을 클릭하면 요소 중 인덱스가 2보다 작은 요소를 제외한 나머지 요소들을 초록색 테두리로 씌우는 예제입니다. 출력 결과 인덱스가 2이상인 요소들만 초록색 테두리가 씌워진 것을 확인하실 수 있습니다.

2020. 8. 3.

Frontend/jQuery

[Jquery] prev(), next() - 이전, 다음 요소 선택하는 방법

이번 글에서는 형제 요소 관련된 메소드들에 대하여 알아보도록 하겠습니다.prev() 메소드 - 이전에 위치한 형제 요소 선택next() 메소드 - 다음에 위치한 형제 요소 선택 prev() 메소드와 next() 메소드는 서로 반대되는 기능을 가지고 있지만, 문법은 같습니다. 따라서, next() 메소드만 예를 들어도 prev() 메소드는 충분히 이해하실 수 있을 겁니다. next() 메소드선택한 요소의 바로 다음에 위치해 있는 형제 요소를 선택합니다. 아래 예제를 통하여 자세히 알아보도록 하겠습니다. 출력 결과 button을 클릭하면 바로 다음의 형제 요소에 빨간색 테두리가 씌워지는 예제였습니다.

2020. 7. 23.