emayom.log

[Javascript] 프로그래머스 Level 1 _ 음양 더하기 👇🏻 Link_Click 👇🏻 시행착오 ( + 코드를 작성하면서든 생각들.) 1. 음양 더하기라길래 뭔가 했더니 음수와 양수 더하기 였다 ㅎㅎㅎㅎㅎㅎㅎ 간단하게 reduce 함수로 누적합을 계산했다! function solution(absolutes, signs) { for(let i in absolutes) { if(!signs[i]){ absolutes[i] -= absolutes[i]*2 } } return absolutes.reduce((acc, val) => acc + val); } function solution(absolutes, signs) { for(let i in signs) { if(!signs[i]) absolutes..

[Javascript] 프로그래머스 Level 1 _ 문자열 내 마음대로 정렬하기 👇🏻 Link_Click 👇🏻 시행착오 ( + 코드를 작성하면서든 생각들.) 1. 문자열 배열의 문자열과 n번째에 해당하는 문자 두가지를 저장하는 객체들로 이루어진 배열을 생성한 뒤 문자 기준으로 정렬한 후 문자열만 다시 배열에 저장해서 리턴했다! function solution(strings, n) { function Extract(string, n) { this.string = string; this.word = string[n]; } let arr = []; for(let i in strings) { arr.push(new Extract(strings[i], n)); } arr.sort(function(a, b) { ..

[Javascript] 프로그래머스 Level 1 _ 숫자 문자열과 영단어 👇🏻 Link_Click 👇🏻 시행착오 ( + 코드를 작성하면서든 생각들.) 주어진 문자열을 숫자와 단어로 나누는 것이 문제였다 ㅠㅠ 그러다보니 정규표현식을 찾게되었고 겨우 작성할 수 있었다 ,, 배열로 나누고 난 이후로는 수월했다!numbers를 오브젝트로 선언할지 배열로 선언할지 고민했는데단어의 인덱스가 단어를 숫자로 바꿨을 때와 같아서 그냥 배열로 선언했다. 그리고 numbers에 포함되는 단어의 경우 해당하는 numbers의 인덱스로 바꿔주었다 function solution(s) { const regexp = /zero|one|two|three|four|five|six|seven|eight|nine+|[0-9]/g; co..

[Javascript] 프로그래머스 Level 1 _ 2016년 👇🏻 Link_Click 👇🏻 시행착오 ( + 코드를 작성하면서든 생각들.) 1. 처음엔 단순하게 Date() 함수를 이용해 월과 일을 입력해 요일 배열에서 결과 값을 반환하도록 했다. 하지만 이렇게 하면 정확성 테스트에서 통과가 되지 않는다! function solution(a, b) { const days = ["SUN", "MON", "TUE", "WEND", "TURS", "FRI", "SAT"] const date = new Date(2016, a-1, b); return days[date.getDay()]; } 2. 문제를 살펴보면 2016년 1월 1일은 금요일이라는 문장이 있다. 그렇다면 해당 일이 2016년의 몇 번째 날인지를..

우리는 Vue.js, React, Angular 등으로 SPA를 구현할 수 있다! 오늘은 SPA에 대해 알아보자. SPA ? SPA는 Single Page Application의 약자로 이름 그대로 '단일 페이지 응용 프로그램'으로 해석한다. 단일 페이지 응용 프로그램이란 사용자가 여러 페이지를 옮겨 다니는 것이 아니라 한 페이지 내에서 머무르고, 서버로부터 전달받은 데이터로 필요한 부분만 동적으로 업데이트해 보여주는 방식을 말한다. (☝🏻 이러한 방식이 '클라이언트 사이드 렌더링') 이러한 방식 덕분에 리액트의 특징에 대해 이야기하며 언급한 웹을 앱처럼 사용하는듯한 빠르고 부드러운 사용자 경험(UX)이 가능한 것이다. +) 만약 페이지를 이동할 때마다 서버로부터 새로운 html을 요청해 다시 DOM트리..

컴포넌트란 ? 리액트는 컴포넌트 기반의 구조이다. 리액트 공식 문서에 따르면 컴포넌트는 UI를 독립적이고 개별적으로 관리할 수 있는 재사용 가능한 조각으로 나누어 준다고 설명한다. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. 컴포넌트의 개념을 쉽게 생각한다면 웹페이지의 메뉴바, 버튼, 모달 창 같은 UI 요소들이 레고 한 블록, 부품과 같이 구조화한 것으로 간주할 수 있다. 컴포넌트 구조의 경우 유지 보수가 편리하다. 예를 들어 아래와 같은 html의 코드가 있다고 가정하자. , , 를 구성하는 많은 코드들이 내부에 존재할 텐데 더 많은 섹션을 가지게 된다면..

✏️ 오늘은 반응형에 필수적인 미디어 쿼리의 문법과 사용법에 대해 알아보자. 미디어 쿼리(Media Queries) ? 우선 미디어 쿼리란 무엇일까. 🤔 미디어 쿼리는 반응형 웹 디자인의 핵심적인 부분으로 디바이스의 유형이나 특성, 수치에 따라 화면을 다르게 표현하여 대응할 수 있도록 만들어준다. 과거와 달리 현재 정말 다양한 기기로 웹을 사용하기 때문에 일관된 UX를 위해서는 빼놓을 수 없다. 🙋🏻❓ 미디어 쿼리에서 쿼리(Query)란 직역하면 '질의'이라는 의미로 CSS 설정을 위해 우선 조건문에 해당하는지 질의하는 것이라고 생각하면 쉽다. 재미있게 예를 들어보자. 디바이스의 수치에 해당하는 뷰포트의 너비에 따라 CSS 설정을 다르게 해보고 싶다면? 🙋🏻 : 너는 뷰포트의 너비가 얼마야? 1번 스마트..

CSS에서 font-size를 지정할 때 pt, px, em, rem, vw, vh, vmax, vmin 등 다양한 단위들을 이용할 수 있다. 오늘은 그중 em과 rem의 차이에 대해 알아보자. 우선 em과 rem은 모두 가변 폰트이다. 그렇다면 em, rem만 사용하면 자동적으로 브라우저의 크기에 따라 가변 하는 것 일까? 일단 단독적으로는 아니라는 것을 먼저 알고 시작하자! (왜인지는 포스팅 마지막으로,,,!) em ? em은 타이포그래피의 단위 중 하나로 과거 활자를 통해 폰트를 제작할 때 대문자 M을 1em의 기준으로 삼았다는 것에서 비롯되었는데 1em 은 현재 사용되는 12pt 크기의 대문자 M의 너비를 기준으로 정해진다. (여기서 12pt는 16px과 같다.) em은 가변 폰트로 자식의 폰트 ..

오늘은 CSS position 속성에 대해 알아보자. 👇🏻 position 속성 한눈에 보기 static relative absolute fixed sticky position은 태그 요소의 '위치'를 정의하기 위해 사용한다! 앞서 잠깐 살펴본 것과 같이 position 속성에는 static, relative, absolute, fixed, sticky 이 있다. 예제를 통해 쉽게 확인해보기 위해 컨테이너에 담긴 아이템들을 준비했다. (아래의 그림들은 편의성을 위해 임의로 중앙 정렬을 해두었다!) 1. position : static static 은 우리가 포지션 속성을을 지정하지 않아도 적용되어있는 디폴트 값이다. position: static을 적용하기 전과 후가 차이가 없는 것을 확인해볼 수 있다...

자바스크립트에서 html DOM에 접근하여 제어하기 위해 getElementById, querySelector, querySelectorAll 등의 Document 메소드를 통해 객체를 가져온다. querySelector ? getElementById는 주어진 id를 가진 엘리먼트(요소)를 찾아오지만, querySelector의 경우 id 혹은 class 중 주어진 선택자에 만족하는 요소를 찾아올 수 있다! //id 선택자 document.querySelector("#id"); //class 선택자 document.querySelector(".class"); 유의해야 할 점은 중복되는 id를 가진 경우 첫 번째의 요소만을 가져올 수 있는 것이다. 그렇다면 같은 선택자를 가진 모든 요소를 가져오고 싶을 때..