본문 바로가기

TIL8

2025-01-11 (Flutter) - Stateful widget은 데이터의 변화에 따른 화면 변화를 일으킬 수 있다.- setState 함수를 활용해 state의 변화를 widget에 전달하여 build 메서드를 재실행 시킨다.- setState는 콜백함수를 받아 실행하는데, 아무 내용을 넣지 않아도 실행만 한다면 widget에 데이터의 변화를 알리고, build 메서드를 실행하게 한다.- 이는, 데이터의 변화를 감지하는 것이 아닌 setState 함수 자체가 호출되면 데이터의 변화로 인지하여 build 메서드를 실행한다.- 그 반증으로 데이터를 먼저 수정하고, setState의 콜백함수에 아무 내용이 들어가지 않아도 수정된 데이터는 화면에 재렌더링 된다.- 하지만, 가독성의 이유로 데이터의 변화를 가지는 부분은 setState의 콜백.. 2025. 1. 11.
2025-01-04 (Flutter) - 플러터를 이용한 애플리케이션 개발 시, 화면을 구성하는 모든 요소는 Widget이라고 할 수 있고, Widget은 레고 블럭으로 커다란 성을 만들듯이 하나의 블럭으로 사용할 수 있다.- 모든 Widget은 class이며 Widget을 extends 즉, 상속하여 Widget으로써 작동하게 한다. 또한, build 메서드를 필수적으로 구현해야 하며, 이는 화면에 보이는 UI를 그려주는 메서드이며, 플러터가 실행시켜 build 메서드가 return하는 모든 것을 화면에 보여준다.- build 메서드 또한, Widget을 return하는데 쉽게 보면, Widget(build 메서드)을 return하는 Widget(class)를 생성하는 것이다.- build 메서드 상단에 달리는 @override 어노테이션.. 2025. 1. 11.
2024-04-24 TIL useRef를 사용해 특정 태그에 스크롤 이벤트를 달아 useEffect로 감지하고 스크롤에 따라 배경화면을 다르게 하는 인터랙션을 줘야하는 상황이 생겼다. 아래와 같은 코드를 작성한 뒤, 에러 상황을 맞이했다. The ref value 'headerRef.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'headerRef.current' to a variable inside the effect, and use that variable in the cleanup function. 해당 에러가 발생했다... 2024. 4. 24.
2024-04-23 TIL image unconfigured-host로컬이 아닌 외부에 있는 이미지를 사용할 때, Next.js 서버가 이미지를 가지고 있는 리모트 서버(ex.unsplash 서버)에 직접 요청을 하기 때문에, 모든 리모트 서버에서의 접근을 허용할 경우 악의를 가진 사용자에 의해 Next.js 서버가 공격 받을 가능성이 있다.이를 방지하기 위해서 이미지를 가지고 있는 리모트 서버가 안전한 서버라는 것을 Next.js 내부에서 지정해줘야 하는데, 기본적으로 구성된 next.config.ts 파일에서 리모트 서버의 host 주소를 명시해줘야 한다. 명시하지 않으면 하단과 같은 image-unconfigured-host 에러를 반환해준다.추가하는 방법next.config.ts 파일에서 해당 코드와 같이 pr.. 2024. 4. 24.