본문 바로가기

전체 아티클136

토스 채용 서비스인 줄 알았는데,, 목차 · 토스 채용 서비스 인 줄 알았는데, · 엥, 근데 토스 서비스가 아니었다고? · 두들린의 그리팅 서비스 토스 채용 서비스 인 줄 알았는데, 2023년 2월 대학교를 졸업하고, 대외활동에서의 여러 팀원들과 프로젝트하는 것이 즐거워 멋쟁이사자처럼 11기를 다시 시작했다. 멋쟁이사자처럼은 보통 지원 어플라이 사이트를 직접 제작해 만들어 학교에 제공을 하기 보다는 구글 폼을 이용해 학교 내의 팀원들을 꾸리도록 운영을 하고 있는데, 우리는 독특하고, 색다르게 학교 자체만의 어플라이 서비스를 만들고자 하였다. 와이어 프레임을 먼저 그렸다. SOPT에서 UI 디자인 툴인 Adobe XD에 대해서 배운 적이 있기 때문에, 보통 전문 디자인을 배운 사람이 없으면 보통 내가 와이어 프레임을 그리고, 디자인하고 프.. 2023. 2. 24.
This의 여러 쓰임새 단독으로 쓴 this 기본적으로 this를 호출하는 경우엔 global object를 가리킨다. 브라우저에서 호출하는 경우 [object Window]가 된다. 이는 ES5에서 추가된 strict mode(엄격 모드)에서도 마찬가지이다. 'use strict'; var x = this; console.log(x); // Window 함수 안에서 쓴 this 함수 안에서 this는 함수의 주인에게 바인딩된다. 함수의 주인은 window가 된다. function thisTest() { return this; } console.log(thisTest()); // Window var num = 0; function addNum() { this.num = 100; num++; console.log(num); //.. 2023. 2. 20.
Call · Apply · Bind의 차이점 Call · Apply · Bind의 차이점 Call, Apply, Bind 메소드 모두 명시적으로 this를 바인딩(Binding)할 때 사용한다. Call 메소드와 Apply 메소드는 메소드의 호출 주체인 함수를 즉시 실행한다. Apply 메소드는 첫번째 인자 이후의 인자들을 배열로 받는다. Bind 메소드는 Call 메소드와 Apply 메소드와 다르게 함수를 즉시 실행하지 않고 새로운 함수를 반환한다. 자바스크립트의 함수는 각자 자신만의 this를 정의한다. const say = () => { console.log(this); console.log(`Hello, my name is ${this.name}`); } say(); 여기서 함수를 실행하게 되면, this는 전역객체인 window를 의미한다.. 2023. 2. 19.
자바스크립트 new Date 객체의 크로스 브라우징 문제 문제 발생 어플라이 프로젝트를 만들면서 아래와 같이 코드를 작성해주고, currentTime에 따른 변수가 startTime과 endTime 안에 속할 때 열리는 페이지를 구상을 했다. ("YY:MM:DD HH:mm:ss") 다음과 같은 날짜 양식을 지정을 해주었고, 이 양식은 Edge, Opera, Firefox, Chrome 브라우저에서는 동작을 잘 하지만, IOS(Safari)의 경우 NaN을 나타내고 있었다. 문제 해결 Media Query를 통해 모바일 해상도의 접근을 막아놓긴 했지만, Safari로 접속을 하는 태블릿의 경우는 이 문제점을 발견할 수 있다. 그래서, ("YY-MM-DD HH:mm:ss") 와 같이 시간 규격을 변경해주거나 아래와 같은 표준 방식으로 변경을 해주어야한다. let .. 2023. 2. 17.
TypeScript useRef "Object is possibly null" error? 문제 발생 프로젝트에서 TypeScript 환경에서 useRef를 활용할 일이 있었는데, 해당 DOM 객체의 타입을 명시해주었음에도 불구하고 에러가 발생 문제 해결 const linkRef = useRef(null); // useRef 지정 if (linkRef.current !== null) { // null 값 체크 linkRef.current.focus(); } useRef를 통해 지정을 해주고, null 값을 체크해주면서 해결을 할 수 있다. const myRef = useRef(null); // useRef 지정 myRef.current?.focus(); // ES2020의 optional chain을 통해 다음과 같이 지정도 가능하다. ES2020의 optional chaing을 통해 위와 같.. 2023. 2. 17.
함수 선언식과 함수 표현식의 차이 함수 선언식 (Function Declartion) 함수 명이 정의되어 있고, 별도의 할당 명령이 없는 것 function sum(a, b) { return a + b; } 함수 표현식 (Function Expression) 정의한 function을 별도의 변수에 할당하는 것 const sum = function(a, b) { return a + b; } 함수 선언식과 함수 표현식의 차이 주요 차이점은 호이스팅에서 양상을 나타내는데, 함수 선언식은 함수 전체를 호이스팅 시키고, 정의된 범위의 맨 위로 호이스팅되어 함수 선언 전에 함수를 함수를 사용할 수 있다는 것이다. 함수 표현식은 별도의 변수에 할당을 하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅 하게 된다. 여기서, 선언부만 호이스팅 하게 .. 2023. 2. 13.
콜백 지옥(Callback hell)을 해결하는 방법 콜백지옥이란? 콜백 지옥은 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제이다. 콜백 함수를 이용해서 비동기 처리를 해주다가 코드가 깊어지는 것을 의미하며, 일반적으로 콜백지옥을 해결하는 방법에는 이전에 포스팅한 Promise와 Async 방법이 있다. function taskA(a, b, cb) { setTimeout(() => { const response = a + b; cb(res); }, 2000); } function taskB(a, cb) { setTimeout(() => { const response = a * 2; cb(response); }, 2000); } function taskC(a, cb) { setTimeout(() => { const response =.. 2023. 2. 13.
자바스크립트의 클로져(Closure) 개념 클로저란? 클로저란, 자바스크립트의 고유 개념이 아니라 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다. 클로저는 반환된 내부함수가 자신이 선언되었을 때 환경(렉시컬 환경) 스코프를 기억하여, 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 뜻한다. 렉시컬 환경 : 내부 함수가 선언되었을 때의 스코프 함수와 함수가 선언된 어휘적(Lexical) 환경의 조합 클로저는 함수를 지칭하고 또 그 함수가 선언된 환경과의 관계라는 개념이 합쳐진 것이다. 클로저의 핵심은 스코프를 이용하여, 변수의 접근 범위를 폐쇄하는 것에 있다. 외부함수 스코프에서 내부함수 스코프로 접근 불가능하다. 내부함수에서는 외부함수 스코프에서 선언된 변수에 접근 가능하다. 따라서 내부 함수.. 2023. 2. 12.
자바스크립트가 유동적인 언어인 이유 정적 언어 컴파일 시점에 타입이 결정되는 언어 타입(자료형)을 컴파일 시에 결정하는 언어 C, C++, Java 등은 대표적인 정적 언어 정적 언어는 변수에 들어갈 값의 형태에 따라 자료형을 지정해주어야한다. 컴파일 시에 자료형이 맞지 않는 값이 들어있을 경우 컴파일 에러가 발생한다. 컴파일 시간에 변수의 타입을 체크하므로, 사소한 버그들을 쉽게 체크할 수 있는 장점이 있다. 타입 에러로 인한 문제점을 초기에 발견할 수 있어 타입의 안정성이 올라간다. 동적 언어 런타임 시점에 타입이 결정되는 언어 소스가 빌드될 때 자료형을 결정하는 것이 아니라 실행 시에 결정이 된다. 매번 타입을 써줄 필요가 없기 때문에, 프로그래머가 빠르게 코드를 작성할 수 있다. JavaScript, Ruby, Python 등은 대.. 2023. 2. 12.

티스토리툴바