본문 바로가기

전체 글

(7)
JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유, TypeScript의 동작 원리 JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유정적 타입 검사: TypeScript는 정적 타입 시스템을 도입하여 코드 작성 시점에 타입 오류를 잡아준다. 이렇게 하면 런타임 오류를 줄이고 코드의 안정성을 높일 수 있다.개발자 경험 향상:코드 자동 완성: TypeScript 덕분에 IDE(통합 개발 환경)에서 코드 자동 완성이 더 정확하게 작동한다.리팩토링 지원: 타입 정보 덕분에 코드를 더 안전하게 리팩토링할 수 있다.더 나은 문서화: TypeScript의 타입 주석은 코드 자체를 문서화하는 역할을 한다. 이는 팀 내 협업 시 코드의 이해도를 높이고 유지보수를 용이하게 한다.타입 추론: TypeScript는 코드의 타입을 자동으로 추론하여 명시적인 타입 선언 없이도 안전하..
CSS-in-JS의 장점과 단점, Presentational & Container 디자인 패턴 CSS-in-JS의 장점과 단점:장점:Scoped Styling: 컴포넌트 단위로 스타일을 작성할 수 있어서 스타일 충돌을 막을 수 있다.Dynamic Styles: JavaScript를 이용해서 동적으로 스타일을 바꿀 수 있다. props나 state에 따라 스타일을 쉽게 조절할 수 있다.Maintenance: 스타일과 컴포넌트를 같은 파일에서 관리하니까 유지보수가 편리하다.Autoprefixing: CSS-in-JS 라이브러리들이 자동으로 벤더 프리픽스를 추가해줘서 호환성을 걱정할 필요가 없다.Dead Code Elimination: 사용하지 않는 스타일을 빌드 단계에서 제거해 줘서 최종 번들 크기가 줄어들 수 있다.단점:Performance: 런타임에 CSS를 생성하기 때문에 성능에 영향을 줄 수 ..
리액트 생명주기(life cycle), CSR, SSR, SSG 라이프사이클은생성될 때 (Mounting)업데이트할 때 (Updating)제거할 때 (Unmounting)3가지 시점으로 나눌수 있다. 컴포넌트의 생성constructor(): 컴포넌트가 처음 생성될 때 호출된다static getDerivedStateFromProps(props, state): props로부터 state를 갱신할 때 사용된다.render(): UI를 렌더링하는 메서드로, 필수적으로 구현해야 한다. JSX를 반환한다.componentDidMount(): 컴포넌트가 처음 마운트된 후 호출된다. 컴포넌트의 업데이트static getDerivedStateFromProps(props, state): 위에서 언급한 대로, 컴포넌트가 업데이트될 때도 호출된다.shouldComponentUpdate(n..
Virtual DOM, key Virtual DOM이란? Virtual DOM은 리액트에서 사용되는 개념으로, 실제 DOM(Document Object Model)을 추상화한 가상의 개념이다. 리액트는 컴포넌트들이 상태(State)가 변할 때마다 실제 DOM을 바로 업데이트하지 않고, 이 가상의 DOM을 메모리에 유지하고 있다. Virtual DOM을 사용하는 이유는? 성능 향상: 실제 DOM 조작은 비용이 많이 드는 연산다. Virtual DOM은 메모리에서 처리하기 때문에, 실제 DOM 조작 횟수를 최소화하여 성능을 향상시킨다. 반응성: 사용자 인터랙션에 따른 빠른 UI 업데이트를 가능하게 한다. Virtual DOM을 통해 변경된 부분만 실제 DOM에 반영하므로, 전체 페이지를 다시 렌더링할 필요가 없다. 플랫폼 독립성: Vir..
자바스크립트 this 1. 이벤트 버블링(Event Bubbling)이벤트 버블링은 HTML 요소에서 이벤트가 발생했을 때 그 이벤트가 해당 요소에서부터 상위 요소들로 전파되는 과정을 말합니다. 예를 들어, 클릭 이벤트가 요소에서 발생했다면, 이 이벤트는 부모 요소인 , 그 부모 요소인 , 그리고 최상위 요소인 순으로 전파됩니다. 이를 통해 상위 요소에서도 이벤트를 감지하고 처리할 수 있습니다.2. 이벤트 캡쳐링(Event Capturing)이벤트 캡쳐링은 이벤트가 상위 요소에서 하위 요소로 전파되는 과정을 의미합니다. 즉, 이벤트가 최상위 요소에서부터 시작하여 실제 이벤트가 발생한 요소까지 내려옵니다. 이벤트 리스너를 추가할 때 capture 옵션을 true로 설정하면 이벤트 캡쳐링 단계에서 해당 리스너가 호출됩니다.3..
CSS - Cascading CSS의 Cascading(캐스케이딩)은 스타일 규칙이 HTML 요소에 적용될 때의 우선순위를 결정하는 과정을 의미합니다. 중요도 (Importance)중요도는 스타일이 선언된 위치(사람)에 따라서 우선순위를 매기는 것입니다. 스타일 시트는 작성자(author), 사용자(user), 사용자 도구(user agent, 브라우저가 대표적)가 작성한 세 종류로 나뉩니다. 이 중에서 가장 중요도가 높은 것은 작성자의 CSS파일입니다. 각 스타일 시트의 우선순위를 나누면 다음과 같은 순서로 적용됩니다.우선순위는 작성자 스타일 > 사용자 스타일 > 브라우저 기본 스타일 순입니다.  !important를 사용하는 경우css를 지정하는데 있어 !important를 넣을 경우 다른 스타일 보다 제일 우선시 되어 적용 됩..
[프리드리히 대왕의 군사지침 번역] 제1조. 프로이센군, 그들의 우수성과 결점 제1조. 프로이센군, 그들의 우수성과 결점. 나의 군대를 편성할 때 지휘관들은 엄격한 주의와 끊임없는 관심을 기울여야 한다. 엄격한 규율을 유지하고, 그들의 복지에 큰 관심을 기울여야 하며, 유럽의 어떤 군대보다 더 잘 먹여야 한다. 우리 연대의 절반은 자국민이고 절반은 돈을 받고 입대하는 외국인으로 구성되는데, 후자는 특별한 애착이 없는 복무를 그만둘 기회만을 기다리고 있다. 따라서 탈영 방지는 중요한 대상이다. 많은 우리 장군들은 탈영병 한 명이 실질적으로 다른 병사 한 명과 동등하다고 여기며, 만약 공석이 채워진다면 군대 전체에 영향을 미치지 않는다고 생각한다. 그러면서도 우리 군대에 다른 군대를 적절하게 적용하는 방법을 모르는 것 같다. 잘 훈련되고 통제된 사람으로 대체된다면 큰 문제가 되지 않겠..