티스토리

Azubik

검색하기

블로그 홈

Azubik

usgnuscodenote.tistory.com/m

구 불출 님의 블로그입니다.

구독자: 0

방명록 방문하기

반응형

주요 글 목록

React ES7 React Extension Default 컴포넌트 자동완성 출처 : 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 작업을 하다보면 컴포넌트를 생성할 때마다 위와 같은 .. 공감수 0 댓글수 0 2022. 2. 9.
React Modal createPotal 리액트 모달창 띄우기 리액트를 통해 새로운 프로젝트를 만드는 중인데 로그인 기능을 구현하고 싶다. 우선 로그인 버튼을 누르면 로그인 페이지로 이동하지 말고 모달창을 열어서 로그인을 하고 싶은데 모달을 사용하려면 어떡해야 하나? React는 최상위 컨테이너인 공감수 0 댓글수 0 2022. 1. 28.
React Styled-Components 자동완성 사용하기 CSS는 스타일링을 할 때 자동완성이 되서 편한데 React에서 Styled-components을 사용하면 자동완성이 안되서 아쉽다 이럴 땐 vscode extension중 vscode-styled-components를 설치하면 된다 공감수 0 댓글수 0 2022. 1. 27.
React Styled-components Naming Convention 이름 규칙 최상위 부모 '컴포넌트명'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.. 공감수 0 댓글수 0 2022. 1. 27.
gatsby 블로그 카테고리 만들기 2 /개발 블로그 제작기 카테고리 목록을 화면에 출력시키긴 했지만 아무 동작도 하지 않는다 우선 카테고리에 클릭 이벤트를 추가해주자 //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"를 추가한 이유는 비대화형 .. 공감수 0 댓글수 0 2021. 12. 13.
gatsby 블로그 카테고리 만들기 1 /개발 블로그 제작기 개츠비 블로그를 커스텀하다보니 개시물을 카테고리별로 분류하고 싶어졌다. 처음부터 카테고리가 있는 테마를 쓰면 편하지만 불편한게 끌리는건 왜인지 모르겠다. 좌측 배너 중간쯤에 카테고리들을 나열하고 카테고리를 클릭하면 해당 카테고리에 해당하는 포스트만 나타낼것이다. 다른 블로그를 찾아보니 page에 새로운 것을 추가하고 gatsby-node를 설정하는등 여러 방법이 있는듯 하나 나는 그냥 조건문을 이용해 렌더링 할것이다. 우선 카테고리를 표시하기 위해 새로운 컴포넌트를 만들었다 이름은 categories.js import React from "react" import { graphql } from "gatsby" const Categories = ({ data }) => { const { group } = .. 공감수 0 댓글수 0 2021. 12. 12.
Gatsby 블로그 typography로 폰트 변경하기/ 개발 블로그 제작기 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.. 공감수 0 댓글수 0 2021. 12. 8.
[React] Each child in a list should have a unique "key" prop. 리액트 키값 오류 {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.. 공감수 0 댓글수 0 2021. 12. 4.
Gatsby Blog height 100% 개츠비 블로그 높이 100% 설정방법 /개발 블로그 제작기 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.. 공감수 0 댓글수 0 2021. 11. 12.
Gatsby 블로그 상단 메뉴바 고정시키기 /개발 블로그 제작기 스크롤을 내리면 상단바도 같이 올라가서 고정 시켜보려 한다. CSS 의 position 속성중 fixed를 사용할 것이다 fixed로 설정하면 부모 엘리먼트로부터 독립되어 내가 위치에 자유롭게 배치시킬 수 있게 되고 브라우저 화면을 스크롤 해도 영향을 받지 않는다. 우선 styled를 import 해주고 import styled from "styled-components" 스타일을 지정할 컴포넌트를 만들고 position 속성을 추가한다 const HeaderStyle = styled.header` position: fixed; `; 내가 원하는 위치까지 설정을 해주고 상단 메뉴바를 지금 만든 컴포넌트로 만들어주면 스크롤을 내려도 상단 메뉴바는 고정되어있는것을 확인할 수 있다. import * as Re.. 공감수 0 댓글수 0 2021. 11. 10.
Gatsby 블로그 styled-component로 global style 설정하기 (createGlobalStyle) /개발 블로그 제작기 styled-component 설치가 안되어있으면 2021.11.10 - [Gatsby] - Gatsby Styled Components 사용하기 설치를 완료한 상태라면 우선 사용할 파일을 새로 만들어준다 globalStyle.js 파일에서 createGlobalStyle 을 import 해준다 import { createGlobalStyle } from "styled-components"; createGlobalStyle을 함수에 할당해주고 원하는 스타일을 지정해서 사용하면 된다 import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` body { margin: 0; } a { text-dec.. 공감수 0 댓글수 0 2021. 11. 10.
Gatsby Styled Components 사용하기 / 개발 블로그 제작기 Gatby 스타일링 방법은 여러가지가 있는데 그중 Styled Component를 사용하려 한다. npm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components gatsby 디렉토리에 설치하고 gatsby-config.js파일에 Styled Component 플러그인을 추가한다. Copygatsby-config.js module.exports = { plugins: [`gatsby-plugin-styled-components`], } 이제 js파일에서 import 하고 원하는 스타일로 꾸미면 되겠다 import React from "react" import styled from "styled-compo.. 공감수 0 댓글수 0 2021. 11. 10.
Gatsby Blog Create 개츠비 블로그 만들기/ 개발 블로그 제작기 1. Set Up Node.js version 14.15 이상 Git Gatsby commandline interface(CLI) version 3 이상 VS Code 2. 프로젝트 생성 Create Gatsby Project 터미널에 gatsby new 명령을 입력한다 원하는 프로젝트 명을 입력한 뒤 엔터를 누르고 기타 설정은 no> no> done으로 넘어간다 생성이 잘 되면 디렉토리로 진입 후 gatsby develop 혹은 npm run develop 명령을 실행한다 localhost:8000 으로 접속하면 정상적으로 개설된 것을 확인할 수 있다. gatsby new gatsby new 명령어 뒤에 프로젝트 이름을 입력하면 기타 설정 없이 바로 패키지가 설치되는데 이 경우 gatsby-starte.. 공감수 0 댓글수 0 2021. 11. 1.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.