프론트엔드

서론제네릭의 개념이 헷갈려서 며칠 공부를 해보고 포스팅을 한다. 제네릭이란 선언부에서 타입을 명시하지 않고 호출이 되었을 때 타입을 명시하는 어떠한 타입도 될 수 있는 기법이다.  나는 제네릭이 어떠한 타입도 될 수 있다면 unknown, any와 뭐가 다를까 하는 생각이 들었는데 오늘 드디어 뭔가 깨달은 것 같다 ㅋㅋ. 앞서 말한것 처럼 제네릭은 사용 시점의 인풋에 의해서 타입이 결정된다. 따라서 함수 혹은 인터페이스와 같은 곳에서 많이 사용된다.  반면에 unknown과 any는 사용 용도 자체가 다르다. 애초에 이 두가지를 비교할 수 없을 뿐더러 unknown은 어떠한 타입도 될 수 있지만 사용하기 위해서는 타입을 명시해야 한다는 부분도 다르다. any도 마찬가지로 비슷한 이유로 다르지만 이걸 쓰면..

ReadOnlyReadonly 는 말 그대로 읽기 전용 이라는 키워드 이다. 예를 들어서 어떤 배열을 생성할 때에만 값을 받고 해당 배열을 수정할 수 없게 만들고 싶을 때 사용한다.  또한 readonly 키워드는 배열 및 튜플에서만 사용 가능하다. 사용법은 아래와 같다.let arr : readonly number[] = [1, 2, 3]arr.push(4) //error 이렇게 만들어진 arr 배열은 추가, 삭제, 업데이트 모두 불가하다.  Tuple파이썬을 공부하며 리스트와 튜플의 차이는 가변성과 불변성으로 공부했었다. 타입스크립트에서도 비슷하지만 "타입"을 바꿀 수 없다는 점이 다르다. 먼저 튜플을 선언할 때에는 타입의 순서를 선언한다. let a : [number, string, number] ..

서론SCSS를 사용하는 가장 큰 이유이자 핵심이다. 컴포넌트를 재사용하고 컴포넌트끼리의 결합을 통해 하나의 큰 시스템을 구축한다. html과 css만으로는 그런 방법을 사용할 수 없는줄 알았는데 SCSS를 이용하면 객체지향적으로 코드 작성이 가능하다.파일 구조base/components/layout/pages/themes/abstracts/vendors/main.scss이 형식은 SCSS 뿐만이 아니라 리액트나 뷰와 같은 다른 라이브러리에서도 일반적으로 사용한다. 반드시 이 구조를 사용해야 한다는 것은 아니지만 일반적으로 많이 사용하는 구조이니 SCSS에서도 사용하면 쉽게 적용 가능하다.  폴더별 예시 파일 @use이제 해당 폴더에서 컴포넌트를 만든 후 다른 컴포넌트에서 사용하기 위한 키워드는 @use ..

국비 교육을 들으며 Saas를 처음 배워보았다. 처음 SCSS를 사용해보고 나서 든 생각은 정말 프로그래밍 언어와 다를게 없다고 생각했다. 파일 관리를 모듈 단위로 한다는 점에서 리액트와 뷰랑 사용법이 유사하다고 생각이 드는데 이렇게 코드를 작성하면 바닐라 JS에서도 라이브러리를 쓰듯 코드를 작성하는게 가능할 것 같다는 생각이 들었다.  다음으로는 코드의 가독성이 너무 좋다. 또 if 의 사용으로 인해 정말 프로그래밍 언어처럼 코드를 작성할 수도 있다. CSS에서 해당 기능을 사용할 수 있다는게 신기했다.  그런데 해외 코드를 읽으며 SCSS는 정말 많이 봤지만 국내에서는 인지도가 조금 떨어지는 것 같기도 하다. 리액트나 뷰는 JS 를 쓰는 거의 모든 기업들이 사용을 하고 있지만, SCSS는 지원 자격에..

이번 단원에서는 Vue에서 if와 for를 사용하는 방법에 대해 배웠다. 일단 문법은 다른 언어들과 같아서 익숙했지만, html 코드 내에 작성하는게 뭔가 맘에 안든다. 나는 보통 html에서 태그 속에 뭐 넣는 걸 안좋아하는데 익숙해지면 괜찮아질 것 같기도 하다. 암튼 뭐 되게 간결하고 사용법도 쉽고, Js에서 코드 길게 안짜도 편리하다는 점은 정말 유용하다. v-if뷰에서 사용하는 if 문이다. html 태그 내에서 사용하며, 큰따옴표 안에 Js 코드를 작성한다. 아래는 goals라는 배열이 비어있다면 해당 텍스트를 나타내는 코드이다. 목표가 설정되지 않았습니다. 목표를 설정해주세요. v-else뷰에서 사용하는 else이다. if 바로 아래에서 사용해야 하며, 중간에 다른 태그가 들어가면 실행되지않는..

이전 단원에서는 data와 methods 의 대해 배웠다. 이번 단원에는 Vue의 다른 개념인 computed와 watch에 대해 공부했다. 쉽게 설명하자면 computed는 연산형 데이터? 라고 말 할 수 있을 것 같고 watch는 데이터가 바뀔 때 알 수 있으니 디버깅할 때 좋을 것 같다.  computed는 데이터에 직접 연산을 넣으면 가독성이 떨어지고, 효율이 낮아질 수 있으니 따로 분리하는 것이라고 이해했고, watch는 그냥 디버깅 하위호환이라고 이해했다.  computed (연산 프로퍼티): 연산 작업이 필요한 변수를 데이터처럼 관리하기 위함. ➡️ 즉, 재사용성의 증가, 코드의 가독성 및 유지보수 작업이 향상된다.  메서드와 다른 점: 다른 데이터에 의존하는 데이터에 주로 사용. 해당 속성..