Will's Log

안녕하세요, 윌입니다. 오늘은 타입 가드에 대한 설명과 사용 이유에 대해 파헤쳐 보겠습니다. 타입 가드에 대해 이해하기 위해선 먼저 Interface, 유니온 타입( | 연산자) 등에 대한 선행 학습이 필요합니다. 아래와 같은 2개의 interface가 있습니다. Developer와 Person은 name을 가지지만 각 skill, age를 가진다는 점에서 다릅니다.interface Developer { name: string; skill: string;}interface Person { name: string; age: number;}  tony라는 객체를 만들어보겠습니다. tony는 age, skill을 모두 가지는 객체입니다. 그러나 tony.skill 또는 tony.age로 접근 시 타입에..

안녕하세요, 윌입니다. 이번엔 비교 연산자에 대한 정리입니다. 자바스크립트에서 비교 연산자는 두 값의 관계를 비교하여 결과를 반환하는 연산자입니다. 비교 연산자는 주로 조건문이나 반복문에서 많이 사용됩니다. 자바스크립트에는 여러 가지 비교 연산자가 있으며, 각각의 의미와 용법은 다음과 같습니다:  1. 동등 연산자 (==)두 값이 같은지 비교하며, 필요에 따라 형 변환을 수행합니다. console.log(5 == '5'); // true (숫자와 문자열을 비교하며 형 변환이 발생)console.log(0 == false); // true (숫자 0과 불리언 값을 비교하며 형 변환이 발생)  2. 일치 연산자 (===)두 값이 같은지 비교하며, 형 변환을 수행하지 않습니다. 값과 자료형이 모두 같아야 합니..

안녕하세요, 윌입니다. undefined, null, NaN에 대해 정리해봅니다. 자바스크립트에서 undefined, null, NaN는 각각 고유한 의미와 용도를 가진 특수한 값입니다. 이 값들은 각각의 상황에서 다르게 동작하며, 그 차이점을 이해하는 것이 중요합니다. 1. undefinedundefined는 선언되었지만 값이 할당되지 않은 변수에 자동으로 할당되는 값입니다. 또한, 함수가 명시적으로 값을 반환하지 않을 때도 undefined가 반환됩니다. 특징선언은 되었지만 초기화되지 않은 변수의 기본 값:let a;console.log(a); // undefined객체의 존재하지 않는 프로퍼티에 접근할 때:let obj = {};console.log(obj.property); // undefined..

안녕하세요, 윌입니다. 이번엔 템플릿 리터럴에 대한 정리를 해보려고 합니다. 템플릿 리터럴(Template Literal)은 ES6(ECMAScript 2015)에서 도입된 문자열 리터럴의 한 형태로, 백틱(backtick)(```)으로 감싸여 있으며, 보간(interpolation)과 여러 줄 문자열을 지원하는 것이 특징입니다. 템플릿 리터럴을 사용하면 가독성이 높고 유연한 문자열 처리가 가능합니다. *참고 리터럴이란? https://jsdnl123.tistory.com/31#google_vignette 리터럴(Literal)과 변수(Variable)의 차이는 무엇인가?안녕하세요, 윌입니다. 개발 강의를 듣거나 관련 서적을 접하다보면 꼭 "리터럴"이라는 단어를 볼 수 있습니다. 이 단어는 꼭 "변수"와..

안녕하세요, 윌입니다. 개발 강의를 듣거나 관련 서적을 접하다보면 꼭 "리터럴"이라는 단어를 볼 수 있습니다. 이 단어는 꼭 "변수"와 비교하여 사용이 되는데요,  리터럴과 변수는 모두 프로그래밍에서 값을 다루는 중요한 요소이지만, 둘 사이에는 분명한 차이가 있습니다. 아래에서 리터럴과 변수의 정의, 역할, 차이점을 설명하겠습니다.  리터럴(Literal) 정의: 리터럴은 소스 코드에서 직접 값을 나타내는 표현식입니다. 리터럴 자체가 값을 의미하며, 프로그램 실행 시 그 값이 변하지 않습니다.42 // 숫자 리터럴"Hello" // 문자열 리터럴true // 불리언 리터럴[1, 2, 3] // 배열 리터럴{ name: "Alice", age: 30 } // 객체 리터럴 변수 (V..

안녕하세요, Will입니다. 오늘은 React의 컴포넌트에 대해 파헤치는 시간입니다. 컴포넌트가 무엇인지, 왜 중요한 지에 대해 이론적으로 접근해보고 그걸 가능하게 해주는 리액트의 기능은 무엇인지에 대해 알아보겠습니다. 다음 포스팅에선 실제 컴포넌트를 사용하는 방법에 대해 설명해보겠습니다. 컴포넌트란? 왜 리액트는 컴포넌트라는 핵심 개념 하나로 설명이 될까요? 그건 리액트로 개발하는 모든 것이 컴포넌트이기 때문이에요. 모든 것이 컴포넌트다 아래 TodoList 이미지를 봐주세요. 위 예제는 제가 React로 만들어본 TodoList 예제입니다. 포스트 잇이 붙어있는 학교 게시판을 모티브로 만들었어요. 맨 위에 제목이 있고, 아래엔 포스트 잇이 다닥다닥 붙어있는 모습이에요. 혹시 이미지에 표시한 빨간 박스..

Create-React-App 사용 방법 및 폴더 구조 정리 오늘은 Create-React-App 사용방법 및 생성된 React 앱 내 파일들은 어떤게 있는지, 역할은 무엇인지 한번 파헤쳐 보고자 한다. 평소 React 개발 시 Create React App을 통해 React 앱을 템플릿을 만들어 개발을 시작했다. 다들 마찬가지겠지만 아래 명령어를 이용하면 된다. npx create-react-app my-app cd my-app npm start 위 명령어로 만들어진 my-app 폴더에 들어가보면 아래와 같은 폴더와 파일이 있다. 나는 이 중에 App.js, index.js 파일을 주로 개발했었고 그 외 다수 파일들은 삭제하곤 사용했다. 그러다 문득 적어도 '기본 파일들은 알고 사용하는게 맞지 않을까?..

안녕하세요, Will 입니다. 오늘은 프로그래머스 문제인 ''공원 산책" 문제 풀이를 가져왔습니다. Map과 이동에 관련된 문제를 풀 때 접근하는 방법을 정리하고자 이 글을 작성합니다. 문제 지나다니는 길을 'O', 장애물을 'X'로 나타낸 직사각형 격자 모양의 공원에서 로봇 강아지가 산책을 하려합니다. 산책은 로봇 강아지에 미리 입력된 명령에 따라 진행하며, 명령은 다음과 같은 형식으로 주어집니다. ["방향 거리", "방향 거리" … ] 예를 들어 "E 5"는 로봇 강아지가 현재 위치에서 동쪽으로 5칸 이동했다는 의미입니다. 로봇 강아지는 명령을 수행하기 전에 다음 두 가지를 먼저 확인합니다. 주어진 방향으로 이동할 때 공원을 벗어나는지 확인합니다. 주어진 방향으로 이동 중 장애물을 만나는지 확인합니다..

안녕하세요, Will 입니다. 오늘은 프로그래머스 연습문제 중 '달리기 경주' 문제 풀이를 가지고 왔습니다. 난도가 높은 문제로 보이지 않았는데 막상 풀어보니 시간초과가 발생하여 애를 좀 먹었습니다. 시간복잡도와 Big-O 표기법과도 연관이 있는 문제이며, 개념을 정리해두기 위해 블로그에 남기게 되었습니다. 결론부터 말씀드리면 검색 시에 Dictionary를 활용하면 for문, list의 index() 함수를 이용할 때보다 시간복잡도를 낮출 수 있으며, 검색 시간을 대폭 감소 시킬 수 있습니다. 문제 얀에서는 매년 달리기 경주가 열립니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 때 추월한 선수의 이름을 부릅니다. 예를 들어 1등부터 3등까지 "mumu", "soe", "poe" 선수들이 순서대..

안녕하세요, Will 입니다. 오늘은 JSX가 무엇인지, 어떻게 사용하는지에 대해 작성해 보도록 하겠습니다. JSX란? JSX는 Javascript의 확장 문법으로 Javascript XML의 줄임말이에요. React 팀에서 직접 고안한 문법이구요, React 개발을 위해 Javascript와 HTML을 섞어서 사용하는 문법입니다. JSX는 사용자 인터페이스 개발을 쉽고, 편하게 가능하게 해줍니다. 쉽게 얘기해서 사용자 지정 HTML이라고도 할 수 있겠습니다. 코드를 보시면 좀 더 이해가 쉬우실 거에요. 아래 코드는 CRA로 처음 프로젝트를 생성했을 때 코드입니다. 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 import logo ..