전체 글177 [ 헤드퍼스트 디자인패턴 ] implements 와 extends 최근에 읽고 있는 책인데, 책은 Java를 베이스로 디자인패턴과 세부사항을 설명하지만, 나는 이를 타입스크립트로 작성하는 연습(?)이랄까, 타입스크립트 공부를 하고 있다. ( + 디자인패턴도 ㅎㅎ) 자 그래서 어떤 상황이냐, Beverage라는 추상 클래스가 존재합니다. 판매되는 모든 음료는 이 클래스의 서브클래스가 됩니다.해당 클래스(Beverage)는 - description 이라는 인스턴스 변수를 가지고 있는데, 이는 각 서브클래스에서 설정됩니다. - getDescription 이라는 메서드를 가지고 있는데, description 변수에 저장된 내용을 가져오는 getter 입니다. Claude에게 코드로 작성해달라고 했다. 1. Java// 추상 클래스 Beveragepublic abstract.. 2025. 1. 3. 커스텀 엘리먼트 스타일링하기 (feat. Shadow DOM) 바닐라 자바스크립트(& 타입스크립트)로 개인 사이드 프로젝트를 진행 중인데,컴포넌트화를 위해 아래 코드와 같이 커스텀 엘리먼트를 생성했다. ⬇️ 커스텀 엘리먼트 import BaseComponent from "../../commons/BaseComponent";import deviceCheck from "../../utils/deviceCheck";import './styles.scss'class ProfileCard extends HTMLElement { #shadow constructor() { super() this.#shadow = this.attachShadow({mode: 'open'}); .. 2024. 12. 30. 프로젝트 절대 경로 설정하기 (feat. tsconfig.json) 프로젝트 작업을 할 때,디렉토리 구조를 변경하면 상대경로를 다시 계산해서 작성하는 것이 귀찮아서,그리고 가독성도 별로라고 생각해서세팅 단계 때, 절대 경로를 설정하는 편이다.(Next.js 같은 경우는 처음부터 npx create-next-app@latest을 실행하면 선택할 수 있게 해뒀다.)(난 아무래도 초기 세팅은 Next.js가 제일 편한 것 같다) 바로 설정하는 방법으로 넘어가자.JavaScript를 사용한다면 jsconfig.json로, TypeScript를 사용한다면 tsconfig.json로 들어가서 옵션 몇 개를 수정하려고 한다. 1. rootDir 관련 공식문서 링크모든 비선언 입력 파일(non-declaration input files)의 가장 긴 공통 경로.declaration in.. 2024. 12. 16. [ 프레임워크 없는 프론트엔드 개발 ] 선언형？명령형？ 1장 프레임워크에 대한 이야기1장을 읽다 보면, 리액트에 관한 이야기를 할 때 선언적 패러다임, 선언적 패턴, 명령형 패턴 단어들이 보인다. 선언적 패턴이 무엇이고, 명령형 패턴은 무엇이며, 이 둘의 차이는 뭘까? 선언형？명령형 ？ 리액트 공식 홈페이지에 처음 들어가면 다음과 같은 화면이 나타난다. 선언형 프로그래밍(Declarative Programming) 이란？ 원하는 결과를 묘사하는 방식으로 코드를 작성하는 프로그래밍 패러다임 원하는 결과를 선언하고구체적인 실행 과정은 추상화해서"무엇을" 할지에 초점을 맞춘다.- What To Do 명령형 프로그래밍(Imperative Programming) 이란?코드가 어떻게 동작해야 하는지를 작성하는 프로그래밍 패러다임 단계별로 정확히 무엇을 .. 2024. 12. 13. [ 프레임워크 없는 프론트엔드 개발 ] 라이브러리와 프레임워크 1장. 프레임워크에 대한 이야기 라이브러리와 프레임워크"라이브러리"와 "프레임워크"의 차이에 대해서 책에서는 다음과 같이 설명을 하고 있다. 프레임워크는 코드를 호출한다. 코드는 라이브러리를 호출한다. 정확히 무슨 말일까？그림이 잘 그려지지가 않는다. 예시를 좀 더 찾아보자. 예시1)라이브러리 - Lodash// 라이브러리를 내가 원할 때 호출const numbers = [1,2,3,4,5];const result = _.sum(numbers); // Lodash 라이브러리의 sum 함수를 작성자가 호출한다프레임워크 - Reactfunction MyComponent(){ return ( Hello, World! )}사실 리액트가 라이브러리인지 프레임워크인지에 대한 부분은 의견이 분분하다.그래서 .. 2024. 12. 13. [ React ] useEffect (feat. 무한 렌더링) useEffect는 꽤 다루기 까다롭습니다. 용도 자체가 부수작용을 일으키는 동작을 하여 예상 못한 부분에서 엉뚱한 동작을 일으키기도 하는데, 콜백 함수가 실행되는 건 의존하는 다른 대상의 상태를 따르기 때문이죠. 그래서 리액트로 개발하다보면 심심치 않게 무한 리렌더링 상황에 부딪히곤 합니다.useEffect 동작 순서컴포넌트 렌더링화면에 반영 ( Paint )useEffect 함수 실행(리렌더링 시) 이전 부수작용 클린업새로운 부수작용 실행useEffect가 주로 사용되는 상황네트워크로 데이터 가져오기 (fetching)DOM 조작구독과 해제타이머 관리 useEffect 사용 코드 예시https://codepen.io/www-r/pen/ByBjoeK 2024-12-05컴포넌트가 렌더링된 후 5초 동안 .. 2024. 12. 5. 이전 1 2 3 4 ··· 30 다음
