일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 프론트엔드
- 타입스크립트
- react localStorage
- firebase
- localstorage
- Frontend
- Redux
- 원티드
- 브라우저
- 컴포넌트
- 프리온보딩
- 프로그래머스
- es6
- state
- 자바스크립트
- 알고리즘
- Component
- TypeScript
- JavaScript
- axios
- array
- CORS
- 비트 연산자
- JS
- 리액트
- v9
- Reducer
- til
- react
- 파이어베이스
- Today
- Total
목록JavaScript (27)
도리쓰에러쓰
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/wwTsx/btrJA4EzyNp/mH8qj4pH8Tg866KVLvGq90/img.png)
자바스크립트의 Promise를 알아보기 전에 동기와 비동기의 차이에 대해 알아보자. 1. 동기(Synchronous)와 비동기(Asynchronous) 1️⃣ 동기(Synchronous) - 1번부터 4번까지의 명령이 있을 때 순차적으로 명령이 진행 - 앞의 명령이 끝날 때까지 뒤의 명령은 먼저 실행되지 않는다. 2️⃣ 비동기(Asynchronous) - 명령의 순서와 상관없이 동시에 명령 실행 2. Promise 자바스크립트는 비동기 처리를 위해 콜백 함수를 사용한다. 하지만 콜백 중첩, 즉 콜벡 헬로 인해 코드의 가독성이 떨어지고, 비동기 처리 중 발생한 에러의 처리가 곤란한 등의 문제가 발생할 수 있다. async(1, () => { async(2, () => { async(3, () => { as..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cxnIr3/btrJn6Cunmt/tTWmh8NkBsdmnNOGQbVDU0/img.png)
1. 실행 컨텍스트(Execution Context)란? 자바스크립트 엔진은 코드를 실행하기 위해 실행에 필요한 여러가지 정보(전역변수, 매개변수, 유효범위, this 등)들을 알고 있어야 한다. 어떤 실행 컨텍스트가 활성화될 때, 자바스크립트 엔진은 해당 컨텍스트의 코드를 실행하는데 필요한 환경 정보들을 수집해서 실행 컨텍스트에 저장한다. 다시 말해, 코드가 실행되기 위해 필요한 정보들을 가진 범위를 추상화하기 위해 객체 형태로 나타낸 것이다. 자바스크립트에서 실행 컨텍스트(Execution Context)를 만들 수 있는 방법은 총 4가지이다. 1️⃣ 전역 코드: 전역 영역에 존재하는 코드 2️⃣ Eval 코드: eval() 함수로 실행되는 코드 3️⃣ 함수 코드: 함수 내에 존재하는 코드 4️⃣ (..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cm7TWp/btrI3yGHTWz/Pk0uFZbYrzC449L121XK21/img.png)
1. 얕은 복사(Shallow Copy) 얕은 복사(Shallow Copy)는 참조값의 복사를 나타낸다. const obj = { a: 1 }; const copyObj = obj; copyObj.a = 2; console.log(obj.a); // 2 console.log(obj === copyObj); // true obj라는 객체를 copyObj라는 객체에 복사하여 copyObj.a값을 변경하였더니 기존의 obj.a값도 같이 변경되었다. 마찬가지로 두 객체를 비교해봐도 true가 나온다. 이렇게 자바스크립트의 참조 타입은 얕은 복사(Shallow Copy)가 된다고 볼 수 있으며, 이는 데이터가 그대로 생성되는 것이 아닌 해당 데이터의 참조 값을 전달하여 한 데이터를 공유하는 것이다. 2. 깊은 복..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bz7ykR/btrI2v9KOOc/fR2KqqXCHLjVkXWK0eDtp1/img.png)
자바스크립트에는 this라는 키워드가 있다. this는 문맥에 따라서 다양한 값을 가지는데 this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서 그 역할이 구별된다. this의 값들은 크게 4가지로 나눌 수 있는데 지금부터 알아보겠다. 1. 일반 함수 실행 방식 (Regular Function Call) 일반 함수 실행 방식(Regular Function Call)이란 아래 코드처럼 함수를 선언한 후, 실행할 때 흔히 사용하는 방식을 말한다. 일반 함수 실행 방식(Regular Function Call)으로 함수를 실행했을 때 this의 값은 Global Object 즉, 브라우저 상에서는 window 객체를 가리킨다. const example = () => { console.log(this); }..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/D9EGw/btrzvA2e0gQ/8xKmBWjPZb4GnJvH5AzYmK/img.jpg)
📌 문제 사이트 코딩테스트 연습 - [3차] 파일명 정렬 파일명 정렬 세 차례의 코딩 테스트와 두 차례의 면접이라는 기나긴 블라인드 공채를 무사히 통과해 카카오에 입사한 무지는 파일 저장소 서버 관리를 맡게 되었다. 저장소 서버에는 프로그램 programmers.co.kr 📌 문제 설명 세 차례의 코딩 테스트와 두 차례의 면접이라는 기나긴 블라인드 공채를 무사히 통과해 카카오에 입사한 무지는 파일 저장소 서버 관리를 맡게 되었다. 저장소 서버에는 프로그램의 과거 버전을 모두 담고 있어, 이름 순으로 정렬된 파일 목록은 보기가 불편했다. 파일을 이름 순으로 정렬하면 나중에 만들어진 ver-10.zip이 ver-9.zip보다 먼저 표시되기 때문이다. 버전 번호 외에도 숫자가 포함된 파일 목록은 여러 면에서 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/sy5i2/btryRRinvwI/j1WcuLB6IFeBa8ILsxwuJK/img.jpg)
📌 문제 사이트 코딩테스트 연습 - 신규 아이디 추천 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 programmers.co.kr 📌 문제 설명 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력했을 때, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해주는 프로그램을 개발하는 것입니다. 다음은 카카오 아이디의 규칙입니다. 아이디의 길이는 3자 이상 15자 이하여야 합..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/2Z3pR/btryNkLVndp/eNut6JkL5oRYS0PrIHuGI0/img.jpg)
프로그래머스 코딩테스트 Level2 풀이 모음입니다. Ctrl + F 를 이용해 문제 풀이를 찾아주세요. 🔽 알고리즘 문제 (프로그래머스 사이트) 코딩테스트 연습 기초부터 차근차근, 직접 코드를 작성해 보세요. programmers.co.kr 💡 최댓값과 최솟값 function solution(s) { const nums = s.split(' ').map(v => parseInt(v)); return `${Math.min.apply(null, nums)} ${Math.max.apply(null, nums)}`; } 💡 JadenCase 문자열 만들기 function solution(s) { return s.split(' ').map(v => v.charAt(0).toUpperCase() + v.slice..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/drid50/btryNkLUazW/z83fJSaKkYV05ozTdIYXw1/img.png)
코딩테스트를 진행하면서 가끔 헷갈리는 메서드가 존재하는데 자세하진 않지만 확인용으로 간단하게 작성해보았다. 'dori'[1];// 'o' 'dori'.includes('or');// true 'dori'.indexOf('r');// 2 'dori'.startsWith('i');// false 'dori'.endsWith('i');// true 'dori'.slice(0,3);// 'dor' 'dori'.slice(2);// 'ri' 'dori'.toUpperCase();// 'DORI' 'dORi'.toLowerCase();// 'dori' 'dori'.replace('or', 'hh');// 'dhhi' 'dori'.repeat(3);// 'doridoridori' 'do ri'.split('');//..