https://www.youtube.com/watch?v=NwLWX2RNVcw 프로젝트에서 온보딩 화면을 구현하게 되었는데, 같은 팀원이 퍼널 구조를 도입해보자며 보내준 동영상이다. 퍼널(Funnel) 이란사용자가 목표 지점까지 도달하는 일련의 과정이라 할 수 있다. 회원가입 시 사용자 정보를 묻는 과정, 설문조사의 질문 페이지 등을 예시로 들 수 있다. MBTI 검사 역시 일종의 퍼널이라 할 수 있다. 일련의 단계들을 거쳐 최종 결과를 도출해내는 구조이다. 이 과정 속에서 여러가지 컴포넌트들과 데이터가 필요하고, 이 중 반복되는 요소들도 존재할 것이다. 토스에서는 이러한 퍼널을 관리하기 위하여 useFunnel 이라는 훅을 제작하였다고 한다. useFunnel 구현해보기 const steps =..
웹/React
처음 리액트 + TS 를 사용했을 떄 곤란했던 부분 중 하나였다. props의 타입 설정해주기.....하나하나 설정해주어야 하나? 라는 생각도 들었는데, 결론부터 말하자면 하위 컴포넌트에서 props의 타입을 정의하는 interface를 생성해 주면 된다. props 타입 지정해주기//App.tsxconst age = 25;const name = 'p1su';return( )부모 컴포넌트에서 age 와 name을 props로 넘겨주고 있다. 자식 컴포넌트에서는 props의 요소들에 대한 타입을 지정해주어야 한다. props는 객체 형식으로 전달되기 때문에, interface를 활용하여 정의하면 되겠다 ! //Child.tsxinterface ChildProps { age: number; name:..
https://ko.react.dev/reference/react/useReducer useReducer – ReactThe library for web and native user interfacesko.react.devuseReduceruseState와 같이 데이터의 상태 관리를 도와주는 훅이다. useState와의 차이점은1. 상태 관리 코드를 컴포넌트 외부에서 관리할 수 있다.2. 상태 변화에 대한 작업 코드를 직접 작성할 수 있다. const [state, dispatch] = useReducer(reducer, );기본적인 구조이다.state상태 관리의 대상이 되는 데이터(변수)이다.dispatch상태 변화를 요청하는 함수이다. 인자로 객체를 넘겨주며 객체 안에는 어떤 작업을 수행할 것인지에..
스프레드 연산을 통한 복사const obj = { name: '', age: 0, color: '',};const copy = { ...obj }; 값을 추가하거나 수정할 수도 있다. const copy = { ...obj, name: 'p1su' }; //수정const copy1 = { ...obj, id: 12 } //추가 useState를 통해 객체값 업데이트하기위 스프레드 연산을 통한 객체를 다루는 방법을 사용하여 state값을 적절히 변경 후 렌더링할 수 있다. const newValue = { id : 12, gender : 'boy', }; const [values, setValues] = useState(obj); const handleClick = () => ..
Form과 form 태그Form 이란 웹 브라우저에서 사용자와 상호작용하기 위해 존재하는 여러 입력 양식이다. 그리고 이런 form을 다루는 태그를 form 태그라 부른다. 여러 입력 양식들을 감싸는 최상위 태그이다. input 태그가장 많이 쓰이는 입력 태그들 중 하나이다. textarea 태그만약 입력값이 길 경우 textarea 를 사용할 수 있다. 입력값의 속성 설정하기type 설정input 태그의 경우 여러 type을 설정할 수 있다. 가장 많이 쓰이는 type은 text 이다. text는 type의 기본값으로 따로 type 설정을 하지 않아도 text 속성을 지니게 된다. checkbox 는 값을 선택할 수 있는 버튼을 생성한다. 이 외에도 여러 type이 존재..
여러 텍스트값 나열하기export const users = [ 'song', 'kim', 'park', 'choi', 'heo', 'lee', 'ko', 'kang',];위와 같은 유저 명단을 렌더링하기 위해서, 배열의 map 메소드를 이용할 수 있다. {users.map((user) => ( {user} ))}js 문법을 사용하기 위해 중괄호로 감싸주었고, 렌더링할 배열에 대해 map 메소드를 사용한다. 이후 각 요소를 li 태그로 감싸주었다. 배열의 값들이 잘 표시되었다. key 값 설정하기그러나다음과 같은 오류가 발생한다. 각각의 요소에 대한 key 값을 설정해주지 않아서 발생한 요소이다. key 값을 설정해줘야 하는 이유각각의 요소를 구분짓고 배열..
서로 다른 태그에 공통된 css 속성 적용하기기존 스타일 코드의 일부이다. 각 브라우저마다 backdrop-filter를 설정해주었는데, 해당 코드가 중복되어 나타나고 있다. 코드도 길고 너무 지저분하니 하나의 변수로 묶어버린다. 방법은 간단하다. 중복되는 부분을 하나의 css 속성 변수로 생성해준다. 이후 사용하고 싶은 부분에서 템플릿 리터럴로 작성해주면 된다 ! 훨씬 간소해졌다. 위 코드에서는 또 다시 중복된 부분들이 보인다. 각 태그의 종류가 다르므로, 역시 위와 같은 방법으로 중복된 코드를 줄일 수 있다. 길었던 코드를 짧게 만들었다 ! 가독성도 훨씬 좋아졌고, 추후 유지보수에도 용이할 것 같다. 동일한 태그에 공통된 css 속성 적용하기 먼저 기본이 될 컴포넌트의 스타일 코드를 작성한다..
AWS 접속 후 모든 서비스 -> s3에 접속한다. 그후 버킷을 생성한다. 버킷 이름을 작성한다. 도메인을 설정할 예정일 경우 버킷 이름은 도메인 이름과 동일하게 작성한다. 다음으로 액세스 차단을 해제한다. 버킷이 생성된 모습이다. 이름을 클릭한다. 속성 페이지에서 맨 밑에 있는 정적 웹사이트 호스팅을 활성화해준다. 인덱스 문서와 오류 문서에 index.html을 작성해준다. 권한 -> 버켓 정책 편집 -> 정책 생성기를 누른다. 다음과 같이 설정해준 후 Add Statement 버튼을 눌러준다. Actions는 Getobject를 선택한다. ARN은 버킷 정책 편집 페이지에서 확인할 수 있으며 끝에 /* 를 작성해준다. state가 생성되었고, Generate Policy 버튼을 눌러준다..
