Coding Planet

1. 익명 함수 전달 (() => handleSelect) handleSelect('Components')}>Components의미: onSelect 이벤트가 발생할 때마다 새로운 함수 객체를 생성해서 전달하는 것장점: 특정 인자를 함수에 전달해야 할 때 유용단점: 매 렌더링마다 새로운 함수 객체가 생성돼서 메모리 사용이 증가할 수 있다. 이로 인해 불필요한 렌더링이 발생할 수 있는데, 특히 PureComponent나 shouldComponentUpdate를 사용하는 경우 2. 함수명만 전달 (handleSelect)JSX의미: onSelect 이벤트가 발생할 때 기존에 정의된 함수를 그대로 전달하는 것을 의미장점: 함수 객체를 새로 생성하지 않기 때문에 메모리 효율적이고, 불필요한 렌더링을 방지단점: ..

| 배열 디스트럭처링의 기본 개념배열 디스트럭처링(array destructuring)은 JavaScript의 ES6(ECMAScript 2015) 기능으로, 배열의 요소를 쉽게 추출하여 변수에 할당할 수 있게 해주는 문법이다. 이 문법은 리액트의 훅(예: useState)을 사용할 때 매우 유용하다.즉, 배열 디스트럭처링은 배열의 요소를 분해하여 별개의 변수에 할당하는 방식이다. const fruits = ['Apple', 'Banana', 'Cherry'];// 배열 디스트럭처링const [firstFruit, secondFruit, thirdFruit] = fruits;console.log(firstFruit); // Appleconsole.log(secondFruit); // Bananaconso..

|  Components Are UI Building Blocks React Apps are build by combining components.| Why Components?1) Reusable Building BlocksCreate small bulding blocks&compose the UI from themIf needed:Reuse a building block in different parts of the UI(e.g., a resuable button)2) Related Code Lives TogetherRelated HTML & JS(and possibly CSS) code is stored together.Since JS influences the output, storing JS +..

https://www.udemy.com/course/best-react/?couponCode=ST18MT62524 강의 구매자가 80만명이 넘는 강의이다. 강의가 워낙 많아서 필요한 부분을 모듈 형식으로 공부해야겠다.

| 오류코드                Error: error:0308010C:digital envelope routines::unsupported     at new Hash (node:internal/crypto/hash:80:19)     at Object.createHash (node:crypto:139:10)     at module.exports (C:\workSpace\react-boilerplate\node_modules\webpack\lib\util\createHash.js:90:53)     at NormalModule._initBuildHash (C:\workSpace\react-boilerplate\node_modules\webpack\lib\NormalModule.js:401:16..

pre 태그는 HTML에서 사전 서식을 지정한 텍스트를 표시하는데 사용된다. 이 태그를 사용하면 공백, 탭, 줄바꿈 등이 그대로 보존되어 텍스트가 원본의 형태로 보여진다. 주로 코드 블록이나 고정폭 텍스트를 표시할 때 사용된다. 그러나 기본적으로 pre 태그는 자동 줄바꿈을 지원하지 않아, 긴 텍스트는 가로 스크롤이 생기게 되어 사용자 경험을 해칠 수 있다. 아래 게시판 예시에서 글의 가로줄이 너무 길어 표가 레이아웃을 벗어나 공백 영역까지 확장되었다. 내용 이를 해결하기 위해 CSS의 white-space 속성과 word-wrap 속성을 사용하여 자동 줄바꿈을 구현할 수 있다. white-space 속성은 요소 내부의 공백 문자(whitespace) 처리와 줄 바꿈 규칙을 지정한다. 공백문자는 문자가 ..

| 태그 는 HTML5에서 도입된 요소로, 그래픽스를 그리기 위한 영역을 제공한다. JavaScript와 함께 사용되어 동적으로 2D 또는 3D 그래픽스를 생성할 수 있다. 이 태그는 게임, 그래프, 애니메이션 등 다양한 시각적 컨텐츠를 구현하는 데 사용되는데 그래프를 통해 기능을 살펴보고자 한다. | 기본 사용법 getContext()는 HTML 요소의 내장 메서드이다. 이 메서드 사용시 렌더링 컨텍스트와 그것의 그리기 함수를 가져올 수 있다. 가장 일반적으로 사용되는 컨택스트는 "2d"이다. fillRect(x, y, width, height)함수를 통해 사각형을 그린다 예시 코드를 실행시 2차원의 사각형이 나타난다. | 주요 내장함수 getContext() 캔버스의 렌더링 컨텍스트를 가져옴. fil..

지금까지 ajax를 통해 서버에서 비동기적으로 데이터를 받아올 때, 그 다음 동작을 위하여 콜백 함수가 중첩되어 여러 개 연속적으로 사용되는 콜백 지옥(callback hell)을 다수 경험했다. 이러한 문제를 해결하기 위해 Promise나 async/await와 같은 비동기 처리기술이 있는데 이러한 기술을 사용할 경우 중첩된 콜백 함수를 피하고 코드를 더 구조화하여 가독성을 향상시킬 수 있다. 즉, Promise는 비동기 작업을 다루기 위한 JavaScript의 객체로, 비동기 작업이 완료되었을 때 또는 오류가 발생했을 때 처리할 수 있는 방법을 제공한다. 1. Promise 생성 Promise를 생성하려면 new Promise() 생성자를 사용한다. 이 생성자는 하나의 인자를 받으며, 이 인자는 비동..

메뉴가 많고 계층구조로 이루어져 있을 때 메뉴탐색을 쉽게하기 위하여 드롭다운으로 구현한다. 1. html 코드 게시판 관리 공지사항 관리 자료실 관리 FAQ 관리 QnA 관리 게시판 관리 사용자 관리 권한 관리 메뉴 관리 접속 이력 관리 사용자별 메뉴별 데이터 관리 2. javaScript 코드 //lnb $(".lnbList > ul").on("click", "li", function(e){ if ($(e.target).is('.lnbCnt a')) { // 하위 메뉴의 a 태그 클릭 시 기본 동작 수행 return; } e.preventDefault(); // 상위 메뉴의 a 태그 클릭 시 기본 동작 방지 if($(this).hasClass("active") == false){ $(".lnbList ..

아래 포스트는 https://www.geeksforgeeks.org/introduction-to-less/의 내용을 번역, 요약, 발췌한 것입니다. | SASS란? SASS는 Syntactically Awesome Style Sheets의 약어이다. SASS는 변수, nesting, import, 믹스인, 상속 등의 고급 문법을 사용할 수 있다. 이렇게 작성된 문법은 프로그램에 의해 자동으로 CSS 파일로 컴파일되어 웹사이트에 적용된다. SASS에는 두 가지 유형의 문법이 있다. 1) SCSS(Sassy CSS): 현대적인 문법으로, CSS와 유사하며 `.scss` 확장자를 사용다. 2) Indented syntax(또는 sass): 오래된 문법으로, 들여쓰기를 기반으로 하며 `.sass` 확장자를 사용..