개발일지, 개인 또는 단체 포트폴리오 등
리액트에서 function 기반 컴포넌트(hook)는 한 번 렌더링되고 끝나는 것이 아닙니다. 리액트의 컴포넌트는 실시간으로 끊임없이 렌더링되며 여기서 일반 변수 등을 사용하면 컴퓨터의 자원 낭비와 성능 저하를 불러올 수 있습니다. 리액트의 함수 컴포넌트 체제에서 변수 등의 상태들을 관리할 수 있는 방법이 여러 가지 있는데 useState는 상태 관리의 아주 기초적인 형태입니다. 통상적인 변수 더보기…
자바스크립트 ES6+ 문법에는 import 가 있습니다. 예를 들어 import func from './func.js' 이런 식입니다. 위의 예제를 정적 import라고 합니다. 정적 임포트에는 단점이 있는데 1) 임포트 구문에 변수 사용이 불가능하다는 점과, 2) if 문등의 분기점에서 사용할 수 없다는 단점이 있습니다. 이러한 정적 임포트의 단점을 해결할 수 있는 것이 동적 임포트(dynamic module 더보기…
아래 화면처럼 브라우저의 외부 파일 탐색기에서 파일을 드래그 앤 드랍하여 <input type=file>에 파일을 입력받는 방법입니다. 제이쿼리를 사용하면 좋긴한데 여기서는 제이쿼리 없이 작성했습니다. 호환성을 위해 ES5 이하 스펙으로 작성하였습니다. This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the 더보기…
자바스크립트: Snake 게임 만들기 1 – 블럭 움직이기 자바스크립트: Snake 게임 만들기 2 – 블럭이 스스로 움직이도록 만들기, 사과(먹이) 만들기 자바스크립트: Snake 게임 만들기 3 – 뱀 몸체 만들기, 마무리 (完) trail, tailLength 변수 만들기 뱀의 몸은 여러 개의 블럭으로 이루어져 있습니다. 뱀이 상하좌우로 움직일 때 이전의 위치들을 추적하는 것이 더보기…
자바스크립트: Snake 게임 만들기 1 – 블럭 움직이기 자바스크립트: Snake 게임 만들기 2 – 블럭이 스스로 움직이도록 만들기, 사과(먹이) 만들기 자바스크립트: Snake 게임 만들기 3 – 뱀 몸체 만들기, 마무리 (完) velocity 변수 추가 let positionX = 10, positionY = 10 const gridSize = 20, tileCount = 20 let velocityX 더보기…
자바스크립트: Snake 게임 만들기 1 – 블럭 움직이기 자바스크립트: Snake 게임 만들기 2 – 블럭이 스스로 움직이도록 만들기, 사과(먹이) 만들기 자바스크립트: Snake 게임 만들기 3 – 뱀 몸체 만들기, 마무리 (完) 스네이크 게임이란 고전게임으로 뱀이 여기저기를 돌아다니면서 사과(먹이)를 먹으면 뱀의 길이가 점점 늘어나고, 뱀이 꼬여서 몸이 부딪히면 게임 오버되는 더보기…
현재 주소(URL)의 쿼리 파라미터 알아내기 URL의 쿼리 파라미터란 아래 빨간색 박스처럼 ? 뒤에 지정하는 파라미터를 뜻합니다. 여러 개를 연결할 때는 & 를 씁니다. 여기서 uwasaKeyword 의 쿼리 파라미터는 무슨 값을 가지고 있는지 알고 싶다면 다음과 같이 입력합니다. // this.$route.query.[키이름] const uwasaKeyword = this.$route.query.uwasaKeyword 저 값을 콘솔로 출력하면 "미술" 이라는 결과가 나옵니다. 더보기…
깃허브 https://github.com/ayaysir/pseudo-kiosk-haksik 제작 연도 2018 사용기술 Java(Swing UI + 네트워크 소켓), CSV 제작 목적 프로그래밍 학습과 더불어, POS 및 KIOSK 원리 파악의 목적을 위해 제작하였습니다. 프로젝트 구조 주요 특징 및 스크린샷 학식(학생식당)에서 사용할 수 있는 KIOSK 머신용 프로그램과 주방 프로그램, 관리 서버로 더보기…
플러그인 링크 지정된 형식에 따라 현재 날짜 또는 시간을 삽입하는 Visual Studio Code용 플러그인입니다. VisualStudio Marketplace에서 사용할 수 있습니다. 설치 F1을 눌러 명령 팔레트를 열고 ext install을 입력 한 다음 Insert Date String 확장을 찾으세요. 사용법 다음 명령을 사용할 수 있습니다. 단축키를 사용하거나 명령어를 명령 팔레트에 입력해 사용합니다. 더보기…
https://github.com/ayaysir/movie-reactjs React(리액트)의 functional hook + Material UI 를 이용한 영화 정보 제공 사이트입니다. (주의: 입사용 과제테스트로 수행되었으며 불합격 통지를 받은 결과물입니다. 요구사항은 대부분 구현되어 있습니다.) 사용 기술 ReactJS React Hooks API Axios ES6+ JavaScript HTML CSS Material-UI 주요 기능 외부 API를 통해 영화 정보를 보여줌 무한 스크롤 (Infinite 더보기…