저번주는 노트북이 고장나서 수리를 맡겨 TIL을 쓰지 못했다.. 오늘 부터 다시 차근차근 써야겠다... 오늘은 React LifeCycle에 대해서 다시 찾아보는 시간을 가졌다. 컴포넌트 리팩토링을 하면서 리렌더가 안되는 상황이 발생했기 때문이다. 컴포넌트의 로직은 1. getInitialProps를 사용하여 ssr로 데이터를 받아서 store에 저장 2. 그 값을 props로 컴포넌트로 내려준다. 3. 주문 취소 버튼을 누르면 api가 실행이 되고 버튼이 disabled로 변한다. 내가 여기서 간과했던것은 getInitialProps는 ssr이기 때문에 새로고침이 일어날 때만 렌더링 된다는 것이였고 FunctionComponent는 Props의 값이 변경 될 때만 re-render가 된다는 것이였다. ..

린트 설정이 끝났다고 생각했지만 오늘도 린트 에러와의 사투를 벌였다. 에러가 낫다가 사라졌다 왔다 갔다 하여 원인을 제대로 밝히지 못한 부분들도 있었다. redux 듀토리얼을 따라 코드를 치고 실행을 시켰지만 화면이 나오지는 않았다. 내일도 린트와의 사투를 벌이고 redux 를 잘 실행 시켜 보아야 겠다 ..

오늘은 웹팩을 이용한 환경설정을 해보았다. 부드럽게 되나 했더니 곳곳에서 에러가 터져 나왔다. 1.Module not found: Error: Can't resolve './Header' in 'C:\\Users\\frontend\\webpack\\react-webpack\\src' tsx 컴포넌트를 만들어 import하여 사용하려는데 프로젝트를 실행시킬때 해당 에러가 나타났다. webpack config에서 resolve 설정을 해주어 해결할 수 있었다. resolve:{ extensions: ['.ts','.tsx','.js'] }, 2.linebreacker error 코드가 끝나는 부분마다 에러 표시가 나타났다. linebreak 설정과 관련된 에러였다. 아래 설정을 통해 해결할 수 있었다. "l..

주문 취소 페이지에서 주문 취소 버튼을 누르면 다이얼로그가 뜨고 거기서 확인을 누르면 api가 실행이 돼 주문 취소 요청이 전달된다. 이때 formik으로 validation 체크를 진행해주어야 해서 formmik action을 사용해야 했다. 다이얼로그 컴포넌트를 가져와 다이얼로그 컴포넌트 내 버튼으로 함수를 넘겨주어 실행 시켜 주려고 하였다. 하지만 formikaction 객체와 해장 form의 값을 넘겨 줄 수 없어서 다른 방법을 찾아야 했다. 다이얼로그에 주문취소 컴포넌트에서 만든 버튼들을 넘겨주는 방식을 취해보았디만 역시 함수가 실행 되지 않았다. 그래서 새로운 컴포넌트를 만들고 useFormikContext 이용해서 submitForm을 가져와 다이얼 로그로 넘겨주는 방식으로 해결하였다. im..

Order 폴더네 컴포넌트에서 사용하는 값들의 타입을 전부 정의하는 작업을 했다. 타입 폴더에 Order.d.ts 파일을 만들어 namespace로 타입을 정의해 주었다. 중복되는 부분들은 따로 빼줄까 싶었지만 크게 중복되는 부분은 없어서 따로 처리하지는 않았다. 체크 API 연결시 데이터 값이 맞지 않아 에러가 발생하여서 수정해 주었다.

오늘은 css와 사투를 벌이고 왔다.... 컴포넌트 로직 짜는거 보다 css 적용하는게 더 힘든 것 같다. 이미지와 텍스트를 정렬해 주기 위해서 이미지와 텍스트를 로 감싸주고 각각을 로 감싸는 형태로 만들어 주었다. 제일 최상위 에 width:100% 속성을 준다.그리고 이미지와 텍스트를 감싸고 있는 각각의 에 display: inline-block 과 width 속성을 적용해준다. width 속성은 image에 30%, text에 70% 이런 식으로 합이 100%이하가 되도록 지정하면 된다. 그러면 일단 이미지와 텍스트가 가로로 정렬이 될것이다. 그리고 이미지 윗부분과 텍스트 윗부분이 일직선으로 정렬이 안되는 경우가 있을 수 있는데 이때 이미지와 텍스트에 vertical-align:top 속성을 주면 ..