전체 글29 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. supabase를 활용한 회원 관련 기능 구현 (1) - OAuth 로그인 OAuth란?OAuth는 사용자 인증을 위한 기술 표준입니다. OAuth는 사용자 이름, 비밀번호 등의 실제 사용자 자격 증명을 공유하지 않고 한 서비스에서 다른 서비스로 권한 부여를 전달하기 위한 프로토콜입니다. OAuth를 사용하면 사용자는 한 플랫폼에서 로그인한 다음 다른 플랫폼에서 작업을 수행하고 데이터를 볼 수 있는 권한을 부여받을 수 있습니다. 쉽게는, 구글에 이미 사용자로 인증을 한 유저가 다른 서비스에서 구글의 자격 증명을 가지고 해당 서비스를 이용할 수 있는 기술이며, 최근의 웹 서비스에서는 소셜로그인, 간편로그인 등의 명칭으로 카카오, 네이버, 구글 등 많은 메가 웹서비스들이 OAuth를 통한 자격 증명 공유를 제공합니다. 더 쉬운 예로는, 집주인이 없을 때 방문자가 집에 와서, 집 주.. 2024. 10. 9. [Typescript] Typescript에서 상수 관리하기 개인 프로젝트를 진행 중에 유저를 다양한 역할로 나눠서 관리합니다. 성인 미만 스포츠 팀과 관련된 프로젝트이기 때문에 코칭스태프, 선수, 학부모, 기타로 역할을 나누었습니다. 회원가입 시, 클라이언트에게 role(역할)에 대한 데이터를 요구하고, 요구한 role 데이터에 대한 유효성 검사를 할 필요가 있습니다.Controller Layer에서 유효성 검사를 진행하는 방법도 있지만, 코드가 복잡해지고 role에 대한 내용이 변동이 있을 때 마다 role 데이터에 대한 유효성 검사 코드가 작성된 모든 Controller 파일에서 수정이 이뤄져야 하기 때문에 좋은 방식은 아니라는 판단을 했습니다. 이런 상황에 사용할 수 있는 방법 중, DTO를 작성하고 DTO 파일 내부에서 클라이언트에서 보내오는 데이터에 대.. 2024. 6. 11. [Nest] Nest + TypeORM 환경에서 DTO 데코레이터, Exception, Exception Filter 커스텀 해보기 (feat. 에러 메시지) # DTO란?DTO(Data Transfer Object, 데이터 전송 객체)는 프로세스 간 데이터를 전달하는 객체를 의미합니다. 데이터를 전송하기 위해 사용하는 객체기 때문에 비즈니스 로직 같은 복잡한 코드는 없고 순수하게 전달하고 싶은 데이터만 정의합니다. 주로 클라이언트와 서버가 데이터를 주고받을 때 사용하는 객체입니다.# DTO를 작성하는 이유Express + Javascript로 api를 구성하고 작성할 때는, Controller Layer에서 req.body 내부에 있는 값을 하나하나 if문으로 유효성 검증과 타입 체크를 해서 에러를 반환하는 형식으로 구성했습니다. (사실 Typescript 기반으로 작성한다면 DTO를 작성하는 과정은 존재할 것이지만, Nest를 접하기 전에는 많은 프로젝트를.. 2024. 6. 10. 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. 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에 명시되어있.. 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을 생성하고 서빙해서 컨텐츠들이 구성 된 화면을 보여준다. 이 때.. 2024. 4. 23. 이전 1 2 3 4 다음
