본문 바로가기
728x90

분류 전체보기104

[TIL] JavaScript - push( ), pop( ), unshift( ), shift( ) JavaScript를 사용해 알고리즘 문제를 풀다 보면 push함수를 많이 사용하는데, unshift( )와 pop( ) 함수에 대해서는 처음 접해봐서 찾아보게 되었습니다. push( ) 우선 push( ) 함수는 다들 알다시피 배열의 끝에 아이템을 추가합니다. let fruits = ['Apple','Banana','Orange'] fruits.push('Grape'); console.log('fruits'); >>> ['Apple','Banana','Orange','Grape'] pop( ) pop( ) 함수는 배열의 마지막 아이템을 제거합니다. let fruits = ['Apple','Banana','Orange'] fruits.pop(); console.log(fruits); >>> ['Apple.. 2022. 11. 15.
[TIL] CSS - Transition(애니메이션) Transition이란? CSS 트랜지션은 시작 지점과 끝 지점을 서로 연결을 해 주는데 중간 과정을 부드럽게 만들어 주는 역할을 합니다. CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다. CSS, JavaScript, Class 활용의 차이 공용 HTML 웹 퍼블리싱 왕초보 시작반 웹개발 플러스 1) CSS .button { padding: .. 2022. 11. 14.
[TIL] JavaScript - 정렬 함수, sort( ) !!! sort 함수란? sort( ) 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort 가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다. 참조 : mdn sort( ) 메서드의 특징 기본적으로 오름차순으로 정렬합니다. 배열 요소를 문자열로 캐스팅하고 변환된 문자열을 비교하여 순서를 결정합니다. 배열의 요소가 undefined인 경우에는 문자열로 변환되지 않습니다. 배열의 요소가 undefined인 경우에는 배열의 맨 끝으로 정렬됩니다. 1) 구문 array.sort(sortFunction) sortFunction은 요소 순서를 결정하는 데 사용되는 함수의 이름입니다. 생략하면 오름차순, ASCII 문자 순서로 정렬됩니다. so.. 2022. 11. 13.
[WIL] 코딩테스트를 하면서... 서론 이번 주부터 새로운 팀원들과 함께 JavaScript를 사용해서 알고리즘 문제를 풀기로 했습니다. 스스로 하루에 4문제씩은 풀자 다짐을 하고 시작을 했고, 프로그래머스 lv0 문제부터 시작했습니다!! 이전에 Python을 이용해서 알고리즘 문제들을 풀었었는데, JavaScript로 풀려니 Python과 차이가 조금 있어서 처음에는 좀 버벅 거렸습니다... 하지만 다양한 문제들을 풀다보니 감을 잡았고, 자주 쓰이는 문법들을 따로 공부해서 적용하였습니다. 배운점 1) 클래스와 객체 처음으로 돌아와서 JavaScipt의 데이터 타입에 대해서 공부하였고, 그중 객체 타입과 클래스를 선언하는 방법을 공부하였습니다. 그리고 클래스 내에 함수와 같이 특정 코드를 실행할 수 있는 메소드 호출하는 방법에 대해서도 .. 2022. 11. 13.
[TIL] JavaScript - map( ), filter( ), reduce( ) Array Methods 오늘은 JavaScript에서 가장 많이 쓰이는 객체인 배열 연산 관련 함수인 map, filter, reduce에 대해 공부해 보려고 합니다. 코테 준비하는데 map, filter, reduce가 많이 쓰여서 좀 더 제대로 알고 싶어서 공부를 하게 됐습니다. 글로 공부를 할 때는 이해가 잘 안 됐지만, 그림으로 보니 쉽게 이해할 수 있었습니다. 1. map( ) 1) 구문 arr.map( callback ( currentValue[, index[, array]])[, thisArg]) 2) 매개변수 callback : 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다. currentValue : 처리할 현재 요소입니다. index ( Optional ) : 처리.. 2022. 11. 11.
[TIL] JavaScript 전개 연산자 전개 연산자 ( spread 문법 ) 전개 연산자는 ES6에서 새로 추가된 문법으로, 배열의 요소나 객체를 나열해주는 연산자이다. 배열이나 객체의 복사본( 원본에 영향을 미치지 않는)을 만들 수 있으며, 여러 개의 배열이나 객체를 손쉽게 병합할 수도 있습니다. 또한, 함수의 매개변수나 인자 값으로도 사용이 가능한 연산자입니다. 사용법은 배열을 담은 변수 앞에 ... 을 붙이면 됩니다. { ... object } // 펼칠 대상이 객체인 경우 [ ... array ] // 펼칠 대상이 배열인 경우 { ... array } // 배열일 경우 중괄호{}도 가능!! ES5 vs ES6 1) ES5 배열 조합 ES5 에서는 배열의 내용을 합쳐 새로운 배열을 만들기 위해서 concat 메소드를 활용했었습니다. le.. 2022. 11. 10.
728x90