spoit

에러 메세지에서 알 수 있듯이 이전 렌더링에서 호출된 hooks 보다 현재 렌더링에서 hooks가 더 많이 호출된 결과로 에러가 발생한다.hooks는 매 렌더링마다 동일한 호출을 보장받아야 한다.그렇기에 hooks를 조건 문안에서 쓰는 게 금지되어 있고 컴포넌트 최상위에서 사용하라고 권장되는 이유이다.hooks라는 게 함수의 상태를 기억해야 하는 것이기 때문에 호출 순서를 이용하여 함수의 상태를 기억했다가 이전의 상태를 가져올 수 있는 것이다.https://ko.reactjs.org/docs/hooks-rules.html#explanation

결론부터 말하면 flex-wrap: wrap 속성을 적용해 보길 권합니다. 부모 컨테이너를 넘어서지 않게 잡아주는 역할을 하기 때문입니다. 다음 예시를 통해서 살펴볼 수 있습니다. {data.posts.data.map((post) => ( {/**/} [{COMMUNITY_LANGUAGE_CODE[post.postPrefixCode]}] {post.title} {post.nickname} {post.createdAt.split(' ')[0]} {post.likeCount} {post.viewCount} {post.commentCount} {/**/} ))} 초록색: InnerWrapper space-between을 통해 댓글 카운트를 맨 오른쪽으로 배치하는 역할을 한다. const InnerWrapper..

리엑트 네이티브에서 npm run android 명령어를 실행했을 경우 다음과 같은 에러가 났다. error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081 FAILURE: Build failed with an exception. * What went wrong: Could not determine the dependencies of task ':app:compil..

주로 next.js 프레임워크를 사용하다가 만나게 되는 에러이다. ssr의 특성상 초기 렌더링은 서버측에서 하게 되는데 그때, styled-components에서 만들어주는 className과 클라이언트 측에서 만들어주는 className과 다르기 때문에 나타나는 이슈이다. 해결방법 1. babe-plugin-styled-components를 설치한다. npm i babel-plugin-styled-components 2. 프로젝트의 루트에 .babelrc 파일을 만들고 설치한 플러그인을 설정한다. { "plugins": ["babel-plugin-styled-components"] } 3. 클라이언트 서버를 재실행한다. 아래 코드는 babe-plugin-styled-components의 소스코드이다. ..

얼마 전 회사의 새로운 프로젝트에서 코드이그니이터와 리엑트를 연결하는 경험을 하였다. 코드이그나이터는 php로 작성된 웹 프레임워크이며, 언어와 프레임웍 모두 비교적 레거시라고 평가받고 있다. 반면 리엑트는 비교적 새로운 프론트 프레임워크인 상황이었다. 이 상황에서 둘 사이의 연결을 설명해놓은 자료를 찾기는 쉽지 않았다. 레거시에 새로운 프레임 웍을 연결하는 작업은 개발팀이 더 효율적으로 개발을 할 수 있는 첫 시발점을 만드는 것이었기에 흥미가 많이 갔던 작업이었다. 코드이그나이터에 리엑트를 도입해보고자 하는 누군가에게 도움이 되고자 경험을 공유해본다. 코드이그나이터와 리엑트 라우터 연결 구성 코드이그나이터는 서버사이드 렌더링을 하며, 폴더 경로가 라우터가 되는 특징이 있다. 하지만 index.html ..

리엑트 class 컴포넌트 내에서 componentWilUnmount의 경우 주로 이벤트 리스너를 지울때 사용한다. 예를들어 setInterval같은 경우, 컴포넌트가 없어졌을 때 계속 실행되고 있으면 안되기 때문에 componentWillUnmount라이프 사이클에 맞춰 clean up 해준다. 그렇다면 훅스에서는 어떻게 이를 처리할까? useEffect를 사용해서 componentWillUnmount의 효과를 낼 수 있다. 아래 리엑트 공식문서에 나오는 방법을 참고하자. useEffect내에서 함수를 return하며 그 함수 안에 로직을 작성해주면 된다. import React, { useState, useEffect } from 'react'; function FriendStatus(props) {..

우아한 형제들 김민태님의 강의를 듣고 알기 쉽게 정리한 콘텐츠 입니다. 이전 포스팅을 통해 vdom이 어떻게 만들어지는지 확인했다. 이번 포스팅에서는 만들어진 vdom을 어떻게 화면에 렌더링하는지에 대하여 살펴볼 것이다. src/index.js import { createElement, render } from './react.js'; function Title (props) { return ( depth1_1 depth1_2 depth1_3 depth2_1 depth2_2 depth2_3 depth3_1 depth3_2 depth3_3 ) } // 사용자의 컴포넌트는 함수자체를 넘겨준다. render(, document.querySelector('#root')); 우선 사용자 컴포넌트는 위와 같다. 직..

우아한 형제들 김민태님의 강의를 듣고 직접 정리한 콘텐츠 입니다. 가상돔을 만들기 위해 먼저 리액트의 jsx 문법을 파싱할 수 있는 babel환경을 구축해야 한다. npm install @babel/cli @babel/core @babel/preset-react package.json { "name": "tiny-react", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "babel src -d build -w", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "..

다음과 같이 enqueue와 dequeue메서드를 포함한 클래스가 있다. class PriorityQueue { constructor() { this.store = []; } enqueue(item) { this.store.push(item); } dequeue() { let start = 0; this.store.forEach((item, index) => { if (this.store[start][1] > this.store[index][1]) { // 가장 작은것을 찾음 start = index; } }); return this.store.splice(start, 1); } } 처음에는 아래의 코드 처럼 dequeue를 만들때 sort를 한다음 맨 처음의 값을 shift를 통해서 빼려고 했다. 하지..

문법, 어휘, 표현, 듣기, 발음으로 이루어져 있는 영어시험을 보았고 결과를 점수별로 정렬하고 싶습니다. 하지만 동점인 과목이 있으면 더 중요하다고 생각하는 과목이 먼저 나올 수 있도록 정렬을 하려고 합니다. 이러한 경우 어떻게 해야 할까요? 아래의 코드상으로 보자면 scores배열에서 객체들를 score별로 정렬을 한 후 동점일 경우에 priority로 정렬을 하고 싶은 경우가 있을 것입니다. const scores = [ {title: "문법", score: 20, priority: 1}, {title: "어휘", score: 50, priority: 2}, {title: "표현", score: 80, priority: 3}, {title: "듣기", score: 15, priority: 4}, {t..