경북대 FE_이정민 5주차 Step3

README.md

@@ -1 +1,13 @@
 # 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편
+## 3단계 - 질문의 답변을 README에 작성
+
+### 5주차 질문
+
+1. Test code를 작성해보면서 좋았던 점과 아쉬웠던 점에 대해 말해주세요.
+: Test code를 제대로 써봤다고 말하기 부끄럽지만, 이걸 쓰기 위한 과정 자체가 좋은 코드를 만드는 데 도움된다고 깨달았습니다. Given-When-Then 기법을 사용하면서 내가 만들 함수의 동작 원리를 더 잘 이해했고 나아가 놓치기 쉬운 사소한 에러도 잡는 데 유용했습니다. 다만 아직까지 익숙하지 않아서 구현보다 테스트 코드를 작성하는 데 시간이 훨씬 더 많이 걸려 아쉬웠습니다.
+
+2. 스스로 생각했을 때 좋은 컴포넌트란 무엇인지 본인만의 기준을 세우고 설명해 주세요.
+: 과제를 구현하면서 속성값이 많아질 수록 컴포넌트의 특성이 특정 기능에 맞춰지기 쉽다는 것을 느꼈습니다. 이렇게 되면 구조도 복잡해져 협업하는 사람들이 이해하기에 어려움을 느낄 수 있겠다고 생각했습니다. 따라서 어디든 사용하기 좋도록 기본적인 틀은 갖추고 있되 상황에 따라 기능을 확장할 수 있는 유연성을 가진 컴포넌트가 좋다고 생각합니다.
+
+3. 스스로 생각했을 때 공통 컴포넌트를 만들 때 가장 중요한 요소 2개를 선택하고 이유와 함께 설명해주세요.
+: 저는 재사용성과 유연성이라고 생각합니다. 버튼 컴포넌트를 예시로 들면 클릭 이벤트나 스타일 등을 속성으로 받아들이게 해서 여러 페이지에서도 사용할 수 있되, 그때마다 내가 필요한 기능에 맞춰서 구체화할 수 있도록 유연성을 가지면 개발하는 시간이 훨씬 쉽고 줄어들 수 있기 때문입니다.

babel.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    '@babel/plugin-proposal-private-property-in-object'
+  ]
+};

craco.config.js

@@ -6,4 +6,18 @@ module.exports = {
       '@': path.resolve(__dirname, 'src'),
     },
   },
-};
+  jest: {
+    configure: {
+      preset: 'ts-jest',
+      testEnvironment: 'jsdom',
+      moduleNameMapper: {
+        '^@/(.*)$': '<rootDir>/src/$1',
+      },
+      setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+      transform: {
+        '^.+\\.(ts|tsx)$': 'ts-jest',
+      },
+      moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+    },
+  },
+};