타코따코의 1인 개발 스튜디오

useState 데이터 변경,비동기, if 분기 불가, 동기적 시행 가능 호출 → 즉시 UI 변경 X → 이벤트 핸들러에 스케쥴 등록 (함수가 끝나야 변경, 그 사이 변경 안됨)top level 에서만 사용 (if문, 분기 처리 등에서 useState() 사용 불가) → 리액트가 트리 이해 못 함. → 첫 로드에는 에러가 없지만 리랜더링시 에러 발생.비동기setState 여러번 호출해도 리랜더링 종료 후 한번만 바뀜 (중간에 콘솔 찍으면 변화가 없음)동기적으로 진행하고 싶다면 → setCount((like)=>like+1) (이전 값을 명시적으로 표현)useState의 초기화에 함수가 필요한 경우.lazy 초기화 (function 사용) const [watched, setWatched] = useSta..

모델을 인터페이스로 만든다.type을 사용해 만들기도 하지만, 확장성 & 리팩토링을 고려하면 인터페이스가 좋다고 한다.  인터페이스로 만들다보니, 해당 객체를 만들고 imple 하는 방식으로 만들어야한다.Flutter에서는 모델을 만들때 class 로 만들어서 객체 안에 데이터를 저장하는 방식을 택했는데,인터페이스로 만들다보니 인터페이스를 받고, = {} 형태로 받아야하는게 아직 익숙하지 않은 것 같다.  const handleAddToCart = () => { const pizzaCartItem: PizzaCart = { id: pizza.id, name: pizza.name, quantity: 1, unitPrice: pizza.unitPrice, t..

성능 최적화(1) : memo, useMemo, useCallbackReact.memo : setState에 의해 랜더링 되는 경우, react.memo로 파싱되는게 원초적인 값이라면, 해당 하위 컴포넌트는 리랜더링 되지 않는다.setState에 의해 해당 ParentComponent가 새롭게 생성 → 해당 컴포넌트 랜더링ChildComponent도 리랜더링, → 하지만 setState에 의해 ChildComponent가 변경될 필요가 없다면memo를 사용해서 리랜더링 방지가 가능하다. (이전 값 계속 사용)장점 : 캐싱 사용 → 리랜더링 방지 → 속도 향상단점 : 값(string, boolean..)과 같은 원초적인 값만 적용, {}와 같은 객체 전달시 캐싱이 불가능이유 : 모두 새롭게 생성 → 새로운..

React가 리스트의 각 항목을 추적하는 데 사용하는 고유 식별키 존재한다는 뜻은 → 랜더링해도 DOM에 해당 컴포넌트가 존재한다는 것.컴포넌트의 키가 변경된다면 같은 위상, 같은 데이터여도 다시 랜더링된다.리스트에서 key를 추가하라고 하는 이유리스트에 새롭게 그려질때마다 같은 위상을 가지므로 모든게 매번 새롭게 그려짐 → 퍼포먼스 저하  key를 추가하면, 새롭게 그려진건 key값이 변화하기 전까지 새로 그려지지 않고 그대로 유지key값을 가진 데이터를 리셋시키고 싶다면 키를 지우는게 아닌 새로운 키 값으로 변경시켜줘야한다. 매번 새롭게 그려지는걸 막고 싶다면, (기존 데이터를 이용하고 싶다면)key를 써서 해당 부분이 다시 랜더링되는걸 고려해보면 좋을 것 같다.

React + JS에서 객체 업데이트를 해야한다면,**이렇게 말고**setPerson({ firstName: e.target.value, // New first name from the input lastName: person.lastName, email: person.email});**이렇게**setPerson({ ...person, // Copy the old fields firstName: e.target.value // But override this one}); 불변객체이기 때문에 직접 넣어 줄 수 없다.  ... 문법을 써야한다.  여기까지는 크게 불편하지 않는데, 객체 안에 객체가 있는 중첩 형태라면 꽤 귀찮아진다.  const [person, setPerson] = useState..

10월은 바빴다. 이사를 했고이력서를 업데이트했고지원도 해봤고내가 대단하다고 생각한 사람들도 만났고운동도 다시 시작했다 나는 두려움이 많다.가끔씩 잊어버리는데,두려움이 많아서 선택을 잘 못하는 스타일이다. 그래서 사실 이직을 할 생각을 못 했다.물론 준비는 했다.하지만 실제 이력서를 내본적이 없다. 그리고 오늘까지 약 10번 정도 지원했는데 다 떨어졌다.면접도 못 가고 서류면접에서 떨어진걸 봐서는무엇인가 문제가 있다. 그리고 지원하면서 면접자들이 어떻게 나를 판단할까 생각했는데,첫번째는 이렇다할 포트폴리오가 없다는점.두번째는 티스토리를 열어놓았지만, 20-21년도 자료만 있어서 내 현재 실력을 보여주지 못 한다는 점이다 코딩테스트를 하기 싫어 과제 면접을 보겠다는 놈이정작 면접자들의 눈에 띄기 위한 작업..

이번 프로젝트를 진행하면서 느낀게 있다. 왜 개발 책에서는 컴포넌트화를 중요시 했을까..그건.. 일정은 고정이고 예상했던 양보다 항상 더 많이 들어와서가 아닐까..? 생각해보면 프로젝트 동안 겪은 일들은 사실 처음이 아니다.이전에도 늘 겪었다.기존 기획보다 많아지고, 계속 추가되고, 디자인도 변경되고..개발자에 입문하는 순간 바뀌고 바뀌는건 기본이라고 생각하면 될 것 같다. 그럼 이게 기본이라고 생각하면,결국 대응해야한다.동일한 코드를 복붙해서 짜잔! 하고 만들 수 있지만사실 컴포넌트화를 잘 해서 들어갈 파라미터만 '자 이번엔 이 파라미터 먹어봐'로 바꾸면오히려 복붙이 더 깔끔하게 된다. 해당 파라미터만 변경해서 내가 원하는 UI와 데이터를 구성한다. 책에서 자주 들은 얘기고 실행도 해왔지만 이번 프로젝..

이번에 회사에서 말 그대로 사활을 건 프로젝트를 진행했다.이 프로젝트가 DAU, WAU에 영향을 주지 않으면 이게 진짜 마지막이다. 라는 선언하에 개발을 한 것 같다.개발에 의해 DAU, WAU가 좌지우지 된다기보다, 기획, 마케팅 쪽 영향이 더 크다는 것을 알고 있지만,그래도 회사에서 말한 이상 노력할 수 밖에 없었다. 결과론적으로 말하자면,개발하는데 걸린 시간은 총 3주 걸렸다.문제는 이 3주가, 주말 16시간 작업 + 평일 야근 근무 + 가끔 새벽 2시까지 작업을 통해 이루어진 결과물이라는 것이다.사실 저렇게 일한 이유는 회사가 사활을 걸었다. 이게 마지막이다! 라는 영향도 있었지만내 스스로 말한 일정에 책임을 지고 싶었다.이때까지 하면 될 것 같다.라고.당연하게도 그때 말한 시점의 기획 양을 10..

광화문 쪽에 살면서 여러 커피를 마시고 있다 블루보틀스타벅스컴포즈빽다방...빽다방, 컴포즈에서 내 전화번호로 쿠폰 등록해주는 동료분들에게 무한한 감사를..ㅋㅋ  공덕에 있을때는 경성커피가 진짜 맛있었는데이제 멀어져서 좀 아쉽다. 회사 출근하기 싫어도아침에 동료들과 커피 사러 가는 그 20분이 하루를 지켜주는 것 같다. 블루보틀의 커피도 맛있었는데, 사실 감성이 90%인 느낌이 들어서 한번 맛 보고 더 이상 갈 것 같지는 않다.  오늘의 점심은 탕수육과 짜장면을 먹었다.방심하면 점심값이 1.5가 나가는 무시무시한 광화문내일은 평단을 맞추기 위해서 샌드위치를 만들어서 가져가야겠다.

다시 서울로 GO인천 ~ 광화문 출근, 편도 1시간 20분의 거리는 감당하기 힘들었다.대표님과 재택근무에 대해 1 on 1을 두 번 정도 진행했지만 아쉽게도 실패했다.(정확히는 고려해보겠다.를 들은 후 재택근무에 대해 추가적인 이야기를 진행하지 않았다.)집에 도착하면 오후 9시, 씻고 밥 먹으면 오후 10시 반, 앉아서 유튜부 좀 보면 오전 12시.그리고 다시 자야하는 패턴이 반복되면서, 심적으로 많이 지쳤다. 대표님을 설득해서 재택근무로 하겠다는 생각보다일단 서울로 이사해서 출퇴근 시간을 줄여야겠다는 생각이 커지면서,네이버 부동산으로 집을 찾게 되었고, 원룸이 많은 관악구 쪽으로 이사를 결정하게 되었다.아직은 인천이지만, 곧 관악구로 이사해서 좀 통근이 줄면 숨통이 트일 것 같다.  좀 웃겼던건,1시간..