본문 바로가기

전체

 (142)
24.01.16 TIL - 배열 내장 메소드 알고리즘 문제를 푸는 데에 배열이 자주 나오는데 머리에 정리가 안 되어 있으니 불편해서 한번 정리해 보려고 한다. 프론트를 할 때 map함수는 자주 써봤는데, 다른 배열을 쓸 일이 없었다. 하지만, 이제는 메소드를 한번 정리해보고 필요할 때 필요한 메소드를 뽑아 쓸 수 있게 정리해봤다. 이렇게 정리해 놓으면 알고리즘을 공부할 때 조금이라도 빨리 떠오르지 않을까 한다. 1. 원본 배열을 수정하는 메서드 1) push(): 배열의 끝에 하나 이상의 요소를 추가하고, 새로운 길이를 반환합니다. const fruits = ['apple', 'banana']; fruits.push('orange'); // fruits: ['apple', 'banana', 'orange'] 2) pop(): 배열의 마지막 요소를 ..
23.01.15 TIL-Javascript로 별점 기능 만들기 .star-rating { display: flex; } .star { appearance: none; padding: 1px; } .star::after { content: '☆'; color: hsl(60, 80%, 45%); font-size: 20px; }​ 별점 모양의 HTML, CSS appearance: none을 통해서 라디오 모양을 표시하지 않도록 하고, ::after을 사용하여 빈 별모양을 넣어줬다. .star:hover::after { content: '★'; } .star:has(~ .star:hover)::after { content: '★'; } .star:checked::after, .star:has(~ .star:checked)::after { content: '★'; } ...
24.01.12 TIL - 동기/비동기 어제 콜백함수에 대해 정의해 봤는데 아직 헷갈리는 점이 있어 오늘 강의과 구글링을 통해 좀더 이해하기 쉽게 확고한 개념으로 정리해 보고자 한다. 동기 vs 비동기 동기는 '동시에 일어나는'이라는 뜻이고 비동기는 그의 반댓말이다. 하지만 동기비동기의 단어를 그렇게 정의하면 오히려 혼란만 생겼다. 영어를 우리말로 번역해오면서 늬앙스 차이가 발생했고 이름으로 그것을 파악하면 더 헷갈리게 되었다. 동기는 현재작업의 요청과 응답이 아닌, 현재 작업의 응답과 다음 작업의 요청이 동시에 일어난다고 생각하면 된다. 그러니 작업의 순서가 정해져 있는 것이고 반면에 비동기는 작업의 순서가 보장되지 않고 동시에 일어나는 것이다. 그렇기에 비동기의 장점인 기다리지 않고 작업을 처리할 수 있는 점을 살리고, 비동기를 동기처럼 ..
24.01.11 TIL - 콜백함수(1) 1.콜백함수 1) 정의: 다른 코드의 인자로 넘겨주는 함수. 인자로 넘겨준다는 말은 넘겨받는 코드가 있다는 것!! forEach, setTimeout이 그 예시가 되겠다. 2) 콜백함수를 넘겨받은 코드는 이 콜백함수를 필요에 따라 적절한 시점에 실행하게 된다.(제어권이 그들에게 있다.) // setTimeout setTimeout(function() { console.log("Hello, world!"); }, 1000); // forEach const numbers = [1, 2, 3, 4, 5]; numbers.forEach(function(number) { console.log(number); }); 3) callback = 제어권을 넘겨줄테니 너가 알고있는 그 로직으로 처리해줘! 4) 즉 콜백함수..
프로그래머스 1단계 - x만큼 간격이 있는 n개의 숫자 function solution(x, n) { var answer = []; for(let i=1; i (i+1) * v) } 이렇게 짧은 코드로 나왔다. array.fill.map을 체이닝해서 만든 로직인데 사실 fill이라는 배열 내장 메소드가 있는지도 처음 알았다. fill() arr.fill(value, start, end); 첫번째 인자인 value만 필수값이고 시작인덱스와 끝인덱스는 옵셔널이다. map() arr.map(callback(currentValue, index, array)); 매개변수로 콜백함수를 받는데 3가지 인자를 가질 수 있다. index, array는 선택사항이다. [1,2,3].map((v, i) => (v + i)); // 실행 결과 : [1, 3, 5] 위 코드에서 v..
24.01.10 TIL-Git 첫 팀과제 날이라 팀원들과 공동으로 작업할 레포지토리를 정하고 작업을 시작했다. 어려워할지도 모르는 팀원들에게 어제 stash와 이론적인 부분을 아는만큼 설명했지만, 전달이 잘 되었는지는 모르겠다. 오랜만에 git 세팅을 다시 하면서 겪은 자잘한 실수들을 정리해보려고 한다. 1. 잊어버렸던 git 최초설정 팀원중 한분이 git 사용이 처음이라서 git 최초설정을 했어야 하는데, 나는 저런게 있었는지도 까맣게 잊어버렸다. 고작 5개월 전 일인데 이렇게 중요한 내용이 기억이 안나는건... 현재 시스템에서 Git 작업에 사용할 사용자이름(user.name)과 이메일을 설정하려면 global옵션을 사용해 git config 명령어를 실행해준다. 사실 이런 과정이 있었다는 사실도 팀원분이 에러에 부딪혔기에 구글링..
24.01.09 TIL - this(2) 명시적 this 바인딩 자동으로 부여되는 상황별 this의 규칙을 깨고 this에 별도의 값을 저장하는 방법 1. call 메서드 a. 호출 주체인 함수를 즉시 실행 b. call명령어를 사용하여, 첫 번째 매개변수에 this로 binding할 객체를 넣어주면 명시적으로 binding할수 있다. var obj = { a: 1, method: function (x, y) { console.log(this.a, x, y); } }; obj.method(2, 3); // 1 2 3 obj.method.call({ a: 4 }, 5, 6); // 4 5 6 2. apple 메서드 a. call 메서드와 완전히 동일. b. 차이점은 this에 binding할 객체는 똑같이 넣어주고 나머지 부분만 배열 형태로 넘겨..
24.01.08 TIL - This(1) 자바스크립트에서 중요한 this에 대해 공부한 내용을 정리하려고 한다 다른 객체지향 언어에서의 this는 클래스로 생성한 인스턴스를 말하지만, JS에서는 어디에서나 사용할 수 있다. 이전 프로젝트에서 프론트에서 활용도가 높다는 것을 느꼈고, 한번쯤 정리가 필요할 것 같았는데 이번 기회에 개념을 확립하겠다. 1. 상황에 따라 달라지는 this this는 실행컨텍스트가 생성될 때 결정된다. 이것을 thisbinding이라고 한다. 말하자면 함수를 호출할 때 결정된다. * 전역공간에서의 this의 특징 i) 전역공간에서 this는 전역객체를 가리킨다. ii) 런타임 환경에 따라 this는 window 혹은 global(node 환경)을 각각 가리킨다. 2. 메서드로서 호출할 때 그 메서드 내부에서의 this ..

티스토리툴바