본문 바로가기

Programming/4. JavaScript & React16

016_pass by value, pass by reference ?? 최근 진행한 한 코딩테스트에서 생각한 대로 구현되지 않았던 문제가 있었다. 문제나 정답을 동일하게 작성할 수 없으니 비슷한 예를 다음과 같이 적어보겠다. function solution(N, M) { const array = new Array(N).fill([]); const words = M.split(" ").map((e) => e.split("")); for (let i = 0; i < words.length; i++) { array[Number(words[i][0])].push(words[i][1]); } return array; } console.log(solution(2, "01 13 04")); // 기대값: [['1', '4'], ['3']] // 출력 : [['1', '3', '4'.. 2022. 4. 23.
015_자바스크립트에서의 클린 코드 (변수, 함수 편) ✏️ 본 글은 clean-code-javascript 레포지토리를 참고해 작성했습니다. 출처 : https://github.com/qkraudghgh/clean-code-javascript-ko 1. 변수 의미있고 발음하기 쉬운 변수 이름을 사용할 것 // 안 좋은 예 const yyyymmdstr = moment().format('YYYY/MM/DD'); // 좋은 예 const currentDate = moment().format('YYYY/MM/DD'); 동일한 유형의 변수에 동일한 어휘를 사용할 것 // 안 좋은 예 getUserInfo(); getClientData(); getCustomerRecord(); // 좋은 예 getUser(); 검색가능한 이름을 사용할 것 // 안 좋은 예 // 대체 8.. 2022. 4. 4.
014_Redux, Context API 없이 전역 관리하기 🔥 당연하다 생각했지만 당연하지 않은 것 - 면접 때 다음과 같은 질문을 받았다. - 'Redux나 Context API 없이 전역 관리를 하려면 어떻게 해야할까요?' - 그동안 위 두 방식을 너무나 당연하게 사용했던지라 면접관님의 질문에 당황하긴 했지만, 당시 내 답변은 '전역으로 관리할 state를 Redux의 store 형식으로 따로 만들어 사용하면 되지 않을까요?' 였다. - 대략 어떻게 해야할 지에 대한 생각은 했지만 이번 기회에 직접 작성해보며 내가 생각한 답변이 실제로 작동하는지 확인해보기로 했다. 원리 - Redux의 Store, Action, Dispatch의 개념을 활용해 훅을 제작한다. - Store는 Dispatch가 작동할 때마다 값이 바뀐다. - Dispatch는 작동할 때마다 St.. 2022. 4. 1.
013_자바스크립트의 비동기 처리 종류 + setTimeout() '자바스크립트의 비동기 처리 방식엔 어떤게 있을까요?' - 최근 진행했던 기술면접에서 제대로 답변하지 못했던 질문이었다. - 분명 공부했었고 다 안다고 생각했는데, 막상 질문이 들어왔을 때 제대로 답변하지 못했던 그 때의 나를 반성하며 제대로 비동기 처리 방식에 대해 정리해보고자 한다. 시작하기 전 다시 정리하는 동기 & 비동기 1. 동기 동작 : 현재 실행 중인 코드가 끝나야 다음 코드를 실행 = 현재 실행중인 task가 종료할 때까지, 다음 task가 대기하는 방식 장점 : 동기 처리는 코드를 순서대로 하나씩 실행하기 때문에, 실행 순서가 보장된다. 단점 : 현재 실행중인 task가 종료될 때까지 다음 task가 실행이 안 된다는게 문제 = 블로킹(blocking) 2. 비동기 동작 : 현재 실행 중.. 2022. 3. 31.
012_정적 타입 언어와 동적 타입 언어, 그리고 TypeScript 타입(type)이란? - 자료형을 뜻한다. - boolean, string, number, Symbol, Object 등 동적 타입 언어란? - 대표적인 언어로는 JavaScript, Python 등이 있다. - 동적 타입 언어의 자료형은 컴파일 시 자료형을 정하는 것이 아니고, 실행할 때 결정한다. 장점 1. 프로그래머들이 타입을 고민할 필요 없이 빠르게 코드를 작성할 수 있다. 2. 런타임까지 타입에 대한 결정을 끌고 갈 수 있기 때문에 유연성이 높다. ※ 런타임 프로그래밍 언어가 구동되는 환경 단점 1. 사전에 버그를 미리 간파하기 어렵다. 2. 실행 도중에 변수에 예상치 못한 타입이 들어와 TypeError를 발생시킬 수 있다. 정적 타입 언어란? - 대표적인 언어로는 C, C#, C++, Jav.. 2022. 3. 25.
011_'절대값이 2^53보다 크거나 같은 숫자 리터럴은 너무 커서 정수로 정확하게 표시할 수 없습니다.' console.log("333333333333333333" - "3"); // "333333333333333300" // ?????????????????????????? ??? - 최근 블로그 스터디를 하면서 한 분이 이런 질문을 하셨다. - '왜 계산이 이렇게 되는 걸까요?' - 그래서 직접 이리저리 텍스트를 바꿔가며 테스트를 해봤는데 여전히 정확한 계산이 안되는 것이었다. - 그러다 숫자로 값을 변경하면서 다음과 같은 사실을 알게 됐다. Number라고 생각했지만 Number가 아니다? - 위 에러 메세지에서 '절대값이 2^53보다 크거나 같은 숫자 리터럴'에 주목할 필요가 있다. - JavaScript의 Number는 부동 소수점으로 표시된다. 이는 정밀도가 제한적이라는 것을 의미한다. - 그래서 .. 2022. 3. 15.
010_for, forEach, map(재정리 ver.) 👀 어..? - 최근 현직자와의 모의 면접에 참관한 적이 있는데, 여러 질문 중 다음과 같은 질문을 하신 적이 있었다. "forEach와 map의 차이에 대해 설명해보시겠어요?" - 이 질문을 듣고 처음엔 당연히 안다고 생각하고 면접자분께서 답하기 전에 혼자서 답을 생각해봤는데, '어..?' 라는 말밖에 나오지 못했다. - 이에 이번 포스트를 통해 다시 한 번 정리하고 확실하게 개념을 다져보고자 한다. - 추가 : 뭔가 글을 썼던 것 같아서 찾아보니 자바스크립트 파트에 가장 처음 쓴 글이 forEach와 map의 차이였... 반성하는 마음으로 이번에는 절대 잊지 않겠다는 각오와 함께 써보도록 하겠다 😢 Chapter 1. for() - for()은 초기값부터 시작해 증가 또는 감소하면서 조건에 부합하면 계속.. 2022. 3. 14.
009_자바스크립트, 싱글 쓰레드, 비동기, 논블로킹, 이벤트 루프 자바스크립트는 싱글 쓰레드 언어인데 비동기 처리가 가능하다? 글을 시작하기 전 알아둬야 할 지식 1. 프로그램 (Program) - 어떤 작업을 위해 실행할 수 있는 파일. - 정적인 개념 (아직 동작하지 않고 있기 때문) 2. 프로세스 (Process) - 프로그램이 메모리에 올라와 cpu(자원)를 할당받고 프로그램이 실행되고 있는 상태. - 여기서 자원은 cpu 시간, 운영되기 위해 필요한 주소 공간, Code, Data, Stack, Heap 구조로 되어 있는 독립된 메모리 영역을 말한다. - 기본적으로 프로세스당 최소 1개의 쓰레드(메인 쓰레드)를 가진다. - 동적인 개념 (프로그램이 동작하고 있기 때문) 3. 쓰레드 (Thread) - 프로세스 내에서 실행되는 흐름의 단위 - 쓰레드가 1개면 싱.. 2022. 3. 14.
008_스코프(Scope) 🔭 🔭 스코프란? 단어 자체의 사전적 의미로는 '범위' 라는 뜻을 가진다. CS, 그리고 JavaScript에서도 '범위' 라는 의미를 갖는다. 좀 더 구체적인 뜻은 '참조 대상 식별자( identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분해 식별할 수 있는 유일한 이름 )를 찾아내기 위한 규칙' 을 뜻한다. // 예시 코드 const x = 'global'; function foo () { const x = 'function scope'; console.log(x); } foo(); // ? console.log(x); // ? 위 예제에서 보면 변수 x가 중복 선언됐는데, 자바스크립트는 스코프를 통해 전역에 선언된 변수 x와 함수 foo 내부의 변수 x를 구분할 수 있다. 스코프.. 2022. 2. 23.
007_TDD, 그리고 Storybook TDD? 개발자라면 한번쯤 TDD라는 단어에 대해 들어봤을 것이다. TDD란 테스트 주도 개발(Test Driven Development)의 약자를 뜻하며 기존의 개발 방식과는 조금 다른데, 그 방식의 차이는 다음과 같다. 기존에는 설계 이후 개발 및 테스트케이스를 작성하는 방식이었다면, TDD는 설계 이후 바로 테스트 코드를 작성하고 테스트를 거쳐 통과하면 그대로 개발에 진행하는 방식을 거친다. 그래서 혹자는 'Test First Development' 라고도 부르는데, 이 과정을 쉽게 비유하자면 작가가 책을 쓰는 과정과 유사하다고 볼 수 있다. 1. 목차를 처음 구성한다. 2. 목차에 맞는 내용을 구상하고 초안을 작성한다. 3. 초안을 보고 수정할 내용이 있으면 계속 수정한다. 4. 수정을 마치면 본.. 2022. 2. 14.
006_코어 자바스크립트 챌린지_3 제 2챕터: 실행 컨텍스트 (Execution Context) 01. 실행 컨텍스트란? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(Hoisting), 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행하는데, 이로 인해 다른 언어에서 발견할 수 없는 특이한 현상들이 발생한다. 실행 컨텍스트를 살펴보기에 앞서 스택(Stack)과 큐(Queue)의 개념에 대해 이해해야 한다. 스택 - 출입구가 하나인 깊은 우물같은 데이터 구조 - a,b,c,d 순으로 데이터를 넣으면 d,c,b,a 순으로 꺼낼 수밖에 없는 구조이다. - LI.. 2022. 2. 2.
005_코어 자바스크립트 챌린지_2 04. 기본형 데이터와 참조형 데이터 불변값 변수(variable)와 상수(constant)를 구분하는 성질은 '변경 가능성'이다. 바꿀 수 있으면 변수, 바꿀 수 없으면 상수다. 불변값과 상수는 다른 개념이다. 변수와 상수를 구분 짓는 대상은 변수 영역 메모리이다. 한 번 데이터 할당이 이뤄진 변수 공간에 다른 데이터를 재할당할 수 있는지 여부가 관건이다. 반면 불변성 여부를 구분할 때의 대상은 데이터 영역 메모리이다. 기본형 데이터인 숫자, 문자열, Boolean, null, undefined, Symbol 은 모두 불변값이다. let a = 'abc'; // 변수 a의 기존 문자열 'abc'에 'def'를 추가하면 'abc'가 'abcdef'로 바뀌는 것이 아닌 a = a + 'def'; // 새로.. 2022. 1. 26.
반응형

티스토리툴바