본문 바로가기

Programming107

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.
자바스크립트에서 If-Else, Switch 대신 사용할 수 있는 방법, 객체 리터럴 💡 이 글은 Jack Taylor의 'Don’t Use If-Else and Switch in JavaScript, Use Object Literals' 를 번역한 내용으로 구성돼 있습니다. 번역글이다보니 약간의 오역이나 의역이 있을 수 있습니다 ! 출처 : https://betterprogramming.pub/dont-use-if-else-and-switch-in-javascript-use-object-literals-c54578566ba0 리터럴(literal)이란? CS에서 리터럴(literal)이란 소스 코드의 고정된 값을 대표하는 용어로 쓰인다. 다르게 표현하자면 '문자 그대로의 값'을 뜻한다. const num = 1; 이라는 코드를 예로 들자면 num은 상수이고, 1은 10진수 정수 리터럴이다... 2022. 3. 2.
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.
Web 3.0, 개발자로서 알아야 할 트렌드🔥 이 글은 Vitalii Shevchuk 의 '🔥What You Need to Know About the New Era of Internet Web 3.0 As a Frontend Developer' 를 번역한 내용으로 구성돼 있습니다. 출처 : https://itnext.io/what-do-you-need-to-know-about-new-era-of-internet-web-3-0-as-a-frontend-developer-55e51f2cd03f 서론 최근 Mark Zuckerberg가 Facebook의 이름을 Meta로 변경하고 메타버스를 구축하는 회사로 전환하는 것에 대한 발표를 진행했습니다. 이후 여러 빅 테크 기업들이 메타버스에 대한 계획과 비전을 밝히기 시작했습니다. 메타버스는 분명 우리의 삶은 .. 2022. 2. 9.
006_코어 자바스크립트 챌린지_3 제 2챕터: 실행 컨텍스트 (Execution Context) 01. 실행 컨텍스트란? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(Hoisting), 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행하는데, 이로 인해 다른 언어에서 발견할 수 없는 특이한 현상들이 발생한다. 실행 컨텍스트를 살펴보기에 앞서 스택(Stack)과 큐(Queue)의 개념에 대해 이해해야 한다. 스택 - 출입구가 하나인 깊은 우물같은 데이터 구조 - a,b,c,d 순으로 데이터를 넣으면 d,c,b,a 순으로 꺼낼 수밖에 없는 구조이다. - LI.. 2022. 2. 2.
002_원티드 프론트엔드 프리온보딩 2기 후기_1주차(下) 1주차가 끝났다! '저희 코스는 정말 많이 바쁠 거예요'라는 말이 현실이 됐다. 첫 프로젝트와 이번 프로젝트를 진행하고 나니 정말 1주일이 어떻게 지나갔는지 모를 정도로 빠르게 지나갔다. 그래도 정신없이 지나간 만큼 복기하면서 배운 지식과 노하우를 온전한 내 것으로 만드는 것이 중요하니까! ✨ 이번 회고도 시작해보자. 이번 강의 내용 우선 이번 강의는 크게 React에서의 좋은 코드, React 성능 향상을 위한 몇 가지 방법이라는 주제로 진행했다. 먼저 React에서의 좋은 코드에서 첫번째로는 클린 코드에 대해 진행했다. 클린 코드 방법론을 모두 작성하기엔 어려우니 간단한 예시 몇 개만 적어보도록 하겠다. 변수명은 의미있고 발음하기 쉬운 이름으로 작성하자. // 안 좋은 예시 const yyyymmds.. 2022. 1. 30.
001_원티드 프론트엔드 프리온보딩 2기 후기_1주차(上) 원티드 프리온보딩에 합격했다. 지난 주 금요일 원티드 프리온보딩 프론트엔드 코스에 합격했다는 문자를 받았다. 불과 한 달 전 6개월간의 엘리스 AI 트랙을 마치고 다들 이력서를 넣으며 기업에 지원을 하는데 왜 또 프로그램을 듣게 됐을까? 그 이유는 다음과 같다. 엘리스 AI 트랙은 프론트엔드 뿐만 아니라 백엔드, 데이터분석, AI까지 배우기 때문에 내가 희망하는 프론트엔드에 대한 학습이 부족하다고 생각했다. 그리고 그것이 현실로 나타났다. 기초 지식이 부족하다는 판단하에 집중적으로 프론트엔드 파트에 대해 학습하고 싶었다. 하지만 취업은 빠른 시일 내에 하고 싶기 때문에 짧고 굵게 진행하는 프로그램을 알아보았고 프리온보딩 코스를 알게 됐다. 이러한 이유로 이번 주 월요일부터 본격적으로 시작된 프리온보딩! .. 2022. 1. 26.
005_코어 자바스크립트 챌린지_2 04. 기본형 데이터와 참조형 데이터 불변값 변수(variable)와 상수(constant)를 구분하는 성질은 '변경 가능성'이다. 바꿀 수 있으면 변수, 바꿀 수 없으면 상수다. 불변값과 상수는 다른 개념이다. 변수와 상수를 구분 짓는 대상은 변수 영역 메모리이다. 한 번 데이터 할당이 이뤄진 변수 공간에 다른 데이터를 재할당할 수 있는지 여부가 관건이다. 반면 불변성 여부를 구분할 때의 대상은 데이터 영역 메모리이다. 기본형 데이터인 숫자, 문자열, Boolean, null, undefined, Symbol 은 모두 불변값이다. let a = 'abc'; // 변수 a의 기존 문자열 'abc'에 'def'를 추가하면 'abc'가 'abcdef'로 바뀌는 것이 아닌 a = a + 'def'; // 새로.. 2022. 1. 26.
004_Create React App 기본 구조에 대해 알아보자! 서론 최근 기업 과제나 프로젝트를 진행하며 Create React App으로 시작하는 경우가 많았다. (아니, 사실 전부 CRA로 시작했다..) 그런데 지금까지는 별 생각없이 예전에 봤던 노마드코더의 강의대로 기본 파일들을 대부분 지워버리고 남는건 App.tsx, Index.tsx 뿐인 상태로 시작했었는데, 문득 이런 생각이 들었다. '분명 기본적으로 정말 필요한 파일들만 모아 CRA를 만들었을텐데 뭔지도 모른 상태에서 너무 무지성으로 삭제한건 아닐까? ' 그래서 준비했다! 지우더라도 최소한 뭔지 알고 필요한지 아닌지를 판단할 수 있도록 이번 포스팅을 작성해보기로 했다. 리액트를 좀 더 리액트스럽게 쓰기 위한 기초를 이번에 제대로 배워보자. 설치 방법 + 기본 구조 혹시 모르니 설치 방법을 간단히 설명하.. 2022. 1. 18.
06_(Netlify 배포 에러) TypeError: Minicssextractplugin is not a constructor Netlify에 CRA로 만든 프로젝트를 배포하려하는데 다음과 같은 에러메세지가 발생했다. 해결 방법은 2가지가 있는데, 우선 원인이 되는 mini-css-extract-plugin을 다음 버전으로 설치한다. // npm npm i -D --save-exact mini-css-extract-plugin@2.4.5 //yarn yarn add -D mini-css-extract-plugin@2.4.5 그리고 package.json에 다음 문구를 추가하면 에러를 해결하고 성공적으로 배포할 수 있다. "resolutions": { "mini-css-extract-plugin": "2.4.5" } 출처 : https://stackoverflow.com/questions/70716372/minicssextract.. 2022. 1. 18.
반응형

티스토리툴바