yebeen blog

문제 상황 태그 내부의 옵션 중, 현재 상태값과 일치하는 옵션에 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"  ..

오늘은 싸피가 마무리된 기념으로좋았던 추억이 정말 많아서 정리해보려고한다!!아무래도 사업장안에 교육장이 있다보니보안스티커 부착이 필수였기에사진을 많이 안찍었는데많이 찍을 걸 후회했다 ㅜㅜ. 최대한 찍은 사진이라도 정리해야지… 싸피 본 교육 전 스타트 캠프때 했던 아이디어톤 ㅎㅅㅎ짧은 시간을 주고 팀원끼리 아이디어를 도출해정리하고 발표자료까지 만들어 발표를 해야했었는데시간이 너무 짧았어서 이걸 할 수 있나 ... 싶을 정도였지만사람은 할 수 있다하면 다 할 수 있는 것인지다들 겹치는 아이디어 없이 엄청난 발표를 했었다. 일등을 하면 다양한 상품을 주기도 했다 !! 나는 일등해서 서점 금액권을 받았다 ㅎ3ㅎ 그리고 이 활동 말고도 다양한 것들이 있는데대학때 안해봤던 활동이라정말 ...ㅎㅎ 신선하고 재미있던 ..

문제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;