목록분류 전체보기 (160)
Frontend 개발자 - hyo.loui
🎯목적 : Git hub : Pull request 개념 정리 적용 : Pull request 활용, 팀원들과 코드 리뷰하기 1. PR은? 프로젝트의 Contribute로 등록되지 않는다면 Fork 하여 repository를 복사해 나의 깃허브 repo로 가져오는 방법이 있지만. 해당 포스팅 내용에서는 팀원으로써 같이 프로젝트에 참여 한다고 가정한다. 우리는 contributor 가 되어 프로젝트를 클론하여 작업한 후 주된 기능이 모여있는 dev 나 develop 브랜치로 '내 작업 내용을 반영해 주세요' 하고 요청하는 것 이다. 이렇게 요청하는 것이 Pull Request 를 보낸다, 날린다고 한다 PR을 통해 코드 충돌을 최소화하고, push 권한이 없는 오픈소스 프로젝트에 기여할 때 많이 사용하며,..
🎯목적 : Youtube API 활용 (비동기)서버통신 : React-Query 적용 response 로 UI구성 🤢 트러블 슈팅 : filter 메서드 문제 해결 1. react query Youtube API 활용에 있어 서버통신의 생산성을 위해 react-query 적용을 기획했다. api.js에서 데이터를 가져오는 함수를 관리하는 파일을 따로 분리했고 중복되는 url 과 api key는 따로 변수선언을 해주었다. 필요한 component에서 react-query를 연결해 위 함수를 사용하도록 import 했다. 별칭을 붙여 데이터의 목적을 정확하게 명시했다. 2. UI 생성 위에서 react-query로 가져온 AllPlayList 라는 배열형 데이터는 map 메서드로 하나씩 돌며, 이미지태그의 ..
📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 (목적, 정리로 세분화) Typescript 강의 및 실습 = Todo-List (리펙토링, cra-typescript) Project : Develife = 프로젝트 시작 ( 기획 >> 와이어프레임 >> 레이아웃(UI) 📚 Study review typescript를 배울 때는 쉽다고 생각했다.. 하지만 막상 적용하려고 하니.. state, props 등 작성해줘야 할 타입들이 생각보다 많아서 쉽지않았다.. 또한 web API(onclick, onsubmit, onchange 등) 사용 할 때에 파라미터로 전달하는 데이터에도 타입을 작성해야해서 당황했다. 하지만 여러 ..
🎯목적 : TS 타입 추론(Type Inference), 정리 및 복습 1. 타입추론 이란? 정적타입 언어를 사용할 때 단점은 타입을 정의하는데 시간과 노력이 많이 필요해서 생산성이 저하될 수 있다. TS의 경우 다양한 경우에 대해 타입추론을 제공하기 때문에 꼭 필요한 경우에만 타입을 정의할 수 있다. // Type Inference let abc = "abc"; // string let number = 2; // number // abc = 123; // Error // number = "abcd"; // Error const n1 = 123; // string const n2 = "123"; // number const array2 = [1, 2, 3]; // Array const [x1, x2, x..
🎯목적 : TS Generic (제네릭), 정리 및 복습 1. 제네릭 이란? 제네릭은 타입을 마치 함수의 파라미터처럼 사용 하는 것이다 말로만 하면 감이 잘 안오고 이해가 안된다. 하지만 파라미터의 생김새와 대조해서 머릿속에 떠올려야 이해가 잘 된다 // Generic function generic(any: T): T { return any; } generic(1); // 1 generic("1"); // "1" generic(true); // true function 함수명 여기 를 따라서 타입이 전달되고 파라미터와 함수타입 : T 에 전달된다! 2. 제네릭 활용 1. getIteArray 는 배열(파라미터)에서, index(파라미터)번째에 있는 것을 찾는 함수 2. pushItemArray 는 배열(..
🎯목적 : TS Interface extension(인터페이스 확장), 정리 및 복습 1. 인터페이스 확장 타입 별칭과 인터페이스의 차이점은 타입의 확장 가능 여부이다. 인터페이스는 확장이 가능한데 타입 별칭은 확장이 불가능하다. 이 때문에, type 보다는 interface로 선언해서 사용하는 것을 추천한다. 방법은 두가지 이다 1. extends interface 새로운 인터페이스명 + extends + 붙일 인터페이스명 // interface extenstion interface Person { name: string; age: number; } interface Korea extends Person { birth: "korea"; } // vv 아래 내용과 동일하다 interface Korean ..
🎯목적 : TS Interface (인터페이스), 정리 및 복습 1. 인터페이스란? 앞서 설명한 타입 얼라이어와 같이 객체의 형태로 구성된다 하지만, 둘은 차이점이 존재하고 인터페이스는 타입 체크를 위해 변수, 함수, 클래스 등 좀더 다양한 곳에 사용할 수 있다. // interface // 기본 속성 interface Person { name: string; age: number; } const person_1: Person = { name: "tmdgy", age: 14, }; // Error: interface에서 할당하지 않은 다른 타입을 사용시 에러발생 // const person2:Person = { // name: 12, // age: 'one' // } 2. type vs interface..
🎯목적 : TS Type Alias (타입 별칭), 정리 및 복습 1. Type Alias ? 타입을 미리 객체의 형태로 선언해 둔 후 필요한 곳에서 별칭을 호출하여 사용할 수 있다. // Type Alias type Hero = { name: string; power: number; height: number; gender: "남" | "여"; }; Hero 라는 타입의 별칭! 2. 타입 별칭의 형태 // Type Alias type Hero = { name: string; power: number; height: number; gender: "남" | "여"; }; 3. 타입 별칭의 적용 const hero1: Hero = { name: "슈퍼맨", power: 100, height: 100, gen..