학습 내용/Front-End17 [Next.js] Next.js에서 CSS 사용하기 📟 Next.js 문서의 "Built-In CSS Support" 부분을 번역한 것으로 오역이 있을 수 있습니다. (원문: https://nextjs.org/docs/basic-features/built-in-css-support) Next.js에선 자바스크립트 파일에서 CSS를 import 해올 수 있습니다. 이는 Next.js가 import의 개념을 자바스크립트의 것 이상으로 확장하기 때문입니다. [전역 스타일시트(global stylesheet) 추가하기] 애플리케이션에 스타일시트를 전역으로 추가하려면, pages/_app.js 파일에 CSS를 import 해오세요. 예를 들어, 아래와 같은 style.css라는 이름의 스타일시트가 있다고 합시다. /* styles.css */ body { font.. 2021. 10. 3. [React] 리액트 상태 관리의 과거, 현재, 그리고 미래 본 글은 Lee Robinson의 포스팅 「Past, Present, and Future of React State Management」을 읽고 요약한 것으로, 오역이 있을 수 있습니다. (원문 바로가기) 2013년 5월 등장한 리액트는, 컴포넌트의 상태를 바탕으로 컴포넌트의 모양을 결정합니다. 이처럼 리액트는 "상태"라는 개념에 기초하는데요, 상태는 리액트 애플리케이션을 개발할 때 가장 어려운 부분 중 하나로 손꼽혀왔습니다. 용어 정리 본격적으로 글을 시작하기 전, 자주 쓰이는 용어들에 대한 정리부터 해볼까요? 이 용어들은 어떤 경우에는 다르게 불리기도 하지만 근본적인 의미는 동일합니다. UI 상태(UI State) : 애플리케이션에서 인터랙티브한 부분을 제어하기 위해 사용하는 상태 ex - 다크모드 .. 2021. 9. 29. [Redux] 리덕스 모듈 만들기 - 덕스 패턴(Ducks pattern) 리덕스 모듈 리덕스 모듈이란? 액션 타입(Actions), 액션 생성 함수(Action Creators), 리듀서(Reducer)가 모두 들어있는 자바스크립트 파일을 의미함. 이렇게 하나의 파일에 작성하는 것을 덕스(Ducks) 패턴이라고 함. 리덕스 모듈에서 리듀서는 default export하고, 액션 생성 함수는 그냥 export함. "덕스 패턴"이 뭐고 이걸 쓰면 뭐가 좋은걸까? 덕스 패턴은 Erik Rasmussen님이 리덕스 사용 방법과 관련하여 제안한 패턴이다. (참고) 액션 타입, 액션 생성 함수, 리듀서를 각각 별도의 파일(심지어는 별도의 폴더)에 분리하여 작성하기 보다는, 그 셋을 하나의 모듈처럼 한 파일 안에 작성하자는 제안이다. 사실 나는 학원에서 리덕스를 처음 배울 때부터 덕스 패.. 2021. 9. 23. [라이브러리] Chart.js 시작하기 본 글은 저희 회사 기술블로그에도 동일한 내용으로 작성해놓았는데요, 저희 회사 개발자분들과 디자이너분들이 작성하신 좋은 내용들이 많으니 한번 구경해보셔도 나쁘지 않을 것 같슴니다..🎀 안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있는 Anne입니다. 이번에 프로젝트를 하면서 차트를 그리기 위한 용도로 Chart.js를 사용하게 되었습니다. 워낙에 기능도 많고 괜히 복잡해보여서(구현하려는 기능에 따라 뒤에 복잡한 부분이 분명 있기도 합니다만…😌) 선뜻 시작하기가 어려웠습니다. 뭐든 시작이 제일 어려운 법인데, 이번 시간에는 저처럼 차트를 “구현해야만“ 하는 상황에서 Chart.js를 “덜 어렵게” 시작할 수 있도록 Chart.js의 기본 사용 방법 및 커스텀을 위해 제공되는 옵션들에 대해 간단히 소.. 2021. 8. 21. React Query [NPM] https://www.npmjs.com/package/react-query [공식 문서] https://react-query.tanstack.com/overview [참고 포스팅] React Query - 왜, 그리고 어떻게 사용할 수 있을까? 들어가기 전.. Query(쿼리)란? Query란 '데이터베이스에 있는 정보에 대한 요청'을 의미합니다. (참고: What is a Query? Database Query Explained) React Query(쿼리)란? React Query의 공식 문서에 따르면 React Query는 리액트용 데이터 fetching 라이브러리로서, 구체적으로는 데이터 fetch, 캐싱, 동기화, 리액트 애플리케이션의 서버 상태 업데이트 등 데이터 요청과 관련된 주요.. 2021. 5. 28. 이전 1 2 3 다음
