림찌의 개발일기 💻

로컬 json data 파일을 이용해 포트폴리오 사이트를 만드는 중에 뭔가 이상한 점을 발견했다. 난, 단일 데이터를 가져오는 페이지에서 파람값으로 id 를 전달해주었고, 파람 id 와 json data id 값이 일치하면 데이터가 뿌려지도록 작성을 해주었었다. const Component = ({id}) => { return( {jsonData.map((item) => ( {id == item.id ? 나는 예시예요 ㅎㅎ : null} ))} ); } 간단하게 이런식으로 작성을 했다고 치자... 가져온 id 는 '2' 라고 생각하자. 화면만 봤을 때는, 내가 원하는대로 특전 id 를 가진 json data 만 화면에 그려졌기 때문에 ,정상적으로 불러오는 줄 알았다. 그런데 css 수정을 위해 개발 모드..

리액트 작업 도중 props를 넘겨주었는데, 넘겨준 prop에 빨간 줄이 떠서 마우스를 갖다 대니 이러한 문구가 떴다. 그런데 웹이 작동이 안되는 것은 아니다. 정상적으로 props를 받아오고, 실행도 되는데... 뭐지? esLint 에 걸리는 거 같은디~~! --- 우선 해결 방법부터 말하자면 props type 을 검사해주어야 빨간 줄이 사라진다. props type 검사 방법은 아래와 같은 명령어로 props-types를 설치를 해주고 yarn add prop-types import React from 'react'; import PropTypes from 'prop-types'; const ComponentName = ({children}) => { return(저는 예시 컴포넌트에요 👏 {chi..

react 에서 next.js 를 사용해서 포트폴리오를 제작중인데....로컬 이미지를 가져오는데서 막혔다. next.js 에서 로컬 이미지를 어떻게 가져오는지를 알아보자... --- 우선 next.config.js 파일을 추가한다. const withImages = require('next-images'); module.exports = withImages(); next.config.js 파일을 가장 최상위 루트에 생성하여 다음과 같은 코드를 추가한다. next-images를 install 해주지 않았다면, 우선 설치하자~ 이걸 추가하면 이제 로컬에서 이미지 파일을 import로 불러올 수도 있고, require 로 불러올 수도 있다. - import 로 불러오기 import ExImage from '...

클래스형 컴포넌트와 함수형 컴포넌트의 비교를 위해 간단한 끝말잇기 예제를 가져왔다. 클래스형 컴포넌트 class WordRelay extends Component{ state = { //state를 먼저 이렇게 선언 word: '리액트', value: '', result: '', }; // 끝말잇기 오답 체크 onSubmitForm = (e) => { e.preventDefault(); if(this.state.word[this.state.word.length - 1] === this.state.value[0]{ //마지막 word의 첫번째와 지금 적은 값의 첫번째가 같으면 실행 this.setState({ result: '딩동댕, 이어서 작성해주세요', //정답일시 나오는 문구 word: this.st..

props란? 간단하게 설명하자면 Component에서 Component로 전달하는 데이터를 말한다. props를 사용하면 효율적으로 component를 재사용할 수 있다. 부모 component에서 자식 component에서 데이터를 전달해 줄때 사용하는데, 여기서 큰 특징은 자식 컴포넌트는 부모 컨포넌트에게서 내려받은 props의 데이터를 직접 수정할 수 없는 것이다. React는 단반향 데이터로, 데이터가 한 방향으로만 흐르기 때문이다. (반면 state는 컴포넌트 내부에서 선언하는 값으로 해당 컴포넌트 안에서 값을 변경할 수 있다.) 쉽게 생각하면 그냥 부모의 유산을 자식에게 전달해준다고 생각하자. 알기 쉽게 예제를 보며 살펴보자. import React from 'react'; function ..

리액트는 component 기반이다. component를 통해 UI를 재사용 가능한 개별적인 조각으로 나눌 수 있다. component를 정의하는 방법은 두 가지가 있다. 1. Javascript 함수형 컴포넌트 function ImComponent(props){ return Hello, {props.name} } - state와 라이프사이클 사용이 불가하다. (단, Hooks 사용시 사용가능하다) - 컴포넌트 선언이 클래스보다 간편하고 직관적이다. 2. ES6 클래스형 컴포넌트 class ImComponent extends React.Component { render(){ return hello, {this.props.name} } } - state 와 라이프사이클 사용이 가능하다. - 임의 메서드를 ..

코드를 고치고 실행할때마다 명령어를 사용하는건 참 귀찮은 일이다. 그래서 리액트에선 하나의 플러그인을 설치할 수 있는데, 바로 react-refresh 이다. 이 플러그인은 코드를 고치고 새로고침이나 새로 빌드를 해주지 않더라도 변경된 사항이 자동으로 수정되는 아주 놀라운 기능을 가지고 있다. (이래서 리액트 리액트 하는구만...) 깨알 tips 👀👀 기존엔 react-hot-loader 라고 불리고 설치법도 달랐지만, webpack-cli가 4.xx 로 올라가면서 hot loader 대신 refresh를 사용하게 되었다. 이 편리한 플러그인을 깔아보자! (webpack의 설정은 [21.04.12]에 작성한 티스토리 글을 기준으로 한다) 1. react-refresh, react-refresh-webpa..

제로초님의 React 기본강좌 webgame 만들기 강의를 들으면서 웹팩 설치 관련 내용을 정리한 글입니다. 문제가 생길시 글 내리겠습니다 :) 웹팩이란? 🤔 최신 프론트엔드 프레임워크에서 가장많이 사용되는 모듈 번들러이다. 모듈 번들러란 웹 애플리케이션을 구성하는 요소를 모두 각각의 모듈로 보고 이를 조합하여 병합된 하나의 결과물을 만드는 도구를 말한다. 웹팩에서 모듈은 HTML, CSS, Javascript, Images, Font 등등 을 모두 포함한다. 이 요소 하나하나가 모듈인셈이다. 웹을 만들다보면 이러한 모듈들이 수십개에서 큰 프로젝트라면 수백개가 생성될수 있는데 이 수많은 요소들을 하나의 파일로 합쳐주고 압축시켜주는 역할을 한다. 이렇게 압축 시켜주는걸 `모듈 번들러` 라고 한다. Webp..

여러가지 문서를 읽고 제가 이해한대로 작성한 글입니다. 잘못된 정보가 있으면 댓글로 정정해주세요 :) React.js 란? 페이스북에서 제공하는 컴포넌트(component) 기반의 프론트엔드 라이브러리이다. 컴포넌트에 데이터를 내려주어 개발자가 설계한 대로 조립하며 사용자에게 보여진다. 프론트엔드 라이브러리엔 React를 포함해 Vue.js 등도 있다. React를 써야하는 이유? React는 Javascript 기반으로 이루어져 있기 때문에 동적인 웹페이지를 만드는 것에 있어 최적이다. HTML과 CSS(Scss), 순수 자바스크립트로 이루어진 웹페이지는 정적인 페이지를 만들기에 적합하다. 그러나 최신 웹은 복잡하고 동적이므로 최신 웹을 만들기 위해서는 더 복잡하고 많은 상태를 관리해야한다. 이런 최..