@2023/10/09 안녕하세요 lika-7입니다이번시간에는 json.stringify(), JSON.parse()에 대해 정리 하겠습니다JSON.stringify()란JSON.stringify()는 JavaScript 객체나 값(문자열, 숫자, 배열, 객체 등)을 JSON 문자열로 변환하는 메서드입니다.사용방법const person = { name: 'Alice', age: 30, hobbies: ['Reading', 'Gaming'] }; const jsonString = JSON.stringify(person); console.log(jsonString);{"name":"Alice","age":30,"hobbies":["Reading","Gaming"]}JSON.parse()란JSON.parse()..

@2023/10/08 안녕하세요 lika-7입니다이번시간에는 클래스와 함수의 객체 지향적 사용법에 대해 정리 하겠습니다글을 쓰는 이유필자는 절차 지향적 코더에서 객체 지향적 코더로 변화하고 있는 중입니다.이에 우리의 코딩 엣지를 살려줄만한 몇가지 코딩법을 기술하겠습니다.1. 클래스와 함수를 객체의 키로 사용하기✅객체 지향 프로그래밍(OOP) 구현: 클래스를 객체의 프로퍼티로 사용하면 객체 지향 프로그래밍의 개념을 자연스럽게 표현할 수 있습니다. 이렇게 하면 코드를 더욱 객체 지향적으로 구성할 수 있습니다.✅다형성(Polymorphism) 구현: 객체의 키로 클래스를 사용하면 상속과 다형성을 활용하여 다양한 동작을 구현할 수 있습니다. 동일한 메소드 이름을 가진 다른 클래스를 객체로 생성하여 다형성을 실현..

class MenuItem { constructor(name, href) { this.name = name; this.href = href; } render() { const menuLink = document.createElement('a'); menuLink.textContent = this.name; menuLink.href = this.href; return menuLink; } } const menus = [ new MenuItem('Search', '#/'), new MenuItem('Movie', '#/movie?id=tt4520988'), new MenuItem('About', '#/about') ]; const menuContainer = document.querySelector('#me..

@2023/10/06 안녕하세요 lika-7입니다이번시간에는 스켈레톤 UI에 대해 설명하겠습니다스켈레톤 UI란💡1. 사용자에게 어떤 작업이 진행 중이며 컨텐츠가 로딩 중임을 시각적으로 알려주는 디자인 패턴입니다. 2. 이 패턴은 사용자 경험(UX)을 개선하고 사용자가 대기하는 동안 더 나은 인터랙션을 제공하는 데 도움이 됩니다.사용 이유스켈레톤 UI는 주로 느린 네트워크 연결 또는 데이터 로딩 지연 시간과 같은 상황에서 사용자 경험을 향상시키는 데 사용됩니다.사용자가 대기하는 동안 빈 화면을 보는 대신, 로딩 중임을 명확하게 알려주고 사용자의 참여를 유도하여 웹 또는 앱의 인터랙션을 지속적으로 유지할 수 있습니다.예시 화면따라하기CodePenAn online code editor, learning env..

@2023/10/05 안녕하세요 lika-7입니다이번시간에는 replace 메서드에 대해 정리 하겠습니다 replace 메서드는?💡1. 문자열 내에서 특정 패턴 또는 문자열을 다른 패턴 또는 문자열로 대체하는데 사용됩니다.주의⚠️replace() 메서드는 원본 문자열을 변경하지 않고 새로운 문자열을 반환합니다. 대체한 결과를 새로운 변수에 저장하거나 반환된 값을 활욜해야 합니다.코드newStr = str.replace(searchValue, replaceValue)str: 원본 문자열입니다.searchValue: 대체하려는 문자열 또는 정규 표현식 패턴을 나타냅니다.replaceValue: 대체될 새로운 문자열을 나타냅니다.예시const originalString = "Hello, World!"; con..

@2023/10/05 안녕하세요 lika-7입니다이번시간에는 history 객체에 대해 정리 하겠습니다 history 객체는?💡1. 브라우저의 세션 히스토리(방문 기록)을 조작하고 제아하기 위한 API를 제공합니다. 이 객체를 사용해 이전 페이지나 다음 페이지로 이동하도록 브라우저 히스토리를 조작할 수 있씁니다.사용 이유✅history 객체는 주로 SPA (Single Page Application) 및 브라우저 내에서 페이지 전환 및 라우팅을 관리하는 데 사용됩니다. 페이지 전환을 사용자 친화적으로 제어하거나 브라우저 히스토리를 이용하여 뒤로가기 및 앞으로 가기 기능을 구현하는 데 유용합니다.메서드go(offset): 현재 페이지에서 상대적으로 offset만큼 이동합니다. offset이 양수면 다음 페..

@2023/10/05 안녕하세요 lika-7입니다이번시간에는 flex-shrink와 flex-grow에 대해 설명하겠습니다 flex-shrink란flex-shrink는 CSS Flexbox 레이아웃에서 사용되는 속성 중 하나로, 플렉스 아이템(flex item)이 부모 컨테이너 내에서 축소(Shrink)될 수 있는 정도를 지정합니다. 이 속성은 플렉스 컨테이너(flex container) 내에서 공간 부족 시 어떻게 아이템들을 축소시킬지를 제어하는 데 사용됩니다.코드.flex-container { display: flex; } .flex-item { flex-shrink: 2; /* 아이템은 다른 아이템보다 2배로 많이 축소됨 */ }이렇게 설정된 아이템은 부모 컨테이너의 공간이 부족할 때 더 많이 축소..

@2023/10/04 안녕하세요 lika-7입니다이번시간에는 로딩 애니메이션을 만들겠습니다코드.the-loader{ width: 30px; height: 30px; margin: 30px auto; border: 4px solid red; border-top-color: transparent; border-radius: 50%; animation: loader 1s infinite linear; } @keyframes loader{ 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }css로 border 속성으로 정사각형을 그림정사각형의 top은 투명 처리border-radius로 정사각형을 원으로 만듬@keyframes 로 시간 진행률을 ..