메리크리스마스..... 다시 토마토 [ 토토 ] 를 키우기 시작했다. 지난번 메마른 땅 사태 이후 이번엔 더 신경써서 반드시 토토의 열매를 볼 수 있게 키워내야지 우선 많이 심으면 서로 싸울 수 있기 때문에 4개만 심었다. 설마 4개중 하나가 싹이 자라지 않을까?? 기대중!

양귀자 선생님의 모순을 읽었다. 국내 고전 ( 내 기준 아기 / 학생 시절 나온 책은 고전임 아무튼 고전임 )을 처음 읽었는데, 책 자체는 재밋었다. 전체적인 줄거리는 여주인공이 남자 두명을 두고 고민하는 내용이 베이스에 친척과 가족의 이야기가 나온다. 처음에는 거짓말을 하면서 남자를 만나는 여자 주인공을 정말 싫어해서 이를 갈면서 읽었다. 자신의 환경을 거짓말로 속이고 이모를 엄마라고 소개하는...! 또한 부모님의 결혼기념일과 같은 이모의 결혼기념일을 축하하려고 집을 가지 않고 이모의 집으로 가버리는 !!!!!! 내가 정말로 싫어하는 ( 2번이나 언급! ) 유형의 여자다. 근데 계속해서 생각해보니 내가 주인공과 같은 상황에서 주변 환경을 탓하지 않고 현실의 나처럼 살아갈 수 있을지 생각해보면 그럴 수 ..

프론트엔드 개발을 하다보면 컴포넌트를 만들 때 컴포넌트를 만들다보면 유사한 디자인에서 조금 조금씩 다른 부분이 존재한다. 이런 경우 각각의 컴포넌트를 다 만들기에는 동일한 기능이 많고 반복되는 코드로 인해 추후 유지 보수를 하는 경우 하나의 기능을 수정해야 하는 경우 관련된 모든 곳을 수정하는 불편함이 존재한다. const OuterFrameOne = () => { return ( ); }; const OuterFrameTwo = () => { return ( ); }; 코드로 구현하면 다음과 같은 방식으로 나올 것이다. outerFrame과 frame 부분은 동일한데 아래 텍스트 부분이 달라서 새롭게 만드는 경우도 있다. 이렇게 된 경우 앞서 말한 것처럼 outerFrame이 변경되는 경우 OuterF..

※주의 ※ 칭찬은 거의 없습니다. 세계의 끝과 하드보일드 원더랜드 1권과 2권을 읽었다. 하루키 책을 보는 것은 이번이 처음은 아니고 1Q84를 학생때 보다가 포기한 전적이 있다. 특별히 하루키에 대한 생각은 없었는데 이번에 읽고 나쁜쪽으로 많은 생각을 하게 되었다. 책 내용은 SF 내용이라 크게 불편함은 없었지만 인물에 대한 TMI가 너무 많아서 고통스러웠다. 스토리에 영향이 있는 내용이라면 기분 나쁨을 감수하고 읽고 부정적인 생각까진 들지 않겠지만 내가 어째서 주인공의 성적 취향을 자세하게 알아야 하는지 모르겠다. 본인이 뚱뚱한 여성을 좋아하는 것에 대한 내용을 내가 왜 알아야하는데!! 심지어 책이 끝날때쯤엔 해당 여성과는 전화 한통이 끝! 내 책 읽는 방식과 식견이 좁아서 이정도밖에 생각하지 못할 ..

자바스크립트에서 객체를 사용할 때 data && data.list.map 과 data?.list.map 을 사용하는 경우가 있다. 둘다 작동되는 것은 동일한데 어떤 경우에 뭘 사용하는게 좋을까? data && data.list.map && 는 data가 truthy한 값 ( null, undefined, false, 0, NaN, "" [ 빈문자열 ]이 아닌 값 )일 때 data.list.map을 실행한다. 여기서 data는 truthy한 값을 가지고 있지만 data.list가 없으면 data.list.map은 오류를 발생시킨다. data?.list.map ? 는 data가 null 또는 undefined가 아닌 경우에만 data.list.map을 실행시킨다. 만약 data는 존재하지만 data.list..

Effect는 React 패러다임에서 벗어날 수 있는 탈출구이다. Effect를 사용하면 React의 외부로 나가서 컴포넌트를 React가 아닌 위젯, 네트워크 또는 브라우저 DOM과 같은 외부 시스템과 동기화할 수 있다. 즉, 외부 시스템이 관여하지 않는 경우에는 Effect가 필요하지 않다. 불필요한 Effect를 제거하면 코드의 가독성이 좋아지며, 실행 속도가 빨라진다. 또한 오류 발생률도 줄어든다. 불필요한 Effect를 제거하는 방법 Effect가 필요하지 않는 경우는 일반적으로 2가지가 있다. ▶ 렌더링을 위해 데이터를 변환하는 경우. 예를들어, 목록을 표시하기 전에 필터링을 하고 싶은 경우를 가정해보자. 목록이 변경될 때 상태 변수를 업데이트하는 Effect를 작성하고 싶을 수 있다. 하지만..

자바스크립트에서 이벤트는 아주 많이 사용되는 녀석이다. 사용된다고 말할 수준이 아닌 뺄 수 었는 녀석이다. 이때 JavaScript의 이벤트는 자식에서 부모로 전파가 된다. 이것을 버블링이라고 하는데, 조금 더 자세하게 설명하면 요소에 이벤트가 발생하면 제일 상단의 요소를 만날 때 까지 모든 이벤트를 전파시킨다. 또는 a 태그는 클릭하면 페이지를 이동시키고, form 태그는 내부 입력값을 전송한다. 이것은 자식 요소를 클릭해도 동일한 기능을 한다. 이러한 이벤트 전파를 막아버리는 것이 바로 e.preventDefault와 e.stopPropagation이다. e.preventDefault 앞서 이야기 했지만 form 태그나 a 태그는 각각 특수한 기능을 하고 있다. form은 form 안에 있는 입력 요..

React에서 슬라이드를 구현하는 방법 중 하나가 Swiper 라이브러리를 사용하는 것이다. 간단한 기능은 구현하는데 어려움이 없으나 개발하다보면 특이한 기능이 필요한 경우가 있다. 그런 기능을 직접 구현해보면서 아카이빙할 계획이다. 일반적인 Auto Play 컴포넌트이다. // ... 몇가지 옵션을 필요에 따라 줄 수 있겠지만 Auto Play를 위한 옵션만 주었다. ( 옵션 설명 생략 ! ) Pause Resume 먼저 자동 재생 기능을 사용하면 Progress가 나오는 경우가 있다. 다음 스크롤로 언제쯤 이동되는지 알려주는 기능이다. 해당 기능은 이미 Swiper의 데모에 잘 나와있는데, const handleAutoplayTimeLeft = (s, time, progress) => { progre..