[React🌀] React로 2048 게임 만들기 ! 🎮 / 1️⃣ - 기본 세팅 및 소개 / Clone Coding
2048 게임 한 때 친구들 폰에 하나씩은 꼭 깔려있던 게임인 2048 입니다. 컴퓨터 버전도 있더군요! 참 특별할 거 없는데 뭔가 모르게 재밌습니다 ㅎㅎ 게임 하나를 만들어보고 싶어서 고민하다가 직접 만드는건 재미가 너무없을 것 같아서 (창의력 부족 😥) 2048 클론 코딩을 도전했습니다! https://play2048.co/ 2048 Join the numbers and get to the 2048 tile! Careful: this game is extremely addictive! play2048.co 차별화 클론 코딩의 장점은 내가 원하는 부분을 바꿀 수 있다는 점입니다. 그래서 어떤 점을 특별하게 하면 좋을까 생각을 해봤습니다! 여러가지 테마 선택 기능 2048 게임이 단순한 게임이다보니까 질..
2020. 8. 17.
[React🌌] React + Ant Design + TypeScript 적용하기! / antd 사용
Ant Design 중국에서 만든 웹, 앱 디자인 개발을 위한 프레임워크입니다! 저는 React 만 다뤄봐서 React 에 초점을 맞춰 설명하겠습니다! React 로 프론트 쪽 작업을 하다보면, 디자인이 필요한 경우가 생깁니다. 그런데 저희같은 (아마도 저만..) 그림 감수성이라고는 거리가 먼 사람들은 툴 없는 디자인이란 정말 높은 산과도 같죠. 코드 1000줄 쓰는 것 보다 레이아웃 잡고, 색 고르고 모양 신경쓰는게 더 어려울 수도 있습니다... 그런 저에게 Ant Design은 그저 사막에 내리는 단비 같은 존재 였습니다. 암튼 Ant Design 짱짱. 바로 사용법 들어갑니다. 사용법 0. React 사용 우선 기본적으로 react를 다룰 줄 아는 것을 기본으로 전제하고 설명하겠습니다. React ..
2020. 7. 30.
[React] 마우스 비밀번호 입력기🖱 / 키보드 보안 입력기 / 2차 비밀번호
비밀번호 입력기 결제 관련 중요한 창에서 비밀번호를 입력할 때나, 게임 2차 비밀번호를 입력할 때 매크로를 방지하고 키보드 해킹을 막기 위해 위와 같은 마우스 입력기를 쓰곤 합니다. 이런 키보드 보안 프로그램 모습을 따서 간단한 React 마우스 입력기를 만들어 보았습니다!! 비밀번호 한 글자를 입력할 때 마다, 비밀번호 배열이 무작위하게 재설정됩니다. Submit 버튼으로 입력한 비밀번호를 확인할 수 있습니다! 코드 써먹으려면 코드를 알아야겠죠? 간단한 단일 웹 어플리케이션이기에 create-react-app typescript 모드로 개발하였습니다. App.tsx 의 모습입니다. 전체 틀을 구성하고 있고 Inputter 컴퍼넌트를 불러와 표시합니다. 저는 배열에 숫자들을 담아 섞어준 뒤 그 배열 전체..
2020. 7. 20.
[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ③ webpack-dev-server & react-hot-loader 적용/ 실시간 업데이트 기능
전 포스팅에도 말했듯이, 새로 코드를 수정할 때마다 ,웹팩을 계속해서 다시 구성하면 개발하는데에 시간이 엄청나게 소요될 것입니다.😒 오늘 우리의 목표는, webpack-dev-server와 react-hot-loader 를 이용해, React 프로젝트의 실시간 리로딩 기능을 구현할 것입니다!👍 설치 이전 모듈들과 마찬가지로 다음과 같이 개발자 모드로 설치를 해줍시다. 설치된 것을 확인 후, 바벨 로더 플러그인 부분에 react-hot-loader를 추가해줍니다. babel 과 webpack-dev-server 를 연결해 주는 역할입니다. 우리는 앞으로 webpack-dev-server 를 이용해 구성을 할 것이므로 package.json 에서 빌드 방식을 변경해주어야 합니다. 이제는 webpack 이아닌..
2020. 1. 25.
[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ② babel이란? babel 밑 webpack 세팅
babel 이란? 아시다시피 자바스크립트는 시대가 변함에 따라 점점 발전하고 있습니다. 그만큼 그 발전한 버전을 따라주지 못하는 브라우저 혹은 환경이 있기 마련이죠. babel은 최신 문법을 써도 이전 버전 브라우저 환경에서도 사용할 수 있도록 최신 문법을 특정 예전버전의 js 로 변환해주는 툴 입니다! 쉽게말하자면 최신문법을 이전문법으로 바꿔주는 API 이죠. 😮 babel 사이트에서 지원하는 예시입니다. // Babel Input: ES2015 arrow function [1, 2, 3].map((n) => n + 1); // Babel Output: ES5 equivalent [1, 2, 3].map(function(n) { return n + 1; }); 바벨 가이드 : https://babelj..
2020. 1. 21.
[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ① 설치 및 세팅
아마 대부분 React 개발을 하실 때 $ npx create-react-app 요런 명령어를 이용하셔서 간편하게 설치하셨을거라 생각합니다. 이 명령어 하나만으로 참 편리하게 알아서 뚝딱뚝딱 필요한 것들이 절로 생성되죠.😮 하지만 이러한 명령어 없이 맨 바닥에서도 react 웹을 만들 수 있습니다! 이것은 React의 원리와 모듈들의 기능을 이해하는데에 도움이 됩니다. 그럼 시작해봅시다!😆 * Node.js 는 기존에 설치가 되어있어야 합니다. ( 설치 바로가기 : https://nodejs.org/ko/download/ ) 1. 기본이 될 HTML 만들기 C:\no_create_react_web\index.html 웹의 틀이 될 html 을 만들어줍니다. 저는 C:\no_create_react_web ..
2020. 1. 17.
[React🌀] React로 2048 게임 만들기 ! 🎮 / 1️⃣ - 기본 세팅 및 소개 / Clone Coding
2048 게임 한 때 친구들 폰에 하나씩은 꼭 깔려있던 게임인 2048 입니다. 컴퓨터 버전도 있더군요! 참 특별할 거 없는데 뭔가 모르게 재밌습니다 ㅎㅎ 게임 하나를 만들어보고 싶어서 고민하다가 직접 만드는건 재미가 너무없을 것 같아서 (창의력 부족 😥) 2048 클론 코딩을 도전했습니다! https://play2048.co/ 2048 Join the numbers and get to the 2048 tile! Careful: this game is extremely addictive! play2048.co 차별화 클론 코딩의 장점은 내가 원하는 부분을 바꿀 수 있다는 점입니다. 그래서 어떤 점을 특별하게 하면 좋을까 생각을 해봤습니다! 여러가지 테마 선택 기능 2048 게임이 단순한 게임이다보니까 질..
[React🌌] React + Ant Design + TypeScript 적용하기! / antd 사용
Ant Design 중국에서 만든 웹, 앱 디자인 개발을 위한 프레임워크입니다! 저는 React 만 다뤄봐서 React 에 초점을 맞춰 설명하겠습니다! React 로 프론트 쪽 작업을 하다보면, 디자인이 필요한 경우가 생깁니다. 그런데 저희같은 (아마도 저만..) 그림 감수성이라고는 거리가 먼 사람들은 툴 없는 디자인이란 정말 높은 산과도 같죠. 코드 1000줄 쓰는 것 보다 레이아웃 잡고, 색 고르고 모양 신경쓰는게 더 어려울 수도 있습니다... 그런 저에게 Ant Design은 그저 사막에 내리는 단비 같은 존재 였습니다. 암튼 Ant Design 짱짱. 바로 사용법 들어갑니다. 사용법 0. React 사용 우선 기본적으로 react를 다룰 줄 아는 것을 기본으로 전제하고 설명하겠습니다. React ..
[React] 마우스 비밀번호 입력기🖱 / 키보드 보안 입력기 / 2차 비밀번호
비밀번호 입력기 결제 관련 중요한 창에서 비밀번호를 입력할 때나, 게임 2차 비밀번호를 입력할 때 매크로를 방지하고 키보드 해킹을 막기 위해 위와 같은 마우스 입력기를 쓰곤 합니다. 이런 키보드 보안 프로그램 모습을 따서 간단한 React 마우스 입력기를 만들어 보았습니다!! 비밀번호 한 글자를 입력할 때 마다, 비밀번호 배열이 무작위하게 재설정됩니다. Submit 버튼으로 입력한 비밀번호를 확인할 수 있습니다! 코드 써먹으려면 코드를 알아야겠죠? 간단한 단일 웹 어플리케이션이기에 create-react-app typescript 모드로 개발하였습니다. App.tsx 의 모습입니다. 전체 틀을 구성하고 있고 Inputter 컴퍼넌트를 불러와 표시합니다. 저는 배열에 숫자들을 담아 섞어준 뒤 그 배열 전체..
[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ③ webpack-dev-server & react-hot-loader 적용/ 실시간 업데이트 기능
전 포스팅에도 말했듯이, 새로 코드를 수정할 때마다 ,웹팩을 계속해서 다시 구성하면 개발하는데에 시간이 엄청나게 소요될 것입니다.😒 오늘 우리의 목표는, webpack-dev-server와 react-hot-loader 를 이용해, React 프로젝트의 실시간 리로딩 기능을 구현할 것입니다!👍 설치 이전 모듈들과 마찬가지로 다음과 같이 개발자 모드로 설치를 해줍시다. 설치된 것을 확인 후, 바벨 로더 플러그인 부분에 react-hot-loader를 추가해줍니다. babel 과 webpack-dev-server 를 연결해 주는 역할입니다. 우리는 앞으로 webpack-dev-server 를 이용해 구성을 할 것이므로 package.json 에서 빌드 방식을 변경해주어야 합니다. 이제는 webpack 이아닌..
[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ② babel이란? babel 밑 webpack 세팅
babel 이란? 아시다시피 자바스크립트는 시대가 변함에 따라 점점 발전하고 있습니다. 그만큼 그 발전한 버전을 따라주지 못하는 브라우저 혹은 환경이 있기 마련이죠. babel은 최신 문법을 써도 이전 버전 브라우저 환경에서도 사용할 수 있도록 최신 문법을 특정 예전버전의 js 로 변환해주는 툴 입니다! 쉽게말하자면 최신문법을 이전문법으로 바꿔주는 API 이죠. 😮 babel 사이트에서 지원하는 예시입니다. // Babel Input: ES2015 arrow function [1, 2, 3].map((n) => n + 1); // Babel Output: ES5 equivalent [1, 2, 3].map(function(n) { return n + 1; }); 바벨 가이드 : https://babelj..
[React🌌] 초보를 위한 create-react-app 없이 빌드하기 / ① 설치 및 세팅
아마 대부분 React 개발을 하실 때 $ npx create-react-app 요런 명령어를 이용하셔서 간편하게 설치하셨을거라 생각합니다. 이 명령어 하나만으로 참 편리하게 알아서 뚝딱뚝딱 필요한 것들이 절로 생성되죠.😮 하지만 이러한 명령어 없이 맨 바닥에서도 react 웹을 만들 수 있습니다! 이것은 React의 원리와 모듈들의 기능을 이해하는데에 도움이 됩니다. 그럼 시작해봅시다!😆 * Node.js 는 기존에 설치가 되어있어야 합니다. ( 설치 바로가기 : https://nodejs.org/ko/download/ ) 1. 기본이 될 HTML 만들기 C:\no_create_react_web\index.html 웹의 틀이 될 html 을 만들어줍니다. 저는 C:\no_create_react_web ..