Week7 #9

f0rever0 · 2022-12-22T02:39:32Z

✨ 구현 기능 명세

타스형 스터디에서 진행한 7주차 과제 타입스크립트로 만들어보기 입니다!
헤로쿠가 깨어나지 못해.... msw를 사용해서 구현해보았습니다!
msw로 get 요청을 보내 편지들을 받아왔습니다!

  const getLetters = () => {
    fetch("/letters")
      .then((res) => res.json())
      .then((res) => {
        const data = res.data;
        setletters(data);
      });
  };

🎁 PR Point

편지를 열었을 때 타이핑이 되는 기능을 useInterval 사용해 구현했습니다!

interface IUseInterval {
  (callback: () => void, interval: number): void;
}

const useInterval: IUseInterval = (callback, interval) => {
  const savedCallback = useRef<(() => void) | null>(null);
  
  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    function tick() {
      if (savedCallback.current) {
        savedCallback.current();
      }
    }

    let id = setInterval(tick, interval);
    return () => clearInterval(id);
  }, [interval]);
};

🤔 궁금한점

interface 타입명을 어떻게 해야할지 잘 모르겠어요! 타입명과 변수명이 같아져도 괜찮은가요?

export interface Letter {
  id: number;
  writer: string;
  title: string;
  content: string;
  passwordHint: string;
  password: string;
}

export interface LetterDataProps {
  letterData: Letter;
}
export interface UseInterval {
  (callback: () => void, interval: number): void;
}

파일 구조를 이렇게 하는게 맞을까요? ( type.ts의 위치를 잘 모르겠어요!)

./src
├── 📦 common
│   └── Router.jsx
│   └── type.ts
├── 📦 components
│   └── letterItem.tsx
├── 📦 mocks
│   └── browser.ts
│   └── handlers.ts
├── 📦 pages
├── 📦 util
│   └── useInterval.tsx
├── 📦 styles
│   └── globalStyle.ts
│   └── style.d.ts
│   └── theme.ts
├── index.tsx
├── App.tsx

왜 letter.tsx에서 letterData.letterData 로 값을 두번 풀어야하는걸까요?

이렇게 letters에서 각 아이템을 letterData로 넘기면 바로 letterData.id, letterData.writer로 바로 값에 접근할거라 생각했는데

letterData.letterData.id로 두번 값을 풀어서 접근을 하는 이유를 모르겠어요!

// mainPage.tsx
      <LetterContainer>
        {letters.map((letterData: Letter) => {
          return <Letter key={letterData.id} letterData={letterData} />;
        })}
      </LetterContainer>

// letter.tsx
const Letter = (letterData: LetterDataProps) => {
  const letter: Letter= letterData.letterData;

😎 구현 결과물

joohaem

진짜 멋지다 우영아!!!!!!!!!!!!!!!🔥🔥🔥🔥

interface 타입명을 어떻게 해야할지 잘 모르겠어요! 타입명과 변수명이 같아져도 괜찮은가요?

--> 앞에 I 를 붙이거나, 뒤에 Type을 붙이는 컨벤션이 초반에는 있었는데, 요즘은 이런 걸 빼고 그냥 앞에 대문자가 있으니 변수명처럼 명명해서 사용하더라구요! 잘 하신 듯 합니다

왜 letter.tsx에서 letterData.letterData 로 값을 두번 풀어야하는걸까요?

--> 그것은 ~ 서버가 넘겨주는 데이터 구조에 따라 다른 부분이라, 이후 작업 때 이런 의문이 드신다면 서버팀에게 구조를 왜 이렇게 짰는지 물어보면 될 것 같아요

이외에 보이는 부분들 코멘드 달아놨으니 확인해보고, 모르는 거 더 물어봐!!

msw 까지 해내고 굉장하다.. .

joohaem · 2022-12-22T23:46:32Z

week7/letter/src/App.jsx

+      <GlobalStyle />
+      <ThemeProvider theme={theme}>
+        <Router />
+      </ThemeProvider>


global style까지 theme provider로 감싸면, 전역 스타일에 theme 적용이 가능해요-

joohaem · 2022-12-22T23:48:07Z

week7/letter/src/common/type.ts

+export interface Letter {
+  id: number;
+  writer: string;
+  title: string;
+  content: string;
+  passwordHint: string;
+  password: string;
+}
+
+export interface LetterDataProps {
+  letterData: Letter;
+}
+export interface UseInterval {
+  (callback: () => void, interval: number): void;
+}


common 폴더의 의미가 어떤 것인가요?
Router와 type은 카테고리가 다르다고 생각해서 types 폴더를 따로 만들거나 common 폴더를 없애는 건 어떨까 합니다!

어디서든 공통으로 쓰이는것 같아서 묶어봤는데 안묶는게 더 낫다고 생각이 드네요! 서희가 말해준 것 처럼 types 폴더 내에서 페이지마다 관리하는게 좋을 것 같아요!

joohaem · 2022-12-22T23:48:46Z

week7/letter/src/common/Router.jsx

+import MainPage from "../pages/mainPage.tsx";
+import WritePage from "../pages/writePage.tsx";
+import EditPage from "../pages/editPage.tsx";
+import ErrorPage from "../pages/errorPage.tsx";


pages 폴더에 위치시켰으니 ~Page 라는 네이밍이 필요할까도 싶어요!

컴포넌트명은 대문자로 이루어져서, 파일명도 대문자 컨벤션을 지켜야하지 않을까 생각합니다

그러면 page/main.tsx 이렇게 명명을 해야 중복을 피하는 건가요?

joohaem · 2022-12-22T23:50:44Z

week7/letter/src/common/type.ts

+export interface LetterDataProps {
+  letterData: Letter;
+}


props 는 한 컴포넌트에서만 해당하는 타이핑이니, 전역으로 관리하는 것이 아닌 컴포넌트 상단에 선언해주는 건 어떨까요??

아..! 무조건 타입 선언은 types 폴더에 해서 불러왔는데 전역적으로 관리되어야하는 type들만 types 폴더에 넣어야하나요!??

@joohaem 엇 이거 궁금한데 보통 Props라는 네이밍은 하나의 컴포넌트에서만 해당할 때 주로 붙이는 건가요?!

joohaem · 2022-12-22T23:52:08Z

week7/letter/src/components/letterItem.tsx

+import { useInterval } from "../utils/useInterval";
+
+const LetterItem = (letterData: LetterDataProps) => {
+  const letter: Letter = letterData.letterData;


LetterDataProps 타이핑을 해줘서
letterData.letterData 는 Letter 로 자동추론 될 것 같아요
불필요한 타입선언은 되려 혼란을 야기할 수 있어요!!

그렇군요!! 정확하게(개발자의 의도대로) 자동추론 되는거는 개발자가 선언 안하고 넘겨도 되나요?

joohaem · 2022-12-22T23:53:26Z

week7/letter/src/components/letterItem.tsx

+  useInterval(() => {
+    if (isOpened) {
+      if (count >= letter.content.length) {
+        return;
+      }
+
+      setContent((prev) => {
+        let result = prev ? prev + letter.content[count] : letter.content[0];
+        setCount(count + 1);
+
+        return result;
+      });
+    }
+  }, 300);


isOpened 을 의존성 배열로 넣은 useEffect에 기술하는 게 불필요한 연산을 줄일 수 있을 것 같네요

joohaem · 2022-12-22T23:54:28Z

week7/letter/src/pages/mainPage.tsx

+    fetch("/letters")
+      .then((res) => res.json())
+      .then((res) => {
+        const data = res.data;
+        setletters(data);
+      });


axios 와 async-await 문으로도 연습해보는 것 추천드립니다!

joohaem · 2022-12-22T23:57:40Z

week7/letter/tsconfig.json

+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "jsx": "react" /* Specify what JSX code is generated. */,
+    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+    /* Modules */
+    "module": "commonjs" /* Specify what module code is generated. */,
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+    /* Emit */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+    // "removeComments": true,                           /* Disable emitting comments. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+    /* Interop Constraints */
+    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+    /* Type Checking */
+    "strict": true /* Enable all strict type-checking options. */,
+    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  },
+  "include": [
+    "src",
+    "src/reportWebVitals.ts",
+    "src/react-app-env.d.ts",
+    "src/index.tsx",
+    "src/styles",
+    "src/pages",
+    "src/common",
+    "src/components",
+    "src/assets"
+  ]
+}


정답은 아니지만 보편적으로 사용되는 tsconfig.json 설정들이에요
참고하고 본인에게 맞게끔 더 찾아보며 설정해봐요!

Suggested change

{

"compilerOptions": {

/* Visit https://aka.ms/tsconfig to read more about this file */

/* Projects */

// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */

// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */

// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */

// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */

// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */

// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */

/* Language and Environment */

"target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,

// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */

"jsx": "react" /* Specify what JSX code is generated. */,

// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */

// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */

// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */

// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */

// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */

// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */

// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */

// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */

// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */

/* Modules */

"module": "commonjs" /* Specify what module code is generated. */,

// "rootDir": "./", /* Specify the root folder within your source files. */

// "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */

// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */

// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */

// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */

// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */

// "types": [], /* Specify type package names to be included without being referenced in a source file. */

// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */

// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */

// "resolveJsonModule": true, /* Enable importing .json files. */

// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */

/* JavaScript Support */

// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */

// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */

// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */

/* Emit */

// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */

// "declarationMap": true, /* Create sourcemaps for d.ts files. */

// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */

// "sourceMap": true, /* Create source map files for emitted JavaScript files. */

// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */

// "outDir": "./", /* Specify an output folder for all emitted files. */

// "removeComments": true, /* Disable emitting comments. */

// "noEmit": true, /* Disable emitting files from a compilation. */

// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */

// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */

// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */

// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */

// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */

// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */

// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */

// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */

// "newLine": "crlf", /* Set the newline character for emitting files. */

// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */

// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */

// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */

// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */

// "declarationDir": "./", /* Specify the output directory for generated declaration files. */

// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */

/* Interop Constraints */

// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */

// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */

"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,

// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */

"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

/* Type Checking */

"strict": true /* Enable all strict type-checking options. */,

// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */

// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */

// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */

// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */

// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */

// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */

// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */

// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */

// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */

// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */

// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */

// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */

// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */

// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */

// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */

// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */

// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */

// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */

/* Completeness */

// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */

"skipLibCheck": true /* Skip type checking all .d.ts files. */

},

"include": [

"src",

"src/reportWebVitals.ts",

"src/react-app-env.d.ts",

"src/index.tsx",

"src/styles",

"src/pages",

"src/common",

"src/components",

"src/assets"

]

}

{

"compilerOptions": {

"target": "es6",

"lib": ["dom", "dom.iterable", "esnext"],

"baseUrl": "./src",

"allowJs": true,

"skipLibCheck": true,

"esModuleInterop": true,

"allowSyntheticDefaultImports": true,

"strict": true,

"forceConsistentCasingInFileNames": true,

"noFallthroughCasesInSwitch": true,

"module": "esnext",

"moduleResolution": "node",

"resolveJsonModule": true,

"isolatedModules": true,

"noEmit": true,

"jsx": "react-jsx"

},

// "include": ["src"]

"include": [

"**/*.ts",

"**/*.tsx"

],

"exclude": [

"node_modules"

]

}

더 공부해보겠습니다!!

Happhee

interface 타입명을 어떻게 해야할지 잘 모르겠어요! 타입명과 변수명이 같아져도 괜찮은가요?
나는 그건 헷갈려서 다르게 지어주는 편이야! 예를들면 export interface LetterInfo 정도로?!

파일 구조를 이렇게 하는게 맞을까요? ( type.ts의 위치를 잘 모르겠어요!)
타입은 보통 types폴더를 만들고 그안에서 .ts를 구분하는데 나는 보통 페이지 단위로 타입을 나눠! 개인성향차이지만, 만약에 page가 Home, Toy, MyPage 있으면 home.ts, toy.ts, mypage.ts

우영이 야무지게 잘하눈데?! 또 궁금한거 이씀갠톡죠!! ㅎㅎ

Happhee · 2022-12-23T04:51:34Z

week7/letter/src/components/letter.tsx

+  letterData: letter;
+}
+
+const Letter = (letterData: letterDataProps) => {


Suggested change

const Letter = (letterData: letterDataProps) => {

const Letter = (letterData: letter) => {

Write

로하면 데는거아닐까?!

letterData.letterData로 이중으로 letter 값이 받아져 오더라구,,,! 그래서 letter로 바로 타입을 주려고 하면 에러가 떠가지구,..!

Happhee · 2022-12-23T04:52:47Z

week7/letter/src/pages/mainPage.tsx

+
+export default MainPage;
+
+const Header = styled.section`


요기 시멘틱!! 챙겨주기 ㅎㅎㅎ

아앗 시멘틱 태그...! 항상 짚어줘서 넘 고마어!

Happhee · 2022-12-23T05:04:35Z

week7/letter/src/common/type.ts

@@ -7,8 +7,8 @@ export interface letter {
  password: string;
 }

-export interface letterDataProps {
-  letterData: letter;
+export interface LetterDataProps {


이거 왜 비슷한거로하나더 만들어찌?!

음,,, 어떤게 비슷하다는거지?! letterDataProps -> LetterDataProps 바꾼 이유말하는건가? 그거는 type 명을 대문자로 시작하게 통일하고 싶어서 수정했어!

seojisoosoo

우영이 멋찌다! useInterval, swal fire 요런 새로운 것들도 알아갈 수 있었어!! 타입스크립트 사용이랑 파일 구조도 왕 깔끔하다! 멋져!! 고생했어어❤️‍🔥

seojisoosoo · 2022-12-27T20:05:08Z

week7/letter/src/components/letterItem.tsx

+  const PasswordSwal = withReactContent(Swal);
+
+  const openModal = () => {
+    PasswordSwal.fire({


우왕! Swal fire는 처음보는데 신기하다!!

모달을 이런 방식으로도 만들 수 있구나!! 왕 신기해! 덕분에 배웠어!!

seojisoosoo · 2022-12-27T20:06:57Z

week7/letter/src/components/letterItem.tsx

+    font-size: ${({ theme }) => theme.fontSizes.title};
+    border: none;
+    background-color: ${({ theme }) => theme.colors.yellow};


우왕! theme도 야무지게 썼네 멋져!

seojisoosoo · 2022-12-27T20:08:16Z

week7/letter/src/mocks/handlers.ts

+      ctx.json({
+        id: 1,
+        writer: "익명",
+        title: "즐거운 크리스마스",
+        content: "해피해피 크리스마스",
+        passwordHint: "크리스마스",
+        password: "1225",
+      })
+    );


해당 데이터들이 두 번씩 사용되니까, dummy.json 이런식으로 따로 파일을 빼서 저장한 뒤에 불러와도 괜찮을 것 같아!

seojisoosoo · 2022-12-27T20:08:40Z

week7/letter/src/pages/errorPage.tsx

+import React from "react";
+
+const ErrorPage = () => {
+  return <div>404 Error</div>;


에러페이지까지 구현하다니! 진짜 꼼꼼하다! 최고야!

seojisoosoo · 2022-12-27T20:13:34Z

week7/letter/src/common/type.ts

@@ -0,0 +1,15 @@
+export interface Letter {
+  id: number;


호곡! 나는 편지마다 id 값을 넣을 생각을 못해서 인덱스로 접근했는데 맞네맞네 id 중요하지!!!! 꼼꼼하게 넘 잘했다아~

seojisoosoo · 2022-12-27T20:15:15Z

week7/letter/src/components/letterItem.tsx

+  const [isOpened, setIsOpened] = useState(false);
+  const [content, setContent] = useState("");
+  const [count, setCount] = useState(0);


요기도 타입 써주면 좋을 것 같아!! useState<boolean>(false), useState<string>(""), useState<number>(0) 요렇게!

woogisea · 2022-12-28T01:23:00Z

week7/letter/src/pages/mainPage.tsx

+        {letters.map((letterData: Letter) => {
+          return <LetterItem key={letterData.id} letterData={letterData} />;
+        })}
+      </LetterContainer>


아 요기 이렇게 map에서 타입 지정해줄수 있군아! ㅋㅋ

woogisea · 2022-12-28T01:25:00Z

주함씨랑 서히랑 지수랑 너무 코드리뷰를 잘해서 나도 보고 많이 배워간다!! 편지 타이핑은 진짜 놀랍다 신기해!! ㅋㅋㅋㅋ 타스 스터디 하는동안 고생했고 마지막 과제도 고생했어🔥🔥🔥 앱잼 퐈ㅓ이티이이이잉!

hayounSong

고생했어!!!Letter Type이라는 자주 쓰이는 타입을 외부에 따로 선언해주는 것도 너무 좋았고, 많이 배울 수 있었어!! 앱잼도 화이팅!!

hayounSong · 2022-12-28T19:56:51Z

week7/letter/src/common/type.ts

@@ -0,0 +1,15 @@
+export interface Letter {


앗 이렇게 공통으로 쓰일 type interface을 밖에서 선언해주는 방법 좋은 것 같아!!

hayounSong · 2022-12-28T19:57:32Z

week7/letter/src/index.jsx

+  worker.start();
+}
+
+const root = ReactDOM.createRoot(document.getElementById("root"));


여기 root에도 타입 선언 있으면 좋을 것 같아!!

hayounSong · 2022-12-28T19:58:38Z

week7/letter/src/pages/mainPage.tsx

+import { Letter } from "../common/type";
+
+const MainPage = () => {
+  const navigate = useNavigate();


navigate에도 찾아보니까 type 선언을 해줄 수 있더라고!! 근데 이러한 선언을 꼭 필요한지는.. 같이 생각해보면 좋을 것 같아!

f0rever0 added 8 commits December 20, 2022 11:00

init : 초기 세팅

457ccdf

feat : mainpage 및 msw

428d1fc

feat : writepage

78340c1

refactor : console.log 삭제

c78ceba

feat : letter 및 letter modal 기능

c562585

design : 편지 css

3f72d9a

feat : 모달 닫힐때 타이핑 기능 초기화

f50321e

refactor : type 및 component 명 수정

540fc68

f0rever0 added the 7주차 label Dec 22, 2022

f0rever0 self-assigned this Dec 22, 2022

github-pages bot temporarily deployed to github-pages December 22, 2022 13:44 Inactive

github-pages bot temporarily deployed to github-pages December 22, 2022 13:48 Inactive

github-pages bot temporarily deployed to github-pages December 22, 2022 13:55 Inactive

f0rever0 requested review from Happhee, hayounSong, joohaem, seojisoosoo and woogisea December 22, 2022 14:41

joohaem approved these changes Dec 23, 2022

View reviewed changes

Happhee reviewed Dec 23, 2022

View reviewed changes

seojisoosoo reviewed Dec 27, 2022

View reviewed changes

woogisea reviewed Dec 28, 2022

View reviewed changes

hayounSong reviewed Dec 28, 2022

View reviewed changes

f0rever0 merged commit 876ebd1 into main Feb 17, 2023

	const Letter = (letterData: letterDataProps) => {
	const Letter = (letterData: letter) => {
	Write

Week7 #9

Week7 #9

Conversation

f0rever0 commented Dec 22, 2022 • edited Loading

✨ 구현 기능 명세

🎁 PR Point

🤔 궁금한점

😎 구현 결과물

joohaem left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Happhee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seojisoosoo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seojisoosoo Dec 27, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

woogisea commented Dec 28, 2022

hayounSong left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

f0rever0 commented Dec 22, 2022 •

edited

Loading

seojisoosoo Dec 27, 2022 •

edited

Loading