언젠간 진화하겠지!

contenteditable 속성 html속성 중 해당 요소를 편집할 수 있는지 나타내는 열거형 속성인데, true면 해당 속성의 값을 편집할 수 있다. 코드펜에서 contentEditable 아래 div요소를 클릭 시 focus되면서 수정이 가능함을 알 수 있다. See the Pen Untitled by Yunjin Lee (@sweesweett) on CodePen. 리액트에서 사용 시 contentEditable 속성을 추가했을 시, input처럼 변경사항을 onChange 이벤트 함수로 state로 관리할 수가 없다. 그리고 속성을 추가했을 시 아래와 같은 경고가 뜨게 된다. 이 때 contentEditable을 사용하면서 경고표시를 안나오게 하고싶다면 해당 요소에 suppressContentE..

요 10일간 귀가 들렸다 안들렸다해서 매우 힘들었었다. 곰팡이 때문이겠거니 하고 참고 소염 진통제를 먹고 나아지는줄 알았는데 어제 오늘 진통소염제를 먹어도 안되길래 다른 병원에 가니 돌발성 난청판정을 받았다. 잘못하면 귀가 멀어버린다는데 많이 두렵다. 관련 포스트를 보니 절대안정+ 소음을 듣지 말라고 해서 ... 1주일간 절대안정을 해야하는게 나을지도 모르겠다는 생각이 들었다. 최근에 리액트 공식문서를 읽으며 알고리즘을 풀었는데 알고리즘 스터디는 일주일 쉬는걸 건의해봐야겠다 많이 심란하다

오늘은 사담! 어제 이명이 너무 심하고 내목소리에도 고막이 터질 것 같고 웅웅 울려서 3시간 정도 경과를 보고 공휴일에 여는 병원을 열심히 찾아 병원에 갔다왔다. 지식인에 쳐보니 돌발성 난청일 수도 있대서 진짜 다급하게 갔던 것 같다. 병명은 부끄럽지만 귀곰팡이였다. 비위생적으로 귀를 후빌 때 생길 수 있다고하는데 손이나 면봉으로 쑤시지 말라고 경고를 들었다. 귀 사진을 보니, 절대 면봉으로 쑤시지 않으리 다짐했다. 너무 충격적이였다. 곰팡이 제거하는거 진짜 아프고.. 계속 귀 시큰거리고.. 다신(Never)... 오늘 어제보다 이명이 심하고 물 속에 있는듯한 느낌이었고, 엄마가 나한테 질문하는것도 안들려서 원래 가는 병원에 가서 다시 진료를 받았다. 의사샘이 어제 진료했던 의사 선생님이 대부분의 곰팡이..

기존의 state 객체 업데이트 state 객체를 업데이트 할 때, 중첩된 객체일 경우 얕은 복사가 되기 때문에 전개 연산자를 사용해 객체를 복사 한 후 업데이트를 해야한다. 예를 들면 기존 객체가 이런식이라고 치면 const initialState={ name:'yoon', information:{ age:24, university:'hangook', major:'economy' } } 기존에서 major의 값을 업데이트 하려고 할 때 setState({ ...obj, information:{ ...obj.information, major:'computer-engineering'} }) 이런식으로 처리를 해야한다. useImmer를 사용하면 중첩된 객체의 값을 직접 변경할 수 있는 것 처럼 보이기 때문..

오늘은 리액트의 상태관리에 대해 읽어보았다. 상태를 총 5가지의 상태로 분리하고, 설명해주는 글이었는데, 그 중 global state를 지양해야 성능 측면에서도 좋다는 내용이있었다. 정확하게 이해했는지는 모르겠지만... 다시 읽어보긴 해야할 것 같다. 원어민이 아니여서 그런지, 무슨말을 하려는지는 알겠는데 잘 설명이 되진않는다(잘 이해안됐나봄). 쨋든 나는 어떻게 상태를 관리했는지 다시한번 돌아보게 되는 글이었다. https://reacthandbook.dev/state-management State Management in React Applications - React Handbook Build As You GoBest for greenfield projects, POCs, and apps with..

공부를 하던 중 모달 영역 밖 클릭 시 모달을 닫히게 하는 방법이 내가 쓰던 방법과 라는 방법이 있다는 걸 알게 되었다. 기존에 쓰던 방법은 아래와 같다. 기존 방법 빈 div 태그에 onClick이벤트 활성화 const App=()=>{ const [ModalOpen,setModalOpen]=useState(false) return ( {modalOpen&&}) )} // 모달 컴포넌트 const Modal=({setModalOpen})=>{ return( setModalOpen(prev=>!prev)}/> ) } css .bg{ position:fixed; top:0; right:0; bottom:0; left:0; /* top:0,right:0,bottom:0,left:0을 하면 화면 꽉차게 된다*..

1. 어쩌다보니 7월에 블로깅을 하나도 하지 못했는데, 개인적인 집안 사정으로 일이 생겨서 제정신이 아니였다. 아직까지도 멘탈이 나가 있다. 2. 그사이 넥스트 챌린지에도 응시하고 그랬는데(망했음) 혼자서 다시 복기하면서 했음에도 불구하고 아직도 못풀고 있는 문제들이 있다. 근데 그게 화면상 구현이 됐긴 했는데, 나는 A로 구현을 하는데 테스트코드는 C? 이런느낌이여서 우선 넘어가도록 했다(나중에 다시 깔끔하게 수정해보기) 3. 강의 듣고 있는건 노션+ 코드샌드박스에서 적으면서 하는 중이라, 아마 어느정도 듣고 블로깅을 할 것 같다. 일때문에 한 2주일정도 못들었는데 8월이 시작하는 오늘 부터 조금 더 계획적이고 체계적으로 공부를 해야겠다 싶었다. next에서 props가 계속 헷갈리는데 props가 보..

아래의 문제를 풀어보다가 검색을 통해 알아보았다. 제너레이터는 여러 개의 값을 필요에 따라 하나씩 반환할 수 있다. 문법 구조 제네레이터 함수는 function 뒤에 *를 붙여 표기한다 function* function* thisIsGenerator(){ yield 1 yield 2 yield 3 return 19 } 일반 함수와 동작 방식이 다르며, 함수를 호출할 시 코드가 실행되는게 아니라 "제너레이터 객체"가 반환된다. next()를 통해 값을 가져올 수 있는데, next() 메서드를 호출할 때 가장 가까운 yield문을 만날 때 까지 실행이 계속 된다. 이후 yield문을 만나면 멈추고 value값이 반환된다. next()는 항상 아래와 같은 형태의 객체를 반환한다. {value:3, done:f..