Azubik

출처 : https://meaningless-life.tistory.com/15 [React.js] Default 코드를 자동으로 생성해주는 모듈 React로 js를 계속 만들다 보면 Default Componet를 생성할 때 기본적으로 적어줘야 하는 코드들이 있다. import React from 'react' function TestPage() { return ( TestPage ) } export default TestPage 대충.. meaningless-life.tistory.com import React from 'react' const Main = () => { return ( Main ) } export default Main React 작업을 하다보면 컴포넌트를 생성할 때마다 위와 같은 ..

리액트를 통해 새로운 프로젝트를 만드는 중인데 로그인 기능을 구현하고 싶다. 우선 로그인 버튼을 누르면 로그인 페이지로 이동하지 말고 모달창을 열어서 로그인을 하고 싶은데 모달을 사용하려면 어떡해야 하나? React는 최상위 컨테이너인

CSS는 스타일링을 할 때 자동완성이 되서 편한데 React에서 Styled-components을 사용하면 자동완성이 안되서 아쉽다 이럴 땐 vscode extension중 vscode-styled-components를 설치하면 된다

최상위 부모 '컴포넌트명'Layout으로 생성 최상위 부모 자식(바로 하위 요소) '컴포넌트명'Row or '컴포넌트명'Col Row나 Col이라는 실질적인 태그는 div,section태그등이 될 수 있다. Row는 가로, Col은 세로 둘 다 실제 태그는 div여도 flex-direction으로 설정 최상위 부모가 대분류 느낌이라면 이건 소분류 느낌 나머지 요소 네이밍 예시 div태그: '컴포넌트명'Box section태그: 컴포넌트명'Section ul태그: 컴포넌트명'List li태그: 컴포넌트명'Item p태그: 컴포넌트명'Paragraph span태그: 컴포넌트명'Span or '컴포넌트명&#39..

카테고리 목록을 화면에 출력시키긴 했지만 아무 동작도 하지 않는다 우선 카테고리에 클릭 이벤트를 추가해주자 //categories.js const Categories = ({ data, onChangeCat }) => { const { group } = data.allMarkdownRemark const clickHandler = event => { console.log(event.target.innerText) } return ( All {group.map(prop => { const { fieldValue } = prop return ( {fieldValue} ) })} ) } /* 여기서 onKeyPress={clickHandler} 와 role="presentation"를 추가한 이유는 비대화형 ..

개츠비 블로그를 커스텀하다보니 개시물을 카테고리별로 분류하고 싶어졌다. 처음부터 카테고리가 있는 테마를 쓰면 편하지만 불편한게 끌리는건 왜인지 모르겠다. 좌측 배너 중간쯤에 카테고리들을 나열하고 카테고리를 클릭하면 해당 카테고리에 해당하는 포스트만 나타낼것이다. 다른 블로그를 찾아보니 page에 새로운 것을 추가하고 gatsby-node를 설정하는등 여러 방법이 있는듯 하나 나는 그냥 조건문을 이용해 렌더링 할것이다. 우선 카테고리를 표시하기 위해 새로운 컴포넌트를 만들었다 이름은 categories.js import React from "react" import { graphql } from "gatsby" const Categories = ({ data }) => { const { group } = ..

https://www.gatsbyjs.com/docs/using-typography-js/ 문서를 정리한 글 입니다. gatsby-starter 테마를 통해 블로그를 만들었는데 글꼴이 상당히 마음에 들지 않는다. 한글 영어는 괜찮은데 한글을 지원하지 않아 얼른 바꾸고싶은 마음이 든다. 글꼴 바꾸는 방법을 찾아보다가 gatsby 공식 문서에 나와있는 방법을 적용하니 간단하게 적용이 잘 되어 공유하고자 한다. 우선 Typography를 설치하고 gatsbt-config 에 추가해준다. npm install gatsby-plugin-typography react-typography typography gatsby-config module.exports = { plugins: [ { resolve: `gatsb..

{props.items.map((data) => ( ))} map 함수를 통해 컴포넌트를 렌더링 하니 에러가 발생된다 결과물은 이상없이 나타나는데 왜 에러가 나타나는가? 이유는 key값을 설정하지 않았기 때문이다. 해결방법 출력하려는 데이터에 에 key 또는 id 항목을 만들고, 함수를 통해 key값을 추가해주면 이상이 없어진다. const Data = [ { id: "e1", title: "data1", amount: 94.12, date: new Date(2021, 7, 14), }, { id: "e2", title: "data2", amount: 799.49, date: new Date(2021, 2, 12) }, { id: "e3", title: "data3", amount: 294.67, dat..

Gatsby를 통해 블로그를 만드는중인데 footer를 bottom:0; 으로 설정해도 자꾸 위로 올라온다 body에 height를 100으로 설정해도 아무런 변화가 없다 개발자 도구를 통해 확인해보면 #___gatsby, #gatsby-focus-wrapper에 이미 height가 컨텐츠에 맞춰서 설정되어있다. global style에서 별도로 height를 적용해주면 해결 된다. // globalStyle.js import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` * { margin: 0; padding: 0; box-sizing: border-box; } #___gatsby, #gats..

스크롤을 내리면 상단바도 같이 올라가서 고정 시켜보려 한다. CSS 의 position 속성중 fixed를 사용할 것이다 fixed로 설정하면 부모 엘리먼트로부터 독립되어 내가 위치에 자유롭게 배치시킬 수 있게 되고 브라우저 화면을 스크롤 해도 영향을 받지 않는다. 우선 styled를 import 해주고 import styled from "styled-components" 스타일을 지정할 컴포넌트를 만들고 position 속성을 추가한다 const HeaderStyle = styled.header` position: fixed; `; 내가 원하는 위치까지 설정을 해주고 상단 메뉴바를 지금 만든 컴포넌트로 만들어주면 스크롤을 내려도 상단 메뉴바는 고정되어있는것을 확인할 수 있다. import * as Re..