콘요맘떼 개발일지

특정 element의 위치를 이동시키는 방법에는 대표적으로 두 가지가 있다. 하나는 translate( )을 활용하는 것이고 다른 하나는 top, left, bottom, right의 offset을 지정하는 positioning 방식이다. 둘은 위치를 재조정한다는 점에서 동일한 결과를 수행하지만 근본적으로 다른 성격을 지닌다. transform( )은 좌표 공간의 변형을 통해 이동하기 때문에 다른 element에 영향을 끼치지 않는다. 하지만 positioning의 경우 해당 element를 여기다 '위치시키겠다'는 뜻이기 때문에 다른 element들에게도 영향을 끼치게 된다. 즉 transform( )은 모션을, positioning은 위치 지정을 위한 개념이기 때문에 그 목적이 다르다. 다른 elem..

currentColor은 색상과 관련된 css 속성 값에 넣어줄 수 있는 키워드이다. 만약 값으로 currentColor을 넣어주게 된다면 현재 color 속성에 지정된 색상을 대입할 수 있다. 만약 color 속성의 값으로 currentColor을 사용하게 된다면 상속받은 color 값을 사용하게 된다. 이번에 프로젝트 진행하면서 알게된 키워드인데 element 트리 내에서 특정 테마 색상 하나를 자꾸 사용하는 경우에 variable을 사용하는 것보다 관리 측면에서 더 좋게 사용할 수 있는 방법 같다.

프론트엔드 개발을 해 본 사람이라면 CORS 이슈를 정말 많이 접해봤을 것이다. CORS는 뭐고 왜 굳이 우리를 이렇게 귀찮게 하고 어떻게 하면 해결할 수 있을까? CORS (Cross-Origin Resource Sharing) CORS는 이름에서도 알 수 있다시피 서로 다른 출처에서 자원이 공유되는 것을 의미한다. 따라서 CORS에 대해 이해하기 위해서는 출처 (Origin)이라는 것이 어떻게 정의내려질 수 있는지가 중요하다. 인터넷 URL은 프로토콜, 호스트, 경로(path), 쿼리문, 프래그먼트 등 여러 가지 요소로 구성되어 있다. (URL 구조 관련 포스트 참고) 그 중에서 Protocol, Host, Port 총 세 가지가 일치하면 하나의 Origin으로 여겨진다. (일반적으로 포트 번호는 규..

React Native 앱의 구성 요소 React Native 앱은 크게 세 가지 요소로 이루어져 있다. Native 영역과 JS 영역이 존재하며 그 둘을 Native Bridge가 이어준다. 1. Native side (Main Thread = UI Thread) 네이티브 영역인 메인 스레드는 어플리케이션이 실행되자마자 시작된다. 메인 스레드는 우선적으로 앱을 로드하고 JS 스레드를 실행시킨다. 메인 스레드는 앱의 UI적인 부분을 담당한다. (그렇기 때문에 UI 스레드라고 부르기도 한다.) 메인 스레드는 JS의 이벤트 루프가 끝날 때마다 네이티브 브릿지를 통해 받은 메시지를 기준으로 UI를 화면에 보여준다. 반대로 사용자가 기기에 UI 이벤트를 일으키면(press, touch 등) 네이티브 브릿지를 통..

1. React.memo( ), useMemo( ), useCallback( ) 각각 함수 컴포넌트, 함수 컴포넌트 내 변수, 함수 컴포넌트 내 함수를 메모이제이션하기위해 사용한다. 위 세가지 메소드들을 활용하면 불필요한 리렌더링을 방지할 수 있다. 이미 관련 내용들에 대한 포스팅을 한 기억이 있으니 간략하게 넘어가겠다. (마지막으로 useCallback( )의 중요성을 한 번만 더 강조하고 싶다. 함수를 props로 넘겨줄 때 익명 arrow function을 경우가 종종 있는데 이는 해당 익명 함수를 전달해주는 컴포넌트가 리렌더링될 때마다 새로운 함수 인스턴스를 만들어줘야 한다. 그렇기 때문에 동일한 함수 내용이더라도 다른 인스턴스이기 때문에 해당 함수를 전달받은 자식 컴포넌트는 부모 컴포넌트가 리렌..

Intersection Observer Intersection Observer API는 타겟 요소와 상위 요소(혹은 최상위 요소인 document)의 viewport 사이의 intersection의 변화를 비동기적으로 관찰한다. (MDN에서 정의된 바는 이렇다.) 보다 간단하게 정리하면 특정 Element가 기준 화면(viewport)에 노출되었는지 여부를 감지한다고 보면 된다. 사실 element의 가시성을 판단하기 위해서는 다른 방법도 존재한다. window에 scroll 이벤트에 대한 event listener을 추가하고 Element.getBoundingClientRect( )를 통해 element가 viewport에 상대적으로 가지는 위치를 점검한다면 특정 element의 가시 여부를 판단할 수..

ES6 ES6은 ECMA라는 국제 기구에서 만든 표준 문서인 ECMAScript의 6번째 개정판에 있는 표준 스펙을 말한다. 그렇다면 ES6가 현재 가장 최신 버전의 자바스크립트인가? 그렇지는 않다. 2015년부터 새로운 ES 표준 버전이 공개되고 있다. 그럼에도 불구하고 ES6가 항상 주목받는 이유는 ES5까지 자바스크립트가 가지고 있던 많은 문제점들을 개선했기 때문이다. 그렇기 때문에 React. Vue 등 대부분의 라이브러리들도 ES6를 기준으로 개발 환경을 세팅하고 있다. 이번 포스트에서는 ES6에서 등장한 주요 변경점들에 대해서 알아볼 것이다. 1. let / const 기존에는 var만을 사용하여 변수를 사용하였지만 ES6부터는 값의 변경 가능 여부를 기준으로 let과 const를 활용하기 시..

Could not find a declaration file for module 'react/jsx-runtime'. '.../node_modules/react/jsx-runtime.js' implicitly has an 'any' type. 와 같은 에러 발생시 yarn add @types/react -D 혹은 npm i --save-dev @types/react 를 통해 해결 가능.

콘솔 (Console) 자바스크립트를 공부해본 사람이라면 모두 console.log( )를 통해 콘솔에 무언가를 출력해본 경험이 있을 것이다. console은 디버깅 콘솔에 접근할 수 있는 여러 가지 메소드를 제공하는 객체이다. (사실 나는 이 부분을 몰랐다. 생각해보니 자바스크립트는 객체 투성이고 console에는 여러가지 메소드들이 있는데 왜 당연히 객체일 것이라고 생각을 못 했는지 모르겠다.) console이 제공하는 메소드는 정말 많지만 우리는 보통 console.log( )만을 사용한다. 그렇기 때문에 console의 메소드 중 우리가 추가로 활용할 만한 것들에 대해서 알아보도록 하자. 레벨에 따른 로그 출력 표현하고자 하는 정보의 타입에 따라 다른 출력 함수를 활용할 수 있다. 개발자에게 제공..

리액트에서 컴포넌트의 state를 제대로 갱신하기 위해서 주의해야 할 점을 간략히 정리해보겠다. 1. state 직접 수정하지 않기 컴포넌트의 state를 변경하고 싶으면 setState( ) 메소드를 활용해야 한다. 그냥 state에 값을 대입하는 경우 값의 갱신은 이루어질 수 있더라도 컴포넌트가 리렌더링되어야 한다는 사실을 알지 못하기 때문이다. (state에 직접 값을 대입하는 경우는 클래스 컴포넌트의 constructor( ) 메소드 내부 말고는 없다.) 2. state의 갱신은 원하는대로 이루어지지 않을 수 있다. 컴포넌트의 state 혹은 props는 비동기적으로 업데이트될 수 있다. 그렇기 때문에 state나 props에 의존하여 새로운 state를 지정해줄 때에는 주의가 필요하다. 이럴 때..