DOM 조작할 때 사용되는 몇 가지 사이즈 속성들

JavaScript에서 DOM을 조작할 때 사용되는 몇 가지 사이즈 속성들을 정리해보자. 1. offsetWidth와 offsetHeight : `element.offsetWidth` : 요소의 너비(가로 크기) 반환. `element.offsetHeight` : 요소의 높이(세로 크기) 반환. 이 속성은 테두리, 안쪽 여백, 스크롤바 등을 포함한 전체 크기를 반환한다. var width = element.offsetWidth; var height = element.offsetHeight; 활용 예시 : 요소가 차지하는 전체 공간을 알고 싶을 때, 특히 테두리와 여백을 고려해야 하는 경우. var width = document.getElementById("home").offsetWidth; var hei..

• format_list_bulleted Javascript
• · 2024. 2. 26.
• textsms

📝2023년 회고록

[회고록] 2023 한 해를 보내며 나는 평소에 글을 잘 쓰지 않는다. 초등학교 때 방학숙제인 일기도 쓰기 싫었다. 늘 같은 하루이기에 쓸 말이 정말 없었기 때문이다. 하지만 성인이 되고서 정신건강을 위해 일기를 쓰는 게 좋다는 말을 듣고 조금씩 다이어리에 적기 시작했다. 정작 일기만 써봤지 회고록이란 것을 써보지 않았기에 낯설고 어색하지만 써보려 한다. 2023년도는 나에게 정말 힘든 한 해였다. 되는 것도 없고, 뭔가 꼬이고 얽혀 풀어지지 않는 일들이 많았다. 24년 새 해가 되자마자 용하다는 곳에 사주를 보러 갔는데, 아니나 다를까 삼재였단다. 평소에 미신을 잘 믿지 않았지만 이제는 믿게 되었다... 멋진 홈페이지를 만들고 싶은 마음에 컴퓨터공학을 전공했지만 재학 기간 동안 내내 진로에 대한 고민을..

• format_list_bulleted 끄적끄적
• · 2024. 2. 22.
• textsms

의존성 주입이란?

의존성 주입 프론트엔드에서 의존성 주입은 한 컴포넌트나 모듈이 외부에서 필요로 하는 서비스, 객체, 혹은 함수 등의 의존성을 외부에서 주입받는 것을 의미한다. 이는 코드의 유지보수성과 테스트 용이성을 높이는 데 기여한다. 간단하게 설명하면, 의존성 주입은 어떤 기능을 사용하려면 그것을 직접 생성하는 것이 아니라, 외부에서 주입받아 사용하는 패턴이다. 이로써 코드의 결합도를 낮추고 재사용성을 증가시킬 수 있다. 예를 들어, 프론트엔드에서 데이터를 처리하는 서비스를 사용한다고 가정해보자. 의존성 주입을 사용하면 해당 서비스를 직접 생성하는 대신, 외부에서 주입받아 사용할 수 있다. 이를 통해 코드의 유연성이 증가하고, 특히 유닛 테스트를 수행하기 쉬워진다. 의존성 주입은 주로 컴포넌트 간의 의존성이나 서비스..

• format_list_bulleted React
• · 2024. 1. 25.
• textsms

Params에 대해 설명해보시오.

"params" 말 그대로 매개변수(Parameter)를 나타내는 단어로, API 요청 시에 추가적인 정보를 전달할 때 사용된단다... 여기서 "매개변수"는 함수에 값을 전달하는 것과 비슷하게, API에게 어떤 동작을 수행하도록 지시하거나 특정한 데이터를 요청할 때 사용되는 값들이야. 예를 들어, 우리가 Google 검색창에 검색어를 입력할 때, 검색어가 매개변수가 되는 셈이지. 이를 코드로 표현하면, API 요청 시에는 주로 URL 끝에 ' ? ' 를 사용하고, 그 뒤에 ' key = value ` 형태로 매개변수를 추가해 보내게 돼. // 예시 API 요청 URL 'https://api.example.com/data?param1=value1&param2=value2' 여기서, `param1` 과 `p..

• format_list_bulleted React
• · 2024. 1. 25.
• textsms

JSX

JS의 확장 문법 중 하나로, React에서 UI를 작성하기 위해 사용된다. JSX는 XML 또는 HTML과 비슷한 문법을 가지고 있어서 React 요소를 더 쉽게 작성하고 이해할 수 있게 도와준다. XML은 태그(Tag)로 이루어진 문서 구조를 가지고 있다. 태그는 여는 태그와 닫는 태그로 구성되며, 그 안에 데이터가 들어간다. 간단히 말해, XML은 데이터를 계층적이고 태그로 감싸인 구조로 표현하는 마크업 언어이다. 이는 다양한 종류의 데이터를 저장하고 전송하는 데에 유용하게 활용된다. 1. 구조적 유사성 : JSX는 HTML과 유사한 문법을 가지고 있어 React에서 UI를 작성하는 데 편리함을 준다. const hello = Hello JSX! ; 이 코드에서 `element`는 JSX로 작성된 ..

• format_list_bulleted React
• · 2024. 1. 1.
• textsms

리액트 - 2

1. 리액트 동작원리 이해를 돕기 위해 가상 세계에서 공원에 놀러 간다고 생각해 보자.🤔 공원 안에는 여러 개의 놀이기구가 있고, 우리는 각각의 놀이기구에서 즐거운 시간을 보내고 싶어 한다. 하지만 매번 놀이기구에서 놀 때마다 전체 공원을 다시 만들지는 않잖아? 여기서 리액트는 놀이기구(컴포넌트)를 효율적으로 관리하고, 만약 어떤 컴포넌트에서 변경이 일어난다면 그 부분만 바꿔서 공원(웹 페이지)을 업데이트해준다. 이렇게 하면 놀이기구를 즐기면서도 전체 공원을 새로 만들 필요가 없어진다.(❁´◡`❁) 이번에는 코드를 통해서 리액트의 동작 원리를 예를 들어 설명해 보겠다. 가정해 보자. 우리는 간단한 웹 페이지에서 글을 보여주는 컴포넌트(`Post`)와 사진을 보여주는 컴포넌트(`Image`)를 가지고 있다..

• format_list_bulleted React
• · 2024. 1. 1.
• textsms