개발자_도전맨

뒤로가기 행동시 이벤트 발생 기능

도전맨 — Wed, 24 Apr 2024 22:11:06 +0900

const browserPreventEvent = (event: () => void) => {
  history.pushState(null, "", location.href);
  event();
};

 useEffect(() => {
    history.pushState(null, "", location.href);
    
      window.addEventListener("popstate", () => {
        browserPreventEvent( '이벤트 함수');
      });
      return () => {
        window.removeEventListener("popstate", () => {
          browserPreventEvent('이벤트 함수');
        });
      };
  }, []);

함수 선언: export const browserPreventEvent = (event: () => void) => {...};
- browserPreventEvent라는 함수를 선언하고, 이 함수는 하나의 매개변수 event를 받습니다. event는 함수 타입입니다.
- 이 함수는 브라우저의 현재 URL로 history 상태를 강제로 푸시하고, 제공된 event 함수를 실행합니다. 이는 뒤로 가기 이벤트가 발생했을 때 사용자 정의 동작을 수행하게 합니다.
useEffect 훅 사용:
- useEffect는 컴포넌트가 마운트될 때와 업데이트될 때 부수 효과를 실행하기 위해 사용됩니다. 여기서는 의존성 배열이 비어 있기 때문에 컴포넌트가 마운트될 때만 실행됩니다.
내부에서 history.pushState 호출:
- 컴포넌트가 마운트되자마자, 현재의 URL 상태를 다시 history 객체에 푸시하여 브라우저의 세션 기록에 현재 위치를 추가합니다.
window.addEventListener("popstate", () => {...}):
- 브라우저의 뒤로 가기 이벤트(popstate)에 대한 리스너를 추가합니다. 이 리스너는 뒤로 가기 버튼이 클릭될 때 browserPreventEvent 함수를 호출하여 onOpenStopBack 함수를 실행합니다.
정리 함수: return () => {...};
- useEffect 훅은 정리(clean-up) 함수를 제공할 수 있습니다. 이 예제에서 정리 함수는 컴포넌트가 언마운트될 때 실행됩니다.
- window.removeEventListener("popstate", () => {...})를 호출하여, 더 이상 필요 없는 이벤트 리스너를 제거합니다. 이는 메모리 누수를 방지하고, 불필요한 리스너가 계속해서 활성화되는 것을 막습니다.

프론트(front)에서 API 를 받을때 정적(static) 으로 하는 이유

도전맨 — Sun, 31 Dec 2023 14:04:59 +0900

앱 성능 향상: 정적 API는 미리 컴파일되어 있어 런타임 중에 동적으로 생성되는 것보다 훨씬 빠를 수 있습니다. 따라서 앱이 더 빠르게 데이터에 액세스할 수 있습니다.
보안 강화: 동적 API는 런타임에 생성되므로 앱의 보안에 취약할 수 있습니다. 정적 API는 미리 정의되어 있으며, 미리 정의된 권한과 규칙을 따르므로 보안 측면에서 높은 수준의 안전성을 제공할 수 있습니다.
캐시 및 최적화: 정적 API는 캐시될 수 있어서 동일한 요청에 대해 더 빠른 응답을 제공할 수 있습니다. 또한 미리 알려진 구조를 가지고 있어서 클라이언트 측에서 더 효율적으로 최적화될 수 있습니다.
서버 부하 감소: 동적 API는 요청이 있을 때마다 서버에서 응답을 생성해야 합니다. 반면에 정적 API는 이미 생성된 응답을 제공하므로 서버 부하를 감소시킬 수 있습니다.
개발자 경험 향상: 정적 API는 API의 구조와 기능이 미리 정의되어 있어 개발자가 더 쉽게 작업할 수 있도록 도와줄 수 있습니다.

python) 파이썬에서 백틱 사용법

도전맨 — Thu, 21 Dec 2023 22:12:10 +0900

파이썬 3에서 텍스트를 백틱(backticks)으로 감싸는 것은 파이썬에서 기본적으로 지원되지 않습니다. 백틱은 주로 다른 언어에서 문자열을 감싸는 데 사용되지만, 파이썬에서는 주로 작은따옴표(')나 큰따옴표(")를 사용하여 문자열을 나타냅니다.

text_in_quotes =
'이 텍스트는 작은 따옴표로 감싸여 있습니다.'
text_in_double_quotes =
"이 텍스트는 큰 따옴표로 감싸여 있습니다."

text_with_backticks =
''' 이 텍스트는 여러 줄에 걸쳐 있고, 백틱이 필요하지 않습니다. '''

이것은 여러 줄의 문자열을 표현하는 편리한 방법이며, 백틱과 유사한 효과를 얻을 수 있습니다. 파이썬에서는 일반적으로 이러한 문자열 리터럴을 사용하여 텍스트를 나타냅니다.

Python) pprint과 print 차이

도전맨 — Thu, 21 Dec 2023 22:11:15 +0900

pprint과 print은 둘 다 파이썬에서 사용되는 출력 함수이지만, 주로 출력 결과의 가독성과 포맷에 차이가 있습니다.

print 함수:
- print 함수는 간단한 방식으로 값을 출력합니다.
- 출력 결과는 한 줄에 나타나며, 복잡한 데이터 구조의 경우 가독성이 떨어질 수 있습니다.출력:
  {'name': 'John', 'age': 30, 'city': 'Seoul'}
  
  data = {'name': 'John', 'age': 30, 'city': 'Seoul'} print(data)
pprint 함수:
- pprint은 'pretty-print'의 줄임말로, 데이터를 보기 좋게 출력하는 데 사용됩니다.
- 출력 결과가 들여쓰기와 줄 바꿈으로 구성되어 있어 복잡한 데이터 구조도 더 쉽게 이해할 수 있습니다.출력:
  {'age': 30, 'city': 'Seoul', 'name': 'John'}
  
  from pprint import pprint data = {'name': 'John', 'age': 30, 'city': 'Seoul'} pprint(data)
- pprint은 딕셔너리, 리스트 등과 같은 중첩된 데이터 구조를 더 잘 다루며, 출력을 보기 좋게 정렬하여 제공합니다.

일반적으로, 디버깅이나 데이터 구조를 이해하기 위해서는 pprint을 사용하는 것이 유용하며, 단순히 빠르게 값을 확인해야 할 때는 print를 사용할 수 있습니다.

aria-label 의 설명과 SEO와의 관련성

도전맨 — Thu, 14 Dec 2023 22:48:55 +0900

aria-label은 웹 접근성을 향상시키기 위해 사용되는 중요한 속성 중 하나입니다. 이 속성은 HTML 요소에 추가되며, 화면 판독기와 같은 보조 기술을 사용하는 사용자들에게 해당 요소의 목적이나 내용을 설명하는 데 도움이 됩니다. aria-label을 사용함으로써 시각적으로 보이지 않는 요소에 대한 정보를 전달하고, 웹 페이지를 사용하는 데 있어서 더 나은 경험을 제공할 수 있습니다.

aria-label은 주로 웹 접근성을 향상시키기 위한 목적으로 사용되며, 이는 주로 시각적으로 표현되지 않는 요소에 대한 정보를 제공하는 데 중점을 두고 있습니다. 그러나 aria-label은 검색 엔진 최적화 (SEO)와 직접적인 관련이 있는 것은 아닙니다.

SEO는 주로 웹 페이지의 콘텐츠와 구조, 메타데이터, 키워드 등에 영향을 받습니다. aria-label은 웹 페이지의 시각적인 표현이나 사용자 인터페이스에 영향을 미치는 것이 아니라, 웹 접근성을 향상시키는 데 주로 사용되기 때문에 SEO와 직접적인 상관관계가 없습니다.

SEO를 개선하려면 주로 적절한 키워드 사용, 링크 구조 최적화, 콘텐츠의 품질 향상 등에 중점을 두어야 합니다. aria-label은 웹 접근성을 고려하는 데 유용하지만, SEO 측면에서는 다른 방법과 전략을 사용해야 합니다.

flutter) CocoaPods not installed

도전맨 — Sun, 29 Oct 2023 12:34:14 +0900

sudo gem install cocoapods

sudo gem install -n /usr/local/bin cocoapods

sudo gem install activesupport -v 4.2.6

pod setup

이정도만해도 해결됨

4번 뒤에 과정도 있지만

4번까지 flutter 인식됨

이래도 안되면 중요한거는

ruby 최신버전으로 업데이트 해야한다

출처

https://stackoverflow.com/questions/20755044/how-do-i-install-cocoapods#comment61936592_34468906

command not found brew, node, dart, flutter

도전맨 — Sat, 28 Oct 2023 22:19:09 +0900

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

로 브리뷰 설치

brew 읽기 경로 수정

특정 버전에서 Brew는 Intel 기반 Mac의 경우 '/usr/local/bin' 디렉터리에 설치되는 반면, M1/M2 Mac의 경우 Brew는 '/opt/homebrew/bin' 디렉터리에 설치됩니다. 이러한 차이로 인해 Brew 명령을 사용할 때 "zsh: 명령을 찾을 수 없음: Brew"라는 오류 메시지가 나타날 수 있습니다.

cd ~/
touch .zprofile
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> $HOME/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

위에서 차례대로 한개씩 명령어 시도

다시 brew 읽기 시도

참조

https://techsviewer.com/how-to-install-brew-on-macos-sonoma/

node 최신버전(노드 최신버전) 설치했는데, 인식 못할때

도전맨 — Fri, 27 Oct 2023 22:09:12 +0900

n install lts

했는데,

으로 설치한 위치와 작동하는 위치가 달랐다

그래서

nvm ls

해도 최신버전을 못 찾았다

다음 명령어로 환경 변수를 수정할 수 있습니다.

export PATH=$PATH:/usr/local/bin

다시

n install lts
nvm ls

하면 최신 노드 버전이 설치된 것을 볼 수 있다

NextJS) Would you like to customize the default import alias (@/*)?

도전맨 — Fri, 27 Oct 2023 12:36:13 +0900

이 문장은 특정 프로그래밍 환경이나 프레임워크에서 기본적으로 설정되어 있는 "import alias"나 "import 경로 별칭"을 사용자가 변경하고자 할 때 묻는 질문입니다.
여기서 "import alias"나 "import 경로 별칭"은 코드에서 다른 파일이나 모듈을 불러올 때 사용되는 경로에 붙이는 짧은 별칭을 말합니다. 이러한 별칭을 변경하면 코드를 더 짧고 가독성 좋게 만들 수 있습니다. 문장은 사용자에게 이러한 별칭을 수정하고자 하는지를 묻는 것입니다.

json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

불러올때

import Header from '@/components/Header';

// 나머지 코드

JS)소수점 있으면 toFixed 없으면, 그냥 보여주도록 하는 로직

도전맨 — Wed, 25 Oct 2023 23:01:23 +0900

const formatNumber = (number:any) => {
  const roundedNumber = Math.round(number * 100) / 100; // 소수점 둘째 자리까지 반올림
  const isInteger = roundedNumber % 1 === 0; // 소수점이 없는지 확인

  if (isInteger) {
    return roundedNumber.toString(); // 소수점이 없으면 그냥 반환
  } else {
    return roundedNumber.toFixed(2); // 소수점이 있으면 둘째 자리까지 표시
  }
};