Velog Velog

getDay(date){ const week = ['일', '월', '화', '수', '목', '금', '토']; return week[new Date(date).getDay()]; } vue에서 사용한 코드 {{code.startdate}} ({{getDay(code.startdate)}}) v-for을 사용하여 렌더링할 때 함수 파라미터에 날짜를 넣어주고 요일 리턴 Vue.filter('toPrice', price => { if (price === 0) return '무료' else return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '원' }) vue filter를 이용해서 price를 파라미터로 받아 세자리마다 컴마를 추가해주는 데이터..

Cookie - Session 쿠키와 세션을 사용하는 이유? HTTP 프로토콜의 장점이자 단점인 특징 stateless를 보완 서버가 클라이언트가 누구인지 확인하는 목적 Conectionless 비연결성 : 클라이언트가 서버에게 request를 보내고 response를 받으면 해당 connection을 끊음, connection을 유지하기 위해서는 Header에 keep-alive 값이 있어야 함 Stateless 무상태성 : 서버와 클라이언트 간의 통신이 끝나면 서버는 클라이언트의 상태를 유지하지 않음 Cookie 쿠키 클라이언트 로컬에 저장되는 데이터 파일 (key-value 구조) 브라우저가 종료되어도 명시한 유효 시간이 지나지 않았다면 인증 유지 하나의 쿠키 값은 최대 4KB까지 저장 가능 Res..

TypeScript란? 자바스크립트와 호환되는 프로그래밍 언어, 구체적으로 말하면 자바스크립트의 SuperSet으로 JS를 포함하는 프로그래밍 언어 그러나 JS는 interpreted language이지만, TS는 Transpiled language이다. 즉, 자바스크립트와는 다르게 컴파일러가 필요하고 컴파일된 결과물을 실행한다는 차이점이 있다. 컴파일 과정에서 ‘타입’을 체크하는 것이 중요하기 때문에 이름 자체도 ‘타입’스크립트다. 그러나 기존 Compiled 언어들과는 다르게 어떤 프로그램을 기술하면 다른 언어로 변환되어 프로세스를 진행한다는 것도 특징이다. source code를 object code로 변환하는 과정을 컴파일이라 하고 컴파일하는 프로그램을 컴파일러라고 함 정적 타입 언어 vs. 동적..

const [modal, setModal] = useState(false) hook을 이용해서 modal open 상태를 관리했다. 초기값은 false여서 모달이 보이지 않는다. {modal && } PlaceModal이라는 함수형 컴포넌트를 생성해서 props로 open 값과 closeModal 메소드를 넘겨주었다. import {Button, Fade, Select, Input, makeStyles, Modal, InputLabel, MenuItem, FormControl} from '@material-ui/core' import React, {useState, useEffect} from 'react' 모듈은 이렇게 사용했다. const useStyles = makeStyles((theme) => ..

https://www.vuemastery.com/courses/intro-to-vue-js Intro to Vue.js - Intro to Vue.js | Vue Mastery If you’re just getting started with Vue, here’s where to get going. We cover all the basics and give you challenges so you can learn by doing. www.vuemastery.com 1. The Vue Instance HTML 내에 데이터를 전달하여 사용하고 싶을 때 -> Vue를 이용한다 CDN 방식을 이용하여 HTML 내에 뷰를 삽입할 수 있다. product 위와 같은 태그들을 뷰를 이용해서 데이터를 전달하려면 먼저 V..

Geocoding 주소를 이용해서 주소의 위도와 경도값을 얻는 것 ex. 주소로 서울특별시 어쩌구 저쩌구를 입력하면 (****,%%^$$) 이런 식으로 리턴을 받는 것 Reverse Geocoding 위도와 경도값으로 주소나 거리같은 고유명칭을 얻는 것 geocoding은 유일값을 리턴받지만 reverse geocoding은 복수 개의 결과값을 얻을 수도 있다. 하나의 포인트가 길거리, 도시, 국가 등 여러 가지로 라벨링될 수도 있기 때문이다. https://developers.google.com/maps/documentation?hl=ko Google Map Api의 Maps JavaScript API를 이용해서 Geocoding을 하려고 한다. React로 개발하는 경우에는 'react-geocode..

인턴이랑 병행하면서 많이 못들은 것에 대한 아쉬움이 있지만 남은 강의들을 꼭 다 들어서 완강을 하고 싶다.. ! ~ 쨌든 약 2달동안 매주 포스팅하느라 고생했다 . .. ~~ 우리 동아리가 최우수 동아리가 되진 않았지만 ㅎㅎㅎㅎ 그래도 나름 재밌었던 서포터즈였다.

Hook이란? ✨ ✔️함수 컴포넌트에서 React state와 Lifecycle 기능을 연동할 수 있게 해주는 함수 (버전 16.8부터 도입) ✔️만들어진 목적 자체가 함수 컴포넌트에서 사용하기 위함이었으니 당연히 클래스 컴포넌트 안에서는 동작하지 않음 ✔️기존에 함수 컴포넌트를 사용하다가 state를 추가하고 싶어서 클래스 컴포넌트로 바꾸곤 했는데 이제 그럴 필요가 없다! Hook의 사용 규칙 1️⃣최상위에서만 Hook 호출이 가능 (루프, 조건문, 중첩된 함수 안에서는 사용할 수 없음) : 조건문을 Hook 내부에 넣는 것은 괜찮음 -> 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장되어 state를 올바르게 유지할 수 있음 2️⃣리액트 함수 컴포넌트 내에서만 호출이 가..