spoit

결론부터 말하면 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..

식별 관계와 비식별 관계란 무엇을 의미하는가? 예를 들어, 축구팀 엔티티와 축구선수 엔티티가 있다. 축구팀은 여러 명의 축구선수를 소유할 수 있으며, 축구선수는 하나의 축구팀에게 소속된다. 하지만 축구선수는 축구팀이 없어도 존재할 수 있다. 소속이 없는 선수의 경우에 말이다. 그러므로 이때 축구선수와 축구화의 관계는 비식별 관계라고 할 수 있다. 이제 축구선수 엔티티와 선수 기록 엔티티를 예를 들어보자. 선수 기록은 축구선수 없이 존재할 수가 없다. 그러므로 축구선수와 선수 기록 간의 관계는 식별 관계이다. 데이터베이스 관점에서 다시 말해보면 식별 관계에서 부모 엔티티의 기본키는 자식 엔티티에 꼭 포함되어 있으며 항상 기본키로 사용된다. 반면에 비식별 관계에서는 부모 엔티티의 기본키가 자식 엔티티에 포함..