@2023/10/04 안녕하세요 lika-7입니다이번시간에는 optional chaining에 대해 정리 하겠습니다 optional chaining이란?💡1. 객체의 속성에 안전하게 접근하기 위한 문법입니다. 2. 객체의 속성을 체인으로 접근할 때 발생할 수 있는 오류를 방지하고 코드를 간결하게 유지할 수 있도록 도와줍니다.키워드💡?. 연산자를 사용하여 구현됩니다.반환 내용객체의 중첩된 속성에 접근 할 때 해당 속성이 존재하지 않으면 오류를 발생시키지 않고, ‘undefined’를 반환 합니다코드코드1const user = { id: 1, name: "John", address: { city: "New York" } };const cityName = user.address?.city;?. 연산자는 use..

@2023/10/04 안녕하세요 lika-7입니다이번시간에는 Shorthand Property Names/Property Value Shorthand 패턴에 대해 정리 하겠습니다 Shorthand Property Names/Property Value Shorthand 패턴이란?💡객체를 생성 할 때, 객체 리터럴과 변수 이름이 객체의 속성 이름과 일치할 경우, 속성 이름을 생략 할 수 있는 패턴을 Shorthand Property Names/Property Value Shorthand 패턴 이라고 부릅니다.예시코드const name = "John"; const age = 30; const person = { name: name, age: age };위 코드에서 name 변수와 age 변수를 사용해 pers..

@2023/10/04 안녕하세요 lika-7입니다이번시간에는 document 객체가 무엇인지 정리하겠습니다Document 객체Document 객체는 웹 페이지 그 자체를 의미합니다.💡웹 페이지에 존재하는 HTML 요소에 접근할 때 사용합니다 HTML 요소 생성 메소드const insertTag= document.createElement('태그명')document에 새로운 태그를 만들 때 사용합니다.⚠️만든다고 바로 생기는 게 아니라 변수를 통해 메모리에 저장됩니다. append 메소드를 통해 node에 추가 합니다.document.querySelector('붙일 테그명').append(insertTag) HTML 요소 내부 콘텐츠 접근 메소드 Hello, World! 자바스크립트를 사용하여 이 요소의 i..

@2023/10/03 안녕하세요 lika-7입니다이번시간에는 String.prototype.trim()에 대해 정리 하겠습니다String.prototype.trim() 의 사용 이유💡1. 문자열 양 끝의 공백을 제거하고 반환 합니다.사용방법const greeting = ' Hello world! '; console.log(greeting); // Expected output: " Hello world! "; console.log(greeting.trim()); // Expected output: "Hello world!";

@2023/10/03 안녕하세요 lika-7입니다이번시간에는 object.defineProperty에 대해 정리 하겠습니다object.defineProperty 의 사용 이유💡1. JavaScript에서 객체의 속성을 정의하거나 수정하는 메서드 2. 속성의 특성을 직접 정의할 수 있다.object.defineProperty 파라메터Object.defineProperty(obj, prop, descriptor)obj: 속성을 정의하거나 수정하려는 객체prop: 정의하거나 수정하려는 속성의 이름descriptor: 속성의 특성을 정의하는 객체value: 속성의 초기값 지정writable: 해당 속성의 값을 변경 할 수 있는지 여부 나타내는 값enumerable: 해당 속성이 열거 가능한지 여부를 나타내는 부..

@2023/09/25 안녕하세요 lika-7입니다이번시간에는 디자인 시스템인 아토믹 디자인을 이야기 하도록 하겠습니다. 아토믹 디자인 디자인 시스템을 찾게 된 이유저는 리액트 개발시 container - presentaional 패턴을 사용했습니다.container - presentaional 문제점presentaional 컴포넌트를 어느정도로 분리해서 개발해야 하는지 기준이 없음개발자가 적절히 나누어 설계 함규칙이 너무 제각각이라 관심사가 너무 많거나 재사용, 확장하지 못하는 컴포넌트가 너무 많이 생김특정 서비스에만 귀속되는 컴포넌트로 인해 재사용성이 떨어짐아토믹 디자인위와 같은 문제는 디자인 시스템을 도입하여 어느정도 헨들링 할수 있다고 생각하였습니다. 우선 더 깊은 내용을 들어가기 전에 컴포넌트와 ..

@2023/09/21 안녕하세요 lika-7입니다이번 시간에는 TypeScript의 구성 옵션에 대해서 설명 하겠습니다tsconfig.json란tsconfig.json는 TypeScript 프로젝트의 설정 파일 입니다.프로젝트를 생성 할 때 기본적으로 tsconfig.json를 구성하여 컴파일러에게 프로젝트를 어떻게 컴파일하고 설정할지 알려줍니다.tsconfig.json의 구성//JSON //tsconfig.json { "compilerOptions": { "target": "ES2015", //자바스크립트 2015버전으로 변환 하겠다 "module": "ESNext", //모듈은 자바스크립트의 최신버전으로 사용하겠다 "moduleResolution": "Node", //? "esModuleInterop..

@2023/09/21 안녕하세요 lika-7입니다이번 시간에는 TypeScript에서 타입, 인터페이스를 가져오고 내보내는 내용에 대해서 설명 하겠습니다모듈에서 import, export JavaScript 에서 import와 export 키워드를 통해 모듈 시스템을 이용할 수 있습니다.우리는 JavaScript에서 모듈 시스템을 이용 해 함수 기능과 변수를 재사용한 코드 블록으로 만들 수 있었습니다.💡타입스크립트의 “타입, 인터페이스” 또한 모듈 시스템을 통해 재사용 가능한 코드 블록으로 만들수 있습니다예제//TypeScript //main.ts import {getFullName, User} from './user' const heropy:User = { firstName: 'Heropy', last..