티스토리

타닥타닥 개발자의 일상

검색하기

블로그 홈

타닥타닥 개발자의 일상

developerson.tistory.com/m

복기용 블로그

구독자: 0

방명록 방문하기

주요 글 목록

connection error: MongoServerSelectionError: connect ECONNREFUSED ::1:27017 에러해결 app.js 파일에서 아래와 같은 코드로 mongoose와 mongodb 서버를 연결하려 했다.코드 출처: https://github.com/Colt/YelpCamp/blob/c12b6ca9576b48b579bc304f701ebb71d6f9879a/app.js#L7mongoose.connect('mongodb://localhost:27017/yelp-camp', { useNewUrlParser: true, useCreateIndex: true, useUnifiedTopology: true}); 그러니까 이런 오류가 나왔다.connection error: MongoServerSelectionError: connect ECONNREFUSED ::1:27017 at EventTarget... 공감수 0 댓글수 0 2024. 5. 8.
윈도우에서 MongoDB, Mongosh 설치. Mongoose 이용해서 Node 환경에서 JS 파일로 데이터 삽입하기 1. MongoDB 를 윈도우에서 설치한다. https://www.youtube.com/watch?si=VdpwP_r8PRZJOupG&v=MCpbfYvvoPY&feature=youtu.be 위의 튜토리얼을 참고하면 되는데, 참고해야할 부분은 1. 몽고디비 인스톨시에 설정 2. 환경 변수 설정하고 몽고 디비 커맨드 환경에서 바로 호출 3. 커맨드 창에서 mongod 입력하고 서버 잘 구동되는지 확인 참고로 3번 부분에서 멋대로 커맨드창을 닫기 하면 안된다. ctrl+C를 통해서 안정적으로 서버를 종료한뒤 커맨드 창을 닫아야 한다. 이 절차 없이 커맨드 창을 닫았다가, 몽고가 비정상적 서버종료로 인식해서 프로그램에 lock을 거는 경우가 생긴다. lock이 걸리면 몽고 서버 자체에 연결 안되는 오류가 생겨서.. 공감수 0 댓글수 0 2024. 3. 5.
REST vs RESTFUL 는 무엇인가? 둘의 미묘한 차이점 REST(Representational State Transfer)와 RESTful은 웹 서비스 아키텍처를 설계하는 데 사용되는 용어로, 서로 유사하지만 약간의 차이가 있다. REST(Representational State Transfer) -정의: REST는 자원(URI), 행위(HTTP 메서드), 표현(Representations)으로 구성된 아키텍처적인 스타일 - 특징: 1. 자원은 URI로 표현되며, 각 자원은 고유한 식별자를 보유 2. 행위는 HTTP 메서드(GET, POST, PUT, DELETE)를 이용하여 수행. 3. 표현은 클라이언트가 자원의 상태를 나타내는 방식. RESTful: - 정의: RESTful은 REST 아키텍처를 따르는 웹 서비스다. 즉, REST 원칙을 준수하여 구현된 .. 공감수 0 댓글수 0 2024. 3. 3.
오버라이드 VS 오버로드의 차이점 알아보기 오버라이드(Override)와 오버로드(Overload)는 객체지향 프로그래밍에서 다형성(Polymorphism)을 구현하는 방법 중 두 가지. 1.오버라이드(Override) - 오버라이드는 상위 클래스(부모 클래스)에서 이미 정의된 메서드를 하위 클래스(자식 클래스)에서 동일한 시그니처(메서드 이름, 매개변수 유형 및 개수)로 다시 정의하는 것을 의미. - 오버라이드를 사용하면 하위 클래스는 상위 클래스의 메서드를 자신의 필요에 맞게 재정의 가능. - 오버라이드된 메서드는 상위 클래스의 메서드 대신 호출되며, 다형성을 통해 동일한 메서드 호출 시에도 실제 객체의 타입에 따라 다른 동작이 수행. class Animal: def make_sound(self): return "Some generic sou.. 공감수 0 댓글수 0 2024. 3. 3.
클래스 vs 인터페이스 vs 추상 메서드 는 언제 어떻게 사용하는가? 클래스와 인터페이스는 객체지향 프로그래밍에서 다른 역할을 수행하며, 사용하는 상황에 따라 선택된다. 클래스(Class)란? - 클래스는 객체지향 프로그래밍에서 데이터와 메서드(함수)의 모음. - 객체의 설계도 혹은 틀로, 객체를 생성하기 위한 모든 특징과 행위를 정의. - 클래스는 구체적인 객체를 생성하기 위한 템플릿이며, 객체의 상태(속성)와 동작(메서드)을 정의. class Car: def __init__(self, make, model): self.make = make self.model = model def start_engine(self): print("Engine started") 추상 클래스란? -추상 클래스는 일부 메서드의 구현을 하지 않은 추상 메서드를 포함할 수 있는 클래스. -추상 메.. 공감수 0 댓글수 0 2024. 3. 3.
자바스크립트, Express와 ejs를 이용해서 만드는 댓글 등록 및 수정 페이지 페이지의 기본 구조 1. 전체 댓글을 볼수 있는 목록 페이지 2. 전체 댓글목록에서 detail 클릭 클릭하면 넘어가는 특정 댓글 페이지 (댓글 수정 및 삭제 가능) 3. 특정 댓글 수정페이지 4.새로운 댓글 작성 페이지 이 페이지는 서버를 구동하기 위해서 express 패키지를 사용하였으며 템플릿으로는 ejs를 사용했다. 또한 유니크한 아이디를 만들기 위해서 uuid 패키지, 특정조건에서 Restful 명령어를 실행하기 위한 method-overide 패키지도 사용했다. package.json 파일 { "name": "reststudy", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Erro.. 공감수 0 댓글수 0 2024. 2. 23.
[JS/자바스크립트 ] Javascript JS closure의 사용예시로 closure 이해하기 자바스크립트의 closure란 개념은 무엇일까? Mdn에서 clousre의 개념을 찾아보면 이렇다. A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time. 클로저(Closur.. 공감수 0 댓글수 0 2023. 10. 13.
[JS/자바스크립트 ] 함수의 디폴트 밸류, 디폴트 값 함수를 사용할때는 보통 함수에 대입할 파라미터(매개변)를 넣는다. 파라미터를 넣어야지 본인이 얻고 싶은 값이 나오기 때문이다. 하지만 파라미터를 대입하지 않아도 기본적으로 출력되는 값을 설정할수 있다. 바로 함수의 default 값 설정을사용하면 된다. 아래의 createBooking 이란 함수를 보자, 'use strict'; const bookings = []; const createBooking = function ( flightNum, numPassengers = 1, price = 199 * numPassengers ) { const booking = { flightNum, numPassengers, price, }; console.log(booking); bookings.push(booking.. 공감수 0 댓글수 0 2023. 6. 19.
[JS/자바스크립트] 문자열 메서드를 모두 이용하여 복잡한 문자열을 구조를 갖춘 형태로 변환하는 함수 만들기 처음부터 정보를 형식에 맞춰서 받으면 정말 좋겠지만, 현실은 그렇지 않다. 보통은 어지럽게 혼합된 정보를 본인이 필터링하고 다듬어서 형식을 갖추게 한다음 고객에게 전달하곤한다. 예를 들어 항공편의 정보가 아래와 같이 전달되었다고 해보자 const flights = '_Delayed_Departure;fao93766109;txl2133758440;11:25+_Arrival;bru0943384722;fao93766109;11:45+_Delayed_Arrival;hel7439299980;fao93766109;12:05+_Departure;fao93766109;lis2323639855;12:30'; 지연 비행기와 도착시간등이 어지럽게 정보안에 섞여 있어서 한번에 알아보기 쉽지 않다. 해당 정보로 서비스를 하기 .. 공감수 0 댓글수 0 2023. 6. 15.
[JS/자바스크립트] 문자열 메서드를 이용해서 언더바 문자열을 카멜 표기법 문자로 바꾸는 함수 만들기 🐪 언더바 표기법으로 작성된 변수의 이름을 카멜표기법으로 변환하는 프로그램을 만들어라 textarea에 입력된 내용은 버튼이 클릭되면 변환된다. 아래의 테스트 데이터를 textarea에 붙여넣고 한번에 변환한다. underscore_case first_name Some_Variable calculate_AGE delayed_departure 버튼을 누를시 아래처럼 변환 되어야한다. textarea에 입력된 내용, 클릭하는 버튼은 아래의 DOM 언어를 통해서 삽입된다. document.body.append(document.createElement('textarea')); document.body.append(document.createElement('button')); index.html Make Functi.. 공감수 0 댓글수 0 2023. 6. 15.
[JS/JavaScript] 문자열 나누기 합치기 정해진 글자수 만큼 다른 문자열로 채우기 반복하기 메소드 정리 split, join, repeat, padStart, padEnd 문자열을 활용할 수 있는 다양한 자바스크립트 메서드를 알아보자. 문자열을 기준문자 단위로 나눠주는 split 메서드 //split and join console.log('a+very+nice+string'.split('+')); //['a', 'very', 'nice', 'string'] console.log('Nomad Haven Heaven'.split(' '));//(3) ['Nomad', 'Haven', 'Heaven'] const [firstName, lastName] = 'Nomad Havenheaven'.split(' '); const newName =['Miss.',firstName, lastName.toUpperCase()].join(' ') console.log(newName); //M.. 공감수 0 댓글수 1 2023. 6. 11.
[JS/자바스크립트] 문자열을 소문자 변환, 대문자 변환, 자르기, 교체하기 하는 방법 자바스크립트는 문자열을 편집하는 다양한 메서드를 제공한다. 해당 메서드는 무척 유용한 게 많아서 잘 알아두면 나중에 큰 도움이 될 것이다. 그렇다면 문자열 string 을 편집하는 메서드는 무엇이있는지 알아보자. 문자열을 대소문자로 변환하는 기능 const airline = 'TAP Air Portugal'; console.log(airline.toLowerCase()); //tap air portugal console.log(airline.toUpperCase()); //TAP AIR PORTUGAL console.log('nomad'.toUpperCase()); .toLowerCase() 메서드를 이용하면 문자열을 한번에 소문자로 바꾸는 게 가능하다 .toUpperCase() 메서드를 이용하면 문자열.. 공감수 0 댓글수 1 2023. 6. 9.
[JS, JavaScript] Map 자료구조 개념 이해를 체크하기 위한 간단한 코딩문제 풀어보기 gameEnvets 라는 이름의 Map은 축구 경기동안 발생한 사건과 시간의 자료를 담은 자료구조이다. 첫번재 key 값은 경기 시작 이후 사건이 발생한 시간이며 두번재 value 값은 해당 시간에 발생한 사건이다. const gameEvents = new Map([ [17, '⚽ GOAL'], [36, '🔛 Substitution'], [47, '⚽ GOAL'], [61, '🔛 Substitution'], [64, '🟨 Yellow card'], [69, '🟥 Red card'], [70, '🔛 Substitution'], [72, '🔛 Substitution'], [76, '⚽ GOAL'], [80, '⚽ GOAL'], [92, '🟨 Yellow card'], ]); 해당 사항을 참고하여 아래의 문제.. 공감수 0 댓글수 0 2023. 6. 2.
[JavaScript, JS ]Arrays vs Sets / Maps vs Objects 언제 어디서 써야할까? / data structure 사용 케이스 / 자료 구조체 사용 경우 데이터의 출처는 세가지 종류가 있다. 1. 프로그램 그 자체 : 데이터가 소스 코드 자체에 적혀있는 경우 (status messages) 2. UI를 통해서 : 유저의 input이나 DOM으로 쓰여진 데이터(tasks in todo app) 3. 외부의 출처를 통해 : Web API 통해서 불러오는 데이터들 (recipe obejct) 이러한 데이터들은 collection of data 데이터의 집합이며 Data structure 자료 구조체를 가진다. 만약 데이터가 단순한 리스트에 대한 값이라면 👉 Arrays or Set 이 적절하다. 만약 데이터가 key,value 값이 필요하다면👉 Object or Map 이 적절하다. key는 vlaue를 설명하는 역할을 한다. 따라서 value에 추가적 설명이.. 공감수 0 댓글수 0 2023. 6. 1.
JavaScript / Map 과 스프레드 연산자 사용해서 간단한 Quiz앱 만들기 / Map을 Object 와 Array 배열로 변환하는 방법 이전의 글을 통해서 Map이라는 자료 구조를 배워봤다. 그렇다면 Map을 어떻게 활용할수 있을까? 아래 코드와 같이 question이라는 이름을 가지는 Map 형태의 자료 구조가 있다고 하자. const question = new Map([ ['question', 'What is the best programming language in the world?'], [1, 'C'], [2, 'Java'], [3, 'JavaScript'], ['correct', 3], [true, 'Correct 😜'], [false, 'Try again'], ]); 우리가 만들고 싶은 앱은 1. prompt창에서 "What is the best progamming language in the world?' 라는 질문이 뜨고.. 공감수 0 댓글수 0 2023. 6. 1.
Map 을 이용해서 다양한 형태의 key값을 가지는 구조체 만들기 / Array, Set의 보완 / Map 구조체의 메서드 알아보기 자바스크립트에는 다양한 형태의 구조체가 있다. array는 element별로 인덱스가 있고 인덱스 별로 요소를 구분, 외부에서 요소를 호출도 가능하다. 단점은 요소별로 중복된 값이 있을때 중복 값을 제거하거나 중복된 인수의 값을 구하기가 번거롭다는 점이다. Set는 중복된 element를 여러번 추가해도 고유한 element 하나만 요소로 가지는 특징이 있다. 따라서 배열내의 중복값을 제거하거나 고유한 요소의 수를 파악할때 좋은 구조체이다. 단점은 Set에는 인덱스가 없다. 따라서 외부에서 Set내의 element를 key값을 통해서 호출하지 못한다. array와 Set의 아쉬운 점을 보완하는 구조체가 바로 Map이다. 그렇다면 Map의 사용 사례를 알아보자. const rest = new Map(); .. 공감수 0 댓글수 0 2023. 5. 31.
Set 이용해서 Array 의 중복 삭제하기, Set 이용해서 중복 없는 배열 만들기 array를 만들다보면 array 내부의 element들이 중복되는 경우가 있다. 만약 array 내에서 중복되는 값을 제외한 겹치지 않는 element들만 알고 싶거나, 중복되지 않는 고유한 element의 개수를 알고 싶다면, 이 중복 element 를 어떻게 처리해야 하나 멈칫 할 것이다. 그때는 Set를 이용하면 쉽게 배열의 중복값을 제거할 수 있으며 고유한 element 의 갯수를 알수 있다. 우선 Set이 어떤 것인지부터 알아보자. const ordersSet = new Set([ 'Pasta', 'Pizza', 'Pizza', 'Risotto', 'Pasta', 'Pizza', ]); 위와 같이 ordersSet라는 Set가 있다고 하자. 이 세트에는 Pizza와 Pasta라는 중복되는 요소.. 공감수 0 댓글수 0 2023. 5. 26.
Object 안에 또 Object 가 있는 복잡한 Object의 값 모두 불러오기 / keys, values, entries 이용하기 const weekdays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']; const openingHours = { [weekdays[3]]: { open: 12, close: 22, }, [weekdays[4]]: { open: 11, close: 23, }, [weekdays[5]]: { open: 0, // Open 24 hours close: 24, }, }; 위와 같은 obejct가 있다고 하자. openingHours라는 object는 value가 또 obejct 로 구성된 복잡한 object다. 해당 오브젝트에서 원하는 key,value 값만 쏙쏙 뽑아서 쓰고 싶으면 어떻게 할까? 바로 property name, key, value를 이용하면 된.. 공감수 0 댓글수 0 2023. 5. 22.
podman 명령어로 linux에 contianer 설치하기 1.설치 dnf install podman -y adduser user3 echo 1111 | passwd --stdin user3 ssh user3@localhost -dnf 명령어로 podmad 설치 -컨테이너 사용할 유저 user3 생성 -user3의 비밀번호 1111으로 변경 -user3의 계정으로 접속 #user3으로 로그인한 상태 podman pull quay.io/centos7/httpd-24-centos7:latest podman run -d -p8080:8080 --name container-web quay.io/centos7/httpd-24-centos7:latest podman ps curl localhost:8080 -podman pull 명령어로 컨테이너 이미지 불러오기 *컨테이너.. 공감수 0 댓글수 0 2023. 5. 19.
파일 형태의 스왑 swap 생성하는 방법 / dd 명령어 사용해서 파일 형태 스왑swap 만들기 1. dd 명령어를 사용해서 크기가 1G 이고 개수가 1개인 swap.data 만들기 #명령문 dd if=/dev/zero of=/swap.data bs=1G count=1 #출력내용 1 1+0 records in 1+0 records out 1073741824 bytes (1.1 GB, 1.0 GiB) copied, 4.36341 s, 246 MB/s *왜 옵션으로 if=/dev/zero 를 설정해야 하는 가에 대한 chatGPT의 답변 dd 명령어는 입력 소스(if 옵션)에서 데이터를 읽어서 출력 대상(of 옵션)에 씁니다. 데이터를 읽는 입력 소스로 /dev/zero를 사용하는 이유는 다음과 같습니다. /dev/zero는 리눅스 시스템에서 제공하는 가상 장치 파일입니다. 이 파일에서는 무한히 많은 .. 공감수 0 댓글수 0 2023. 5. 19.
검색된 파일의 전체를 한번에 다 압축 하는 리눅스 명령문 쓰기 / find와 exec 이용 / + 이용해서 한번에 압축 리눅스 공부를 하면서 혼자 아래의 문제를 풀고 있었다. 사용자 user2의 파일을 찾아서 /tmp/user2-banned/에 저장한다. 저장된 파일은 xz으로 압축하여 user2-banned이름으로 /root/에 저장한다. 반드시 확장자는 올바르게 표기가 되어야 한다. 우선 user2의 파일을 찾아야 하니 find / -user user2 -type f -print 를 입력했고 아래와 같은 파일들이 검색됐다. /home/user2/.bash_logout /home/user2/.bash_profile /home/user2/.bashrc find: ‘/proc/7227/task/7227/fdinfo/6’: No such file or directory find: ‘/proc/7227/fdinfo/5’: No.. 공감수 0 댓글수 0 2023. 5. 19.
JavaScript / Optional Chaining을 이용해서 코드 훨씬 간결하게 작성하기 + nullish coalescing operator 이용해서 optional chaining 기능 극대화 / '.?' 만 찍으면 끝 아래와 같은 코드가 있다고 하자. 아래의 코드에서 object restaurant는 자신의 object 외부에있는 또다른 object인 openingHour를 불러와서 key와 value를 구성하고 있다. 'use strict'; const weekdays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']; const openingHours = { [weekdays[3]]: { open: 12, close: 22, }, [weekdays[4]]: { open: 11, close: 23, }, [weekdays[5]]: { open: 0, // Open 24 hours close: 24, }, }; const restaurant = { name: 'Classico.. 공감수 0 댓글수 0 2023. 5. 18.
find 명령어 구분하기 파일 검색 결과를 텍스로 저장 vs 검색된 실제 파일들을 복사하여 지정된 디렉토리에 따로 저장 find로 파일을 검색하다보면 검색된 파일들의 목록만 txt로 저장해놓고 싶은 경우도 있고. 검색된 파일들을 실제로 복사해서 디렉토리에 따로 저장하고 싶은 경우도 있다. 해당 경우에는 find 명령문이 조금 달라서 구분하고 기억하고자 글을 작성한다. #출력 결과를 txt로 저장 find / -iname "*GNU*" -type f -print -exec cp -a {} /root/gnulist2.txt \; 위의 명령어는 1.대소문자 구분없이 "gnu"라는 문자열 가진 파일을 모든 디렉토리에서 찾은 다음, 2.출력결과를 /root/경로에 gnulist2.txt 라는 이름의 파일로 저장 하는 명령문이다. #검색된 파일들을 실제로 복사해서 지정한 디렉토리에 따로 저장 find / -iname "*licens.. 공감수 0 댓글수 0 2023. 5. 18.
chmod 명령어로 특정한 그룹에게만 권한을 주고 싶을 때, g=rwx 같은 그룹권한 지정전에 해줘야할 chown 소유 그룹 지정 chown :agroup /agrpdir 만약 리눅스 환경 내에, agroup과 bgroup이라는 두가지 그룹이 있고 특정한 경로인 agrpdir이 있다고 하자. 이 특정한 디렉토리인 agrpdir은 agroup만 쓰게 만들고 싶다. 그렇다면 bgroup을 제외한 agroup만 agrpdir를 쓰려면 어떻게 해야할까? 흔히들 그룹에게 특정 디렉토리에 권한을 주는 명령어는 chmod 를 쓴다. 하지만 chmod g=rwx /agrpdir 로 그룹에게만 권한을 주려 하니, g= 가 가리키는 그룹이 특정한 "agroup"이라는 점이 나타나 있지 않다. chmod 070 /agrpdir 와 같이 다른 방식으로 표현해봤자 7이라는 권한이 있는 그룹의 자리가 agroup인지 bgroup인지 알수가 없다. 이때는 c.. 공감수 0 댓글수 0 2023. 5. 17.
object 밖에 있는 object도 object의 값으로 가져오기 / object의 key값도 밖의 object에서 가져오기 openinghours라는 object와 restaurnat라는 object가 각각 따로 존재한다고 가정하자. const openingHours = { thu: { open: 12, close: 22, }, fri: { open: 11, close: 23, }, sat: { open: 0, // Open 24 hours close: 24, }, }; const restaurant = { name: 'Classico Italiano', location: 'Via Angelo Tavanti 23, Firenze, Italy', categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'], starterMenu: ['Focaccia', 'Bruschetta', .. 공감수 0 댓글수 0 2023. 5. 17.
for of 배열에 entries 메서드 이용해서 인덱스까지 추가하여 출력하기 restuarnt라는 object에 있는 속성값에 있는 value들을 for 문을 이용해서 하나하나 출력하고 싶다고 하자. const restaurant = { starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'], mainMenu: ['Pizza', 'Pasta', 'Risotto'], } 그렇다면 menu라는 변수를 먼저 만든다. 그리고 spread연산자를 사용해 starterMenu 속성과 mainMenu 속성에 있는 값들을 모두 menu라는 변수에 집어넣는다. const menu = [...restaurant.starterMenu, ...restaurant.mainMenu]; 여기서 단순히 menu에 모두 들어간 값만 f.. 공감수 0 댓글수 0 2023. 5. 16.
깃허브에서 간단하게 프론트 페이지 배포하는 방법 1. 배포할 페이지를 업로드할 repository를 만든다. 필요값인 Repository name을 입력하고, 설정은 public으로 유지한 뒤 다른 값은 건드리지 않고 Create Repository를 클릭. 2. 생성한 Repository에 배포할 파일을 업로드한다. 중요한것은 배포할 파일의 이름이 반드시 index여야 한다는 점. 3. 생성된 Repository의 Settings 탭에 있는 Pages에서 Branch를 설정한다. Branch를 main으로 설정하면 끝. 30초쯤 지나면 배포가 완료되고 Visit site 버튼 들어가면 본인의 페이지를 확인할 수 있다. 해당 사이트의 주소를 카톡으로 보내면 배포가 잘 되어서 사이트 미리보기도 잘 된다. 자료 출처 : 스파르타 코딩 [chatGPT로 1.. 공감수 0 댓글수 0 2023. 4. 18.
upsplash API를 Chat GPT에 적용하고 이미지 바로 Chat GPT 통해서 받기 chat GPT는 여러모로 편한 기술이다. 하지만 처음부터 이미지를 달라고 하면 바로 이미지를 주지는 않는다. 이럴땐 프리소스 이미지 사이트인 UPSPLASH의 API를 챗 지피티에 적용하면 된다. 해당 api가 적용된 chatGPT는 사용자가 요청하는 이미지를 바로바로 전달해준다. 처음에 이미지를 찾아달라면 저런 답변만 한다. 하지만 API를 사용하라는 아래의 명령어를 입력하면, [INFO: you can add images to the reply by Markdown, Write the image in Markdown without backticks and without using a code block. Use the Unsplash API (https://source.unsplash.com/160.. 공감수 0 댓글수 0 2023. 4. 18.
Java Script / DOM 언어 querySelector, getElementById, addEventListner로 주사위 게임 만들기 classList.remove/classList.add 주사위를 굴려 나온수를 합산, 주사위를 굴릴때 1이 나오면 자가 차례에서 합산된 수가 0이 되고 다른 선수에게 차례가 넘어감. 주사위가 1이 나오기 전에 나온 점수를 합산하고 다른 선수에게 넘기려면 hold를 누름. hold를 누를시 차기 차례에서 나온 주사위 수가 합산되며 다른 선수에게 차례가 돌아감. 그런식으로 게임을 해서 먼저 합해진 수가 100이 넘는 사람이 승리. index.html Player 1 43 Current 0 Player 2 24 Current 0 🔄 New game 🎲 Roll dice 📥 Hold style.css @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); * { margin: 0; p.. 공감수 0 댓글수 0 2023. 1. 30.
javascript / DOM 언어 eventListener 사용하여 JS 페이지에서 모달창 띄우기, esc키로 모달창 닫기, overlay로 모달창 이외 부분 어둡게하기 JS와 연결된 HTML INDEX Show modal 1 Show modal 2 Show modal 3 //클래스 이름 옆에 hidden을 붙여 modal 클래스를 숨긴다. × I'm a modal window 😍 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vol.. 공감수 0 댓글수 0 2023. 1. 16.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.