컴포넌트가 화면에 표시되는 과정은 다음의 3단계로 이루어집니다.  1. 렌더링 트리거렌더링은 React에서 컴포넌트를 호출하는 것입니다. 이러한 렌더링은 다음 두 경우에서 트리거됩니다. (1) 컴포넌트의 초기 렌더링인 경우createRoot()에 화면에 보일 DOM 노드(루트 노드)를 인수로 넣어 호출 -> 객체에 할당할당된 객체로 render() 메서드를 호출 -> 렌더링 트리거import { createRoot } from 'react-dom/client';const root = createRoot(document.getElementById('root'))root.render(); (2) 컴포넌트의 state가 업데이트된 경우set 함수를 통해 state를 업데이트하여 추가적인 렌더링을 트리거합니다...

컴포넌트가 상호 작용의 결과로 화면의 내용을 변경해야 할 때(렌더링해야 할 때)가 있습니다. 이때 필요한 데이터를 저장하는 컴포넌트별 메모리를 State라고 합니다. 왜 이 데이터를 일반 변수에 저장하지 않을까요? 일반 변수(지역 변수)는 렌더링 간에 유지되지 않고, 변수를 변경해도 렌더링이 일어나지 않기 때문입니다. 때문에 저희는 컴포넌트를 새로운 데이터로 업데이트하기 위해 useState 훅을 사용합니다. useState처럼 "use"로 시작하는 모든 함수는 훅(hook)이라고 부릅니다. 훅의 특징은 다음과 같습니다.React가 렌더링 중일 때만 사용할 수 있는 함수입니다.  컴포넌트의 최상위 또는 커스텀 훅에서만 호출할 수 있습니다. useState 훅은 우리가 필요한 두 가지 기능을 제공합니다. ..

이벤트 핸들러란 무엇일까요? 사용자 상호작용에 따라 실행되는 사용자 정의 함수 입니다. 이를 사용하기 위해서 다음 단계를 거칩니다. 1. 사용할 함수를 컴포넌트 내에 선언한다.2. 함수 내부 로직을 구현한다.3. JSX의 onClick 속성에 함수를 추가한다.  이러한 이벤트 핸들러에는 중요한 특징이 몇가지 있습니다. 1. 컴포넌트 내부에서 선언합니다.따라서 이벤트 핸들러는 해당 컴포넌트의 prop에 접근할 수 있습니다.이벤트 핸들러를 선언할 때 JSX와 구분하거나, JSX 내에서 인라인으로 사용하거나, 화살표 함수를 사용할 수 있습니다. 2. "handle" 로 시작한 명명법이 일반적입니다.  3. 이벤트 핸들러로 전달한 함수들은 호출이 아닌 "전달"입니다.만약 과 같이 괄호를 붙인다면, 렌더링 과정..

글을 적게 된 이유 일기장에나 적어둘 것 같은 이 글을, 2024년의 마지막 날에 작성하게 된 까닭은 다음과 같습니다. 1. 벌써 1년동안 뭘 했는지 가물가물하다. 지금 적어두지 않으면 전부 잊고 나서 나중에 1년을 낭비했다고 후회할 것이다.2. 1년 동안 잘못한 것은 스스로 반성하고 잘한 것은 칭찬하자.3. 블로그를 꾸준히 쓰는 습관을 들여보고 싶은데, 가장 먼저 떠오르는 주제가 이것뿐이다. 그래서 비루한 글 솜씨에도 불구하고 적어보게 되었습니다. 또한 아마 이 글을 읽는 사람은 별로 없겠지만, 혹시나 저와 비슷한 상황에서 힘들어하는 사람이라면 읽으며 때로는 공감하고 때로는 비웃으며 힘든 마음을 털어버리기를 바랍니다. 저 또한 "2024 프론트엔드 취업" 같은 키워드를 검색하며 여러 블로그에서 많은 위..

주제 선정 이유처음 서버와 연동하는 웹 프로젝트를 했을 때, 개발자 도구 콘솔 창에 다음과 같은 에러가 자주 발생했었다. 그때 클라이언트의 문제인지, 서버의 문제인지 잘 몰라서, 프론트를 맡은 내가 해결할 수 있는 방법으로 어찌저찌 해치웠던 경험이 있었다.   그 이후로도 제대로는 이해하지 못하고 넘어간 문제였는데, 브라우저 동작 방식에 대해 조금 더 이해하게 된 지금은 확실하게 정리해볼 수 있을 것 같아 위와 같은 주제를 선정했다. CORS가 뭐야?에러를 파악하기 위해서는 우선 CORS가 무엇인지부터 이해해야 한다. MDN에서는 CORS를 다음과 같이 소개하고 있다. Cross-Origin Resource Sharing(CORS, 교차 출처 리소스 공유)추가 HTTP 헤더를 사용하여한 출처에서 실행 중..

추상클래스 추상화?"생각이 없다"String.length() 메서드를 쓸 때 구체적인 구현 방식을 생각하지 않음 == 추상적이다구체적인 구현을 생각하지 않는 클래스 == 추상 클래스추상 클래스의 특징개념 : 하나 이상의 추상 메서드를 포함하는 클래스기본 구조 : abstract 키워드로 추상 클래스, 추상 메서드 선언추상 메서드를 포함하고 있다는 걸 제외하면 일반 클래스와 비슷하다 == 생성자O, 멤버변수O, 메서드Opublic abstract class Shape { //추상 클래스 private String type; public Shape(String type){ this.type = type; } public void printShape(){ Sy..