Front-End

Front-End/JavaScript

[JavaScript] .sort() 함수를 이용해 배열의 요소 정렬하기

설명 Array.prototype.sort()는 배열의 요소를 적절한 위치에 정렬한 후, 그 배열을 반환한다. 이때 배열 안 모든 요소는 문자형으로 변환된 후, 유니코드 단위의 값을 비교한 뒤 재정렬된다. 배열 안의 요소가 숫자일 경우도 숫자끼리의 크기 비교를 하지 않고 숫자를 문자열로 변환한 뒤 해당 문자열의 유니코드 값을 비교하여 정렬을 하게 된다. 9와 80이라는 두 수를 sort()로 비교할 경우 숫자로는 9가 80보다 우선하지만, 유니코드 순서 상으로는 80이 9보다 앞에 위치하고 있어 80을 9보다 앞쪽에 정렬하게 된다. 구문 // 기본 구문 값 arr.sort([compareFunction]) // 화살표함수를 이용한 표현법 arr.sort((a, b) => { /* ... */ } comp..

Front-End/Algorithm

[프로그래머스 / JavaScript] Lv.1 문자열 내 마음대로 정렬하기

문제 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다. 제한사항 strings는 길이 1 이상, 50이하인 배열입니다. strings의 원소는 소문자 알파벳으로 이루어져 있습니다. strings의 원소는 길이 1 이상, 100이하인 문자열입니다. 모든 strings의 원소의 길이는 n보다 큽니다. 인덱스 1의 문자가 같은 문자열이 여럿 일 경우, 사전순으로 앞선 문자열이 앞쪽에 위치합니다. 입출력 예 strings n result ["sun", "bed",..

Front-End/Algorithm

[프로그래머스 / JavaScript] Lv.1 최소직사각형

문제 명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로길이와 세로 길이를 조사했습니다. 아래 표는 4가지 명함의 가로 길이와 세로 길이를 나타냅니다. 명함 번호 가로 길이 세로 길이 1 60 50 2 30 70 3 60 30 4 80 40 가장 긴 가로 길이와 세로 길이가 각각 80, 70이기 때문에 80(가로) x 70(세로) 크기의 지갑을 만들면 모든 명함들을 수납할 수 있습니다. 하지만 2번 명함을 가로로 눕혀 수납한다면 80(가로) x 50(세로) 크기의 지갑으로 모든 명함들을 수납할 수 있습니다. 이때의 지갑..

Front-End/Algorithm

[프로그래머스 / JavaScript] Lv.0 숫자 비교하기

문제 정수 num1과 num2가 매개변수로 주어집니다. 두 수가 같으면 1, 다르면 -1을 return하도록 solution 함수를 완성해 주세요. 제한사항 0 < num1 ≤ 10,000 0 < num2 ≤ 10,000 입출력 예 num1 num2 result 2 3 -1 11 11 1 7 99 -1 내가 작성한 답안 function solution(num1, num2) { var answer = 0; if(num1 !== num2){ answer = -1; }else{ answer = 1; } return answer; } 매개변수 값의 비교는 엄격한 동등 연산자인 일치 연산자(strict equality operator) '==='를 사용하였다. 일치 연산자는 자료형의 동등 여부까지 검사하기 때문에..

Front-End/Algorithm

[프로그래머스 / JavaScript] Lv.0 몫 구하기

문제 정수 num1, num2가 매개변수로 주어질 때, num1을 num2로 나눈 몫을 return 하도록 solution 함수를 완성해 주세요. 제한사항 0 < num1 ≤ 100 0 < num2 ≤ 100 입출력 예 num1 num2 result 10 5 2 7 2 3 내가 작성한 답안 function solution(num1, num2) { let answer = parseInt(num1 / num2); return answer; } 7 / 2 = 3.5의 경우처럼 몫이 정수가 아닌 값이 나올 수 있으므로 parseInt()를 이용해 실수를 정수형으로 변환하였다. parseInt()는 문자열 인자를 파싱하여 특정 진수의 정수를 반환한다. 다른 사람들이 작성한 답안 Math.floor function..

Front-End/Web

[HTTP] GET, POST 간단하게 알아보기

사용자가 웹에서 특정 데이터를 요청했을 경우, 우리는 이 데이터를 어떻게 넘기고 결괏값을 보여줄 것인지를 정해야 한다. 이것을 진행하는 것이 바로 HTTP(Hyper Text Transfer Protocol)이다. HTTP는 브라우저와 서버가 통신할 수 있도록 만들어주는 여러 프로토콜(규약, 규칙) 가운데 한 종류로, 웹 브라우저와 웹 서버 사이에 HTML문서를 주고받는데 쓰이는 통신 프로토콜이다. 위와 같이 클라이언트(요청을 보내는 쪽, Requset)와 서버(요청을 받는 쪽, Respose)가 HTTP로 통신할 때, 데이터를 어떻게 넘길 것인가를 결정하는 것이 'GET'과 'POST'이다. 각 방식의 대표적인 특징을 먼저 살펴보고 이후 예시와 함께 직접 확인해 보자. GET GET방식의 대표적인 특징..

Front-End/HTML&CSS

[HTML] 절대경로와 상대경로

이해를 위한 기본 세팅 설명 [내 PC]의 [사진] 폴더 안에 [Scan], [오류] 폴더가 있으며 동등한 위치에 'capture.jpg'가 있다. [Scan] 폴더 안에는 'black.jpg'가, [오류] 폴더 안에는 '1.jpg', '2.jpg', '3.jpg'가 있다. 절대 경로 ▶ 최상위 디렉토리(=파일)를 반드시 포함하여 작성된 경로 사진에 보이는 '1.jpg'의 절대경로는 내 PC\사진\오류\1.jpg 이다. 절대경로는 직관적이어서 이해하기 쉽지만, 찾아가는 과정에서 여러 파일을 거칠 경우 경로가 길고 복잡해진다는 단점이 있다. 상대 경로 ▶ 현재 디렉토리(기준 비교 대상)를 기준으로 작성된 경로 상대경로는 '내가 기준으로 삼고 싶은 디렉토리'를 기준으로 '다른 디렉토리(또는 파일)'가 어디에..

Front-End/JavaScript

[JavaScript] var, let, const 간단하게 알아보기

변할 수 있는 임의의 값, '변수'를 생성하기 위해 자바스크립트는 var, let, const 라는 키워드를 제공한다. ES5까지는 var 키워드만 사용되었는데, ES6부터는 let과 const도 이용하여 변수를 생성할 수 있다. 그렇다면 왜? 굳이 let과 const라는 키워드를 추가하여 변수를 만들 때 셋 중 하나를 선택하게 해두었을까? var 아이스크림이라는 변수를 var로 생성하고, 500이라는 값을 주었다. 따라서 콘솔로 찍어보면 아이스크림은 500이라는 값이 나온다. 이때, 변수 빵이 가지고 있는 값이 1000 이상이라면, 아이스크림이라는 변수를 다시 선언하여 1000이라는 값을 부여한다. if문의 괄호 시작, 끝 점이 끝났으므로 if문 안에서 선언된 var 아이스크림 = 1000;은 괄호 밖..

Olivia Kim
'Front-End' 카테고리의 글 목록 (7 Page)