반응형
안녕하세요, 파워쿠입니다. 최근에는 새벽에 출근을 주로 하고 있습니다. 새벽에 출근을 하면 덥지 않게 회사에 갈 수 있다는 장점도 있고, 하루를 길게 쓰는 느낌도 있어서 좋습니다. 오늘 새벽에 출근을 위해 창문을 여니, 시원한 바람이 부는 것을 느끼며 어느덧 가을이 다가왔다는 생각과 올 한 해도 4개월 밖에 남지 않았다는 생각이 문득 들어서 이 글을 쓰게 되었습니다. 매년 그렇지만, 올여름은 특히나 무더웠습니다. 서울 도시의 열기는 더욱 뜨겁습니다. 서울 사람들은 일, 재테크, 취미 등에서 현재 자신의 삶에 안주하지 않고 끊임없이 달려가고 있다고 생각이 듭니다. 도시의 뜨거운 열기만큼 사람들의 열정도 뜨겁습니다. 벼가 여름의 뜨거운 햇살에 익고, 가을에 수확하듯 올 한 해 노력하신 것들 많은 수확으로 거..
타입스크립트에서 물음표를 이용한 문법 3가지가 있습니다. 세 가지에 대해서 정리해보려고 합니다. 선택적 속성 Optional Propery -? type animal { name?: string } interface person { name: string } function add(num?: number) { return num; } 속성을 정의할 때 사용할 수 있습니다. 해당 속성의 값이 있어도 되고 없어도 선택적으로 받을 수 있습니다. 옵셔널 체이닝(Optional Chaining) -?. 일반적으로 속성접근자(.)를 이용하여 속성의 값을 가져올 수 있습니다.. 하지만 속성이 없을 경우에 오류가 발생합니다. // const name = person.name // if person undefined -..
Non-null 단언 연산자(Non-null assertion operator) 자바스크립트는 없고, 타입스크립트에서 사용하는 문법입니다. null이나 undefined가 아니라고 알려주는 타입스크립트 문법입니다. 난 null 이나 undefined가 아니고 반드시 값이 있어!! Non-null 단언 연산자 사용법 type person = { name : string age?: number } const superman: person = { name: 'superman', } const num: number = superman.age // error const num: number = superman.age! console.log(num); person 타입에서 age 선택적 타입으로 만들었습니다. ag..
vs 프론트엔드 개발을 할 때, SPA 프레임워크를 많이 사용합니다. 특히 국내에서는 React와 Vue를 많이 사용합니다. 프로젝트 초기 단계에서 어떤 프레임워크를 사용할까 고민도 많이 하기도 하고, 취업준비 단계에서 어떤 것을 공부할까 고민도 많이 합니다. 그래서 React와 Vue를 비교하면서 장단점이 무엇인지, 각 프레임워크 더 나은점은 무엇인지 한번 정리해 보도록 하겠습니다. React가 더 나은 점 1. Facebook 회사의 지원 리액트의 경우 Facebook 회사에서 만든 라이브러리 입니다. 페이스북이라는 거대한 사이트에서 사용하는 프레임워크입니다. 안정적인 업데이트를 기대할 수 있고, 규모가 큰 프로젝트에서도 잘 동작할 수 있습니다. 하지만, Vue의 경우에는 Evan You라는 개인의 ..
춘천에 있는 수영장 중에 가장 괜찮은 춘천국민체육센터에 있는 수영장을 소개해드리려고 합니다. 가격 일일 자유 수영 : 3,000원 이용 시간 화~토 05:00~21:00 일/공휴일 09:00~18:00 매주 월요일은 휴관 입니다. 자유 수영은 샤워시간을 고려해서 30분 전에 이용종료 합니다. 위치는 호반체육관 내에 있습니다. 주차장도 있어서, 차량 이용 시 주차를 할 수 있습니다. 입장 이후 우측에 키오스크에서 결제를 하고 입장할 수 있습니다. 매점에서 간단한 식음료를 구입 후 드실 수 있습니다. 탈의실에서 샤워 이후 수영복으로 환복하고 수영장에 입장할 수 있습니다. 실내 수영장이어서, 남성용 트렁크, 비키니 등은 착용이 불가능합니다. 수영장 레인은 10 레인이 있습니다. 초보자용, 중급자용, 상급자용으..
제네릭(Generics) 이란? 타입스크립트에서 제네릭이란 함수, 클래스, 인터페이스를 선언할 때, 타입을 파라미터 화하는 방법을 제네릭 이라고 합니다. 타입스크립트의 경우에는 변수, 함수, 클래스 생성 시에 타입을 지정해야 하는데, 타입을 지정하려고 하면 동일한 기능에 함수를 타입별로 만들어줘야 하는 단점이 있습니다. const arrayName: string[] = ['superman', 'batmam', 'pororo']; const arrayNumber: number[] = [1, 2, 3]; // generic 방식 const genericName: Array = ['superman', 'batmam', 'pororo']; const genericNumbers: Array = [1, 2, 3];..
안녕하세요 춘천 닭갈비도 유명하지만, 춘천에 유명한 국밥 맛집도 많이 있습니다. 그래서 이번에 춘천에 유명한 맛집 조부자 매운 순대가 명동점을 방문했습니다. 조부자 순대국 영업시간 24시간 영업 매주 월요일 휴무 가게 이름은 조부자매운순대가 이지만, 그냥 조부자 순대국으로 많이 불립니다. 현재는 춘천 내에 12개 정도와 원주, 동해, 아산에도 있습니다. 메뉴는 순대국밥 9,000원이고, 2023년 8월 현재 특 사이즈는 없습니다. 안 매운맛, 덜 매운맛, 매운맛, 더 매운맛으로 주문하 기호에 따라서 먹을 수 있습니다. 술과 함께 먹을 수 있게 다양한 안주류들과 술국이 있습니다. 다음에 소주 마실 때도 한번 방문해보고 싶네요. 순대국밥 내에는 순대와 돼지 부속 고기 위주가 들어있습니다. 매운 순대국 집이라..
Vue는 부모 자식 컴포넌트 간의 데이터를 서로 전달할 수 있습니다. 양방향 데이터 바인딩이 가능한 장점이 있습니다. 부모에서 자식으로는 Props 옵션을 이용해서 전달하고, 자식에서 부모는 Emit 이벤트를 이용해서 전달합니다. Props와 이벤트를 이용하면 부모 / 자식 관계에서 데이터를 서로 주고받을 수 있습니다. 부모 ➡️ 자식 데이터 전달 1. 부모 컴포넌트에서 데이터 생성 const userName = ref('superman'); 2. 자식 컴포넌트로 데이터 전달 3. 자식 컴포넌트에서 Props 설정 {{ message }} 자식 ➡️ 부모 데이터 전달 1. 자식 컴포넌트에서 이벤트 생성 후 호출 const emit = defineEmits(["update"]) emit("update", ..
티스토리 자체광고 시작 2023년 6월 27일 이후 티스토리에서 자체 광고를 송출하고 있습니다. 티스토리의 경우 이용자는 많은데 수익성은 크지 않기 때문에 자체 광고를 통해서 서비스 품질 향상과 블로그 운영자들에게 추가적인 수익을 제공한다고 합니다. 7월 이후부터 게시글 상하단에 랜덤으로 구글 애드센스 광고가 뜨게 되는데요. 현재 저의 블로그에는 구글애드센스 광고와 티스토리에서 자체로 송출하는 광고 두 개가 보이고 있습니다. [안내] 6월 27일부터 티스토리 자체 광고를 신설합니다. 안녕하세요. 티스토리팀입니다. 6월 27일부터 개별 티스토리 본문 내에 티스토리 자체 광고를 신설합니다. 티스토리 자체 광고를 통한 수익은 안정적인 서비스 환경 제공을 위해 활용될 예정입 notice.tistory.com 구..
Composables 란? Vue3에서 Composables 함수를 만들어서 기능을 캡슐화하거나, 재사용할 수 있습니다. Composables, 컴포저블, 훅, 커스텀 훅스, 커스텀 컴포지션 함수 다 동일한 표현입니다. 이 글에서는 Composables로 사용하도록 하겠습니다. Vue3 이전에는 mixins를 이용해서 재사용을 많이 하였습니다. 하지만, mixins의 단점들로 인해서 Composables 라는 새로운 개념이 생겼고, 자바스크립트에서 재사용을 위해 함수를 사용하듯, 함수를 만들어서 재사용할 수 있게 되었습니다. 사용법? 폴더 이름과 자바스크립트 파일을 생성합니다. hooks/alert.js import { ref } from 'vue'; export default function useAl..