본문 바로가기

WEB/HTML CSS JS

 (75)
[React.js] 애니메이션으로 등속운동 하는 박스 만들기 이번에는 속도 v = s/t 를 공식을 이용해 박스를 만들어보겠습니다. +, - 버튼으로 시간, 거리를 조절하겠습니다. 이제 어떻게 만들지 한번 생각해봅니다. 구상 A 위치에서 B 위치로 이동하는 박스를 하나 만들어 줍니다. 이건 css 애니메이션을 이용해 박스 위치를 옮겨주면 될 것 같습니다. 속도에서 시간은 animation-duration 값 거리는 각 key-Frames 위치를 사용하면 됩니다. css를 다루는 것이니 styled-components 사용하면 더 편할 것 같습니다. yarn add styled-components 컴포넌트는 시간과 거리를 state로 갖습니다. 이 값은 css에서 사용되고 버튼 클릭으로 변경하게 합니다. 코딩 Velocity.js import React, { use..
[Python] tkinter 공부 tkinter는 파이썬 인터페이스 gui toolkit이다. 간단한 프로그램을 tkinter로 gui 프로그램으로 만들 수 있다. 먼저 tkinter가 설치되어있는지 확인해보자. cmd에서 python -m tkinter로 확인 가능하다. Hello world python 문서에서 제공하는 첫번째 hello world 예제를 만들어보자. from tkinter import * from tkinter import ttk root = Tk() root.geometry("200x50+600+200") frm = ttk.Frame(root, padding=10) frm.grid() ttk.Label(frm, text="Hello World!").grid(column=0, row=0) ttk.Button(frm,..
[React.js] 숫자 맞추기 게임 baseball(숫자 야구) 숫자 야구란 임의의 3자리 숫자를 맞추는 게임이다. 1 2 3 이 숫자를 예를 들어보자. 3 9 0 0Strike 1Ball 6 4 0 0Strike 0Ball 7 8 3 1Strike 0Ball 이렇게 되면 앞에서 했던 9, 0, 6, 4, 7, 8가 정답이 아니란 걸 알 수있게 된다. 나머지 1, 2, 5 중에서 선택하면 된다. 2, 5, 3 1Strike 1Ball 5, 1, 3 1Strike 1Ball 이렇게 되면 5도 답이 아님을 알 수 있다. 1, 2, 3 3Strike 이렇게 3스트라이크가 나올 때까지 답을 찾는 게임이다. 생각하기 어떻게 만들지 한번 생각을 해보자. NumberBaseball 내부에서 start 버튼을 누르면 새로운 정답을 만들어 내고 모든 값들을 초기화해 준다. 직접 in..
[React.js] 숫자 맞추기 up & down 게임 up & down 게임은 임의로 선택된 하나의 숫자를 찾는 게임이다. 찾는 방법은 플레이어가 선택한 숫자가 정답에 대해 Up, Down을 알려줘 정답을 추론하는 게임이다. 어떻게 만들지 한번 생각해보자. 이 게임은 매 판마다 랜덤된 숫자가 하나 존재한다. App에서 props로 숫자 하나를 전달해 주면 될 것 같다. 그리고 게임에서 사용자가 정하는 숫자에 따라 up, down을 표시 주는데, 사용자 입력값은 매회 변한다. 그러니 state를 사용해 보겠다. 입력 방법은 input을 통해 숫자를 입력 받으면 될 것 같다. App -> UpAndDown props : answerNum UpAndDown state : playerNum 제작 yarn create react-app uad-game cd uad-..
리눅스 서버 putty로 접속해서 nodejs, npm, yarn 설치하기 일단 리눅스 서버를 준비해야됩니다. 저는 CentOs를 설치한 컴퓨터가 있어서 그대로 진행하겠습니다. putty를 이용해 해당 리눅스 서버 IP로 접속합니다. 포트번호는 22번으로 리눅스 서버는 기본적으로 22번 포트가 열려있습니다. yum install nodejs yum install npm npm install -g yarn 순서대로 하나씩 실행하면 모든 준비가 완료됩니다. 그다음 프로그래밍 언어가 설치되면 해야되는 게 있죠. 바로 Hello world! 출력하기 mkdir node cd node mkdir hello cd hello yarn init -y 이렇게 ~ 사용자 폴더에서 hello 폴더를 만들고 node 프로젝트가 생성됩니다. vim을 이용해 index.js를 만들고 node를 사용해 ..
AutoSet10 사용해서 웹 서버 만들어 index.html 접속하기 http://autoset.net/xe/download_autoset_10_7_2 오토셋 10.7.2 다운로드 AutoSet 유지보수 종료 안내 1. 오토셋에 대한 유지보수 계획이 없기에 사용자분들께 이 내용을 알려드립니다. 2. 현재 사이트를 통해 제공되는 버전이 최종 버전이며, 더 이상의 업그레이드가 없 autoset.net 해당 사이트에 들어가서 AutoSet 10(PHP 7.2) 버전을 설치해 준다. 요즘 대부분 64비트 컴퓨터라 64비트용 설치파일을 받아준다. MariaDB와 phpMyAdmin을 추가적으로 설치한다. 왜 설치하는지는 모르겠지만 일단 기본값으로 진행했다. 설치완료 후 실행된 모습이다. 웹서버 시작을 한번 눌러보겠다. 그러면 바로 서버가 실행된다. 이제 홈 디렉터리 주소를 확인한 ..
[React Router v6] 3. Link, NavLink Router에서는 a태그를 사용하면 서버에 새로운 페이지로 연결되어 SPA로 작동하지 못합니다. 그래서 React-Router에서 Link, NavLink 컴포넌트를 제공합니다. 준비 작업 index.js import React from 'react'; import { createRoot } from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider} from 'react-router-dom'; import Ho..
[React Router v6] 2. Path Segment path에는 여러가지 segment가 있습니다. path가 없는 layout route : Dynamic Segment ? Optional Segment * Splat Layout route layout route는 내부 라우트의 레이아웃을 만들어 줍니다. 그래서 path가 없고 내부 라우트를 갖습니다. 기존에 만들었던 createBrowserRouter를 고쳐 보겠습니다. index.js const router = createBrowserRouter( createRoutesFromElements( ) ); element에 Outlet 컴포넌트를 사용해 내부 라우트의 element를 보여줍니다. 앞으로는 createBrowserRouter 대신 BrowserRouter를 사용하겠습니다. ReactDOM...

티스토리툴바