let's get IT with DAVINA 💻

Pre-Knowledge 객체 지향 프로그래밍(Object Oriented Programming) ⇒ 객체의 입장에서 보는것!!! 사람이 세계를 보고 이해하는 방법을 흉내 낸 프로그래밍 방법론 중 하나 ⇒ 현실 세계를 기반으로 프로그래밍 모델을 만들 때에 유용하다! “클래스”라고 불리는 데이터 모델의 청사진을 이용해 코드 작성 ⭐ 4가지 주요 개념 1. Encapsulation(캡슐화) : 데이터와 기능을 하나의 단위로 묶는 것 2. Inheritance(상속) : 기본 클래스의 특징을 파생 클래스가 상속받는다. (부모/자식) 3. Abstraction(추상화) : 내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념 4. Polymorphism(다형성) : 똑같은 메서드여도 다른 ..

Call Signatures 마우스를 갖다 올려보면 위에 뜨는 저 박스 함수의 인자 type 정의 + return type 정의 Type을 먼저 정의한 뒤 -> 함수/코드를 구현하자 instead of 함수를 구현하면서 동시에 type을 정의하는 것보다 better //type 미리 정의 type Add = (a:number, b:number) => number const add:Add = (a,b) => a+b //instead of const add = (a:number, b:number) => a+b Overloading 함수가 여러 개의 call signatures를 가지고 있을 때 발생 내가 직접 쓸 일은 거의 없지만, 외부 패키지나 라이브러리를 사용할 때 많이 볼 수 있기 때문에 알아두자! t..

Redux란? 상태 관련 라이브러리 전역 상태를 관리할 수 있는 Store을 제공함으로써 하기와 같은 문제 해결 컴포넌트와 상태를 분리하는 패턴 Redux의 기본 구조 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다. 이 Action객체는 Dispatch 함수의 인자로 전달됩니다. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해줍니다. Reducer함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다. 상태가 변경되면, React는 화면을 다시 렌더링 합니다. 즉, Redux에선 Action→Dispatch→Reducer→Store 순서로 데이터가 단방향으로 흐르게 됩니다...

export const ImgBox = styled.div` background-image: ${(props) => `url(${props.img})`}; background-size: cover; background-position: center; height: 20rem; border-radius: 1rem; position: relative; `; ⛔️ Error Issue background-image만 줬더니 사진의 전체 이미지가 담기지 않아서 background-size:cover & background-position: center를 추가하여 이미지가 div의 사이즈에 딱 맞게 배치됨

try { await axios({ method: "post", url: `/member/wishlists?hotelId=${id}`, headers: { Authorization: localStorage.getItem("accessToken"), }, }); await axios.post(`/member/wishlists?hotelId=${id}`, undefined, { headers: { Authorization: localStorage.getItem("accessToken"), }, }); } catch (error) { console.error(error); } 🚫 Error Issue wishlist (하트를 누르면 찜기능) 처음엔 await axios.post( /member/wishlist..

2023/2/2~2023/2/28 까지 총 몇박일까? export const getDateDiff = (d1, d2) => { if (d1 !== null && d2 !== null) { const date1 = new Date(d1); const date2 = new Date(d2); const DateDiff = date1.getTime() - date2.getTime(); return Math.abs(DateDiff / (1000 * 60 * 60 * 24)); } }; //적용은? {getDateDiff(checkin, checkout)}박

window.open(새창 열기) 웹브라우저에서 새창(팝업창) 열기 window.open('팝업주소', '팝업창 이름', '팝업창 설정'); window.open(url, name, option); window.open( res.data.url, "카카오톡 결제", "top=100px, left=100px height=800px, width=500px" ); url 새창(팝업창)에 보여질 주소, 기본값: blank ⇒ 빈 창이 보임 name 새로 열릴 창의 이름 또는 속성 지정 기본값: _blank (새 창으로 연다) _parent: 부모 프레임에 열린다. _self: 현재 페이지를 대체한다. _top: 로드된 프레임셋을 대체한다. _name(임의의 이름): 새 창이 열리고 창의 이름 지정 option ..

const ReviewContent = styled.div` text-overflow: ellipsis; //말 줄임표 생략기호 overflow: hidden; //넘어간 부분(글자) 안보여주기 white-space: nowrap; //여러줄 안보이게 하기 `; return ( {review.content} {review.content.length >= 30 ? ( 더보기 {openModal ? ( ) : null} ) : ( "" )} )