본문 바로가기

Programming104

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.
003_코어 자바스크립트 챌린지_1 시작하기 앞서 엘리스 AI 트랙이 끝난지도 벌써 보름이 넘었다. 지난 6개월을 돌아보자면 프론트엔드, 백엔드, 데이터분석, AI까지 정말 방대한 분야를 엘리스 AI 트랙을 수강하며 접했던 시간이었다. 하지만 이렇게 다양한 분야를 짧은 시간 듣다보니 깊이있는 지식을 얻어가기엔 다소 부족한 시간이 아니었나 싶다. 특히 내가 가고자 하는 방향인 프론트엔드 파트에 대해 얼마나 학습했나 돌아본다면, '어찌저찌 프로젝트에서 기여한 수준' 정도에 머물 정도만큼 학습하지 않았나 싶다. 그래서 이 챌린지를 시작하기로 했다! 프론트엔드의 가장 근간이 되는 자바스크립트부터 제대로 학습하는 것부터 시작해야 이후의 다른 기술들을 배우는데 무리 없이 진행할 수 있다는 생각이 들었고, 늘어지지 않기 위해 '챌린지' 를 붙여 책을 .. 2022. 1. 12.
05_(React 에러) favicon 업데이트 에러 에러 내용 CRA로 생성한 후 기본 파비콘을 변경하려 하는데 새로운 파비콘을 폴더에 넣어도 적용이 되지 않는다. 원인 브라우저가 캐시에 있는 이전 이미지를 유지하고 있으며 업데이트하지 않는다! 해결법 파비콘 url을 다음과 같이 변경해준다. /* 기존 링크 */ /* 변경한 링크 */ ?v=2를 붙여주면 브라우저가 강제로 파비콘을 새로고침할 수 있도록 해준다. 참고 링크 : https://stackoverflow.com/questions/51994375/favicon-in-react-will-not-update/54958814 2022. 1. 4.
019_마지막 프로젝트, 그 여정의 시작(完) 5주간의 프로젝트, 그리고 6개월간의 프로그램이 끝났다. 클리셰지만 어쩔 수 없이 쓰는 말, '시간이 참 빨리 지나갔다'. 이 말이 가장 먼저 떠오른 이유는 매일매일 바쁘고 정신없이 배우고 복습하고 적용하는 시간을 가졌기 때문이지 않을까 싶다. 일단 마지막 소감은 뒤에 따로 정리하는걸로 하고 마지막 블로그 글로부터 지금까지 달려온 기억들을 하나하나 적어보고자 한다. 5주간 진행된 프로젝트라 그런지 얼떨결에 시리즈 형식의 글이 됐는데, 한참 진행하고 있는 3기 분들, 그리고 이제 막 지원하신 4기 분들에게 이 글 포함 나머지 글들이 앞으로의 일정에 도움이 되길 바란다. 이것이 메타버스인가..? 우리 팀은 엘리스에서 제공한 대화방이 아닌 새로운 서버를 만들어 프로젝트를 진행했다. 일반, 프론트엔드, 백엔드,.. 2021. 12. 17.
반응형

티스토리툴바