개발새발로그

vue프로젝트에서 vue파일에 글자색이 모두 하얀색일 땐 어떻게 해야할까? 위 캡처본의 우측 하단에 보면 Vue Language Features를 install하라는 알람이 뜬다. install해주면 추가 설정 없이도 아래와 같이 기존에 우리가 아는 컬러 있는 코드로 바뀐다.

컴포넌트란 무엇일까? 컴포넌트 : 여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위 하나의 페이지를 구현할 때 여러개의 컴포넌트를 활용하여 만들면 재사용이 가능하다는 장점을 갖는다. 여러 페이지에 필요한 헤더를 컴포넌트 폴더에 생성했다. import React from "react" import { Row, Col } from "reactstrap" import { css } from "@emotion/react" const HeaderCss = css` text-align: center; div { background-color: rgba(116, 172, 62, 0.12); border: 1px solid rgba(30, 20, 13, 0.2); } `..

React 개발 시 bootstrap과 같은 오픈 소스 프레임워크와 함께 많이 사용되는 것이 'Material UI'이다. 기본적인 컴포넌트를 쉽게 사용할 수 있다는 장점을 갖는다. 오늘은 여러 컴포넌트 중 버튼에 대해 작성하려고 한다. Material UI 의 Button을 사용하기 위해서는 아래의 단계를 거쳐야 한다. 1. 터미널에서 아래와 같은 명령어를 통해 material-ui를 install한다. npm install @material-ui/core 2. Button을 사용할 페이지에 임포트한다. import React from "react"; import Button from "@material-ui/core/Button"; 3. Button을 사용하여 retrun을 구현한다. import "..

React.memo는 무엇일까? : 고차 컴포넌트(Higher Order Component)를 말하며 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용하는 작업을 수행하는 것 React.memo는 props의 변화에만 영향을 준다. 페이지의 Header를 components폴더에 분리하여 작성하였는데 의도와는 다르게 page가 서버와의 통신 작업을 수행하는 횟수만큼 Header를 불러오는 것을 발견했다. const Header = props => { const item = props.sharedItem console.log(item) return ( inthyes ) } export default Header 한 페이지에 접근하였는데 5번이나 헤더가 출력을 찍어낸다. 성능을 운운할 개발 단계가..

내가 자꾸 까먹어서 적는 글.. 이렇게 적으면 부끄러워서라도 외우지 않을까?//... 사실 html을 자주 사용하진 않는다. 관련된 프레임워크를 사용할 뿐이지.. 그래서 html환경에서 기본 틀을 출력해주는 단축키를 자꾸 까먹는다. [! + tab]이다. 까먹지 좀 말자 너무 기본이라 그런지 구글링해도 잘 안나온다.(내가 못하는거긴 함)

npm install만 했을 뿐인데 이런 에러가 난다..? err두번째 줄을 보면 바로 문제점을 찾을 수 있다. mkdir이 거부된 것인데 이는 권한 문제이다. 본인의 작업 환경에 대한 정확한 분석이 필요하다. 평상시 macOS를 사용하며 vscode에서 권한 문제에 대한 이슈를 한번도 안겪었는데 windows를 사용하면서부터 권한 문제에 관한 이슈들이 많아졌다. 사무실에서 쓰는 windows 데스크탑은 입사전부터 초기설정이 되어있어서 프로젝트를 수행할 때에는 windows 사용자를 새로 생성후에 사용중이다. 그래서.. 관리자로 vscode를 열지 않으면 이런 오류가 생긴다.

리액트로 정말 많은 것들을 모듈로 불러와서 사용하는 것이 가능하다. 오늘은 이 중에서 구글 GEO차트로 지도를 구현하는 것에 대해 적어보려고 한다. 지도는 기본적으로 전세계 지도로 구현된다. 이 외에도 특정 국가만 보이도록 구현하는 것이 가능하다. ISO 3166 전 세계의 나라와 부속 영토, 나라의 주요 구성 단위의 명칭에 고유 부호를 부여하는 국제 표준으로 세 가지 세부 표준으로 구성된다. ISO 3166-1은국가별 번호가 지정되어있다. https://namu.wiki/w/ISO%203166 ISO 3166 - 나무위키 ISO가 아닌 다른 단체나 개인이 추가 할당한 코드들. 예를 들면 다음과 같은 것들이 있다. 국가나 지역이 아닌 것도 있다. QZ: 유럽연합 식물품종청(Community Plant V..

문제상황 gatsby 템플릿 다운받은 후에 data-loader, gatsby-node.js 환경을 세팅한 상태로 프로젝트 수행 중[ERROR #11321]에러를 여러번 겪었는데 대다수가 오타로 인해 변수명 인식을 못하는 거였다. 아무리 오타를 찾아도 못찾아서 cache를 삭제해보거나 변수를 함수 내부에서 선언해보거나 등등.. 인터넷에 공유된 ERROR #11321에 관한 여러 시도를 해봤지만 성공하진 못했다.. createPages후크 함수를 처음 사용해보아서 당연히 변수명이 'createPages'일줄 알았는데 단수인 createPage가 옳다. 사용자 지정 변수가 아니기 때문에 무조건 형식에 맞게 사용해야한다. (당연한 소리다.) exports.createPages = async ({ actions..

개츠비란? 다양한 데이터 소스를 이용하여 정적 웹사이트를 빌드하는 리액트 기반 오픈 소스 프레임워크 리액트의 장점을 그대로 가져오면서 정적 웹 사이트를 쉽게 만들 수 있다. 개츠비의 장점 정적 웹페이지 방식을 사용하기 때문에 웹사이트 운영 비용이 저렴하고 페이지 로딩 속도가 빠르다 리액트를 이용하여 정적 웹페이지를 개발할 수 있어 개발 생산성이 좋다 개츠비의 단점 웹페이지의 콘텐츠 내용이 변경될 때마다 다시 빌드하여 배포해야 하는 번거로움이 존재 실시간으로 변경되는 데이터나, 게시판 같이 사용자들이 동적으로 만들어내는 콘텐츠를 보여주는 데 최적화되어 있지 않음 언제 사용하면 좋을까? 콘텐츠가 자주 변경되지 않으며 변경 사항을 실시간으로 반영하지 않는 정적 웹사이트 개발에 적합하다 상황에 따라 정적 웹페이..