과제 피드백 더보기 플레이 버튼 누르면 숫자가 자동으로 사라지도록 하기 transition 추가하기 숫자 중복 방지 숫자 덜 입력했을 때 경고창 난수 생성 -> 수 3개 입력 -> 플레이 버튼 순으로 진행해야 플레이가 정상적으로 진행되도록 for (var i = 0; i < 9; i++) { var resultBox = document.createElement("div"); resultBox.id = "result" + (i + 1); // body태그 안에 9개의 id를 가진 div 넣어주기 document.body.appendChild(resultBox); } result1 ~ result9의 id를 가진 div를 body 부분에 for문을 이용해서 추가한다. for (var i = 0; i < 9;..
Express JS란? 작업 폴더에 들어가서 > npm init > npm install express --save node.js를 설치하고 Express.js를 설치하자 폴더에 index.js 파일을 만든 뒤에 const express = require("express"); const app = express(); const port = 3000; app.get('/', (req, res) => res.send("Hello, World!")); app.listen(port, () => console.log(`Example app listenging on port ${port}!`)); package.json에서 "scripts"부분에다가 "start" : "node index.js", 를 추가하자! 그..
자바스크립트 개발 방식 (코드 구조에 따라 분류) - 함수형 - 객체형 1. 함수형 : 버그가 났을 때 그 구역에서만 수정할 수 있다. function sum(a,b){ return 4 * a - b; } 자료형 함수이름(매개변수1, 매개변수2, ---){ 결과값 ~~~; } 코드의 반복이 감소된다. function add(a, b) { //console.log(a + b); return a + b; //반환 } console.log(add(10, 20)); add(15, 25); // 리턴만으로는 출력할 수 없다. add(20, 30); 매개변수를 사용한 자바스크립트 함수의 사용 function mul(a, b) { return a * b; } var num = 2; // 변수 선언 및 정의 conso..
자바스크립트에서 함수의 사용 Node.js에서 동기와 비동기 - Synchronous : 순차적으로 일을 진행 - ASynchronous : 다중적으로 일을 진행 readFileSync를 사용한 txt파일 내의 값 출력 var fs = require('fs'); //readFileSync console.log('A'); var result = fs.readFileSync('syntax/sample.txt', 'utf8'); console.log(result); console.log('C'); readFile을 이용해 function 안에 있는 문서를 실행하고, 이는 다른 작업이 모두 끝난 다음에 처리된다. 콜백이란? : 프로그램이 끝난 후 실행되는 형태. function a(){ console.log('..
Node.js : Javascript를 브라우저가 아닌 외부에서 실행할 수 있게 만들어진 런타임 환경 Chrome의 V8엔진을 기반으로 실행된다. 다음과 같이 디렉터리 안에 js파일 문서를 만들고 cmd에서 해당 디렉터리로 이동한 다음에 node main.js와 같은 명령어로 웹 서버를 띄운다 localhost:3000포트에서 웹 서버가 띄워진다. 자바스크립트의 숫자 자료형을 다루는 방법 자바 스크립트의 문자열 자료형을 다루는 방법 중복을 제거하여 출력하기 문자열 리터럴이란? : 런타임 시점에 일반 자바스크립트 문자열로 처리되어 내장된 표현식을 변환하는 형태이다. http: host : port : 한 개의 컴퓨터 안에 여러개의 서버가 존재한다. 클라이언트가 접속할 때 연결되어 있는 서버에 접속해 인터페..
- 목표 설정, 목표 사용자 설정 - 프로젝트 요구사항 정의 --> 요구사항 명세서 - 스토리보드 (스토리보드 설계서) : 디자인, UI와 UX - 클래스 함수 설계 --> 클래스 명세서, 소프트웨어 설계서 (구현해야할 것을 모듈로 구분) CSS 기본 문법 구조 대상 { 속성1 : 값 속성2 : 값 } 대상2 { 속성1 : 값 } background-color은 글자의 배경색을 지정한다. 첫 번째 칸입니다. 두 번째 칸입니다. id로 된 div에 대해서는 해당 div 내에서만 css가 적용된다. (여러 div에 중복되지 않음) 반면에 class는 중복이 가능하며, 아래와 같이 .elements라는 클래스 명에 의해서 color:white라는 스타일이 적용된다. #box { background-color:..
구현 목표 : ‘크레이지 아케이드’ 게임용 PC 크레이지 아케이드 권장 사양 분석 더보기 1. CPU Pentium 1.2Ghz : CPU의 프로세서 기본 주파수가 1.2Ghz인 Intel의 펜티엄 프로세서 350 - 클럭 : 순차회로에 가해지는 전기적 진동의 속도를 나타내는 단위 (아케이드 게임은 오버클럭을 사용할 필요가 없다!) - 펜티엄 프로세서 : 인텔의 마이크로 프로세서의 상표명. 이후 인텔 코어가 이 브랜드를 대체하였다. - Ghz : CPU 클럭 속도의 단위(CPU가 초당 실행하는 사이클 수) - 크레이지 아케이드의 최소 사양은 인텔 펜티엄 2.13Ghz 이상. Pentium 1.2Ghz : CPU의 프로세서 기본 주파수가 1.2Ghz인 Intel의 펜티엄 프로세서 350 - 클럭 : 순차회..
DOM(Domain Object Model) : 부모 자식 관계 '뼈대'를 기준으로 화면을 구성 Tag란? 구조를 사용할 때 사용하는 태그 1) : 네모 박스를 만들어 뼈대를 구성하는 태그. 줄바꿈이 포함된다
회원 목록 조회 package jpabook.jpashop.Controller; import jpabook.jpashop.domain.Address; import jpabook.jpashop.domain.Member; import jpabook.jpashop.service.MemberService; import lombok.RequiredArgsConstructor; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.validation.BindingResult; import org.springframework.validation.annotation.Va..
