# MonthSub Refactoring

yooon26

특정 지점에서 스크롤이 위로 튕기는 버그 수정→ onKeyUp에는 이벤트를 안걸어주었더니 해결됐다 (정확히 어떤 이유 때문인지는 모르겠다..)하지만 위 방법을 적용했더니 새로운 버그가 생겼다..textarea의 높이가 늘어날 때 'auto'로 잠시 바뀌면서 윗부분이 가

yooon26

textarea가 입력된 텍스트가 길어지면 세로 스크롤이 생기는데,화면 전체에도 스크롤이 2중으로 생겨서 사용성이 좋지 못했다.textarea의 텍스트가 길어지면 스크롤이 생기는 것이 아닌 heigth가 늘어나도록 수정했다→ 키 입력 이벤트가 발생할 때마다 textar

yooon26

배열 타입은 객체로 변환되어서 length가 먹히지 않는다 이렇게 감싸줘야한다 https://www.delftstack.com/ko/howto/javascript/javascript-length-of-object/ for 문을 돌려 동적으로 key를 접근하려면

yooon26

MonthSub Refacroting 가격 입력값 한글형식으로 포맷 구현 시도1 문제점 만단위가 넘어간 갔을 때 '만'이 안 붙는다 WaffleCard Refactoring 카드 리스트 처음으로, 맨끝으로 이동시켜주는 버튼 구현 디자인이 마음에 안들어서 가이드 슬

yooon26

MonthSub Refactoring seriesForm의 가격 입력 input의 값을 1000단위로 ','가 찍히도록 포맷팅되는 기능을 구현했다 1000단위로 ,를 찍으려면 뒤에서부터 숫자를 3개씩 세면서 ,를 찍어야한다 onChange가 될 때마다 input값을 가

yooon26

TypeScript Project 스터디에서 알게 된 점 이벤트 해제 안해주면 돔 사라져도 계속 남아있다 이벤트는 처음 한번만 걸어주는 게 좋음 xss: innerHtml을 쓸 시의 보안 문제 domparser 텍스트를 돔으로 만들어주는 api 기존에

yooon26

코드스피치 스터디 프로그래밍의 흐름 language code machine language WaffleCard Refactoring overflow를 감지해 정렬 바꾸기 scrollHeight, clientHeight(ref로 접근)를 사용해 자식의 높이나 너비가 부

yooon26

블로그 정리MonthSub Refactoringinput:checked 선택자 사용 시 형제 선택자에서 button은 선택이 안된다중복되는 css를 mixin파일에 저장해서 중복을 제거했는데, styledComponent로 해결해봐야겠음MonthSub 회의타입스크립트

yooon26

탭에 대한 정보를 상수로 저장해서 사용하도록 리팩토링했다탭포인터 이동을 해야하기때문에 인덱스가 꼭 필요했고상수를 객체들이 들어있는 배열의형태로 만들어서 구현했다프로퍼티에 대한 인덱스를 구할땐 findindex함수를 사용했다피드백인덱스 정보가 유의미한 정보는 아니기 때문

yooon26

Semantic Web기계에게 친화적인 웹데이터베이스화 시키기 좋은 웹검색 엔진이 유의미한 것을 추출해서 다양하고 유효한 검색결과를 만들어내게끔하기 위해 Semantic하게 html문서를 짜야한다시맨틱 웹에서 css를 어떻게 사용하면 좋은가?보통 selector사용 시

yooon26

Like컴포넌트에 api호출, contextApi로직이 포함되어있어서 storyBook에 작성할 때 오류가 났다 page컴포넌트에서 호출한 후 props으로 내려줘야했는데 depth가 너무 깊고, 2개의 page에서 사용중이었기 때문에 비효율적이라는 생각이 들었다

yooon26

useForm을 쓸 경우 storybook에 어떻게 작성할까 -> onsubmit과 initialvalue를 페이지 단에서 props으로 받는다 useForm의 handleChange를 input의 name과 value로만 받아야하다는 고정 관념 때문에 그렇게 받아질

yooon26

포스트는 api에서 불러온 데이터가 아닌 더미를 넣어준다 args는 props에 컨트롤을 달아줄 때 사용하고, 컨트롤이 필요 없는 경우에는 그냥 props처럼 넣어줘도 된다 버전이 2개 이상 필요할 땐 템플릿을 만들고 arg를 따로 지정한다 -> 다른 중복 코드 작

yooon26

스토리를 만들기 위해 함수를 내보내는데,그 함수의 args속성에 props값들을 할당해주면args를 인자로 받아 해당props가 포함된 컴포넌트를 반환한다.args === propsprops이 아닌 args로 받는 이유는 컨트롤러를 사용한 실시간 컴포넌트 업데이트 때문

yooon26

MonthSub 1. export 시 한객체로 묶어서 내보낼 때의 문제점 문제점 모듈 관리가 mixin이라는 객체를 통해 되고 있다. mixin 객체를 사용했기 때문에, mixin을 사용하는 모든 파일에서 mixin 객체를 import해서 프로퍼티로 접근하게되는데,

yooon26

코드스피츠 float 타스 토이프로젝트 환경 설정 타스환경설정 웹펙, 바벨 scss typescript 웹팩은 설치하고 최소한의 옵션을 설정해줘야 한다 require('path') node.js이 기본으로 제공하는 path모듈로 설치 없이 사용가능 파일/

yooon26

MonthSub 리팩토링 UseCheckBox 훅 생성(로직 구현) checked의 초기값도 상태로 설정해야함 부모에게 상태를 전달해줄 때 매번 변화하는 상태를 전달해야해서 useEffect에 의존성을 걸어줬다 페이지 컴포넌트에서 props으로 데이터를 전달

yooon26

오늘 학습한 것 > 1. 코드스피치 스터디 css rendering 강의 학습 js 프로토타입에 대해 이해안갔던 부분 학습 monthSub프로젝트 컴포넌트, 반응형 코드 리팩토링 1. 코드스피치 - css rendering graphic system - 점찍는(화면

yooon26

api로 데이터를 불러왔을 경우의 부모-자식 컴포넌트 간 렌더링 과정이 이해가 가지 않았는데다른 할일이 많아서 넘겼다가 주말인 김에 알아보았다.리액트 라이프사이클 개념을 서치해서 자료를 찾아보았지만 내가 궁금했던 점이 명쾌하게 해결되지 않아서 직접 콘솔을 찍어보았다.c

yooon26

axios함수를 추상화하는 작업을 진행했다. axios create함수를 사용해 모든 api에 필요한 공통 속성들을 정의한 커스텀 axios를 만들고, 후에 리프레시 토큰 로직을 추가할 것을 대비해 interceptor도 적용해주었다. 메소드 이름과 각 메소드에 필