전체보기51 [Typescript] 함수 함수 타입 (Function Types) 함수의 타이핑 아래는 함수에 타입을 더한 예제이다. function add(x: number, y: number): number { return x + y; } let myAdd = function(x: number, y: number): number { return x + y }; 위 예제에서는 매개변수의 타입과 반환 타입을 정해주었다. 하지만 Typescript는 반환 문을 보고 반환 타입을 파악할 수 있으므로 반환 타입은 생략할 수 있다. 함수 타입 작성하기 let myAdd: (x: number, y: number) => number = function(x: number, y: number): number { return x + y; }; 함수의 타입은 매.. 2023. 6. 10. [Typescript] 인터페이스 첫 번째 인터페이스 (Our First Interface) 아래는 타입을 지정한 함수이다. function printLabel(labeledObj: { label: string }) {...} printLabel({ size: 10, label: "Size 10 Object" }); 위 예제를 interface를 사용하면 아래와 같이 작성할 수 있다. interface LabeledValue { label: string; } function printLabel(labeledObj: LabeledValue) {...} printLabel({ size: 10, label: "Size 10 Object" }); 선택적 프로퍼티 (Optional Properties) interface의 모든 프로퍼티가 필요하지.. 2023. 6. 10. [Typescript] 기본 타입 불리언 (boolean) 가장 기본적인 데이터 타입은 참/거짓(true/false) 값인 boolean이다. let isDone: boolean = false; 숫자 (number) TypeScript의 모든 숫자는 부동 소수 값이며, number라는 타입이 붙여진다. Typescript는 2진수, 8진수, 16진수, 10진수 리터럴을 지원한다. let decimal: number = 6; // 10진수 let hex: number = 0xf00d; // 16진수 let binary: number = 0b1010; // 2진수 let octal: number = 0o744; // 8진수 문자열 (string) 다른 언어들처럼, Typescript에서도 텍스트 데이터 타입을 string으로 표현한다. le.. 2023. 6. 9. React 환경 변수 설정 React 환경 변수 설정 React 개발 시 환경 변수로 분리되는 값들이 있는데, 이 환경 변수들은 .env 파일을 생성해 값을 설정하여 사용할 수 있다.(React에서는 REACT_APP_ 키워드가 앞에 붙은 변수들만 환경 변수로 사용 가능하다) // .env 파일 예시 REACT_APP_ENV=development REACT_APP_API_BASE_URL=https://url GENERATE_SOURCEMAP=false .env 설정을 마치고 나면 React에서는 설정했던 변수명을 아래와 같이 가지고 올 수 있다. const BASE_URL = process.env.REACT_APP_API_BASE_URL; .env의 우선 순위 env 파일은 우선순위를 가지고 있는데, .env가 가장 마지막으로 적.. 2023. 6. 2. AWS CodePipeline 환경 변수 세팅 1. AWS → CodePipeline에 접속해서 설정하고자 하는 파이프라인 선택 2. 해당 파이프라인 오른쪽 위 편집 버튼 클릭 3. Build 단계 스테이지 편집 클릭 (등록 설정에 따라 명칭은 다를 수 있습니다.) 4. + 작업추가 버튼 왼쪽 아래의 편집 아이콘 클릭 (X 버튼 왼쪽 위치) 5. 환경 변수 항목에서 환경 변수 추가 클릭 6. 변수명(이름)과 값을 작성 후 최하단 저장 버튼 클릭 2023. 6. 2. iframe 내부 스크롤 위치 감지하기 React에서 iframe 사용하기 iframe은 외부 파일을 중첩으로 삽입하는 것이기 때문에 별도의 환경으로 취급되어 React에서 일반적인 방법으로 컨트롤 할 수가 없지만, window.postMessage 메서드를 활용하면 상호작용 가능하다. 아래는 외부 html 파일을 삽입했고, 외부 파일의 스크롤을 감지하여 React 컴포넌트에 이벤트를 줘야하는 상황에 대한 해결책이다. window.postMessage() postMessage()는 다른 윈도우나 프레임으로 메시지를 안전하게 전달하는 데 사용되며, 부모와 자식 프레임, 또는 다른 도메인 간에도 통신할 수 있다. 두 가지의 매개변수가 있다. 1. message: 전송할 데이터: 문자열, 객체, 숫자 등 모든 형태 데이터 2. targetOrigi.. 2023. 6. 1. netlify 커스텀 도메인 연결하기 1. netlify.com 접속 후 왼쪽 사이드 메뉴의 Sites 클릭 후 도메인을 연결할 사이트 클릭 2. 왼쪽 사이드 메뉴의 Site settings → Domain management → Domains 클릭 3. Production domains 항목 하단에 있는 Add a domain 버튼 클릭 4. 아래 입력창에 타사(카페24, 가비아 등)에서 구매한 도메인을 입력하고, 아래 Add domain 클릭 5. 도메인을 등록했으면, 이제 구매한 도메인 업체 사이트에 로그인해서 네임서버를 변경 netlify의 네임서버는 도메인 등록 후 확인 가능하며, 3번 항목에서 등록한 도메인을 클릭하면 노출(카페24의 경우, 호스팅 로그인 후 도메인관리 → 해당 도메인을 선택하고 네임서버 변경 클릭 후 netlif.. 2023. 5. 27. react-hook-form + yup으로 효율적인 폼 관리하기 react-hook-form 공식 문서 yup 공식 문서 react-hook-form + yup react-hook-form은 사용자로부터 데이터를 수집하는 form을 좀 더 효율적으로 관리할 수 있도록 도와주는 라이브러리. 비제어 컴포넌트 방식으로 구현되어 있어 렌더링 이슈를 해결가능하며, yup은 form의 유효성 검증을 도와주는 라이브라리이며 주로 react-hook-form과 함께 사용한다. 설치 yarn add react-hook-form yup @hookform/resolvers yup 세팅 우선 유효성 검증을 하기위한 schema를 세팅한다. import * as yup from "yup"; const schema = yup.object({ id: yup .string() .required(.. 2023. 3. 25. nvm "PREFIX" environment variable 에러 발생 에러 발생 nvm is not compatible with the "PREFIX" environment variable: currently set to "/opt/homebrew" Run `unset PREFIX` to unset it. 해결책 노드 경로를 찾지 못해 발생한 문제로, yarn을 brew로 설치하면(brew install yarn) 프리픽스가 붙어 생기는 문제이다. brew uninstall yarn으로 삭제 후 npm install —global yarn으로 재설치해서 해결 2023. 3. 19. Styled Components 적용하기(React + Typescript) styled-components 설치 styled-components와 @types/styled-components를 함께 설치해준다. yarn add styled-components yarn add --dev @types/styled-components기본 적용 import styled from "styled-components"; const App = () => { return ( color change ); } const StyledButton = styled.button` width: 200px; height: 50px; font-size: 16px; `;간단 예제 클릭 시 버튼의 색이 변경되는 예제 const App = () => { const [color, setColor] = useState.. 2023. 3. 19. 이전 1 2 3 4 5 6 다음