본문 바로가기

전체 글

JavaScript 숫자야구 - slice(), splice(), filter()의 차이와 문제점

Computer Programming/Javascript 2023. 6. 13. JavaScript 숫자야구 - slice(), splice(), filter()의 차이와 문제점 영어로 하면 Bulls and Cows라고 한다고 한다... 컴퓨터가 숫자를 생성하였습니다. 답을 맞춰보세요! 1번째 시도 : 134 0B0S 2번째 시도 : 238 1B1S 3번째 시도 : 820 2B1S 4번째 시도 : 028 3B 5번째 시도 : 280 3S 4번만에 맞히셨습니다. 게임을 종료합니다. 1. 문제점 자바스크립트로 간단한 숫자야구 프로그램을 개발하던 중, 컴퓨터가 생성한 랜덤 수와 유저가 입력한 랜덤 수 중에 동일한 숫자가 있는지 확인하는 함수에서 잠깐 막혔었다. 그 이유가, ball인지 확인할 때 그 해당 숫자를 제외한 다른 배열을 또 만들어 비교하고 싶어서 splice를 사용했더니 배열의 원본이 변경되어 원하는 결과를 얻지 못했기 때문이었다. 콘솔 계속 찍어보니 그게 문제였다. 아래..

자바스크립트 sort() 메소드 | 프로그래머스 lv.1 - 문자열 내 마음대로 정렬하기

알고리즘 2023. 6. 13. 자바스크립트 sort() 메소드 | 프로그래머스 lv.1 - 문자열 내 마음대로 정렬하기 https://school.programmers.co.kr/learn/courses/30/lessons/12915 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 : 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다. 입출력 예 1 "sun", "bed", "car"의 1번째 인덱스 값은 각각 "u", "..

자바스크립트 자료구조 Map과 Set Object의 사용

Computer Programming/Javascript 2023. 6. 12. 자바스크립트 자료구조 Map과 Set Object의 사용 1. Map이란? - key / value pair - key 또는 value에 어떠한 데이터타입도 다 들어올 수 있으며 정렬된 순서로 저장된다. - 한 맵에서의 키는 오직 단 하나만 존재한다. (Map 집합의 유일성) - 검색, 삭제, 제거, 여부 확인 등 제공 const myMap = new Map(); myMap.set('key', 'value') console.log(myMap.get('key')); //value에 접근 -맵에서의 반복은 keys(), values(), entries()의 메소드 사용으로 이루어진다. (키, 값 및 키-값 쌍 반복) => Map Iterator를 반환한다. - for~of 문을 통한 Iterator의 반복 (keys(), values(), entries()) - ..

자바스크립트의 일급 객체(First-class Function)로서의 함수

Computer Programming/Javascript 2023. 6. 12. 자바스크립트의 일급 객체(First-class Function)로서의 함수 1. 일급객체(First-class Object)란? 일급객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 즉 프로그래밍 언어의 함수가 다른 변수처럼 다루어질 때 일급함수를 가진다고 한다. 일급함수를 가진 언어에서 함수는 다른 함수들에 전달인자로 제공되고, 다른 함수에 의해 반환될 수 있으며, 변수의 값으로서 할당될 수 있다. 자바스크립트는 함수를 객체로 취급하기 때문에, 함수를 매우 유연하게 사용할 수 있다. first-class 라는 단어 그대로 자유롭게 다른 객체들에게 적용 가능한 연산을 지원한다. 일급 객체의 조건은 아래와 같다. 1) 변수나 데이터 구조 안에 객체를 담을 수 있다. 2) 파라미터로 전달할 수 있다. 3) 리턴 값으로 사용할 수 있다. 2. 일급객..

JavaScript의 발전 및 특징(+ AJAX | XML 용어 정리)

Computer Programming/Javascript 2023. 6. 12. JavaScript의 발전 및 특징(+ AJAX | XML 용어 정리) 1. 자바스크립트의 발전 자바스크립트는 웹 브라우저에서 동작하기 위해 나타난 언어이다. (아래 특징 설명 참고!) AJAX(Asynchronous Javascript And XML)란? - 자바스크립트의 라이브러리 중 하나이다. 전체 페이지를 새로고침 하지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간의 XML데이터를 주고받는 기술이다. XML (eXtensible Markup Language) - XML은 다목적 마크업 언어로 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환할 수 있도록 해 준다. - HTML과 같은 Markup Language라 생긴건 비슷하지만 차이점이 존재한다. HTML 은 이미 약속된 태그만 사용이 가능..

CSS 미디어쿼리로 반응형 웹 디자인하기 (with flex-box)

Computer Programming/CSS 2023. 6. 8. CSS 미디어쿼리로 반응형 웹 디자인하기 (with flex-box) 1. 미디어쿼리 (Media Queries)란? 미디어 쿼리는 웹 화면을 보는 디바이스 (휴대폰, 태블릿, 데스크탑 등)에 따라 웹사이트나 앱의 스타일을 수정할 때 사용하는 툴이다. 각각의 디바이스에 어떤 특성이나 수치(화면 해상도, 뷰포트, 너비 등)에 따라 스타일 및 레이아웃을 수정할 수 있기 때문에 반응형 웹사이트를 제작할 때 사용된다. 2. 미디어쿼리 사용 방법 미디어 쿼리는 @media 규칙을 사용해서 정의된다. @media media-type and (media-feature) { /* 스타일 및 레이아웃 규칙 */ } /* 600px 이상의 너비를 가진 뷰포트에 적용되는 스타일 */ @media screen and (min-width: 600px) { /* 스타일 및 레이아웃 규칙 */ } ..

9조 웹미니프로젝트 S.A (Starting Assignment)

프로젝트 회고 🌊 2023. 6. 7. 9조 웹미니프로젝트 S.A (Starting Assignment) 1. 프로젝트 제목/간단설명 2. 와이어프레임 3. API(개발해야 하는 기능들) 4. public github repo 주소 1. 프로젝트 제목/간단설명 1-1. 제목 내가& nbsp;하려고 만든< 개 임. 1-2. 개요 이번 사전 미니 웹 프로젝트로 자바스크립트로 구현된 다양한 재미있는 미니게임이 모여있는 웹사이트를 개발했습니다. 이 프로젝트에는 옛날 픽셀 게임들을 활용해 구현된 세 가지의 미니게임으로 구성되어 있습니다. 웹사이트의 대부분의 그래픽과 폰트, 스타일에서 픽셀아트 느낌을 최대한 내보려고 노력했습니다. 1-3. 특징 1) 픽셀 아트와 레트로 디자인: 독특한 시각적 요소를 위해 flaticon에서 픽셀 아이콘을 주로 사용했다. 배경 사진 또한 무료 배경사진 사이트에서 픽셀아트 위주의 사진으로..

🎮 자바스크립트로 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) 을 해주면 된다. 간단한 로그인 페이지 코..

이전 1 ··· 7 8 9 10 11 12 13 다음

Archives

Recent Posts

Tags

더보기

Calendar

티스토리툴바