반응형

바닐라코딩 20

프로그래머스) 같은 숫자는 싫어

https://programmers.co.kr/learn/courses/30/lessons/12906 코딩테스트 연습 - 같은 숫자는 싫어 배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 programmers.co.kr 문제 설명 배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면, arr = [1, 1, 3, 3, 0, 1..

IT/Algorithm 2021.06.18

프로그래머스) K번째 수

https://programmers.co.kr/learn/courses/30/lessons/42748 코딩테스트 연습 - K번째수 [1, 5, 2, 6, 3, 7, 4] [[2, 5, 3], [4, 4, 1], [1, 7, 3]] [5, 6, 3] programmers.co.kr 문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k..

IT/Algorithm 2021.06.17

프로그래머스) 완주하지 못한 선수

https://programmers.co.kr/learn/courses/30/lessons/42576 코딩테스트 연습 - 완주하지 못한 선수 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수 programmers.co.kr 문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요..

IT/Algorithm 2021.06.17

캘린더 만들기

TODO 오늘의 현재 요일 표기 오늘의 현재 날짜 표기 오늘의 현재 월 표기 오늘의 현재 연도 표기 일, 월, 화, 수, 목, 금, 토 요일 라벨링 표기 현재 월의 1일이 무슨 요일인지 판별하고, 해당 요일 라벨링에 1일 표기하기 현재 월의 마지막 날짜까지 달력에 표기하기 우측 화살표를 클릭 했을때, 다음 달의 요일 및 날짜 표기 좌측 화살표를 클릭 했을때, 이전 달의 요일 및 날짜 표기 특정 날짜를 클릭 했을때, 상단의 요일 및 날짜 반영하기 오늘의 종합적인 날짜를 구하려면 new Date 오브젝트를 활용. 개발자 도구의 콘솔을 확인해보니 Day와 Month는 숫자로 되어있음. -> 숫자에 대응하는 문자열로 변환하기 위해 Day, Month에 대한 배열을 생성 Day 배열과 반복문으로 라벨링 표기 ->..

IT/Project 2021.06.04

Array

JS에서는 boolean, number, string, null, undefined을 제외하면 모두 객체라는 특징이 있다. 배열은 Array 생성자로 생성된 Array 타입의 객체이며 프로토타입 객체는 Array.prototype이다. 1. declaration const arr1 = new Array(); const arr2 = [1,2]; 2. index position const fruits =['a','b']; console.log(fruits); // a, b console.log(fruits[0]);// a | 대괄호 안에 숫자를 기입하면 이를 index로 인식한다. console.log(fruits[1]);// b console.log(fruits[fruits.length - 1]);//배열..

IT/JS 2021.05.20

Function

1. function 함수는 object의 일종이다. JS에서는 타입 정의를 따로 하지 않기 때문에 이것이 숫자인지 문자열인지 난해할 수 있다. 따라서 TS(TypeScript)를 활용하여 정확하게 변수의 데이터타입을 지정해주어야한다. TS활용 예시) function log(x: string): number {} // 함수에 타입을 정하는 방식 일반적인 함수 선언 function log(x){ console.log(x); } ​ 2. parameters primitive parameters: passed by value object parameters: passed by reference function changename(x){ x.name='coder'; } const hty = {name:'hty'..

IT/JS 2021.05.20

Class

JS Classes es6에서 소개되었으며, 기존 js에 문법적으로 추가된 것이다(완전히 새로운 것이 아님). 이를 syntactical sugar이라고 한다. 클래스는 붕어빵 기계의 틀과 같다고 할 수 있다. 이 틀에 반죽과 팥이라는 data를 넣었을때, 만들어진 붕어빵은 Object와 같다고 할 수 있다. 즉 클래스를 활용하여 다양한 오브젝트를 만들 수 있는 것이다(단팥, 피자, 초코 붕어빵 등등..). 클래스의 이름은 대문자로 시작하는 규칙이 있다. class Person{ //constructor constructor(name,age){ //field this.name=name; //this:생성된 오브젝트의 name this.age=age; } //methods speak(){ console.l..

IT/JS 2021.05.20

Operator, Control flow statement

1. string concatenation 문자열 연결 문자열과 숫자 연결의 경우 + 연산자를 이용 console.log('my'+'cat'); console.log('1'+2);​ 변수를 출력하는 경우 ( ` ` )안에 위치 console.log(`string literals: 1+2 = ${1 + 2}`); console.log('hatae\'s \nbook');​ ( ' ' )안에 '를 문자열로 입력해야하는 경우 \사용 console.log('hatae\'s \nbook');​ 2. numeric operator 사칙연산 및 거듭제곱(**), 나머지(%)를 활용 console.log(1+1); console.log(2**2);​ 3. increment and decrement operators le..

IT/JS 2021.05.20

main.js와 html 구현을 효과적으로 할 수 있는 방법(by 드림코딩 엘리)

main.js와 html 구현을 효과적으로 할 수 있는 방법을 공부하여 간략히 내용을 정리하였다. head 아무것도 보여주지 못한 채로 시간만 흐름 body js 의존도가 높은 웹사이트라면, 치명적임 head+async async는 boolean값으로, html을 파싱 하면서 병렬로 함께 실행되게 함. main.js가 모두 다운로드되면 이때 html 파싱을 멈추고 js파일을 실행한 뒤 다시 html 파싱 하는 방식. 이로써 시간 단축의 이점이 있음. head+defer async과 비슷하지만 html이 모두 구현된 이후에 다운로드된 main.js를 실행하는 방식. 가장 빠름. 그리고 자바스크립트 코딩 시, 'use strict'을 정의하면 상당한 오류들을 예방할 수 있다고한다. 출처 : 드림코딩 by 엘리

IT/JS 2021.05.06

바닐라코딩 사전학습 가이드 - google 홈페이지 클론 코딩

오늘은 바닐라코딩 사전학습 가이드 STEP1의 마지막인 Google Clone을 해보려 한다. 제시된 조건은 다음과 같다. HTML, CSS만을 이용하여 구글 웹사이트와 최대한 비슷한 UI를 구현해보세요. UX 측면의 동작들은 구현하지 않아도 무관합니다. CSS 효과, 화면 조정에 대응하기는 신경 쓰지 않으셔도 괜찮습니다. 구글 로고나 아이콘 등은 인터넷에서 찾아서 사용하세요. 화면 사이즈 조정에 대한 대응은 하지 않으셔도 됩니다. 일단, 화면 사이즈 조정까지 해보는 것을 목표로 시작한다! 먼저 Wireframe을 구성하고, 클래스까지 정해 본다. 크게 세 박스이며, header | .main+.search+.gobutton | .nation+.instruction 으로 나뉜다. 그리고 웹페이지의 글꼴을..

IT/Project 2021.05.05
반응형