일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
- 타입스크립트
- 프론트엔드
- 자바스크립트
- 알고리즘
- react
- 솔리디티
- next.js
- 리액트
- 쿠버네티스
- 클라우드
- BFS
- VUE
- JavaScript
- kubernetes
- HTML
- 블록체인
- k8s
- 이더리움
- 가상화
- 파이썬
- AWS
- 컴퓨터공학
- es6
- TypeScript
- 이슈
- 백엔드
- docker
- 웹
- 백준
- CSS
- Today
- Total

목록📖 🎨 프론트엔드 (87)
즐겁게, 코드

Next.js에는 두 가지 중요한 기본 페이지가 있는데요, 바로 _document와 _app 입니다. _document와 _app에는 페이지에 공통적으로 적용될 내용을 작성하곤 하는데, 둘이 정확히 어떻게 다른지와 어떤 내용을 작성해야 하는지에 대해 정리해 보겠습니다. 📝 App 페이지 _app은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페이지에 적용할 공통 레이아웃의 역할을 합니다. 🎯 주요 사용 목적 모든 컴포넌트에 공통으로 적용할 속성 관리 function MyApp({ Component, pageProps }) { return } export default MyApp ⚙️ 규칙 1. Component 속성값은 서버에 요청한 페이지가 됩니다. (Ex. http://localhost..

바벨 파일 세팅과 _document.tsx만 저렇게 주어진 템플릿대로 구성하면 ServerStyleSheet 설정을 적용할 수 있는데요, 이러면 서버에서 문서를 내려받을 때 스타일이 적용된 문서를 내려받음으로써 렌더링 이전에 styled-components를 통한 스타일이 적용되지 않는 문제를 방지할 수 있습니다. 처음 보면 어려울 수도 있고, 템플릿이 외워서 칠만큼 간단하지도 않은 만큼 이번 기회에 블로그에 메모해두려 합니다. 1. 의존성 패키지 설치 npm i styled-components babel-plugin-styled-components npm i -D @types/styled-components 2. .babelrc 파일을 루트 폴더에 생성한 후, 다음과 같이 작성한다. { "presets..

Tailwind CSS가 요즘 새로운 CSS 프레임워크로 떠오르고 있습니다. Tailwind CSS는 부트스트랩처럼 클래스명을 통해 전처리된 스타일을 적용할 수 있지만, 여기에 더해 tailwind.config.js 파일을 통해 다크 모드 설정, 추가할 플러그인 등 부트스트랩보다 훨씬 광범위하고 편리한 커스텀 기능을 제공합니다. 음... 사실 이렇게 말씀드리면 잘 와닿지 않으실 수도 있어 공식 문서의 예제를 하나 빌려보겠습니다. ChitChat You have a new message! 위 UI를 구현하기 위해서는 이렇게 장황한 CSS가 필요합니다. 만약 CSS에 익숙하지 않다면 여기서 더 헤매야만 하겠죠. 그러나 테일윈드를 활용하면, 이 장황한 코드가 놀랄 만큼 줄어들게 됩니다. ChitChat You..

리덕스 사가에는 주식시장을 떠오르게 하는 콜(call)과 풋(put)이 있습니다. (물론 주식과의 연관성은 제로입니다! 😄) 이 중 사가 안에서 콜백을 호출하는 콜에 관한 궁금증이 생겼는데, 바로 코드를 통해 공유드리도록 하겠습니다. // api/getMemberList.js export const getMemberList = async () => { const res = await fetch("http://localhost:5000/member"); const data = await res.json(); return data; }; // sagas/requestSaga.js // 예외처리 및 yield all 등의 로직은 생략했습니다. const loadSuccess = (data) => ({ type..

뷰를 조금씩(정말 조금씩..) 공부하고 있는데, 의아한 점이 하나 생겼습니다. 바로 컴포넌트의 데이터를 관리하는 부분에서 name 이라는 속성을 내보내고 있는데, name 속성은 있으나 없으나 에러나 경고를 출력하지 않았기 때문입니다. 찾아본 결과, name 속성을 명시하는 것은 선택이나 두 가지 경우에는 꼭 명시해야만 합니다. 컴포넌트 구조가 재귀적일 때 : 재귀 컴포넌트에 대한 내용은 리액트에서는 들어보지 못한 개념이라 생소하지만, name 속성이 없으면 컴포넌트를 재귀적으로 구성할 수 없다고 합니다. Vue 개발자 도구를 사용할 때 Vue 개발자 도구를 사용해 디버깅을 할 때는 컴포넌트의 name을 기반으로 컴포넌트 트리를 보여줍니다. 따라서 컴포넌트를 재귀적으로 구성하지 않는다면 name 속성을 ..

타입스크립트가 점점 프론트엔드 생태계에서의 입지를 굳혀가고 있는데요, 간단한 입력값을 상태로 관리하는 예제를 타입스크립트로 구성해보도록 하겠습니다. 😆 진짜 쉬워요! 타입스크립트를 끼얹기 전까진... import React, { useState } from "react"; const App = () => { const [name, setName] = useState(null); const handleInput = (e) => { setName(e.target.value); }; return ( {name} ); }; export default App; 입력받는 값을 상태로 관리하고 화면에 나타내는 코드입니다. 이렇게만 보면 간단하지만 갑자기 타입스크립트를 얹게 되면 막막할 수도 있는데요, 위 코드에 차근..

오랜만에 개츠비 블로그를 보수하던 중, 제목이 너무 길면 모바일에서 못나게 보이던 문제가 있었습니다. text-overflow 속성을 활용하면 저렇게 삐져나오는(overflow) 텍스트를 쉽게 처리할 수 있습니다. 🔨 text-overflow text-overflow는 먼저 단독으로 사용될 수 없습니다. text-overflow는 overflow: hidden을 대체하는 것이 아니라 레이아웃을 삐져나오는 순간 해당 텍스트를 특정 문자열로 교체하는데요, 따라서 항상 삐져나온 텍스트를 숨겨주는 overflow: hidden 과 여러 줄의 텍스트를 한 라인으로 만들어주는 white-space: nowrap 속성이 항상 세트로 필요합니다. (+ 적용할 문자는 항상 display: block 속성이어야 합니다!)..