U_D

타입스크립트란? 타입스크립트는 자바스크립트에 타입을 부여한 언어 또는 자바스크립트의 확장된 언어라고 볼 수 있다고 한다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 하는데 이 변환 과정을 우리는 컴파일(complile) 이라고 부른다. 하지만 타입스크립트를 보고있으면 언어라는 생각보다는 자바스크립트의 오류를 막아주는 보조역할의 느낌이 강했다. 물론 아직 공부 초입이라 그렇지만 자바스크립트를 더 보완해주기때문에 JS에서 TS로의 변화기 일어나고 있다고 생각된다. 왜 타입스크립트를 써야할까? 1) 에러 예방 TS를 사용하는 가장 큰 이유 중 하나는 정적 타입을 지원한다. 명시적인 정적 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있고 이는 코드의 가독성을 높..

상태(state)란 무엇인가? 정의를 여러가지로 찾아보았지만 그중 가장 이해가 되는 정의를 인용해본다. 웹 애플리케이션을 렌더(render)하는데 있어 영향을 미칠 수 있는 값 Plain Javascript Object hold information influences the output of render *리액트 공식문서 중 내용에도 위와 같이 설명한다. (참고 링크) 이 말 전부 다 통용 되지는 않겠지만 리액트를 사용함에 있어서 이해가 잘되는 정의였고, 조금 더 쉽게 풀어쓴다면 페이지가 그려질 때 그려지는 일련의 내용물 정도로 말할 수 있다고 생각한다. 전역관리 사용의 이유? 상태관리에 더 관심을 가지게 된 계기는 팀 프로젝트를 진행함에 있어 props drilling을 직접 경험하게 되었기 때문이다..

1. AWS Amplify란? Amplify Console은 Git 기반 워크플로를 통해 풀 스택 서버리스 웹 애플리케이션을 배포 및 호스팅 할 수 있는 AWS 서비스입니다. 즉, Git repository와 연동시킨 뒤, Git에 소스코드를 Push하는 것만으로 프로젝트가 빌드되고 그 결과물을 호스팅까지 해주는 서비스입니다. 2. 자동 배포 설정 1) AWS Amplify console 접속 하여 웹 앱 호스팅 시작하기 2) GitHub 연결 선택 3) branch 선택 자동배포가 이루어질 브랜치를 선택한다. 여기서 하나를 선택하더라도 나중에 다른 브랜치를 추가 선택할 수 있다. 4) 빌드 스펙 설정 이 부분은 자동으로 빌드 설정이 진행되기 때문에 어려운 부분은 없다. 5) 자동 배포 이제 등록한 깃허..

프로젝트를 진행함에 있어 최대 3장까지 이미지 업로드가 가능한 다중 업로드 기능이 있었다. 그러다 보니 고화질의 이미지가 다수 올라가는 경우가 있었는데 이 때 이미지 업로드 속도가 느려지는게 느껴질 정도로 등록하기를 누른 후 유저가 느끼기에 꽤 오랜시간이라고 느껴질 만큼의 시간이 걸렸다. 그래서 유저가 업로드 한 이미지를 축소하는 방법을 검색하였고 라이브러리 중 browser-image-compression가 나와 선택하게 되었다. 1. 설치 yarn add browser-image-compression or npm install browser-image-compression --save 사이트 : https://www.npmjs.com/package/browser-image-compression bro..

1. 기간 일시 : 2022년 3월 25일 (금) ~ 2022년 3월 31일 (목) 2. 팀 과제 Q1. 컴포넌트 A는 리덕스 스토어를 구독하고 있습니다. 리덕스에 저장된 데이터가 변경되었을 때(A가 구독 중인 값이 변경되었다고 가정합니다.), 어떤 과정을 거쳐 컴포넌트 A가 변경된 값을 가져올 수 있는 지 흐름을 그려볼까요? [컴포넌트 A가 변경되는 흐름] 컴포넌트에서 Action이라는 객체를 실행할시 변경된 State 값을 dispatch 해준다. 이후 redux store 내의 action 함수에서 state를 reducer로 보내준다. reducer에서 state를 변경한후 return을 해준다. return된 값을 component가 받아서 변경된다. Q2. 옵셔널 체이닝이란 뭘까요? 어떤 경우..