2023년부터 로그 기록 2023년부터 로그 기록

💡 본 타입스크립트 문법 시리즈는, 패캠의 '프론트엔드 웹 개발의 모든 것 초격차 패키지 Online'에 있는 TS 강의 노트이다. 현재 수강 중인 패스트캠퍼스(fastcampus, 이하 패캠) 프론트엔드 패키지 강의가 있다. 강사님은 김영웅(Heropy) 님이다. 이 글을 쓰면서 강사님의 블로그에 '한눈에 보는 타입스크립트' 자료가 있다는 것을 알게 됬다... (바보😅) 강의를 듣는데, 강의자료가 없어서 일일이 강사님이 말씀을 따라 적으면서 강의 교안(?), 강의 노트를 작성했다. 혹시나 나처럼 패캠에서 타입스립트(TypeScript)를 수강하는 사람들에게 도움이 되면 좋겠다. 🔥 07. 인터페이스 - 기본 인터페이스는 객체 데이터의 타입을 지정할 수 있는 기능이다. 이를 활용하면 신규 객체를 생성할 ..

💡 본 타입스크립트 문법 시리즈는, 패캠의 '프론트엔드 웹 개발의 모든 것 초격차 패키지 Online'에 있는 TS 강의 노트이다. 현재 수강 중인 패스트캠퍼스(fastcampus, 이하 패캠) 프론트엔드 패키지 강의가 있다. 강사님은 김영웅(Heropy) 님이다. 이 글을 쓰면서 강사님의 블로그에 '한눈에 보는 타입스크립트' 자료가 있다는 것을 알게 됬다... (바보😅) 강의를 듣는데, 강의자료가 없어서 일일이 강사님이 말씀을 따라 적으면서 강의 교안(?), 강의 노트를 작성했다. 혹시나 나처럼 패캠에서 타입스립트(TypeScript)를 수강하는 사람들에게 도움이 되면 좋겠다. 🔥 06. 타입 가드(Guards) 가드(Guard) : 방어, 경비 혹은 지키다. 아래 예시 코드는 에러가 발생한다. doc..

💡 본 타입스크립트 문법 시리즈는, 패캠의 '프론트엔드 웹 개발의 모든 것 초격차 패키지 Online'에 있는 TS 강의 노트이다. 현재 수강 중인 패스트캠퍼스(fastcampus, 이하 패캠) 프론트엔드 패키지 강의가 있다. 강사님은 김영웅(Heropy) 님이다. 이 글을 쓰면서 강사님의 블로그에 '한눈에 보는 타입스크립트' 자료가 있다는 것을 알게 됬다... (바보😅) 강의를 듣는데, 강의자료가 없어서 일일이 강사님이 말씀을 따라 적으면서 강의 교안(?), 강의 노트를 작성했다. 혹시나 나처럼 패캠에서 타입스립트(TypeScript)를 수강하는 사람들에게 도움이 되면 좋겠다. 🔥 05. 타입 및 할당 단언 (Assertions) 타입스크립트 코드를 작성하면서 굉장히 중요한 개념이다. 어렵지 않은 내용..

💡 본 타입스크립트 문법 시리즈는, 패캠의 '프론트엔드 웹 개발의 모든 것 초격차 패키지 Online'에 있는 TS 강의 노트이다. 현재 수강 중인 패스트캠퍼스(fastcampus, 이하 패캠) 프론트엔드 패키지 강의가 있다. 강사님은 김영웅(Heropy) 님이다. 이 글을 쓰면서 강사님의 블로그에 '한눈에 보는 타입스크립트' 자료가 있다는 것을 알게 됬다... (바보😅) 강의를 듣는데, 강의자료가 없어서 일일이 강사님이 말씀을 따라 적으면서 강의 교안(?), 강의 노트를 작성했다. 혹시나 나처럼 패캠에서 타입스립트(TypeScript)를 수강하는 사람들에게 도움이 되면 좋겠다. 🔥 04. 타입 추론(Inference) 타입스크립트는 타입 추론이라는 기능을 제공하기 때문에 모든 부분에 매번 타입을 직접 ..

💡 본 타입스크립트 문법 시리즈는, 패캠의 '프론트엔드 웹 개발의 모든 것 초격차 패키지 Online'에 있는 TS 강의 노트이다. 현재 수강 중인 패스트캠퍼스(fastcampus, 이하 패캠) 프론트엔드 패키지 강의가 있다. 강사님은 김영웅(Heropy) 님이다. 이 글을 쓰면서 강사님의 블로그에 '한눈에 보는 타입스크립트' 자료가 있다는 것을 알게 됬다... (바보😅) 강의를 듣는데, 강의자료가 없어서 일일이 강사님이 말씀을 따라 적으면서 강의 교안(?), 강의 노트를 작성했다. 혹시나 나처럼 패캠에서 타입스립트(TypeScript)를 수강하는 사람들에게 도움이 되면 좋겠다. 🔥 03. 타입 종류 알아보기 - Any부터 Intersection까지 타입 종류 - part 2 타입스크립트에 사용할 수 있..

💡 본 타입스크립트 문법 시리즈는, 패캠의 '프론트엔드 웹 개발의 모든 것 초격차 패키지 Online'에 있는 TS 강의 노트이다. 현재 수강 중인 패스트캠퍼스(fastcampus, 이하 패캠) 프론트엔드 패키지 강의가 있다. 강사님은 김영웅(Heropy) 님이다. 이 글을 쓰면서 강사님의 블로그에 '한눈에 보는 타입스크립트' 자료가 있다는 것을 알게 됬다... (바보😅) 강의를 듣는데, 강의자료가 없어서 일일이 강사님이 말씀을 따라 적으면서 강의 교안(?), 강의 노트를 작성했다. 혹시나 나처럼 패캠에서 타입스립트(TypeScript)를 수강하는 사람들에게 도움이 되면 좋겠다. 🔥 02. 타입 종류 알아보기 - 문자부터 함수까지 타입의 종류 - part 1 null과 undefined는 우리가 사용할 ..

💡 본 타입스크립트 문법 시리즈는, 패캠의 '프론트엔드 웹 개발의 모든 것 초격차 패키지 Online'에 있는 TS 강의 노트이다. 현재 수강 중인 패스트캠퍼스(fastcampus, 이하 패캠) 프론트엔드 패키지 강의가 있다. 강사님은 김영웅(Heropy) 님이다. 이 글을 쓰면서 강사님의 블로그에 '한눈에 보는 타입스크립트' 자료가 있다는 것을 알게 됬다... (바보😅) 강의를 듣는데, 강의자료가 없어서 일일이 강사님이 말씀을 따라 적으면서 강의 교안(?), 강의 노트를 작성했다. 혹시나 나처럼 패캠에서 타입스립트(TypeScript)를 수강하는 사람들에게 도움이 되면 좋겠다. 🔥 01. 개요 및 빠른 개발 환경 구성 타입스크립트? 2012년 마이크로소프트에서 발표 JavaScript 기반의 정적 타입..

Problem 로컬 PC에서 작업을 하다가 GitHub에 폴더를 만들고, 작업했던 프로젝트 폴더를 push 했다. 그런데 폴더 내부에 화살표 표시가 있는 폴더가 만들어지고 내부 파일들이 없었다. 터미널 상에서는 아무런 문제가 없었던 것 같은데 무슨 일인가...! 원인 원격 저장소와 연결된 폴더 경로 내부에, 또 다른 .git 가 존재했던 것 즉, 새로 추가한 프로젝트 폴더 내부에도 .git 폴더가 있었기 때문에 문제가 발생한 것이다. Solution 문제가 되는 .git 폴더와 스테이지된 파일을 제거한 뒤 다시 git push 를 수행한다. 1. 문제가 되는 .git 파일 제거 원격 저장소와 연결된 폴더에서, 화살표 표시 폴더에 해당하는 경로에 들어가 .git 파일을 제거한다. 터미널에서 작업을 한다면 ..

JavaScript 그리고 React.js 자주 쓰는 단락회로 평가가 헷갈려서 정리한다. 단락회로 또는 단축 평가는 피연산자 중에 뒤에 위치한 피연산자는 볼 필요없이 논리 연산을 끝내버리고 결과값을 반환한다. 이 문법은 AND(&&)와 OR(||) 논리 연산의 응용이며, 나는 주로 함수형 컴포넌트에서 조건부 렌더링을 수행하는데 사용한다. AND 단락회로 평가 (&&) AND 논리 연산의 결과는 피연산자 모두 참(truthy)이어야 참의 결과값을 반환하고, 하나라도 거짓(falsy)라면 거짓의 결과값을 반환한다. AND 단락회로 평가는 이 성질을 응용한다. 결과적으로 경우의 수는 아래와 같이 나뉜다. (1) falsy && truthy 경우, 뒤에 위치한 피연산자는 볼 필요없이 falsy 값을 반환한다. ..

패스트캠퍼스에서 타입스크립트 강의를 듣고 있는데 Error가 발생했다. 처음 parcel 이란 번들러를 사용하는데, 에러가 발생하니 난감했다. 경로에 한글이 있어서 Error가 발생했나 싶어서 경로에 한글을 없애보고, VSCode를 재실행해도 의미없었다. Error 문구는 No such file or directory 라는데 전부다 존재한다. 정말 '뭐지?' 싶었다. Problem parcel 번들러는 package.json 내에서 scripts에서 아래와 같이 정의해서 사용하고 있다. "scripts": { "dev": "parcel ./index.html", "build": "parcel build ./index.html" }, 그리고 Error 내용은 아래와 같다. > ts-test@1.0.0 de..

네이버 출신의 개발자의 프론트엔드 로드맵이라는 제목이 눈에 띄어 보게 되어 정리한다. 무작정 발을 때어 앞으로 가기 보다는, 길을 떠나기 전에 행선지를 알고 가는 것이 효율적이다. 현재 나는 프론트엔드 로드맵의 시작점은 아니지만, 중턱에서 이정표를 확인하는 중이다. 1. JS와 CSS, HTML의 기초 - (웹) Poiema; 웹 프로그래밍 튜토리얼. ECMAScript6까지 학습하기 - (웹) JAVASCRIPT.INFO; 모던 JavaScript 튜토리얼. 포이마와 중복된 내용는 넘어가며 JavaScript 심화 학습 - (책) 실시간 모니터링시스템을 만들면서 정복하는 MEVN; MongoDB, Express, Vue.js, Node.js, D3.js 학습 2. React/Vue/TypeScript ..

Logic First, React Later 1. React 다운 코드 다시 생각하기 오늘은 React 스러운 코드를 버려라는 내용이다. (?) 코드의 데이터, 계산, 액션으로 분리해서 생각했다. 코드에 액션만 존재한다면 어떨까? React로 JSX 코드를 작성하면 구체적인 렌더링을 고려하지 않아도 알아서 해준다. React란 무엇인지 다시 생각해보고, 비즈니스 로직이 잘 드러나도록 하는 방법에 대해 생각해보자. 지금까지 주인공은 React 였다. 이제는 비즈니스 로직이 주인공이 될 때이다. 1-1. React 다운 코드 - React 스럽지 않다는 이유로 어떻나 코드 스타일을 근거 없이 거부하는 경향이 존재한다. - 의도적으로 작동하지 않을 것인지 구체적으로 아는 것과 무지성 '으 ~ 싫어' 하는 것과..

인트로 - 비즈니스 로직은 무언가 엮여 있어서 다른 곳으로 이동해서 사용하기 어려운 것 - 아무리 쪼개서 Props만 많이지고 추상화가 되는 것 같지 않다? - 제어권 역전을 사용하면 제법 멋드러지게 추상화를 할 수 있다. - 클린 아키텍처를 읽기 위한 2번의 시도 중에 SOLID 개념을 알아야 했다. SOLID한 컴포넌트 만들기 1. 내 손에 익은 공구상자 - 공구가 들어있는 인생 툴벨트를 차고 다니는 이유는 필요할 때 바로 쓸 수 있도록 하기 위함이다. - 내가 만드는 컴포넌트을 만드는 시간을 줄일 수 있을까? 뭘 쓸지 검색할 시간? 쉽게 가져다가 쓸 수 있을까? - 리드 타임을 줄일 수 있을까? 내가 컴포넌트를 만들 때 프로페셔널하게 만들 수 있을까? - 내가 쓰는 도구들로 인해 그런 일이 발생할 ..

비즈니스 로직 완전 정복 with React - 강의 : 리맴버 오종택 강사님 - 역량 향상 세션 : 2주 커리큘럼 - 1차 : 12.5(화) 20시, 우리의 컴포넌트가 복잡해지는 원인 - 2차 : 12.9(토) 10시, 비즈니스 로직을 제압하는 개발자가 퇴근을 한다 - 3차 : 12.12(화) 20시, SOLID한 컴포넌트 만들기 - 4차: 12.16(토) 10시, Logic First, React Later 코스 시작 전 당부의 말씀 - 2주 동안 커리큘럼에 제시된 모든 것들을 '마스터' 한다고 생각하지 말자 - 키워드와 힌트를 얻어 간다. - 책이나 강의 보다 내가 쓴 것만 기억난다. (계속 부딪치고 노력하자) - 수업에서 들은 개념들을 면접에서 적용하기 힘들 수 있다. - 강의 듣기가 아니라 직접..

일반 사용자를 대상으로 서비스를 하는 IT 기업에 지원한다면, 아마도 당신은 GitHub 링크를 이력서에 넣을 것이다. 나 또한 그렇습니다. 저는 프론트엔드 개발자로 IT 기업에 지원할 예정이다. 그런데 GitHub 프로필로 정리하지 않고, 지원했을 때 성의가 없거나 관리가 안되어 있다는 인상을 받을 수 있다. 그래서 제 정리되어 있지 않은 GitHub 프로필을 공개하고 수정 결과를 공유한다. 저는 저의 프로필을 과하게 꾸밀 생각은 없다. 열심히 꾸미고 가꿀 시간도 부족하지만, 프로필을 꾸미는 방법을 공유한 블로그들에서 심심치 않게 보이는 문구가 튜닝의 끝은 순정이라고 한다 🤣 나의 GitHub 레포지토리에 들어가서 볼 수도 있지만, README.md 파일의 코드를 붙여넣는다. 바쁜 사람은 아래 파일에서..