티스토리

Robin's Development Life

검색하기

블로그 홈

Robin's Development Life

dev-robinkim-93.tistory.com/m

Robinkim93 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

2025-01-11 (Flutter) - Stateful widget은 데이터의 변화에 따른 화면 변화를 일으킬 수 있다.- setState 함수를 활용해 state의 변화를 widget에 전달하여 build 메서드를 재실행 시킨다.- setState는 콜백함수를 받아 실행하는데, 아무 내용을 넣지 않아도 실행만 한다면 widget에 데이터의 변화를 알리고, build 메서드를 실행하게 한다.- 이는, 데이터의 변화를 감지하는 것이 아닌 setState 함수 자체가 호출되면 데이터의 변화로 인지하여 build 메서드를 실행한다.- 그 반증으로 데이터를 먼저 수정하고, setState의 콜백함수에 아무 내용이 들어가지 않아도 수정된 데이터는 화면에 재렌더링 된다.- 하지만, 가독성의 이유로 데이터의 변화를 가지는 부분은 setState의 콜백.. 공감수 0 댓글수 0 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 어노테이션.. 공감수 2 댓글수 0 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. 해당 에러가 발생했다... 공감수 0 댓글수 0 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.. 공감수 0 댓글수 0 2024. 4. 24.
2024-04-22 TIL vercel 배포 시 발생한 에러 상황에 대한 원인분석 및 해결방법 배포 시 겪었던 문제 하단처럼 vercel 배포 시, 빌드 상황에서 라이브러리들을 찾을 수 없다는 오류가 발생, 로컬에서 개발 시에는 해당 이슈가 없었음 해결과정 1. 로컬에서 next build 시, props에 타입을 주지 않은 부분들에서 에러 발생하여 해결해서 푸시 -> 해결되지 않음 2. npm과 yarn 충돌이라 판단하여 package-lock.json 파일 삭제 -> 해결 안됨 3. package.json 확인해보니 clsx, next-themes 라이브러리가 dependencies에 명시되어 있지 않아서 설치 후 푸시 -> 해당 에러는 해결 4. 이후 tailwindcss-animate 도 dependencies에 명시되어있.. 공감수 0 댓글수 0 2024. 4. 23.
2024-04-18 TIL 렌더링 방식으로 보는 next14 app router csr 방식 csr 방식은 비어있는 html 파일이 먼저 서빙되고, script 태그를 통해 연결된 리액트 jsx 번들링 파일이 js 파일로 서빙되면서 화면이 그려지게 된다. 그렇기 때문에 유저는 js 파일이 모두 불러와지기 전엔 빈 화면을 봐야하기 때문에 초기로딩속도가 느린 방식이다. js 파일이 모두 불러와진 후, 브라우저에서 react 컴포넌트를 읽어서 가상 dom을 생성하고, 가상 dom을 통해 리얼 dom을 생성하여 화면에 보여지기 때문에 클라이언트 사이드 렌더링 즉 csr이 된다. ssr 방식 page router ssr 방식은 먼저 서버에서 react 코드를 바탕으로 html을 생성하고 서빙해서 컨텐츠들이 구성 된 화면을 보여준다. 이 때.. 공감수 0 댓글수 0 2024. 4. 23.
2024-04-17 TIL Image 태그 기본 img 태그 대신 next 내장 Image 컴포넌트를 사용하면 lazy loadin(지연 로딩), 이미지 최적화, placeholder 등의 장점이 있다. LCP(Large Contentful Paint) 란 각 페이지에서 가장 큰 이미지이며, 해당 이미지에 priority 속성을 추가해서 이미지 로드의 우선순위를 줄 수 있다. (다른 Image 컴포넌트에도 사용 가능) 초기 렌더링 시, 빠르게 보여줘야 하는 Image 컴포넌트에 priority 속성을 추가하여 빠르게 보여줘야 할 이미지는 lazy loading을 하지 않도록 설정할 수 있다. lazy loading 이미지를 로드하는 시점을 필요할 때까지 지연시킬 수 있으며, 예를 들면 뷰포트 밖에 있는 이미지들은 로딩을 지연시키.. 공감수 0 댓글수 0 2024. 4. 23.
2024-04-16 TIL NextJS 기본 컴포넌트 NextJS는 컴포넌트를 생성하면 서버 컴포넌트로 작용한다. 그 증거로 console.log를 찍어보면 브라우저 console에 찍히는 것이 아닌 서버가 실행 중인 터미널에서 찍힌다. 폴더구조 기반 라우팅 (보호파일명) 폴더구조 기반 라우팅이 가능하며, 내부에서 작동하는 파일명에 따라 next가 자동으로 역할을 부여할 수 있다. layout, error, loading 등이 있다 a태그를 사용한 라우팅 시 문제점 (feat. ssr, csr, spa) ssr 환경에서 a태그로 페이지 이동 시, 새로고침이 일어나면서 다시 서버에서 html 파일을 받기 위해 서버로 요청을 보내게 되는데 이 때, 불필요한 깜빡거림이나 데이터 재요청으로 인해 유저경험을 해칠 수 있다. csr인 리액.. 공감수 0 댓글수 0 2024. 4. 23.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.