[JS] 비동기 처리 - Promise, async/await Promise ES6에서 Promise가 도입되어 사용되기 전에는 주로 콜백함수를 다른 함수의 인자로 넘겨서 비동기 처리를 코딩했었다. 하지만 콜백 지옥이라는 문제점으로 인해 여러 방법이 논의되었고 거기서 나온 해결법 중 하나가 Promise이다. Promise는 현재 당장 얻을 수는 없으나, 근 미래에 얻을 수 있는 어떤 데이터에 접근하기 위한 방법을 제공한다 I/O나 네트워크를 통해 데이터를 얻는 경우가 대표적인데, CPU에 의해 실행되는 코드 입장에서 엄청나게 긴 지연 시간으로 여겨지기 때문에 논블로킹을 지향하는 자바스크립트에서는 비동기 처리가 필수적이다. 생성방법 new Promise에 전달되는 함수는 executor(실행자, 실행함수)라고 부른다. new Promise가 만들어질 때 자동으로 실행되는데, 결과를 최종적으로 만들어내는 제작 코드를 포함한다. executor의 인수 resolve와 reject는 …

[JS] 비동기 처리 - 콜백 image 바닐라 자바스크립트를 이용하여 넘블챌린지를 진행하던 도중, API를 받아오고 이벤트를 처리하는 과정에서 비동기처리에 대해 이해가 부족하다는 생각이 들어 공부하게 되었다. 비동기 처리 자바스크립트에서 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것이다. 동시에 여러가지 작업을 처리할 수 있고, 기다리는 과정에서 다른 함수를 호출할 수 있다. 동기-비동기는 프로세스 수행 순서 보장에 대한 매커니즘이다. 동기(Synchronous) : 작업을 동시에 수행하거나, 동시에 끝나거나, 끝나는 동시에 시작 호출하는 함수가 호출되는 함수의 작업 완료 후 리턴을 기다리거나, 리턴 받더라도 미완료 상태라면 작업 완료 여부를 스스로 계속 확인하며 신경쓴다. image 비동기(Asynchronous) : 시작/종료가 일치하지 않으며, 끝나는 동시에 시작을 하지 않음 테스크 2가 테스크 1을 호출할 때 콜백함…

넘블 챌린지 - 신년메시지 주고받는 사이트 새해를 맞이하여 더 많은 프로젝트를 구현해보고 싶었는데, 넘블에서 바닐라 자바스크립트를 이용하여 SPA를 구현하여 배포하는 챌린지가 있다는 것을 알았다. 바닐라 자바스크립트만을 이용하여 배포까지 해본 경험이 없었기 때문에 도전해보고자 챌린지를 신청하게 되었다. 1. 챌린지 주제 SPA로 동작하는 신년 메시지를 주고 받는 서비스를 개발하는 것이 주제였다. 바닐라 자바스크립트를 사용하여 개발해야 했는데, 리액트로만 SPA를 구성해보고, 바닐라로는 해본 경험이 없었기 때문에 어떻게 구성해야할지 고민했다. 1-1. 진행 방법 & 요구사항 ES6 문법 사용 상태관리 라이브러리 사용 불가 사용 가능한 라이브러리 정적 파일 제공을 위한 express 사용 가능 axios 및 http 관련 라이브러리 사용 가능 css 전처리기 자율적 사용 가능하며, 이에 따른 필요 라이브러리 사용 가능 이미지 업로드 구현을 위한 aws-sdk 사용 가능 디자인 모바일…

[JS] 알고리즘 - 성격 유형 검사 2022 카카오 테크 인턴십에 나왔던 알고리즘 문제이다. MBTI를 체크하는 문항처럼 생각하여 구현하고자 했다. 구현 전 생각한 부분 선택지에 따라 유형 점수가 달라지기 때문에 choices로 들어온 인풋 값을 판단하여 점수를 변환해두자. ‘AN’, ‘NA’처럼 다르게 들어오는 survey값이 어떻게 들어오냐도 생각해야한다. 구현 방법 convertChoices변수를 선언하여 가공한 choice값들을 받아주도록 했다. choice값이 4보다 크면 뒷 문자열에, 작으면 앞 문자열에 값을 넣었다. 삼항연산자를 사용하여 뒷문자열 값이 앞문자열 값보다 크면 뒷문자열을 출력 그 외의 경우에는 앞문자열을 출력하도록 했다. 값이 같은 경우 사전 순으로 더 빠른 문자열이 출력되는 제한조건이 있었기 때문에 전체 코드 마무리 구현자체가 어려운 문제는 아니였지만, 값을 분리하고 찾는 과정에서 생각보다 시간을 많이 썼다. 다양한 객체를 알고리즘에 많이 적용해보며 …

[JS] 알고리즘 - 키패드 누르기 2020 카카오 인턴십에 나왔던 문제, 프로그래머스 기준 레벨 1이라는데 나 왜 눈물이..😥 구현 전 생각한 부분 2차원 배열로 구현하지 않고, 1차원 배열로 구현 방향을 잡았어서, ** *,0,# ** 은 10, 11, 12로 처리했음 3,6,9는 무조건 오른손, 1,4,7은 무조건 왼손으로 터치하며, 2,5,8,0은 두 엄지손가락에서 거리가 가까운 손가락이 터치한다. 1차 구현 결과 테스트 케이스 1만 통과가 되었다.(테케1 기준으로 코드 작성 하긴함) 구현 전 생각했던 것 처럼 1,4,7은 왼손 3,6,9는 오른손으로 푸쉬시켰으며, 2,5,8,0일때 거리의 절대값이 작은 쪽이 더 가깝다고 체크했다. 또한, 3의 배수는 바로 위/아래에 있다고 판단하였음(ex : 키패드 ‘5’와 ‘8’). 따라서 3으로 나누어 절대값을 가공했다. left, right에 저장된 값들은 다시 left, right에 재할당했다. 테스트 케이스2, 3을 해결하기 …

자바스크립트 정규표현식 코드를 짜다보면 전화번호, 이메일 등의 체크 형식에서 정규표현식을 종종 사용하는 경우가 있는 데, 한눈에 봤을 때 코드를 이해하기 어려운 경우가 종종있었다. 어떤 방식으로 정규표현식을 작성하는지 알아보기 위해 공부해보았다. 정규표현식 정규 표현식(regular expression)은 문자 검색과 교체에 사용되는 패턴이다. 자바스크립트에서는 RegExp 객체와 문자열 메서드를 조합하여 정규표현식을 사용할 수 있다. 정규 표현식은 패턴과 선택적으로 사용할 수 있는 플래그로 구성된다. 정규식 객체를 만들 때는 두 가지 문법이 사용된다. 긴 문법 긴 문법은 아래와 같이 사용한다. 짧은 문법 짧은 문법은 /를 사용한다. /는 자바스크립트에 정규 표현식을 생성하고 있다는 것을 알린다. 문자열에 따옴표를 쓰는 것과 동일한 역할 짧은 문법이든 긴 문법이든 상관없이 regexp는 내장 클래스 RegExp의 인스턴스가 된다. 단, 두 문법의 차이점은 /…/를 사용하면 문자열…

졸업가능? 프로젝트 회고록 캡스톤 디자인 프로젝트로 학우들이 기존 수기로 체크하던 졸업사정 셀프 테스트를 자동화시키는 프로젝트를 진행했다. 프로젝트 구성 총 4명(프론트2, 백2)으로 팀을 구성했으며, 나는 프론트 개발에서 화면UI 구성, 백엔드와 API 연결 등을 맡았다. 프로젝트 중 발생한 이슈 처음으로 배포까지 진행했던 프로젝트였기 때문에, 개발 중 많은 이슈들이 발생했다. 1. CORS 에러 화면을 구성한 뒤, 백엔드에서 데이터를 받아오기 위해 연결을 했는데 받아와지지 않는 에러가 발생했었다. 프론트/백 코드에서는 문제가 없었는데 이런 에러가 발생한 것이 처음에는 잘 이해가 되지 않았다. 에러를 확인해보니 CORS에러가 발생했다고 하여 이 문제가 무엇인지 찾아보았다. CORS(Cross-Origin Resource Sharing) : 교차 출처 리소스 공유 http 헤더를 사용하여 서로 다른 출처에서 리소스를 공유하는 방식을 말한다. 다른 Origin으로 요청을 보내기 …

자바스크립트 고차함수 알고리즘을 풀고, 우테코 프리코스를 하는 중에 내 코드를 보면 항상 for문만을 사용하여 문제를 해결하고 있었다. 코드 리뷰에서 다양한 고차함수를 적절히 활용하면 좋을 것 같다는 이야기를 듣고 공부하게 되었다. 고차함수(Higher-order Function)?👀 함수를 매개변수로 사용하거나 함수를 반환하는 함수 1. forEach() for문을 대체하는 고차함수 반복문을 추상화하여 구현된 메소드이며 내부에서 주어진 배열을 순회하면서 연산을 수행한다. 2. map() forEach() 같이 순회하면서, 콜백함수에서의 실행결과를 리턴한 값으로 이루어진 배열을 만들어 반환 forEach()와 map()의 차이 : 두 메서드 모두 배열을 순회하는 것은 동일 forEach() : 각 요소를 참조한 연산이 이루어짐 map() : 각 요소를 다른 값으로 맵핑하나 새로운 배열이 반환된다. forEach()는 for문을 대체하여 사용하고, map()은 연산의 결과로 새…

자바스크립트 this 우테코 코드리뷰를 하면서 다른 분들의 코드에서 this 활용을 봤다. 기존 내 코드에서는 기본 바인딩으로만 사용하여 전역변수처럼 활용하고 있었는데, 경우에 따른 다양한 this를 활용해보고자 공부하게 되었다. What is this?👀 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있다. 함수를 호출하면 인자와 this가 암묵적으로 함수 내부에 전달된다. this는 코드 어디서든 참조할 수 있다. 함수 내부에서 인자를 지역변수처럼 사용할 수 있는 것과 같이, this도 지역 변수처럼 사용할 수 있다. 종류 : 기본 바인딩, 암시적 바인딩, 명시적 바인딩, new 바인딩, 화살표함수(es6) 우선순위 : new 바인딩 > 명시적 바인딩 > 암시적 바인딩 > 기본 바인딩 1. 기본 바인딩(Default binding) 기본 바…

우아한테크코스 5기 프리코스 전체 회고록 프롤로그 _항상 velog나 티스토리에서 정보만 얻어갔었는데, 내가 이걸 시작할 줄이야.. _ 우테코를 하던 중, 참여했던 스터디에서 만난 팀원들이 velog와 github.io를 운영하는 것을 보고 멋있음을 느꼈고 마침 내가 공부한 것들을 정리하고 싶어 이번 기회에 도전해보고 싶다는 마음을 먹고 시작했다. 열심히 리뷰해주신 팀원분들께 다시 한번 감사드립니다😊 1. 미션 4주간 프리코스가 진행되면서 일주일에 1개씩 프리코스 미션이 나왔다. 자바스크립트 온보딩 처음 받은 미션이었는데, 일반 프로그래머스나 백준처럼 알고리즘을 푸는 문제였다. 생각보다 쉬운 문제도 있었고 까다로운 문제도 있었는데 해결하기에 무리가 있지는 않았던 것 같다. 물론 가독성 좋은 코드는 아니였음 자바스크립트 베이스볼 우테코를 검색했을 때, 가장 많이 봤던 문제였던 숫자 야구 게임이 2주차 과제였다. 최근에 리액트로 UI만 그리다 보니까 로직을 구성하는 것과는 담을 쌓았…