티스토리

나 개발자 할래요

검색하기

블로그 홈

나 개발자 할래요

onetwothreechachacha.tistory.com/m

개발_자 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

로그인 성공? function solution(id_pw, db) { const [id, pw] = id_pw; for(let data of db) { const [db_id, db_pw] = data; if (id === db_id && pw === db_pw) { return "login"; } else if (id === db_id && pw !== db_pw) { return "wrong pw"; } } return "fail" } 다른 사람 풀이function solution(id_pw, db) { const [id, pw] = id_pw; const map = new Map(db); return map.has(id) ? (map.get(id) ===.. 공감수 0 댓글수 0 2025. 2. 4.
외계어 사전 function solution(spell, dic) {return dic.some(str => spell.every(s => str.includes(s))) ? 1 : 2;}console.log(solution(["z", "d", "x"], ["def", "dww", "dzx", "loveaw"]))처음 보는 some과 every에 대해 간략히 설명하자면..some: 리턴값이 1개라도 true 라면 true 반환every: 리턴값이 모두 true라면 true 반환 = 하나라도 false라면 false 반환 모를 땐 콘솔로 찍어보는게 답이다. 공감수 0 댓글수 0 2025. 1. 24.
숨어있는 숫자의 덧셈 (2) function solution(my_string) { return my_string.split('').filter(str => parseInt(str)).reduce((a, b) => +a + +b, 0);}console.log(solution("aAb1B2cC34oOp")) // 10실패: 1,2,3,4로 나옴 function solution(my_string) { let sum = 0; let currentNumber = ''; for(let char of my_string) { if(!isNaN(char)) { currentNumber += char; } else { if(currentNumber) { sum +.. 공감수 0 댓글수 0 2025. 1. 24.
useEffect와 useLayoutEffect 참고한 블로그...https://junghyeonsu.com/posts/useeffect-vs-uselayouteffect/ useEffect와 useLayoutEffect 차이점 (React) - 정현수 기술 블로그useEffect와 useLayoutEffect 차이점에 대해 알고 계셨나요.junghyeonsu.com https://medium.com/@jnso5072/react-useeffect-와-uselayouteffect-의-차이는-무엇일까-e1a13adf1cd5 [React] useEffect 와 useLayoutEffect 의 차이는 무엇일까?React 가 웹 프레임워크 시장에서 대세가 되면서, 많은 사람들이 웹 어플리케이션을 제작하기 위해 React 를 사용하고 있습니다. 특히, 2018년.. 공감수 0 댓글수 0 2025. 1. 16.
형 변환 숫자형으로 변환undefined → NaNnull → 0true / false→ 1 / 0string→ 0 / number / NaN 💡문자열의 처음과 끝 공백이 제거됨. 공백 제거 후 남아있는 문자열이 없다면 0 , 그렇지 않다면 문자열에서 숫자를 읽음. 변환에 실패하면 NaN alert( Number(" 123 ") ); // 123alert( Number("123z") ); // NaN ("z"를 숫자로 변환하는 데 실패함)alert( Number(true) ); // 1alert( Number(false) ); // 0 불린형으로 변환0 / "" / null / undefined / NaN→ false그 외의 값 → true 💡"0"과 " "같은 공백은 불린형으로 변환 시 true객체(.. 공감수 0 댓글수 0 2024. 12. 18.
리액트의 props와 state 참고한 블로그...https://studyingych.tistory.com/52 React Props, State 이해 및 사용법Props / State props 와 state는 React에서 데이터를 사용할 때 다루는 개념이다. 실습 코드샌드박스(https://codesandbox.io/s/dank-pond-pfyvq) 를 사용하여 실습 Props props는 부모 컴포넌트가 자식 컴포넌트에 값을studyingych.tistory.com https://kindjjee.tistory.com/102 props와 state의 차이점어제 custom component를 다루면서 props와 state 부분을 짚고 넘어가야겠더라고요! 그래서 chat gpt와 공식문서를 참조하면서 리액트 props와 state.. 공감수 0 댓글수 0 2024. 12. 18.
자료형 Number: 숫자를 표현합니다.정수, 소수, 그리고 Infinity, Infinity, NaN 등을 포함합니다.let num = 42; // 정수let pi = 3.14; // 소수let invalid = "hello" * 2; // NaNString: 텍스트를 나타냅니다.작은 따옴표, 큰 따옴표, 또는 백틱으로 감싸서 사용합니다.let str = "Hello, World!";let template = `Number is ${num}`;Boolean: 참과 거짓, 즉 true와 false를 표현합니다.let isTrue = true;let isFalse = false;Undefined: 변수를 선언했지만 값을 할당하지 않은 상태입니다.let a;console.log(a); // undefinedNull.. 공감수 0 댓글수 1 2024. 12. 17.
이벤트 루프 참고한 블로그...https://inpa.tistory.com/entry/🔄-자바스크립트-이벤트-루프-구조-동작-원리 🔄 자바스크립트 이벤트 루프 동작 구조 & 원리 끝판왕자바스크립트 비동기와 이벤트 루프 브라우저의 멀티 스레드로 작업을 동시에 Javascript는 싱글 스레드 언어라고 들어본 적이 있을 것이다. '싱글' 스레드라 한 번에 하나의 작업만 수행이 가능하inpa.tistory.com https://blog.toktokhan.dev/t-767eb0fa38f3 자바스크립트의 이벤트 루프(Event Loop)란?이벤트 루프(Event Loop)를 설명하기 앞서 JavaScript의 특징부터 알고 가야 합니다.blog.toktokhan.dev 이벤트 루프(Event Loop)자바스크립트에서 비동.. 공감수 1 댓글수 1 2024. 12. 17.
변수와 상수 var, let, const1. varES5 이전부터 사용된 변수 선언 방식 특징함수 스코프(Function Scope)재선언 가능재할당 가능변수 호이스팅(Variable Hoisting)2. letES6에서 도입된 변수 선언 방식 특징블록 스코프(Block Scope)재선언 불가능재할당 가능변수 호이스팅(Variable Hoisting)3. constES6에서 도입된 상수 선언 방식, 값을 변경할 수 없는 변수특징블록 스코프(Block Scope)재할당 불가능재선언 불가능변수 호이스팅(Variable Hoisting)참조형 데이터의 불변성 아님호이스팅(Hoisting)선언이 코드 상단으로 끌어올려지는 현상var는 변수를 선언과 동시에 undefined로 초기화함console.log(greeter); /.. 공감수 0 댓글수 0 2024. 12. 13.
tanstack-query의 stale time과 gc time 참고한 블로그...https://velog.io/@jasmine0714/React-Query-staleTime-vs-gcTime [React-Query] staleTime vs gcTime (구 cacheTime)이름이 gcTime으로 바뀌었는지 나만 몰라 나만~velog.io https://until.blog/@morethanmin/react-query의-staletime과-gctime-mkkwywz2 react-query의 staleTime과 gcTimereact-query에서 useQuery를 사용하면 staleTime과 gcTime 을 이용해 데이터를 효율적으로 다룰 수 있다. 둘의 차이점을 알아보자.staleTimeThe time in milliseconds after data is consid.. 공감수 1 댓글수 1 2024. 12. 13.
실행 컨텍스트 흠.. 항상 참고한 블로그 순으로 올렸는데, 이번은 이해하기 쉬웠던 순으로 올려봅니다.https://www.zerocho.com/category/JavaScript/post/5741d96d094da4986bc950a0 (JavaScript) 실행 컨텍스트 - 클로저와 호이스팅안녕하세요. 이번 시간에는 범위에 이어 실행 컨텍스트와 클로저에 대해서 살펴보겠습니다. 제가 지난 시간에 실행 컨텍스트가 제일 중요하다고 하면서 강좌를 마쳤습니다. lexical scoping과 이것www.zerocho.com https://gamguma.dev/post/2022/04/js_execution_context JS Execution Context (실행 컨텍스트) 란?코어자바스크립트를 읽고 얻은 지식 중 실행 컨텍스트, .. 공감수 1 댓글수 1 2024. 12. 12.
엄격 모드 JavaScript에서 코드 실행을 더 엄격하게 만드는 옵션"use strict" 설계 당시 유연하게 만들어져서 실수를 허용하는 경우가 많아짐 → 예상치 못한 버그 초래실수나 잠재적인 버그를 방지하도록 도와주는 "안전 모드" 선언되지 않은 변수 사용 방지"use strict";x = 10; // 에러 발생! (ReferenceError: x is not defined)let x = 10; // 정상 작동 어디에 사용해야 할까?모듈화된 코드에서는 기본적으로 엄격 모드가 적용되므로 추가할 필요 없음?레거시 코드를 작성하거나 수정할 때 실수를 방지하고 더 안전하게 만들고 싶을 때 유용 레거시 코드(Legacy Code)소프트웨어 개발에서 흔히 사용하는 용어로, 오래되었거나 기존 시스템에 속한 코드 현재 작동 .. 공감수 0 댓글수 0 2024. 12. 12.
reflow와 repaint의 차이점 참고한 것들..https://velog.io/@heelieben/JavaScript-Reflow-란-feat.-브라우저-렌더링 JavaScript | Reflow 란 (feat. 브라우저 렌더링)프론트 엔드 개발자라면 브라우저 렌더링 과정을 알아야한다. 그리고 브라우저 렌더링 과정에서 핵심은 reflow이다. DOM 요소를 다룰 때, reflow가 최대한 발생하지 않도록 조심해야 한다. 따라서 이velog.io https://enjoydev.life/blog/frontend/3-reflow-repaint 매끄럽게 동작하는 브라우저 만들기 - 렌더링 최적화 Reflow, Repaint어떻게 하면 웹 사이트를 더 매끄럽게 동작시킬 수 있을까요? Reflow와 Repaint에 집중해서 최적화 방법을 알아봅시다.. 공감수 0 댓글수 0 2024. 12. 11.
코드 구조 세미콜론서로 다른 문 구분 세미콜론 자동 삽입(automatic semicolon insertion)대부분의 경우,줄바꿈 = ‘암시적’ 세미콜론 줄 바꿈이 세미콜론을 의미하지 않는 경우alert(3 +1+ 2);"+" 로 끝나면, 그 줄은 '불완전한 표현식’이므로 세미콜론이 필요하지 않다는 걸 직감 → 정상 작동 추정하지 ‘못하는’ 경우alert("제대로 동작합니다")[1,2].forEach(alert)대괄호 [...]앞에는 세미콜론이 있다고 가정하지 않기 때문 → 에러 발생 공감수 0 댓글수 0 2024. 12. 11.
클로저 참고한 것들..https://www.youtube.com/watch?v=WbVVKY9CDP0 https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures#클로저closure 클로저 - JavaScript | MDN클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다. JavaScript에서 클로저는 함수 생developer.mozilla.org https://enjoydev.life/blog/javascript/6-closure JavaScript의 클로저(Closure)란? (feat. React의 useState)JavaScript의 클로저의 원리.. 공감수 2 댓글수 2 2024. 12. 9.
비회원과 회원 사용자의 폼 데이터 매끄럽고 안전하게 저장하는 방법 - 세션스토리지와 Supabase 활용 청첩장 제작 웹 어플리케이션은 회원과 비회원 사용자 모두에게 매끄러운 사용자 경험을 제공하는 것이 핵심입니다. 특히, 입력한 데이터가 예상치 못하게 사라지거나 저장되지 않는다면 사용자는 큰 불편을 겪게 됩니다.이번 글에서는 폼 데이터를 안전하게 관리하고 데이터 유실을 방지하기 위한 요구사항들을 해결하기 위해 Supabase와 세션스토리지(SessionStorage)를 활용하여 비회원 및 회원 데이터를 효과적으로 처리한 방법에 대해 다뤄볼 것입니다 🚩 요구사항 1: 비회원 사용자 데이터를 안전하게 저장하라!청첩장 서비스를 이용하는 사용자 중 상당수는 비회원으로, 데이터를 임시로 저장했다가 나중에 회원가입하는 경우가 많습니다. 이런 상황에서브라우저를 닫더라도 데이터가 유지되어야 한다.비회원이 회원가입하면 .. 공감수 2 댓글수 2 2024. 11. 20.
Carousel 캐러셀 구현리뷰 데이터를 기반으로 한 부드럽고 자연스러운 무한 캐러셀을 직접 구현해보려 합니다! 이번 글에서는 라이브러리를 사용하지 않고 자동 이동, 무한 순환 기능을 가진 캐러셀을 만드는 방법을 다뤄볼 것입니다 요구사항이 캐러셀은 사용자에게 리뷰 데이터를 기반으로 부드럽게 리뷰를 확인할 수 있어야 합니다.주요 요구 사항은 다음과 같습니다.자동 이동: 일정 시간이 지나면 자동으로 다음 리뷰 이미지가 표시됩니다.무한 순환: 마지막 이미지에 도달하면 처음 이미지로 자연스럽게 돌아가는 무한 캐러셀을 구현해야 합니다.이번 구현의 목표는 라이브러리를 사용하지 않고, 무한 캐러셀의 원리를 이해하며 직접 구현하는 것입니다. 다른 구현 방법 탐색수동 버튼 이동 : 좌우 버튼을 사용하여 사용자가 직접 이미지를 넘기는 방.. 공감수 1 댓글수 1 2024. 11. 7.
홈 - 리뷰 캐러셀(개수 및 위치) 우측 빈 공간이 생겼지만 웹화면에서 대략 위 사진처럼 잘린 카드 포함 9개까지 들어갈 것이라 예상됨카드 개수를 몇 개나 늘려야할까 고민 중6개읠 리뷰카드를 앞뒤로 6, 6, 6복제해보자라는 생각을 했다허허.. 화면에는 9개의 리뷰 카드를 보여줘야 하는데 그렇게 되면 중복된 리뷰들이 보이기 마련이다. 공감수 0 댓글수 0 2024. 11. 1.
홈 - 리뷰 캐러셀 (위치) 위 사진 처럼 1번 카드가 모니터상 가운데로, 양 끝에 6, 1번 리뷰가 보여야 하는데…위 사진처럼 보이는 이슈…. 수정 코드 1// 변경 전 const [currentIndex, setCurrentIndex] = useState(1); // 변경 후const [currentIndex, setCurrentIndex] = useState(0); 수정 코드 2// 변경 전 useEffect(() => { if (currentIndex === extendedReviewArr.length - 1) { setTimeout(() => { setCurrentIndex(0); }, 500); } }, [currentIndex, extendedReviewArr.length.. 공감수 1 댓글수 0 2024. 10. 31.
홈 - 리뷰 캐러셀 구현 확장 배열무한 캐러셀 원리(내가 생각한..)6개의 review 배열배열의 마지막 리뷰를 맨 앞에, 그리고 첫 번째와 두 번째 리뷰를 배열 끝에 추가한 확장 배열을 만듦 → 캐러셀이 무한히 돌아가는 것처럼 보이게 하기 위한 트릭카드가 천천히 이동하며, 위 사진처럼 6, 1, 2번 리뷰 카드가 화면에 보이는 시점에 6, 1, 2번 리뷰 카드로 빠르게 이어져 무한 슬라이딩이 가능하도록 함 마음처럼 잘 작동하지 않는 캐러셀 코드'use client';import Image from 'next/image';import { useEffect, useRef, useState } from 'react';const Carousel = () => { const extendedReviewArr= [reviewArr[rev.. 공감수 0 댓글수 0 2024. 10. 30.
마커 위도 경도 null 값 처리 몇몇 지도가 렌더링 되지 않는다.서버(ctrl c) & 로컬(캐시 비우기 및 강력 새로고침) -> 해결 안 됨아직 위도 경도가 채워지지 않은 식당들로 인해 문제가 발생한 건 아닌가 추측문제 발생 코드"use client"; import { Restaurant } from "@/types/info";import { useEffect, useState } from "react";import { Map, MapMarker } from "react-kakao-maps-sdk";import ReSetttingMapBounds from "./ReSetttingMapBounds"; type Props = { restaurants: Restaurant[];}; export default function Kaka.. 공감수 0 댓글수 0 2024. 10. 28.
3-4. Auth + MiddleWare MiddleWare미들웨어는 요청이 완료되기 전에 코드를 실행할 수 있는 기능 제공. 들어오는 요청을 기반으로 응답을 재작성, 리다이렉트, 요청 또는 응답 헤더 수정, 혹은 직접 응답 가능사용을 위해서는 app디렉토리와 동일한 위치, 프로젝트 루트에 middleware.ts파일 생성import { NextResponse } from 'next/server';import type { NextRequest } from 'next/server';// This function can be marked `async` if using `await` insideexport function middleware(request: NextRequest) { return NextResponse.redirect(new URL.. 공감수 0 댓글수 0 2024. 10. 25.
3-3. React Hook Form & w Zod Form을 안전하고 빠르게 개발하게 해주는 React Hook Form과 데이터 검증 라이브러리 Zod제어 컴포넌트 vs 비 제어 컴포넌트제어제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트함.React에서 변경할 수 있는 state가 일반적으로 컴포넌트의 state속성에 유지되며 setState()에 의해 업데이트 됨(...)이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 "제어 컴포넌트(controlled components)"라고 함제어 컴포넌트는 모든 Input이 변경될 때마다 리렌더링 됨import React, { useState } from 'react';function MyInput() { const [inputValue, setInputVa.. 공감수 1 댓글수 2 2024. 10. 24.
3-2. Parellel & Interception Routes Parellel Routes동일한 레이아웃 내에서 여러 페이지를 동시에 또는 조건부로 렌더링 할 수 있게 해줌. 이는 대시보드나 소셜 사이트의 피드, 상품 상세 모달 띄우기 같은 동적인 섹션에 유용Intercepting Routes인터셉팅 라우트 는 사용자가 페이지를 이동하지 않고도 특정 콘텐츠를 오버레이로 표시할 수 있게 해주는 라우팅 방식. 예를 들어, 피드에서 사진을 클릭하면 해당 삼품 사진이 모달로 표시됨이 때, URL이 인터셉팅 되어 원래 페이지의 레이아웃을 유지함. 하지만 URL을 직접 입력하거나 페이지를 새로 고침할때에는 전체 페이지가 렌더링 됨즉, 소프트 네비게이션을 할때에만 특정 라우트를 가로채서 다른 UI를 보여줌. 보편적으로 Parellel Route와 함께 사용되는 고급 라우팅 기법.. 공감수 3 댓글수 1 2024. 10. 23.
3-1. Next.js Caching Next.js의 가장 핵심적인 기능 CachingNext.js는 대부분의 영역에서 fetch 함수를 기반으로 캐싱한다.Next.js의 fetchAPI는 브라우저의 fetchAPI를 기반으로 Next.js에서 확장한 새로운 fetchAPI라 서로 비슷하면서도 다름.캐싱 진행 시점build 할 때 (Full Route Cache)요청 할 때(Data Cache)Full Route CacheNext.js는 빌드 시점에서 페이지를 렌더링하고 그 결과를 캐싱하는 Full Route Cacahe 기능 제공 이를 통해 서버는 매 요청마다 페이지를 다시 렌더링할 필요 없이, 미리 생성된 HTML과 데이터를 빠르게 제공할 수 있어 페이지 로딩 속도 크게 향상이 과정에서 Next.js는 서버에서 React의 API를 활용.. 공감수 0 댓글수 0 2024. 10. 21.
2-6. Next Js의 Asset 최적화 Next/Image를 이용한 이미지 최적화이미지는 일반적인 웹사이트 페이지 무게의 아주 큰 부분을 차지하며, 웹사이트의 LCP(Largest Contentful Paint) 성능에 큰 영향을 미칠 수 있음Next.js는 자동으로 이미지 크기를 최적화 해주는 이미지 컴포넌트 Image컴포넌트를 제공자동 이미지 최적화 기능크기 최적화각 긱기에 맞는 크기의 이미지를 자동으로 제공, WebP 및 AVIF와 같은 최신 이미지 형식을 사용시각적 안정성이미지가 로딩 될 때 레이아웃 이동을 자동으로 방지빠른 페이지 로드네이티브 브라우저 지연 로딩을 사용하여 이미지가 뷰포트에 들어올 때만 로드됨. 블러업 플레이스 홀더를 옵션으로 사용 가능.자산 유연성원격 서버에 저장된 이미지도 포함하여 필요에 따라 이미지 크기 조정로컬.. 공감수 6 댓글수 4 2024. 10. 18.
2-5. Error UI, Error Handling Next.js Error 핸들링Error Boundary하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 컴포넌트 트리 대신 Fallback UI를 보여주는 React 컴포넌트로, 렌더링 도중 생명주기 메서드 및 그 아래에 있는 전체 트리에서 에러를 잡아냄과거에는 컴포넌트 내부의 자바스크립트 에러를 정상적으로 처리할 수 있는 방법이 없었는데, 에러 바운더리를 설정해 주면 바운더리 내의 컴포넌트와 그 하위 컴포넌트에서 발생하는 에러를 감지해서 fallback UI를 띄움하지만이벤트 핸들러비동기적 코드(ex: setTimeout 혹은 requestAnimationFram 콜백)서버 사이드 렌더링자식에서가 아닌 에러 경계 자체에서 발생하는 에러이런 오류들은 캐치 못하고 다른 오류들만 캐치함Layou.. 공감수 2 댓글수 1 2024. 10. 16.
2-4. Suspense, Loading UI, Streaming SSR Next.js는 서버에서 데이터를 내려줘야 렌더링 됨굉장히 크고 느린 데이터가 있을 때 (서버 요청이 너무 느릴 때)비동기 데이터 로딩비동기적으로 데이터를 로딩하여, 페이지의 다른 요소들이 먼저 렌더링 될 수 있도록 하는 것데이터를 비동기적으로 가져오는 동안 로딩 스피너를 표시하고, 데이터가 준비되면 UI를 업데이트 할 수 있음'use client';import React, { useState, useEffect } from 'react'; import { Product } from '@/types'; const HomePage = () => { const [isLoading, setIsLoading] = useState(false); const [data, setData] = useState([]).. 공감수 4 댓글수 2 2024. 10. 16.
2-1. React Server Component & Client Component 기본적으로 app 폴더 하위의 모든 컴포넌트는 서버 컴포넌트서버 컴포넌트서버상에서 실행되는 컴포넌트컴포넌트의 실행 환경이 브라우저인지, 서버인지에 따라 서버 컴포넌트인지 클라이언트 컴포넌트인지 결정메서드 테스트를 통해 런타임 환경 이해하기alert서버 컴포넌트에서 (Node.js 런타임 환경)는 사용할 수 없음os.hostname서버 컴포넌트에서(Node.js 런타임 환경)사용이 가능// src>app>page.tsxexport default function Home() { // console.log("여기는 어디일까요?"); const os = require("os"); console.log("Hostname:", os.hostname()); return ( 안녕하세요. 넥스트입니다! );}클라.. 공감수 1 댓글수 1 2024. 10. 11.
1-7. 특별한 예약 파일들 Next.js에서는 라우팅을 폴더 기반, 즉 Nested Folders로 구현특정 경로 하위에 있는 라우팅은 모두 공통 layout 적용특정 컴포넌트가 로딩 중일 때, 오류가 발생했을 때 띄울 UI와 같은 특정 처리를 위해 생성되는 special fileslayout어떤 segment와 그의 자식 노드에 있는 요소들이 공통적으로 적용 받게 할 UI자식 노드에 있는 요소들이 공통 적용을 받아야 하기 때문에 반드시 children prop 이 존재해야 함동일 layout안에서 다른 경로를 계속해서 왔다 갔다 할 때 re-rendering 이 일어나지 않음. 따라서 headers, footers, sidebars처럼 유저가 경로를 마음껏 탐색하고 다녀도 굳이 바뀔 필요가 없는 경우 유용templatelayou.. 공감수 2 댓글수 0 2024. 10. 10.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.