본문 바로가기

Computer Programming

🎮 자바스크립트로 2D 게임 개발하기 (블럭맞추기) | canvas, JQuery, localStorage 사용
Computer Programming/Javascript 2023. 6. 6. 🎮 자바스크립트로 2D 게임 개발하기 (블럭맞추기) | canvas, JQuery, localStorage 사용 1. 프로젝트 개요 웹미니 프로젝트로 html, css, javascript 그리고 JQuery를 이용해 간단한 게임을 개발하는 프로젝트를 진행했다. https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript 2D breakout game using pure JavaScript - Game development | MDN In this step-by-step tutorial we create a simple MDN Breakout game written entirely in pure JavaScript and rendered on HTML . developer.mozilla.org 위의 Mozilla d..
HTML&CSS로 간단한 로그인 페이지 만들기
Computer Programming/Javascript 2023. 6. 1. HTML&CSS로 간단한 로그인 페이지 만들기 간단한 로그인 페이지 (정적인 페이지)를 만들어보자 먼저, 메인 페이지 구역을 나눈다. 1) GNB 구역 ( Global Navigation Bar) 2) Main 구역 3) CtA 구역 ( Call to Action) Cta 구역을 구현하기 위해서는 위 아래로 스크롤함에 관계 없이 항상 보여지는 구역을 구현하면 된다. position: fixed; bottom: 10px; 위 코드를 작성하면 해당 구역을 아래에서 10px 떨어진 곳에 픽스되어 스크롤에 관계없이 항상 따라다니게 된다. cta 구역을 페이지의 가운데로 오게 하고 싶다면 left 속성을 추가해주면 된다. 이 때는 left: calc(50% - 350px); calc(50% - width의 반 px) 을 해주면 된다. 간단한 로그인 페이지 코..
Computer Programming/Python 2023. 5. 26. 백준 1978 ) 소수찾기 Python 파이썬 문제 링크 : https://www.acmicpc.net/problem/1978 1978번: 소수 찾기 첫 줄에 수의 개수 N이 주어진다. N은 100이하이다. 다음으로 N개의 수가 주어지는데 수는 1,000 이하의 자연수이다. www.acmicpc.net 주어진 수 N개 중에서 소수가 몇 개인지 찾아서 출력하는 프로그램을 작성하시오. 한 주 동안 알고리즘 문제를 풀면서 3-4개 정도의 소수 찾기 응용 문제를 마주쳤다. 특히 며칠 전 4898 베르트랑 공준 문제때문에 꽤나 머리가 아팠었기 때문에... 이제 이런 소수 문제를 보면 어느정도는 감이 잡힌다 ㅠ 제출답안 n = int(input()) arr = list(map(int,input().split())) count = len(arr) for i in..
리액트의 렌더링 순서와 렌더링 최적화하는 법 (memoization을 통해 불필요한 리렌더링 해결하기!)
Computer Programming/React 2023. 5. 20. 리액트의 렌더링 순서와 렌더링 최적화하는 법 (memoization을 통해 불필요한 리렌더링 해결하기!) 1. 리액트 렌더링의 순서 아래 코드에서 4가지 console.log() 문이 어떻게 출력될지 예상해보자. import React, { useState } from 'react'; import Login from './components/Login/Login'; import Home from './components/Home/Home'; import MainHeader from './components/MainHeader/MainHeader'; import { useEffect } from 'react'; function App() { const [isLoggedIn, setIsLoggedIn] = useState(false); console.log("in function") useEffect(() =>..
React 앱에서 Redux 사용예시 (Counter App)
Computer Programming/React 2023. 5. 18. React 앱에서 Redux 사용예시 (Counter App) (notes) index.js의 최상위 root에 store 제공하기 //index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import { Provider } from 'react-redux'; //import Provider from react-redux import store from './store' // { const dispatch = useDispatch() const counter = useSelector(state => state.counter); //executed by react-redux, select a specific part of return object of reducer //can get ..
Redux 시작하기 / 기본 구조 (Reducer, Subscribe, Dispatch란?)
Computer Programming/React 2023. 5. 17. Redux 시작하기 / 기본 구조 (Reducer, Subscribe, Dispatch란?) node.js로 redux 실행하기 1. Reducer function이란? 리듀서 함수는 표준 자바스크립트 함수이며 리덕스 라이브러리에 의해 호출된다. 인풋은 항상 2개의 파라미터(전의 상태, 액션)를 가지고, 새로운 상태의 객체를 아웃풋으로 갖는 순수한 함수이다. (같은 인풋 → 같은 아웃풋) 즉, Inputs : Old State + Dispatched Action ⬇️ Output : New State Object 또한 리듀서 함수는 Side effects 를 생성하지 않아야한다. 예를 들면, 서버에 HTTP 요청을 보낸다거나 로컬 저장소에 데이터를 보내는 등의 코드는 없어야 한다. const redux = require('redux'); //node.js syntax (= import redux..
리액트 React Side effects와 useEffect hook
Computer Programming/React 2023. 5. 16. 리액트 React Side effects와 useEffect hook React Side Effect UI rendering 에 연관되지 않은 모든 부수적인 효과를 말한다. 예를 들면, 서버에 HTTP요청을 보내는 것 browser storage에 데이터를 저장하는 것 자바스크립트 함수에 timer를 설정하는 것 위의 예시들은 리액트 프로젝트를 만들때 매우 자주 사용되지만, 리액트의 최종 목적인 UI 렌더링에는 영향을 주지 않고 비동기적으로 처리된다. 이를 Side Effects 라고 한다. React hooks 사용 이전의 클래스형 리액트 코드에서는 Life Cycle 의 componentDidMount()를 이용해 비동기적으로 데이터를 수행했다. 그러나 클래스 기반 리액트 코드는 함수 기반에 비해 복잡하고 오류가 발생하기 쉽다는 단점이 있었다. 이후 React hook..
Redux(리덕스) 사용 이유 (Context와 차이점)와 작동방식
Computer Programming/React 2023. 5. 16. Redux(리덕스) 사용 이유 (Context와 차이점)와 작동방식 1. Redux란? 리덕스는 cross-component 또는 app-wide 상태를 위한 상태 관리 시스템이다. 즉, 다수의 컴포넌트 또는 앱 전체에서 상태 변경을 관리하도록 도와주는 시스템이다. 2. State의 세가지 정의 1) local state : 하나의 컴포넌트 내에서 데이터가 변경되어 해당 컴포넌트에 속하는 UI에 영향을 미치는 state이다. 주로 useState을 이용해 state 변수에 저장한다. 예를 들면, input field를 켜고 끄는 “show more” 토글 버튼이 있다. 컴포넌트가 약간 복잡하다면 useState을 사용할 수도 있지만 useReducer을 많이 사용한다. 2) cross-component state : 두개 이상의 컴포넌트에 영향을 미치는 state이다. ..
React의 App.js 코드 살펴보기 | 컴포넌트 렌더링하기 | package.json
Computer Programming/React 2023. 5. 15. React의 App.js 코드 살펴보기 | 컴포넌트 렌더링하기 | package.json 1. React component 구성요소 (main.js or app.js) import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); import 문 import React from 'react'; import ReactDOM from 'react-dom/client'; create react app 또는 vite 를 이용해 리액트 프로젝트를 만들었다면, 위의 두 라이브러리는 프로젝트에 이미 설치되어 있으며 p..

티스토리툴바