yebeen blog

방치해 뒀던 블로그 부활 ...일상 글 중에비공개글로 돌려놓고아직 마무리하지 못한 글만 수두룩하다...일단 11월이라도 먼저 쓰고나머지는 천천히 써야겠다. 학원 알바하면서 내 출근룩 포토존...진짜 옷 입는 거에 따라애기들 반응이 다양했었다. 한동안 감기 때문에 대충 입고 다니다가다시 좀 꾸미고 가니까칭찬 파티 ^ㅁ^ ...꾸미고 갈 맛이 났었다. 현금 가지고 있어서 카드로 옮기러우체국 갔는데문 열림 버튼이 분명 있다는데어디있다는거에오? 결국 못 찾고돈도 못 넣고 왔었다... 한창 다시 불닭에 빠져서열심히 먹어줬다.근데 하도 저녁을 안 먹어 버릇했더니이제 작은 컵으로도 만족이 되었던.. 잇샌드 샐러드 진챠 맛있는 거온 세상이 알아줬으면 좋겠다…돈만 많으면 맨날 먹고싶움 ㅠ학원 일..

문제 상황 태그 내부의 옵션 중, 현재 상태값과 일치하는 옵션에 selected 속성을 조건부로 삽입했지만, 페이지가 렌더링 된 이후 항상 "total" 옵션이 선택되어 있었다.예를 들어, 아래와 같은 코드에서 sortBy 값이 "fun"인 경우에도 "total"이 선택된 상태로 나타났다.console을 찍어보면 sortBy는 "fun"으로 정확하게 전달되고 있었지만, 실제 에서는 "total"이 선택된 상태였다.this.template = () => { return ` Total Cost Fun `;}; 원인이 문제의 핵심 원인은 selected 속성이 HTML 파싱 시점에서만 적용된다는 점에 있다.브라우저는 요소가 HTML로 파싱될 때, selected ..

'한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지'라는 강의를 들으면서 마주했던 문제이다.순수 자바스크립트로 SPA를 구현하면서 마주한 문제이다. 분명 다 맞게 작성했다고 생각했는데 실행 후 개발자모드로 콘솔을 보면 제목과 같이 MIME 타입 오류가 발생했다. 이전에 실습한 내용이랑 내용이 일치했기 때문에 더욱 미궁이었다. 원인결과적으론 모듈을 import할 때 확장자명을 붙이지 않아서 일어난 에러였다.리액트에서는 모듈 import 시 .js나 ./를 생략해도 문제가 발생하지 않았기에습관적으로 import 할 모듈 이름만 적고 엔터를 눌러 자동완성을 시켰다.그런데 이 자동완성에선 확장자를 붙여주지 않는 것이었다.... 하지만 순수 자바스크립트에서 모듈 import 할 때에는 리..

아~~~~~~~ 오늘의 사고.gitignore을 만들고 push했어야 했는데 깜빡하고 안 해버린 것이다. 이미 깃에 올린 후에 .gitignore에 해당 파일이나 폴더를 작성해도 아무 소용이 없다는 사실...왜!냐! 새로 추가한 파일을 무시하는 것이지 git에 이미 올라간 파일엔 효력이 없기 때문이다. 분명 언젠가 또 이럴 일이 있을 것 같아 미리 정리한다... 1. git의 인덱스에서 제거해 주기 --cached를 통해 Git의 인덱스에서만 삭제하는 것으로 로컬에는 남아있는다. git rm -r --cached node_modules## 동시에 제거도 가능git rm -r --cached node_modules dist 2. 변경사항 커밋git commit -m "Remove node_modul..

백준 문제풀고 해당 코드를 백준허브를 통해 자동으로 깃헙에 커밋하고있는데가끔씩 문제를 풀어도 누락되어 잔디가 안심어지는 현상이 발생한다...( 요즘 나의 삶의 낙인데 잔디 확인하러 깃헙 갔다가 비어있는 걸 보면 얼마나 화가 나던지 ㅜㅜ ) 그래서 어떻게 과거에 누락된 잔디를 심을 수 있는지 정리해두려고한다.매번 검색하기 너무 귀찮다 .. ㅎㅎ  1. 아래 명령어를 실행하기 전 그 날 풀었던 문제로 돌아가 재제출을 해 커밋되도록한다. 2. 환경변수로 Author와 Committer 날짜를 모두 원하는 날짜와 시간으로 변경export GIT_AUTHOR_DATE="2025-01-06T20:57:30+09:00"export GIT_COMMITTER_DATE="2025-01-06T20:57:30+09:00"  ..

문제backgroun-color를 설정할 때 padding까지 배경색이 먹는 문제 발생  해결책다음과 같은 속성 사용하기 background-clip: padding-box;  추가정보background-clip의 값은 padding-box, border-box, content-box가 있다.- padding-box : 배경색이 padding+content에 영향을 미친다.- border-box : 배경색이 border+padding+content에 영향을 미친다.- content-box : 배경색이 content에 영향을 미친다.    [ 참고 ] https://www.w3schools.com/cssref/css3_pr_background-clip.php W3Schools.comW3Schools off..

useRef란? 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook로컴포넌트의 최상위 레벨에서 useRef를 호출하여 ref를 선언한다. const ref = useRef(initialValue)initialValue- ref객체의 current  프러퍼티 초기 설정값으로 어떤 유형의 값이든 지정할 수 있다.- 단 초기 렌더링 이후부터는 무시된다. 반환값- 단일 프로퍼티를 가진 객체를 반환한다.- current    처음에는 전달한 initialValue로 설정된다.    값을 변경할 수 있다.    하지만 state와 다르게 리렌더링을 유발하지않는다.    ref객체를 jsx노드의 ref 어트리뷰트로 react에 전달하면 react는 current 프로퍼티를 설정한다.- 다음 렌더링에서 u..

Zustand란?상태 관리 라이브러리 중 하나로, 작은 패키지 크기와 직관적인 사용법이라는 장점을 가지고 있다.특히 ContextAPI를 사용할 때와 달리 상태 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.state가 변경될 때마다 React컴포넌트를 업데이트한다.   JavaScript에서 사용하기1. Zustand 설치# NPMnpm install zustand# Yarnyarn add zustand  2. store 생성하기스토어를 생성하기 위해 create 함수를 사용한다.스토어는 상태 변수와 해당 상태를 업데이트하는 액션(함수)으로 구성되어있다.    ex_버튼을 선택하는 함수와 count를 증가시키는 함수, count를 리셋하는 함수 작성import create from "zus..

useMemo란?useMemo는 재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 React Hook  예시코드calculateValue- 캐싱하려는 값을 계산하는 함수- 순수해야한다 → 인자를 받지않고 모든 타입의 값을 반환할 수 있어야한다.- 만약 다음 렌더링에서 dependencies가 바뀌지않았으면 동일한 값 , 바뀌었으면 calculateValue를 호출const cachedValue = useMemo(calculateValue, dependencies);    예시코드해당 코드는 TodoList가 상태를 업데이트하거나 부모로부터 오는 새로운 props를 받으면 filterTodos가 실행된다.function TodoList({ todos, tab, theme }) { const visibl..

게시판 같은 곳에 텍스트의 길이가 너무 길어져 텍스트가 담긴 공간을 넘어가글씨가 댕강 잘리거나  문제가 발생한다.그러면 당연히 예쁘지않다!!!!! 그래서 말 줄임표를 주로 사용하는데 사용하려할때마다 까먹어서 기록해둔다...white-space: nowrap;overflow: hidden;text-overflow: ellipsis;