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

유저는 모르더라도 개발자는 Mac OS, Windows에서 동작하는 서로 다른 그림판이 있으며, 서로 달라야 함을 알고 있다. 지금 강의에서 사용하고 있는 예제는 웹 서비스이기 때문에 IE과 Chrome 그림판을 생각해볼 수 있다. IE에서는 최신 기능은 고사하고 canvas 기능도 사용하지 못할 수도 있기 때문에 이 두 그림판의 구현이 달라야 한다. 1. 심플 팩토리 패턴 (Simple Factory)여러가지가 팩토리 패턴 중에서 가장 간단한 형태의 패턴이다. 보통 팩토리 패턴은 타입을 받아서 그 타입에 따른 객체를 반환한다. 이 패턴은 강의에서 배우는 23가지 패턴에 포함되지 않는다. 이 심플 팩토리 패턴을 기반으로 더 복잡한 팩토리 패턴을 배울 것이다.심플 팩토리 패턴은 단일책임원칙 위반이다. 이..

1. SOLID 원칙 개요두문자약어개념SSRP단일 책임 원칙 (Single Responsibility Principle): 한 클래스는 하나의 책임만 가져야 한다. OOCP개방 폐쇄 원칙 (Open/Closed Principle): 소프트웨어 요소는 확장에는 열려 있으나 변경에는 닫혀 있어야 한다.LLSP리스코프 치환 원칙 (Liskov Substitution Principle): 프로그램의 객체는 프로그램의 정확성을 깨뜨리지 않으면서 하위 타입의 인스턴스로 바꿀 수 있어야 한다.IISP인스턴스 분리 원칙 (Interface Segregation Principle): 특정 클라이언트를 위한 인터페이스 여러 개가 범용 인터페이스 하나보다 낫다.DDIP의존관계 역전 원칙 (Dependency Inversio..

1. 자바스크립트 모듈도 싱글턴싱글턴은 몰랐더라도, ESModule을 사용하는 웹 개발자였다면 이미 사용하고 있는 패턴이다. 다른 파일을 import를 통해 가져오는 구문에서 사용되고 되고 있는데, JS 모듈은 기본적으로 싱글턴(singleton)이다. 그렇기 때문에 아래 코드에서와 같이 다른 이름으로 import를 해왔더라도 g1과 g2는 같다. 또한 grimpan.js 파일이 서로 다른 위치에 있더라도 g1과 g2는 싱글턴으로 같다.// index.tsimport g1 from './grimpan.js';import g2 from './grimpan.js';console.log(g1 === g2); // true// grimpan.tsclass Grimpan { constructor(canvas: ..

1. 디자인 패턴 코드디자인 패턴을 '정해진 코드의 묶음'으로 오해하곤 한다.하지만 실제로는 문제 해결을 위한 전략적인 방향만 제시할 뿐,구체적인 코드는 개발자가 자유롭게 작성하는 것에 가깝다. 강의를 통해 배우는 디자인 패턴은 타입스크립트를 사용하며, 총 23개이다. 디자인 패턴을 사용하는 주된 목적- 코드를 더 유연하고 확장 가능하게 만들어 유지보수를 쉽게 하려는 목적으로 사용된다.- 복잡성 증가 시 그 효과가 커진다.- 디자인 패턴을 따르는 것은 SOLID 원칙을 자연스럽게 준수하도록 돕는다. 2. 추상 클래스와 인터페이스의 사용처강의에서 사용하는 타입스크립트 객체 코드는 기본적으로 추상 클래스를 (abstract class)를 사용한다. 그리고 다중 구현이 필요한 경우에는 인터페이스(interfa..

React Native를 업무에서 만나 시작을 하게 되었다. RN 강의 시리즈는 제로초(조현영)님의 React Native 강의을 정리하는 글이며, 해당 강의는 RN 0.79 버전을 기반으로 스레드를 클론 코딩을 진행한다. 공식문서를 따라하거나 AI에게 물어보면서 공부를 할 수도 있지만, 강의를 통해 제로초님의 경험을 전수 받아보자. 강의 실습 환경Window 11Cursor IDEExpo SDK 53React Native 0.79 (TypeScript)Node 22학습 자료강의 노트소스 코드 버전 선택버전을 선택할 때 최신 버전에서 한 버전 낮춰서 개발을 하면 왠만하면 큰 문제는 없다.이 강의 정리글은 React Native 0.79 버전으로 시작한다. (현재 2025.06.23 최신 버전은 0.80 ..

원티드 프리온보딩 2024년 5월 프론트엔드 챌린지를 위한 사전 과제내가 누구인지 글로 표현하기 질문1. '나'는 어떤 성격을 가진 사람인가요?나는 신중하면서도 도전적이고 충동적인 선택과 행동을 하는 양면성을 가진 재미난 성격을 가진 사람이라고 생각해요. 신중해서 주저하거나 진도가 느린 경향이 있는데, 본인도 그걸 알아서 답답해 하다가 충동적인 행동을 하거나 선택으로 분위기를 바꾸거나 답답함을 해소하기도 하죠. 생각보다 충동적인 사고의 전환과 행동이 창의력을 가져오기도 하고 느슨해 질 수 있는 신중함에 새로운 바람을 불어 넣어 다시 의지를 불사를 수 있는 에너지를 제공해주기 때문이죠.개발을 할 때도 신중하고 기능을 추가하고, 제대로 작동하는지 점검을 해가며 진행을 합니다. 그래서 꼭 TDD를 익히고 싶다..

배열 메서드 배열 요소 조작 - 배열 타입 자체가 실무에서 굉장히 요긴하게 사용되는 타입이다. - 그렇기 때문에 배열을 다루는 배열 메서드들도 정말 많은 곳에서 활용되기 때문에 매우 중요하다. - 배열 요소를 조작하는 6가지 메서드를 알아본다. (1) push - 배열의 맨 뒤에 새로운 요소를 추가하는 메서드이다. - 만약 여러 개의 요소를 동시에 추가하고 싶다면 쉼표로 구분해서 추가해주면 된다. - push 메서드는 요소 추가를 수행하고 난 뒤 변환된 배열의 길이를 반환한다. // 6가지 요소 조작 메서드 // 1. push // 배열의 맨 뒤에 새로운 요소를 추가하는 메서드 let arr1 = [1,2,3]; arr1.push(4); console.log(arr1); // 1 2 3 4 const n..

Truthy와 Falsy - JavaScript에서는 참, 거짓이 아닌 값도 참, 거짓으로 평가한다. - 어떤 값이 참이나 거짓을 의미하는 값이 아닌데도, 조건문 내에서 참이나 거짓으로 평가하는 JavaScript의 특징을 지칭할 때 Truthy, Falsy라고 부른다. - 아래 if 문의 조건식에 있는 123이란 숫자 값처럼 참은 아니지만 조건문 내에서 참으로 평가되는 이러한 값들을 Truthy(트루시), 즉 참 같은 값이라고 표현한다. - 반대로 아래 코드 if 문의 조건식에 있는 undefined 처럼 거짓은 아니지만 조건문 내에서는 거짓으로 평가되는 이런 값들을 Falsy한 값, 즉 거짓 같은 값이라고 표현한다. - JavaScript에 존재하는 모든 값은 Truthy하거나 Falsy 하다. 이런..

객체 원시 타입이 아닌 객체 타입이며, 여러가지 값을 동시에 저장할 수 있는 자료형을 의미한다. 객체를 이용하면 현실 세계에 존재하는 어떤 삼루이나 개념을 표현하기 용이함 객체의 생성과 프로퍼티 - JavaScript에서는 객체를 두 가지 방식으로 생성할 수 있다. - 첫번째 방법은 객체 생성자라고 불리는 new Object() 내장함수를 이용하는 방식이고, 두번째 방법은 빈 중괄호를 하나 열어서 객체를 생성해주는 객체 리터럴 방식이다. 두가지 방식 모두 동일한 객체를 생성한다. 객체 리터럴 방식이 훨씬 더 간겨하기 때문에 대부분은 이 방식을 사용한다. - 객체를 작성하는 방법은 key-value 쌍을 콤마(,)로 구분해서 중괄호 안에 작성한다. 이때 key-value 쌍들을 객체의 프로퍼티라고 부르며,..

자바스크립트의 조건문 if 문 (if 조건문) - 조건문이란 특정 조건을 만족했을 때에만 실행되는 코드를 작성하기 위한 문법 - 대표적으로 if, switch 조건문이 존재함 - 문법은 먼저 if 키워드를 써주고, 이어서 조건식을 써줄 소괄호와 조건식이 만족했을 때 실행할 코드가 들어가는 중괄호를 써준다. - 중괄호 안에는 여러줄의 코드를 작성할 수도 있다. - 조건식의 결과가 거짓으로 조건을 만족하지 않으면, 중괄호 안의 코드가 실행되지 않는다. - if문의 조건식을 만족하지 않았을 때 수행하고 싶은 코드가 있는 경우 (조건식의 결과가 거짓일 때) if 문 아래 else문의 중괄호를 열어서 코드를 추가할 수 있다. - else의 의미는 '그렇지 않으면' 이며, 전체적인 의미를 표현하면 'if 조건문이 ..

JavaScript의 형 변환(Type Casting) - 어떤 값의 타입을 다른 타입으로 변경하는 것을 말함 - 형 변환은 묵시적 형 변환(암묵적 형변환)과 명시적 형 변환으로 두가지 형태가 있음 - 묵시적 형 변환은 개발자가 직접 설정하지 않아도 알아서 JavaScript 엔진이 형 변환 하는 것을 말함 - 명시적 형 변환은 개발자가 직접 함수 등을 이용해 형 변환을 일으킴 묵시적 형 변환 - JavaScript 엔진은 최대한 Error를 통해서 프로그램이 멈추는 것을 방지하기 위해 묵시적 형 변환을 수행함 - 하지만 모든 불가능한 연산에 대해서 항상 묵시적 형 변환이 수행되는 것은 아니라 특정 하나의 변수의 값을 형변환 했을 때 오류가 발생하지 않고 연산이 잘 종료될 수 있는 경우에만 묵시적 형 변..

변수와 상수 변수, 상수는 값을 저장하는 박스 변수 선언 및 초기화 - 변수는 프로그래밍을 하면서 값을 바꿔가며 사용할 수 있는 변수 - 같은 이름의 변수를 선언하면 Error 가 발생한다. // 1. 변수 let age = 27; // let age; (초기화) let age = 27; (초기화 및 할당) console.log(age); // 27 age = 30; 상수 선언 및 초기화 - 상수는 변수와 달리 한번 저장된 값을 다시는 변경할 수 없다. - 상수는 let 대신에 const 라는 키워드를 사용한다. - 상수는 변할 수 없거나, 변해서는 안되는 값을 저장할 때 변수 대신에 자주 사용한다. - 상수는 선언 이후에는 값을 변경하는 것이 불가능하기 때문에 반드시 초기화가 필요하다. - 변수와 상수..

JavaScript 기초 개념 JavaScript(JS)는 무슨 역할을 하는 언어일까? - Web 페이지를 개발하기 위해 만들어진 언어 (JS, HTML, CSS) - 현재는 웹 서버, 데스크탑 어플리케이션, 모바일 어플리케이션, 기타 등등 넓어졌다. JavaScript는 어떻게 실행할까? - 웹 브라우저에 있는 JavaScrip 엔진을 통해 직접 실행해 볼 수 있다. GitHub 저장소 생성 새로운 github 저장소를 만들고 로컬 폴더와 연동하기 - REAMD.md 파일도 생성하도록 설정했으면 git clone 명령어로 쉽게 끝나는데.. 체크하는 걸 깜빡했다. - GitHub에서 알려준 대로 첫번째 코드블럭에 있는 예제를, VSCode 터미널에서 따라한다. VSCode 환경 설정 VSCode 확장 프..

재현 강사님께서 기술면접 대비 특강이 진행을 준비해 주신 내용을 정리했다.질문에 대해 모법답변이 없는 경우도 있고, 가이드 라인만 제시되어 있는 경우도 있다.1. 기술 면접에서는 이런 문제가 나온다. 코딩 인터뷰에서 실제 답변하는 것처럼 구어체로 답변하도록 하자.많은 사람들 또는 인터뷰에 앞서서 떨리는 것을 위해 좋은 준비법은 미리 해보는 것이다.오늘은 쉬운 내용에 대해서 질문하고 다뤄본다.1-1. section 요소와 article 요소의 사용 용도에 대해 설명해 주세요.더보기🎈 모범답변 :둘 다 HTML 문서를 구획짓는 nav 나 body 요소같은 sectioning 요소에 속하며, section 요소는 제목을 가지고 있는 비슷한 주제의 컨텐츠의 그룹을 나타낼때, article의 경우 문서 내에서 ..