뚱이의 개발일기

HAPPY아티스트DAY6 (데이식스)앨범Fourever발매일2024.03.18reduce란 뭐냐?먼저 reduce란 JavaScript 배열에서 사용되는 메서드로, 배열의 각 요소를 순환하면서 하나의 결괏값으로 축약(reduce) 할 때 사용된다. 콜백 함수를 이용해 누적값을 업데이트하며, 최종적으로 하나의 값(숫자, 배열, 객체)을 반환한다.  reduce 메서드의 기본 문법array.reduce(callback, initialValue); callback: 각 요소를 처리할 함수로, 다음의 네 가지 인수를 가진다 accumulator: 이전 함수 호출에서 반환된 값 (누적값) currentValue: 현재 배열 요소 currentIndex (선택적): 현재 배열 요소의 인덱스 array (선택적..

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: ..

지난 포스팅에 이어 기본적인 SCSS 문법에 대해 정리해볼려고 한다 1. Data TypesNumbers숫자1, .82, 20px, 2emStrings문자bold, relative, "/images/a.png","dotum"Colors색상red, blue, #FFFF11, rgba(0,0,0,0.5)Booleans논리true, falseNulls아무것도 없음nullLists공백이나 ,로 구분된 값의 목록 (apple, orange, banana), apple orange MapsList와 유사하나 값이 Key : Value 형태 (apple: a, orange: o, banana: b)  $number: 720;$string: hello;$color: red;$boolean: true;$list: red..

Sass란 CSS의 확장으로, 더 효율적이고 유지 보수 가능한 스타일을 작성할 수 있도록 도와주는 스타일링 언어다.물론 기존 CSS로만으로 충분히 작업할 수 있지만 프로젝트의 규모가 커질수록 복잡하고, 유지보수가 불편해지는 경험이 있다.그렇다면 얼마나 좋길래 대부분 쓰는걸까? 🤔  Sass를 사용하는 이유!!🔍 호환성: 모든 버전의 CSS와 완벽하게 호환된다.   기능성: 다양한 기능을 제공하고, 거의 모든 면에서 뛰어나다.  안정성: 오랜 기간 적극적인 지원 아래 관리되어 왔다. 인지도: 업계에서 인정받고 있으며, 많이 사용되고 있다.  신뢰도: 거대 커뮤니티의 지원 아래 개발되고 있다.  확장성: Sass 기반의 프레임워크가 다수 존재한다.   'Sass와 SCSS가 뭐야?'Sass에 처..

일단 기본적으로 리액트는 컴포넌트 기반의 프로그래밍 언어이다. 컴포넌트는 재사용 가능한 요소들이며 이런 재사용성을 이용해 효율적인 프로젝트를 만들수 있다고 한다. 그렇다면서 리액트 프로젝트시 어떻게 하면 효율적으로 컴포넌트들을 효율적으로 재사용할수 있을까? 🤔 프론트엔드 부트캠프를 진행하면서 리액트 초기세팅과 디렉토리 구조, 컴포넌트 구조 어떤게 더 보기 쉽고 효율적일지 궁금해져 정리해볼려고 한다! CRA 초기 세팅 후 폴더 구조 🔍node_modules : 프로젝트의 모든 패키지들이 설치되는 디렉토리 public: 정적 파일을 보관하는 폴더로, 빌드 시 파일들이 그대로 복사되어 빌드 결과물에 포함됨 src/: 애플리케이션의 소스 코드를 보관하는 폴더 assets/: 애플리케이션에 사용하는 이미지, ..

지난번에 리액트 포탈에 대해 공부하다 문득 의문이 들었다.리액트에선 포탈을 이용하여 모달이나 툴팁 등을 사용하는게 더 좋다라고 그러면 자바스크립트를 이용하는건 안되는건지 된다면 어떤 이유때문에 사용을 안하는지 알아보았다.  React Portalimport React, { useState } from 'react';import ReactDOM from 'react-dom';// 모달 컴포넌트const Modal = ({ children, onClose }) => { return ReactDOM.createPortal( {children} Close , document.getElementById('modal-root') // Portal을 ..

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은 클라이언트인 브라우저가 렌더링을 도맡아 처리하는 방식이다보니 서버에서 필요한 데이터를 한 번에 받아오고 받은 데이터를 브라우저가 렌더링하게 된다. 즉 모든 페이지를 한번에 불러와 로딩후 화면에 보여지고 페이지간 전환에 바로바로 반응이 가능해 페이지 이동시 깜빡임 증상이 거의 없다서버 부하가 적다 : ..

지난번 배열에 대해 공부하다 큐(queue), 스택(stack) 구조에 대해 알게되었는데 흐름만 알고 정확히 어떤걸 말하는지 몰라 이번 주제로 정했다!스택(Stack) 스택은 LIFO (Last In, First Out) 구조로, 가장 나중에 들어간 데이터가 가장 먼저 나오는 구조. 스택은 한쪽 끝에서만 데이터를 추가(push)하고 제거(pop)할 수 있다. 스택에서 사용되는 주요 연산push(): 스택의 맨 마지막에 데이터를 추가.pop(): 스택의 맨 마지막 데이터를 제거하고 반환.peek(): 스택의 가장 마지막 요소(가장 위에 있는 데이터)를 확인하지만 제거하지는 않는다. 스택 예시let stack = [];// 데이터 추가 (push)stack.push(1);stack.push(2);stack...

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