뚱이의 개발일기

1. Function(함수)함수를 정의하여 사용할 수 있다.다만 함수와 Mixin이 헷갈릴 수도 있는데, 이들은 반환 값에 차이가 있습니다. Mixin과 함수의 차이점Mixin : 지정한 스타일(Style)을 반환함수 : 계산된 특정 값을 @return 지시어를 통해 반환/* SCSS */$max-width: 980px;@function columns($number: 1, $columns: 12) { @return $max-width * ($number / $columns);}.box_group { width: $max-width; .box1 { width: columns(); // 1 } .box2 { width: columns(8); } .box3 { width: ..

Portal(포탈)React Portal은 컴포넌트의 DOM 계층 구조를 유지하면서도, 실제로는 그 컴포넌트를 다른 DOM 노드에 랜더링할 수 있게 해주는 기능이라고 하며, 주로 모달, 알림, 툴팁과 같은 UI 요소를 화면의 상위 레이어에 표시할때 유용하다고 한다. 예시index.html - 모달 위치 생성   App.tsx - 버튼 클릭시 모달을 보여주기 위한 화면 작업import React from 'react';import './App.css'import Modal from './conpornents/Modal';function App() { const [isOpen, setIsOpen] = React.useState(false); const openModal = () => ..

CSR이란클라이언트 사이드 렌더링(Clinent side rendering)이라고 하며 대표적으로 사용하는 프레임워크 및 라이브러리로는 React와 vue, angular가 있다.CSR은 SPA(싱글 페이지 어플리케이션)를 작업하는 렌더링 방식이라고 이해하면 좋을 거 같다.클라이언트는 브라우저를 말하며, HTML 파싱부터 JS 읽기까지 브라우저가 렌더링 한다. CSR 장점과 단점초기 로딩이 길다 : CSR은 클라이언트인 브라우저가 렌더링을 도맡아 처리하는 방식이다보니 서버에서 필요한 데이터를 한 번에 받아오고 받은 데이터를 브라우저가 렌더링하게 된다. 즉 모든 페이지를 한번에 불러와 로딩후 화면에 보여지고 페이지간 전환에 바로바로 반응이 가능해 페이지 이동시 깜빡임 증상이 거의 없다서버 부하가 적다 : ..

오늘의 공부는 배열에 대하 공부하고 정의하며 예시를 적어볼려고 한다!!퍼블 작업할땐 많이 쓰이지 않았지만 프론트엔드로 가서 데이터를 다루는 이상 많이 다뤄야 될거 같아 공부해볼려고한다. 배열배열이란 여러개의 값을 하나의 변수에 저장하는데 사용되며, 숫자, 문자열, 객체 등 다양한 데이터 타입을 포함 시킬수 있다.밑에 코드를 통해 다양한 배열을 확인 할 수 있으며 Array 객체를 사용해 배열을 정의할 수도 있습니다.// Array 객체 사용let fruits = new Array("apple", "banana", "cherry");// 배열 정의let numbers = [1, 2, 3, 4, 5];let fruits = ["apple", "banana", "cherry"];let mixedArray = ..

오늘 공부는 자바스크립트 연산자다!!가장 많이 쓰이면서도 은근 헷갈리는 연산자를 다시 찾아보고 정리하면서 기억에 박게 할려고 한다.  논리연산자|| (OR), &&(AND), !(NOT)|| (OR)- or 연산자는 둘중에 하나라도 참이면 참인 값을 내보낸다- 개발하다보면 정말 많이 쓰이는 연산자 중에 하나- if문에서 자주 사용되는 연산자예시하나라도 참일시  true라는 것을 알려주는 기본 예시이다. 그럼 if문을 적용하여 이해하기 쉽게 예시를 보자위와 같이 hour이 9일떄 hour 그러므로 영업시간이 아닙니다 로그에 출력되게 됩니다. &&(AND)- && 연산자는 두 조건이 무조 참일시 true를 반환하게 된다.- || 연산자와 마찬가지로 if문에서 많이 쓰입니다.예시보이는거와 같이 하나라도 fal..