일안하고블로그

개발을 하면서 input 태그를 사용하여 처리하는 것을 많이 사용 합니다 . 저도 input 태그를 엄청 사용하는데 사용할때마다 선언을 해주고 관리해주는게 정말 귀찮고 어렵습니다. 그래서 이전에 인강을 보고 정리해야지 미루었던 부분을 정리해보려고합니다. 이전에 봤던 인강 사이트는 노마더 코더님 사이트입니다. react hooks에 대해서 정말 정리도 잘해주시고 무료로 제공해주시는 좋으신 분이십니다. 재사용성을 높이기 위해 함수형으로 hook을 사용 하는 방법을 자세하게 설명해 주셨습니다. nomadcoders.co/react-hooks-introduction/lobby Watch Now - 노마드 코더 Nomad Coders nomadcoders.co 해당 프로세스에서 react hooks를 사용하고 +..

이번에 다룰 내용은 typescript interface /action / redux / reducer 을 통해서 counter 을 만드는 예제를 만들어 보겠습니다 . 이전에 react로 counter예제를 만들어 보셨으면 이해하기 편합니다. 타입스크립트하고 redux를 어느정도 이해하시면 내용은 조금 많지만 금방 이해하실수 있을거에요 . 1. 명령어를 입력해주세요 . yarn add redux next-redux-wrapper yarn add --dev redux-devtools-extension redux-logger next 와 react를 연결하기 위해서 next-redux-wrapper가 필요합니다. 나머지는 미들웨어 설정을 하면서 결과를 보기 위해 받습니다. 2. store 생성 import ..

드디어 Next Js를 다뤄 봅니다. Next Js 를 시작하기 전에 우선 알아야 할 것이 있습니다. 1장 2장 기초지식 ? 조금을 가지고 작업을 해야하기 때문에 이전 작업 내용을 확인해주세요. 2021/01/22 - [React/NextJS] - [Next Js ]1. React + Typescript +nextJs 적용 법 create-next-app 2021/01/22 - [React/NextJS] - [Next Js] 2. create-next-app 에 Eslint & prettier적용하기 또한 블로그에서 보는 내용 보단 아래링크에서 next js의 상세 설명을 조금은 보시고 작업하는게 정말 좋습니다. (저도 다이해한 것은 아닙니다 ㅠㅠ ) nextjs.org/docs Getting Start..

개발 tool은 vsocde로 사용을합니다. 개발을 할때 eslint와 & prettier 적용을 안하면 정말 많이 불편합니다. 설정을 제대로 하면 개발 시간이 2배이상 증가 할 거라고 생각될 만큼 저한테는 정말 중요한 설정입니다. 1. yarn add 해주세요 . (제가 사용하는 것들입니다.) yarn add --dev eslint eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser 2. 로컬에 .eslintrc 파일을 추가합니다. {..

프론트엔드 개발을 하면서 빠르게 개발하고 쉽게 유지 보수를 하기 위해서 여러가지 방법을 사용하다가 타입스크립트 / 리액트 / NextJs를 사용하는 경우가 많아 졌고 기존에 create-react-app에서 create-next-app 을 사용 해 볼 기회도 많아지고 여러가지 프로젝트를 하면서 정리의 필요성을 느꼈습니다. 일주일만에 빠르게 사이트를 개발 할때 정말 빠르게 개발을 할 수 있습니다. nextJs같은경우 최근에 버전업을 해서 사용법도 조금 달라진부분이 있어서 2021년 1월 최신버전을 사용해 보려고 합니다. NextJs - create-next-app 적용 방법 yarn global add create-next-app // create-next-app 글로벌 추가 create-next-app ..

vscode에서 많은 snippets Extention을 이미 제공합니다. 하지만, 최근에 타입스크립트를 많이 사용하고 있어서 만들고 싶은 형태의 타입스크립트를 사용하는데 많은 한계가 있어서 간단하게 Snippets을 만들어 사용 방법을 남깁니다. 1. vscode를 띄우고 캡쳐 화면의 경로로 들어갑니다. 2. 다음으로 New Global Snippets file을 클릭합니다. 3..클릭을 하시면 이름을 정해야하는데 이름은 편하신대로 정하시면 됩니다. 4. 파일이 만들어지면 양식에 맞춰서 형태를 만들어주면 됩니다. 제가 간단하게 만든것을 보고 참조해서 만들면 됩니다. { "Typescript for Props": { // snippets이름 "prefix": ["dh1"], // 약어입니다. 편하게 본인..

친구하고 자전거 여행중 이쁘게 생긴 스타벅스를 방문하게 되었습니다. ​ 제가 간곳은 일본 사가에 있는 스타벅스 인데요. 그곳에서 현재 일본에서 시그니쳐? 로 팔고있는 화이트 초콜렛 프라프치노를 주문해 보게 되었습니다. ​​메뉴판에서 메뉴는 두개인데 저는 화이트 프라프치노를 주문했어요.​가격은 626엔.. 6250원정도 인것 같아요. ​실제 모습이에요. 확실히 이쁘게 생겼습니다.​상단에 보석 같은 초콜렛 토핑하고 간간하게 마시멜로우가 있습니다. ​​​​​​한국에도 메뉴가 나오면 꼭 또 주문할 것 같아요.

일본 스타벅스 메뉴판 입니다 18년 12월 1일에 찍어어요 ​

일본 후쿠오카에 방문해서 그린티 라떼 가격도 궁금하여 주문을 해 보았어요. ​가격은 세금포함 464엔 입니다. 한국돈으로 4600원정도 합니다. 한국에서는 5900원으로 알고 있습니다

일본 스타벅스 가격대가 궁금하여 여행중 방문 했습니다. 방문지역은 후쿠오카 텐진이에요. ​ 아이스 아메리카노의 가격은 세금 포함 367엔입니다. 한국돈으로 대략 3600원입니다. ​ ​