분류 전체보기

    [CSS 레이아웃] ③ Position (static, relative, absolute & fixed)
    TIL/[위코드] 풀스택 부트캠프 2기

    [CSS 레이아웃] ③ Position (static, relative, absolute & fixed)

    Position이란? CSS 레이아웃에서 position은 HTML 요소의 위치를 이동시킬 때, 그 기준점을 설정하는 데에 사용되는 속성이다. Position 속성의 값으로는 static, relative, absolute, fixed, sticky 이렇게 다섯 가지 유형이 있으며, 각 유형에 따라 top/bottom, left/right 속성으로 기준점으로부터 이동시키고 싶은 만큼 요소의 위치를 이동시킬 수 있다. 1. Static (기본값) 모든 요소가 기본값으로 갖는 Position 속성 아무런 설정을 하지 않은, 가장 일반적인 상태이다. 2. Relative 자기 자신이 원래 있던 자리를 기준으로 이동! Float이 적용된 요소는 "집 나간 자식"처럼 여겨져 해당 요소가 원래 있던 자리를 빈 공간..

    [TIL] 객체란 무엇이며, 객체가 필요한 이유는? (JavaScript)
    TIL/[위코드] 풀스택 부트캠프 2기

    [TIL] 객체란 무엇이며, 객체가 필요한 이유는? (JavaScript)

    객체란? 하나의 변수에 여러 속성을 저장할 수 있도록 해주는 자바스크립트의 참조형 데이터 타입 중 하나 아래 이미지처럼 Key(속성 이름)과 Value(속성 값)이 한 쌍의 Property(속성)으로 연결되어 있으며, 배열과 달리 순서가 중요하지 않다. 객체를 만들기 위해서는 평소처럼 변수를 선언한 다음, 중괄호로 Key-Value의 속성 쌍을 묶어주면 된다. (= Object Literal 방식) 배열 예시 예를 들어 다음과 같은 배열이 있다고 생각해보자. let person1 = ['곽철용', 'AB형', 'ENFP', '바닐라라떼']; 위 배열에는 특정 사람의 이름과 혈액형, MBTI, 좋아하는 커피에 대한 정보가 담겨있다. 우리가 원하는 정보를 얻기 위해서는 해당 배열에 있는 Index numbe..

    [프로그래머스] K번째수 (JavaScript)
    ETC/코딩테스트 연습

    [프로그래머스] K번째수 (JavaScript)

    문제 설명 배열 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]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요. 제한사항 array의 길이는 1 이상 100 이하입니다. ..

    [프로그래머스] 나누어 떨어지는 숫자 배열 (JavaScript)
    ETC/코딩테스트 연습

    [프로그래머스] 나누어 떨어지는 숫자 배열 (JavaScript)

    문제 설명 array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요. 제한사항 arr은 자연수를 담은 배열입니다. 정수 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다. divisor는 자연수입니다. array는 길이 1 이상인 배열입니다. 설명 더 보기 나누어 떨어지는 숫자 배열 (JavaScript) 문제 풀이 function solution(arr, divisor) { const answer = []; // arr의 각 element를 divisor로 나누어 떨어지는 값을 answer 배열에 추가 fo..

    [프로그래머스] 모의고사 (JavaScript)
    ETC/코딩테스트 연습

    [프로그래머스] 모의고사 (JavaScript)

    문제 설명 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다. 1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ... 3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ... 1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많은 문제를 맞힌 사람이 누구인지 배열에 담아 return 하도록 solution 함수를 작..

    [TIL] 반복문의 필요성 & for 반복문의 작성 방법 (JavaScript)
    TIL/[위코드] 풀스택 부트캠프 2기

    [TIL] 반복문의 필요성 & for 반복문의 작성 방법 (JavaScript)

    반복문(Loop)이란? JavaScript 세상에서는 생각보다 반복적으로 해야 할 일들이 많다. 자료의 개수가 5개 정도라면 일일이 세거나 특정 단어를 입력하는 등의 일이 쉽겠지만, 자료의 개수가 20개라면, 100개라면...?! 자료의 개수가 늘수록 부담은 늘어날 것이다. 그때 필요한 것이 반복문이다. 특정 조건을 만족하는 동안 일정한 코드를 반복해서 실행한다. 같은 동작을 여러 번 반복해야 할 때, 개발자의 수고로움을 덜어주기 위해 주로 활용된다. 반복문의 종류로는 while 반복문, do while 반복문, for 반복문, for in 반복문 등이 있다. for 반복문의 구조 초기화문 (Initialization) 초기화문 작성 시, 변수 선언자를 써주어야 한다. 변수명은 보통 Index를 의미하는..

    [TIL] 배열에서 자주 쓰이는 +7가지 메서드 (JavaScript)
    TIL/[위코드] 풀스택 부트캠프 2기

    [TIL] 배열에서 자주 쓰이는 +7가지 메서드 (JavaScript)

    Array.prototype.slice() slice() 메서드는 배열 내의 특정한 요소의 Index 범위에 따라 새로운 배열을 리턴한다. splice() 메서드와는 다르게 slice 메서드는 원본 배열을 변형시키지 않는다. 그렇기 때문에 이 메서드를 사용할 때는 slice() 메서드를 적용한 새로운 변수를 선언해주어야 한다. 위의 그림에서는 인자 2개가 들어갔지만, slice() 메서드는 필요에 따라 인자를 최소 1개만 쓸 수도 있다. 첫 번째 인자: 배열의 Index의 시작점 두 번째 인자: 배열의 Index의 끝점 let nums = [1, 2, 3, 4, 5]; let nums_new = nums.slice(1, 4); // 인덱스 값이 1~3인 요소가 담긴 배열을 새로운 변수에 저장 consol..

    [TIL] 배열의 선언 방법 & 자주 쓰이는 5가지 메서드 (JavaScript)
    TIL/[위코드] 풀스택 부트캠프 2기

    [TIL] 배열의 선언 방법 & 자주 쓰이는 5가지 메서드 (JavaScript)

    배열이란? 여러 값이 연속으로 나열되어 저장된 공간으로, 연관성 있는 값들을 한 공간에 저장하기 위해 사용한다. 이러한 각각의 값을 엘리멘트(Element) 또는 요소라고 부른다. 배열에서는 인덱스(Index)라고 부르는 주소를 이용해 각각의 요소에 접근할 수 있다. 배열을 선언하는 방법 let myArray = []; // 변수 myArray를 선언하되, 대괄호를 적어 배열임을 정의 myArray = [19, 44, 'good', false]; // myArray 배열 안에 원하는 요소를 저장 console.log(myArray); // [19, 44, 'good', false] 출력 요소(Element)에 접근하기 : 배열의 인덱스 값을 활용하여 let myArray = [19, 44, 'good',..

    [TIL] Scope Chain 이해하기 (JavaScript)
    TIL/[위코드] 풀스택 부트캠프 2기

    [TIL] Scope Chain 이해하기 (JavaScript)

    스코프란? 변수(식별자)의 유효 범위를 뜻한다. 스코프(Scope)는 변수가 어디서, 어떻게 선언되었는지에 따라 그 변수의 유효한 범위가 결정되는 규칙이기도 하며, 자바스크립트에서는 이 규칙에 따라 참조의 대상이 되는 변수를 탐색해나간다. (→ Scope Chain) 전역 스코프(Global Scope): 코드 어디에서든지 참조할 수 있다. (→ 전역 변수) 지역 스코프(Local Scope or Function-level Scope): 함수 스코프 또는 코드 블록(if-else, for, while, try-catch 등)이 만든 블록 스코프로, 자기 자신 또는 그 하위 함수/블록에서만 참조할 수 있다. (→ 지역 변수) var x = 'global scope'; function foo() { var ..

    [TIL] 함수의 필요성 & 함수를 선언하는 4가지 방법 (JavaScript)
    TIL/[위코드] 풀스택 부트캠프 2기

    [TIL] 함수의 필요성 & 함수를 선언하는 4가지 방법 (JavaScript)

    함수란? 하나의 특별한 목적의 작업을 수행하기 위해 독립적으로 설계된 프로그램 코드의 집합 어떠한 입력(Input)을 받아 특정한 기능이나 계산을 수행한 다음 그 결과(Output)를 돌려주는 역할을 한다. (1️⃣ input 받기 → 2️⃣ 기능 수행 → 3️⃣ output 반환) 물론, 프로그래밍에서 쓰는 함수는 입력이나 결과 없이도 함수 안에서 특정 기능만을 수행할 수도 있다. (1️⃣ input 받기 → 2️⃣ 기능 수행 OR 2️⃣ 기능 수행 only) 함수의 선언과 실행 함수의 선언(=정의): 함수의 이름부터 함수에 들어갈 매개변수(괄호 속), 함수를 실행했을 때 수행할 구체적인 내용(중괄호 속)까지 정의(Definition)하는 것 함수의 실행(=호출): 함수가 동작하게 하려고 미리 정의해둔..

티스토리툴바