본문 바로가기

전체 글

 (286)
React의 JSX 문법 이해하기 리액트의 각 컴포넌트는 하나의 함수이고 JSX 문법 형태로 된 값을 리턴한다. JSX를 사용하는 이유는 HTML 마크업 랭귀지와 비슷하게 생겨서 컴포넌트가 어떤 엘리먼트로 구성돼 있는지 한 눈에 파악하기 쉽기 때문이다. 그러나 JSX는 결국 자바스크립트이고 JSX의 각 요소들이 무엇을 의미하는지 알아야 다양한 방식으로 리액트를 구현할 수 있다. import React from 'react'; import Profile from './components/Profile'; function App() { return ( hello ); } export default App; 위의 JSX 문법은 아래의 자바스크립트 코드와 같다. import React from 'react'; import Profile from..
Grid의 가로폭을 고정하는 방법 간혹 grid의 child에 따라서 grid의 자식들 width가 원하는 대로 나오지 않고 틀어지는 경우가 있다. 아래처럼 글자 속성에 white-space: nowrap;을 넣으면 글자가 줄바꿈되지 않고 한 줄로 길게 늘어지면서 부모의 grid-template-columns: 1fr 1fr 1fr; 속성을 무시한다. 가나다라 마바사 아자차카 타파하 .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .item { border: 1px solid grey; border-radius: 10px; padding: 20px; white-space: nowrap; /* 줄바꿈 x */ } 이를 해결하려면 .item 옆..
CSS로 말줄임표를 넣는 방법 글자 데이터의 길이는 그때그때 다르기 때문에 레이아웃에 맞추기 위해 말줄임표를 써야하는 경우가 더러 있다. 한 줄부터 시작하여 여러 줄에서 말줄임표를 쓰는 방법에 대해서 다루겠다. 한 줄 말줄임표 한 줄 말줄임표는 간단하다. 다음 코드만 넣으면 된다. .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* display: block; */ } 글자가 길어져 block의 오른쪽 끝을 넘어가면 ...이 붙는다. 아무리 글자가 길어도 한 줄만 표시된다. 다만 display: block;일 때에만 작동을 하기 때문에 주의해야 한다. 두 줄 이상일 때의 말줄임표 webkit 계열의 브라우저인 경우 다음 코드를 넣으면 두 줄 이상..
Redux Toolkit State를 리셋하는 방법 리덕스 툴킷은 immutable한 state를 내부적으로 mutable하게 사용한다. 때문에 state를 리셋하기 쉽다고 생각할 수 있는데 버전이나 설정에 따라서 잘 작동되지 않는 경우가 더러 있다. slice 코드의 state에 initialState를 넣더라도 잘 안 된다. reducers: { reset(state) { state = initialState; } } 아래 링크에서 여러가지 방법들을 제시하는데 https://stackoverflow.com/questions/59424523/reset-state-to-initial-with-redux-toolkit 필자는 object assign을 써서 해결할 수 있었다. reducers: { reset(state) { Object.assign(stat..
알고리즘 문제를 쉽게 해결할 수 있도록 해주는 5가지 단계 udemy에서 인기 있는 강의 내용을 정리해 보았다. 1. Understand Problem 코딩에 들어가기 전에 문제를 명확히 이해하는 게 중요하다. 체크리스트 - 문제를 내 언어로 바꿔서 표현할 수 있는지 이해를 했는지 확인하기 위해서 - input이 무엇인지 - output은 어때야 하는지 - input을 이용해서 output을 뽑아낼 수 있는지? 혹은 뽑아낼 수 있는 정보를 갖고 있는지? 이는 당장에 답을 하지 못 할 수도 있다. - 주요 데이터를 어떻게 정의해야 할지 예) 두 숫자를 받아서 더한 값을 return 하는 함수 - 문제를 내 언어로 바꿔서 표현할 수 있는지 덧셈 구현 - input이 무엇인지 두 숫자인지, int의 범위를 넘어야 하는지, float인지, number 타입만 처리해야 ..
Moment.js 기본 설치 npm install moment 한글로 바꾸는 방법 import 'moment/locale/ko'; 사용 예제 moment('2021-12-25 10:20:30').format('YYYY년 MMMM Do a h시 mm분 ss초'); // 2021년 12월 25일 오전 10시 20분 30초 moment().format('dddd') // 오늘 날짜 // 수요일 moment 객체의 년, 월, 일, 시간, 분, 초를 number로 가져오는 방법 import moment from 'moment'; const time = moment('2021-12-25 12:00:01', 'YYYY-MM-DD hh:mm:ss'); time.year(); // 2021 (년) time.month(); // 11 (mont..
Moment.js를 이용하여 시간 차이를 구하는 방법 moment에 특정 시간을 설정하려면 아래와 같이 시간을 나타내는 규격화된 형태의 문자를 인자로 넣어야 한다. const time = moment('2021-12-24 12:00:01'); // 경우에 따라서 두 번째 인자를 추가해 첫 번째 인자의 format을 명시해주기도 해야 한다. // moment('2021-12-24 12:00:01', 'YYYY-MM-DD hh:mm:ss') 24일 12시 1초와 25일 12시 1초의 시간 차이를 구해야 한다고 해보자. 먼저 앞의 시간과 뒤의 시간을 moment로 정의해야 한다. import moment from 'moment'; const time1 = moment('2021-12-24 12:00:01'); // 24일 12시 1초 const time2 = m..
재사용 가능한 리액트 컴포넌트를 구현하는 방법 리액트는 컴포넌트로 이루어져 있다. 모든 컴포넌트의 부모가 되는 index.js와 App.js를 시작으로 수많은 컴포넌트가 가지를 이뤄 뻗어 나간다. 컴포넌트 덕분에 개발자는 자연스레 기능 단위로 모듈을 만든다. 이펙트가 화려한 버튼 하나를 잘 만들어 놓으면 필요한 곳에서 쉽게 쓸 수 있다. 자바스크립트보다 훨씬 손쉽게 재사용 가능한 컴포넌트를 만들 수 있다. 그러나 의존성 없이 제대로 구현하지 않으면 본래의 재사용이 아닌 복사 붙여 넣기로 조금 다른 모듈을 새로 만드는 해프닝이 발생할 수 있다. 작은 앱에서야 상관없지만 복잡한 앱이 될수록 컴포넌트나 함수 등으로 잘 정리해 놓지 않으면 스스도 파악이 안 돼 손 쓸 수 없는 상태가 된다. 본 글에서는 어떻게 하면 위와 같은 문제를 피해 리액트 컴포넌트를 ..

티스토리툴바