상황 emotion 라이브러리를 사용해서 react개발을 할 때 위의 에러가 발생하면 css를 적용한 컴포넌트나 요소가 화면에 렌더링 되지 않는다. 에러 메세지 해석 에러 메세지를 해석해 보면 css function에 대입되는 객체를 직접 stringify 하지 말라는 내용이다. 나의 경우 css를 컴포넌트 body에 작성했는데 이 css가 return문의 중괄호 안으로 대입되면서 객체 형태가 된다. 지금의 경우는 직접 중괄호 안에 대입했기 때문에 오류가 발생한다. emotion 내부에서 처리를 해주어야 하기 때문이다. 해결 1. 태그 내부에 css 속성으로 잘 썼다면 /** @jsxImportSource @emotion/react */ 를 코드 맨 위에 추가하기 2. 혹시 className 혹은 sty..

글을 쓰게 된 이유 react 개발을 하면서 항상 부딪혔던 문제는 return의 JSX 내용을 어떻게 component body으로 가져올 수 있을까였다. return문의 DOM 요소에 따라 다른 본문을 작성하고 싶은데.. 따라서 해결 방법을 정리해보려 글을 쓴다. 문제 상황 이 코드에서 handleClick의 주석이 달린 부분을 작성하고 싶다. 해결 방법 멘탈 모델 자체가 'return을 본문으로 끌어오기'가 아니라 '본문의 JS 코드를 return 안으로 가져가기'가 되어야 한다. 일반적으로 react 함수형 컴포넌트에서는 component body에는 JavaScript 구문을, return에는 JSX 문법을 사용하게 된다. 이때 return문 안에는 JavaScript 코드를 작성해도 프로그램이 ..

real DOM vs virtual DOM real DOM 브라우저에서 웹 페이지를 렌더링할 때 사용하는 트리 구조로, HTML 요소와 그 속성, 텍스트 등을 나타낸다. 실제 DOM을 조작하면 웹 페이지가 다시 그려지고 업데이트되는데, 이 과정이 비교적 비용이 크다. Virtual DOM React에서는 UI를 표현하는 가상의 DOM 트리를 생성한다. 이는 실제 DOM과 동일한 구조를 가지지만, 브라우저에 직접 적용되지 않고 메모리 상에 존재한다. 렌더링 과정 HTML을 파싱하여 DOM 객체를 생성하고, CSS를 파싱하여 스타일 규칙을 만듦 이 두개를 합쳐서 실제로 웹 브라우저에 보여져야할 요소를 표현한 "렌더 트리" 라는 것을 만듦 이 렌더 트리를 기준으로 레이아웃을 배치하고 색을 칠하는 등의 작업을 ..

비동기 처리 비동기 처리는 프로그램이 작업을 동시에 수행하는 것처럼 보이게 하는 처리 방법이다. 쉽게 말하면 일을 미뤄두고 다른 코드가 다 실행된 후 미뤄둔 일을 실행하는 처리 방식이다. 비동기 처리 과정 JS 코드가 실행될 때 비동기 함수를 만나면 비동기 함수에 등록된 코드는 event loop에 들어가고 해당 함수를 탈출해 나머지 코드를 실행한다. 이때 이벤트 루프는 queue 형태라고 생각하면 편하다. 기본적으로 선입 선출 구조이나 비동기처리 시 대기 시간을 정해두었다면 해당 대시 시간만큼만 event loop에 머물게 된다. Event Loop 이벤트 루프는 아래의 그림과 같이 나타낼 수 있다. 여기서 중요한 개념은 stack과 queue이다. call stack 위의 그림에 있는 stack은 흔..

표준 DOM 이벤트에서 정의한 이벤트 흐름 캡처링 단계 : 이벤트가 하위 요소로 전파하는 단계 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계 ⇒ 가장 처음 이벤트 핸들러가 동작하는 순간 버블링 단계: 이벤트가 상위 요소로 전파되는 단계 이벤트가 발생하면 가장 먼저 'window' 객체에서부터 'target'까지 이벤트 전파가 일어납니다. (캡쳐링 단계) 그리고 나서 타깃에 도달하면 타깃에 등록된 이벤트 핸들러가 동작하고, (타깃 단계) 이후 다시 widnow 객체로 이벤트가 전파됩니다. (버블링 단계) 캡쳐링 단계에서 이벤트 핸들러를 동작시키려면, addEventListener에 세번째 프로퍼티에 true 또는 { capture:true }를 전달하면 됩니다. 이벤트 위임 이벤트를 부모에게 위임하..

HTTP (HyperText Transfer Protocol) http는 application layer에서 클라이언트와 서버의 통신을 관장하는 통신 규약입니다. 초기에는 연구소에서 논문 결과를 주고 받기 위해 만들어졌지만, 계속해서 발전했고 world wide web의 통신 표준이 되었습니다. 먼저 간단하게 HTTP 역사에 대해 알아볼까요? HTTP1.x 1991년 물리학 연구소에서 만들어졌습니다. 과학자들은 각자의 연구 결과를 담은 논문을 인터넷으로 주고받고 싶었습니다. 논문 안에는 글자뿐만 아니라 참고 그림도 있었겠죠? 이때 '팀버렌즈 리'라는 사람이 HTTP 프로토콜을 설계하고 개발했습니다. 이렇게 HTTP는 최초의 웹 서버 웹 클라이언트의 통신을 주도하게 됩니다. 현재까지도 인터넷 통신 표준 프..

var, const, var의 중복 선언 허용 여부 var: 동일한 스코프 내에서 여러 번 선언. 중복 선언이 허용되므로, 실수로 변수를 재선언하는 경우가 발생할 수 있다. 요즘은 거의 사용하지 않는다. let: 동일한 스코프 내에서 중복 선언이 불가능하다. 이미 선언된 변수명을 다시 선언하려고 하면 에러가 발생한다. 한번 할당한 값을 변경할 수 있다. const: let과 마찬가지로 동일한 스코프 내에서 중복 선언이 불가능하다. 또한 선언과 동시에 초기화해야 하며, 한 번 할당된 값은 변경할 수 없다. 스코프 var: 함수 스코프(function scope)를 가진다. 즉, var로 선언된 변수는 선언된 함수 내에서만 유효하며, 함수 외부에서는 접근할 수 없다. let과 const: 블록 스코프(blo..

JS 에서도 얕은 복사와 깊은 복사가 존재한다. 각각이 무엇인지 알아보자. 얕은 복사와 깊은 복사에 대해 설명하기 이전에 Reference value와 Primitive value에 대해 정리하고 들어가자. Reference value 복잡한 데이터 타입을 참조할 때 사용되는 개념.기본적으로, 레퍼런스 벨류는 데이터의 실제 값이 아니라, 그 데이터가 저장된 메모리의 주소를 가리키는 참조(Reference)이다. 이러한 참조를 통해 프로그램은 해당 메모리 주소에 저장된 실제 데이터에 접근하고 조작할 수 있다. JavaScript에서는 객체, 배열, 함수 등은 레퍼런스 타입으로 취급된다. 이러한 레퍼런스 타입은 변수에 데이터의 실제 값 대신 메모리 주소(레퍼런스)가 저장된다. 예를 들어, 객체를 변수에 할당..

프로젝트를 하던 중 input 태그에 위와 같은 스타일을 적용하고 focus 되었을 때 border의 색을 바꿔주고 싶어 focus 가상 클래스에 아래와 같이 border를 바꾸어 주었다. 그런데 이렇게 적용이 안되고 까만색으로 표시된다. 문제를 찾기 위해 개발자도구를 켰지만.. 개발자 도구 상으로는 잘 적용됐다고 나온다..!!ㅋㅋㅋ 저번에는 배경 색을 변화시킬 때 background-color 대신 background를 사용했더니 잘 적용된 기억이 있어서 혹시 border 대신 사용되는 속성이 있는지 찾아보았다. 구글링 해보니 outline이라는 속성을 찾을 수 있었다. 따라서 border 대신 outline을 사용해서 구현해 보았다. 구현은 잘 되는데 과연 border과 outline을 바꿔서 사용해..

코드 리뷰를 받다가 html login form에는 form 태그를 사용해야한다는 리뷰를 받았다. 평소에 로그인 폼을 백엔드와 통신하도록 제대로 구현해 본 적이 없어 간과하고 있었다 ㅠㅠ form 태그를 언제 써야하는지 조사해보자. 전통적인 서버사이드 웹에서는 GET 이외의 메소드 요청을 보내기 위한 필수적인 태그였다고 한다. 실제 mdn을 참고해봐도 form태그는 폼 생성시 필수적으로 사용해야한다고 설명하고 있다. 따라서 HTML을 이용해 페이지를 구성했다면 폼(제출) 요소에는 꼭 form 태그를 사용하는 것이 좋을 것 같다. form 태그에 지정할 수 있는 많은 속성들이 있지만 기본적으로 action, method 는 지정해 주는 것이 좋다. action = "폼 데이터를 처리할 백엔드의 url" 즉..