-
Notifications
You must be signed in to change notification settings - Fork 0
/
component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2018-08-02-reactjs-first-reactjs-md-9054f3901dfab8bab29f.js.map
1 lines (1 loc) · 27.6 KB
/
component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2018-08-02-reactjs-first-reactjs-md-9054f3901dfab8bab29f.js.map
1
{"version":3,"file":"component---src-app-templates-post-template-post-layout-ui-tsx-content-file-path-posts-2018-08-02-reactjs-first-reactjs-md-9054f3901dfab8bab29f.js","mappings":"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","sources":["webpack://kyoungah-dev-blog/./posts/2018-08-02-reactjs-first-reactjs.md","webpack://kyoungah-dev-blog/./src/app/templates/post-template/post-layout.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-content/post-layout.content.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-content/post-layout-content.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-date/post-layout-date.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-date/post-layout-date.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-tags/post-layout.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-tags/post-layout-tags.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-title/post-layout-title.module.css","webpack://kyoungah-dev-blog/./src/app/templates/post-template/components/post-layout-title/post-layout-title.ui.tsx","webpack://kyoungah-dev-blog/./src/entities/tags/index.ts","webpack://kyoungah-dev-blog/./src/entities/tags/tags.ui.tsx","webpack://kyoungah-dev-blog/./src/entities/tags/tags.module.css","webpack://kyoungah-dev-blog/./src/shared/uis/tag/tag.ui.tsx","webpack://kyoungah-dev-blog/./src/shared/uis/tag/tag.module.css","webpack://kyoungah-dev-blog/./src/shared/uis/container/container.module.css","webpack://kyoungah-dev-blog/./src/shared/uis/container/container.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/basic-layout/basic-layout.module.css","webpack://kyoungah-dev-blog/./src/widgets/basic-layout/basic-layout.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/header/header.module.css","webpack://kyoungah-dev-blog/./src/widgets/header/header.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/footer/footer.module.css","webpack://kyoungah-dev-blog/./src/widgets/footer/footer.ui.tsx","webpack://kyoungah-dev-blog/./src/widgets/default-layout/default-layout.ui.tsx","webpack://kyoungah-dev-blog/./src/app/templates/post-template/post-layout.module.css","webpack://kyoungah-dev-blog/./node_modules/@mdx-js/react/lib/index.js","webpack://kyoungah-dev-blog/./node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["/*@jsxRuntime classic @jsx React.createElement @jsxFrag React.Fragment*/\nimport {useMDXComponents as _provideComponents} from \"@mdx-js/react\";\nimport React from \"react\";\nfunction _createMdxContent(props) {\n const _components = Object.assign({\n h2: \"h2\",\n p: \"p\",\n h3: \"h3\",\n ol: \"ol\",\n li: \"li\",\n ul: \"ul\",\n blockquote: \"blockquote\",\n a: \"a\"\n }, _provideComponents(), props.components);\n return React.createElement(React.Fragment, null, React.createElement(_components.h2, null, \"React?\"), \"\\n\", React.createElement(_components.p, null, \"페이스북에서 개발한 오픈소스 JavaScript Library.\"), \"\\n\", React.createElement(_components.h2, null, \"React 특징\"), \"\\n\", React.createElement(_components.h3, null, \"Only View\"), \"\\n\", React.createElement(_components.p, null, \"React는 오직 View만 신경쓰고 담당하는 Library 이다.\"), \"\\n\", React.createElement(_components.h3, null, \"JSX\"), \"\\n\", React.createElement(_components.p, null, \"React는 컴포넌트를 화면에 어떻게 보일지를 정의할 때 JSX를 사용한다. JSX는 JavaScript XML의 약자이다.\\nJSX를 사용하지 않아도 되지만 사용하는게 훨씬 편하다.\"), \"\\n\", React.createElement(_components.h3, null, \"Virtual DOM\"), \"\\n\", React.createElement(_components.p, null, \"Virtual DOM 을 사용하여 상태의 변함에 따라 선택적으로 유저 인터페이스를 렌더링 한다. 따라서, 최소한의 DOM 처리로 컴포넌트들을 업데이트 할 수 있게 해준다.\"), \"\\n\", React.createElement(_components.p, null, \"DOM은 문서 객체 모델(Document Object Model)의 약자이다. HTML과 XML 문서를 위한 API 이며 문서의 구조화된 표현을 제공한다.\"), \"\\n\", React.createElement(_components.p, null, \"Virtual DOM은 실제 DOM의 빠른 인 메모리의 형태이며 JavaScript와 DOM이 반응을 하는것 처럼 다룰 수 있게 하는 추상적 개념이다. 동작과정은 아래의 순서와 같다.\"), \"\\n\", React.createElement(_components.ol, null, \"\\n\", React.createElement(_components.li, null, \"데이터 모델 상태가 변경될 때 마다 Virtual DOM과 React는 Virtual DOM 표현에 맞게 UI를 다시 렌더링한다.\"), \"\\n\"), \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"컴포넌트가 초기 렌더링을 할 때 render 함수를 사용하는데 이 함수는 View의 생김새, 작동하는 방법 같은 정보를 지닌 객체를 반환한다.\\n렌더링이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고 지정해놓은 DOM 요소 안에 주입한다.\\n컴포넌트가 데이터를 업데이트 했을 때 새로운 데이터를 가지고 render 함수를 또 호출한다.\"), \"\\n\"), \"\\n\", React.createElement(_components.ol, {\n start: \"2\"\n }, \"\\n\", React.createElement(_components.li, null, \"React는 두 개의 Virtual DOM 사이의 차이점, 즉 실제 DOM이 변경되어야 하는 부분을 연산한다.\"), \"\\n\"), \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, \"render 함수가 반환한 결과와 이전 render 함수가 만들었던 정보를 최소한의 연산으로 비교한다.\"), \"\\n\"), \"\\n\", React.createElement(_components.ol, {\n start: \"3\"\n }, \"\\n\", React.createElement(_components.li, null, \"React는 실제 DOM에서 변경 되어야 하는 부분만 새로 실제 DOM에 적용한다.\"), \"\\n\"), \"\\n\", React.createElement(_components.p, null, \"두 Virtual DOM 표현의 차이점을 찾고 실제 DOM에 업데이트 된 패치만 다시 랜더링하는 과정은 빠르며 실제로 다시 그려져야 하는 부분이 무엇인지 고민할 필요가 없다. UI를 업데이트하는 과정에서 생기는 복잡함을 모두 해소하고 더욱 쉽게 업데이트에 접근할 수 있다.\"), \"\\n\", React.createElement(_components.h3, null, \"Component\"), \"\\n\", React.createElement(_components.p, null, \"Component는 UI를 재사용할 수 있는 독립적인 단위 라고 볼 수있다.\\nUI는 컴포넌트를 이용해 제작하며 원하는 방법으로 이러한 컴포넌트를 조합할 수 있다. 실제로 애플리케이션을 개발할 때는 커스텀 컴포넌트를 제작하게 된다.\"), \"\\n\", React.createElement(_components.h3, null, \"단방향 데이터 흐름\"), \"\\n\", React.createElement(_components.p, null, \"부모 컴포넌트에서 자식 컴포넌트로 흐르는 단방향 데이터 흐름을 지향한다.\"), \"\\n\", React.createElement(_components.h2, null, \"마무리\"), \"\\n\", React.createElement(_components.p, null, \"회사에서 이때까지 혼자서 프론트앤드를 담당하다가 신입이 들어오면서 모르는게 있으면 가르쳐 주고 같이 협업하게 되었다. 과연 내가 누구에게 가르쳐주고 도와줄만큼 React를 잘알고 있나 싶어서 리마인드 하는식으로 다시 한번 되짚고 넘어가보고자 한다.\\n열심히 공부해야지.\"), \"\\n\", React.createElement(_components.h2, null, \"Reference\"), \"\\n\", React.createElement(_components.blockquote, null, \"\\n\", React.createElement(_components.ul, null, \"\\n\", React.createElement(_components.li, null, React.createElement(_components.a, {\n href: \"http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791160505238&orderClick=LAG&Kc=\"\n }, \"리액트를 다루는 기술\")), \"\\n\"), \"\\n\"));\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n return MDXLayout ? React.createElement(MDXLayout, props, React.createElement(_createMdxContent, props)) : _createMdxContent(props);\n}\nexport default MDXContent;\n","import React from \"react\";\nimport GATSBY_COMPILED_MDX from \"/Users/yookyoung.park/Workspace/kyoungah-dev-blog/posts/2018-08-02-reactjs-first-reactjs.md\";\nimport {MDXProvider} from '@mdx-js/react';\nimport {Container} from '@/shared/uis/container';\nimport {DefaultLayout} from '@/widgets/default-layout';\nimport {PostLayoutContent} from './components/post-layout-content';\nimport {PostLayoutDate} from './components/post-layout-date';\nimport {PostLayoutTags} from './components/post-layout-tags';\nimport {PostLayoutTitle} from './components/post-layout-title';\nimport {postLayoutContainer, postLayoutTitle} from './post-layout.module.css';\nimport {jsx as _jsx} from \"react/jsx-runtime\";\nimport {jsxs as _jsxs} from \"react/jsx-runtime\";\nfunction PostLayout(_ref) {\n var _data$mdx$frontmatter, _data$mdx;\n let {data, children} = _ref;\n const {date, tags, title} = (_data$mdx$frontmatter = data === null || data === void 0 ? void 0 : (_data$mdx = data.mdx) === null || _data$mdx === void 0 ? void 0 : _data$mdx.frontmatter) !== null && _data$mdx$frontmatter !== void 0 ? _data$mdx$frontmatter : {};\n return _jsx(DefaultLayout, {\n children: _jsxs(Container, {\n className: postLayoutContainer,\n children: [_jsx(PostLayoutTitle, {\n className: postLayoutTitle,\n title: title\n }), _jsx(PostLayoutDate, {\n date: date\n }), _jsx(PostLayoutTags, {\n tags: tags\n }), _jsx(PostLayoutContent, {\n children: _jsx(MDXProvider, {\n children: children\n })\n })]\n })\n });\n}\nconst query = \"1347208223\";\nPostLayout\nexport default function GatsbyMDXWrapper(props) {\n return React.createElement(PostLayout, props, React.createElement(GATSBY_COMPILED_MDX, props));\n}\n","// extracted by mini-css-extract-plugin\nexport var postLayoutContentRoot = \"post-layout-content-module--post-layout-content-root--01754\";","import { clsx } from \"clsx\";\nimport { type HTMLAttributes, type PropsWithChildren } from \"react\";\n\nimport { postLayoutContentRoot } from \"./post-layout.content.module.css\";\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLDivElement>;\n\nfunction PostLayoutContent({ children, className, ...props }: Props) {\n return (\n <div className={clsx(postLayoutContentRoot, className)} {...props}>\n {children}\n </div>\n );\n}\n\nexport { PostLayoutContent };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutDateRoot = \"post-layout-date-module--post-layout-date-root--f34d1\";","import { clsx } from \"clsx\";\nimport { type HTMLAttributes } from \"react\";\n\nimport { postLayoutDateRoot } from \"./post-layout-date.module.css\";\n\ntype Props = { date: string } & HTMLAttributes<HTMLHeadingElement>;\n\nfunction PostLayoutDate({ className, date, ...props }: Props) {\n return (\n <span className={clsx(postLayoutDateRoot, className)} {...props}>\n {date}\n </span>\n );\n}\n\nexport { PostLayoutDate };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutTags = \"post-layout-module--post-layout-tags--837df\";","import { Tags } from \"@/entities/tags\";\nimport { Link } from \"gatsby\";\n\nimport { postLayoutTags } from \"./post-layout.module.css\";\n\ntype Props = { tags: string[] };\n\nfunction PostLayoutTags({ tags }: Props) {\n return (\n <Tags className={postLayoutTags}>\n {tags.map((tag) => (\n <Link key={tag} to={`/tags/${tag}`}>\n <Tags.Tag tag={tag} />\n </Link>\n ))}\n </Tags>\n );\n}\n\nexport { PostLayoutTags };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutTitleRoot = \"post-layout-title-module--post-layout-title-root--88374\";","import { clsx } from \"clsx\";\nimport { postLayoutTitleRoot } from \"./post-layout-title.module.css\";\nimport { HTMLAttributes } from \"react\";\n\ntype Props = { title: string } & HTMLAttributes<HTMLHeadingElement>;\n\nfunction PostLayoutTitle({ className, title, ...props }: Props) {\n return (\n <h1 className={clsx(postLayoutTitleRoot, className)} {...props}>\n {title}\n </h1>\n );\n}\n\nexport { PostLayoutTitle };\n","import { Tag } from '@/shared/uis/tag';\nimport { Tags } from './tags.ui';\n\nconst ComposedTags = Object.assign(Tags, {\n Tag,\n});\n\nexport { ComposedTags as Tags };\n","import { PropsWithChildren, type HTMLAttributes } from 'react';\nimport { clsx } from 'clsx';\n\nimport { tagsRoot } from './tags.module.css';\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLDivElement>;\n\nfunction Tags({ children, className, ...props }: Props) {\n return (\n <div className={clsx(tagsRoot, className)} {...props}>\n {children}\n </div>\n );\n}\n\nexport { Tags };\n","// extracted by mini-css-extract-plugin\nexport var show = \"tags-module--show--7704b\";\nexport var tagsRoot = \"tags-module--tags-root--e3461\";","import { clsx } from 'clsx';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nimport { tagRoot } from './tag.module.css';\n\ntype Props = {\n tag: ReactNode;\n} & HTMLAttributes<HTMLSpanElement>;\n\nfunction Tag({ className, tag, ...props }: Props) {\n return (\n <span className={clsx(tagRoot, className)} {...props}>\n {tag}\n </span>\n );\n}\n\nexport type { Props as TagProps };\nexport { Tag };\n","// extracted by mini-css-extract-plugin\nexport var tagRoot = \"tag-module--tag-root--aae01\";","// extracted by mini-css-extract-plugin\nexport var containerRoot = \"container-module--container-root--3b208\";","import { clsx } from 'clsx';\nimport type { PropsWithChildren, HTMLAttributes } from 'react';\n\nimport { containerRoot } from './container.module.css';\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLSpanElement>;\n\nfunction Container({ children, className, ...props }: Props) {\n return (\n <div className={clsx(containerRoot, className)} {...props}>\n {children}\n </div>\n );\n}\n\nexport { Container };\n","// extracted by mini-css-extract-plugin\nexport var basicLayoutRoot = \"basic-layout-module--basic-layout-root--a11e0\";","import { clsx } from 'clsx';\nimport { type HTMLAttributes, type PropsWithChildren } from 'react';\n\nimport { basicLayoutRoot } from './basic-layout.module.css';\n\ntype Props = PropsWithChildren & HTMLAttributes<HTMLDivElement>;\n\nfunction BasicLayout({ children, className, ...props }: Props) {\n return (\n <div className={clsx(basicLayoutRoot, className)} {...props}>\n {children}\n </div>\n );\n}\n\nexport { BasicLayout };\n","// extracted by mini-css-extract-plugin\nexport var about = \"header-module--about--32ac9\";\nexport var headerLogo = \"header-module--header-logo--5bbdc\";\nexport var headerNavigation = \"header-module--header-navigation--24bcb\";\nexport var headerNavigationItem = \"header-module--header-navigation-item--ba248\";\nexport var headerNavigationItemLink = \"header-module--header-navigation-item-link--d6da9\";\nexport var headerNavigationList = \"header-module--header-navigation-list--3815c\";\nexport var headerRoot = \"header-module--header-root--01ceb\";\nexport var tags = \"header-module--tags--eb332\";","import { Link } from 'gatsby';\nimport { clsx } from 'clsx';\n\nimport {\n about,\n headerRoot,\n headerLogo,\n headerNavigation,\n headerNavigationList,\n headerNavigationItem,\n headerNavigationItemLink,\n tags,\n} from './header.module.css';\n\nfunction Header() {\n return (\n <header className={headerRoot}>\n <Link to=\"/\">\n <img\n src=\"/images/logo.png\"\n srcSet={`/images/logo-small.png 200w, /images/logo.png 300w`}\n sizes=\"(max-width: 360px) 200px, 300px\"\n alt=\"dev.kyoungah.me\"\n className={headerLogo}\n />\n </Link>\n <nav className={headerNavigation}>\n <ul className={headerNavigationList}>\n <li className={headerNavigationItem}>\n <Link to=\"/tags\">\n <span\n aria-label=\"tags\"\n className={clsx(headerNavigationItemLink, tags)}\n />\n </Link>\n </li>\n <li className={headerNavigationItem}>\n <a href=\"/about\" rel=\"noopener\" target=\"_blank\">\n <span\n aria-label=\"about\"\n className={clsx(headerNavigationItemLink, about)}\n />\n </a>\n </li>\n </ul>\n </nav>\n </header>\n );\n}\n\nexport { Header };\n","// extracted by mini-css-extract-plugin\nexport var footerRoot = \"footer-module--footer-root--795ff\";","import { footerRoot } from './footer.module.css';\n\nfunction Footer() {\n return (\n <footer className={footerRoot}>\n <span>Powered by Gatsby, Hosted by GitHub Pages.</span>\n <span>\n ©\n <a\n href=\"https://github.com/partykyoung\"\n rel=\"noreferrer\"\n target=\"_blank\">\n KyoungAh\n </a>\n , All rights reserved.\n </span>\n </footer>\n );\n}\n\nexport { Footer };\n","import type { PropsWithChildren } from \"react\";\n\nimport { Header } from \"../header\";\nimport { Footer } from \"../footer\";\nimport { BasicLayout } from \"../basic-layout\";\n\nfunction DefaultLayout({ children }: PropsWithChildren) {\n return (\n <>\n <Header />\n <BasicLayout>{children}</BasicLayout>\n <Footer />\n </>\n );\n}\n\nexport { DefaultLayout };\n","// extracted by mini-css-extract-plugin\nexport var postLayoutContainer = \"post-layout-module--post-layout-container--f40b5\";\nexport var postLayoutTitle = \"post-layout-module--post-layout-title--1c575\";","/**\n * @typedef {import('mdx/types.js').MDXComponents} MDXComponents\n * @typedef {import('react').Component<{}, {}, unknown>} Component\n * @typedef {import('react').ReactNode} ReactNode\n */\n\n/**\n * @callback MergeComponents\n * Custom merge function.\n * @param {Readonly<MDXComponents>} currentComponents\n * Current components from the context.\n * @returns {MDXComponents}\n * Additional components.\n *\n * @typedef Props\n * Configuration for `MDXProvider`.\n * @property {ReactNode | null | undefined} [children]\n * Children (optional).\n * @property {Readonly<MDXComponents> | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @property {boolean | null | undefined} [disableParentContext=false]\n * Turn off outer component context (default: `false`).\n */\n\nimport React from 'react'\n\n/** @type {Readonly<MDXComponents>} */\nconst emptyComponents = {}\n\nconst MDXContext = React.createContext(emptyComponents)\n\n/**\n * Get current components from the MDX Context.\n *\n * @param {Readonly<MDXComponents> | MergeComponents | null | undefined} [components]\n * Additional components to use or a function that creates them (optional).\n * @returns {MDXComponents}\n * Current components.\n */\nexport function useMDXComponents(components) {\n const contextComponents = React.useContext(MDXContext)\n\n // Memoize to avoid unnecessary top-level context changes\n return React.useMemo(\n function () {\n // Custom merge via a function prop\n if (typeof components === 'function') {\n return components(contextComponents)\n }\n\n return {...contextComponents, ...components}\n },\n [contextComponents, components]\n )\n}\n\n/**\n * Provider for MDX context.\n *\n * @param {Readonly<Props>} properties\n * Properties.\n * @returns {JSX.Element}\n * Element.\n * @satisfies {Component}\n */\nexport function MDXProvider(properties) {\n /** @type {Readonly<MDXComponents>} */\n let allComponents\n\n if (properties.disableParentContext) {\n allComponents =\n typeof properties.components === 'function'\n ? properties.components(emptyComponents)\n : properties.components || emptyComponents\n } else {\n allComponents = useMDXComponents(properties.components)\n }\n\n return React.createElement(\n MDXContext.Provider,\n {value: allComponents},\n properties.children\n )\n}\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"names":["_createMdxContent","props","_components","Object","assign","h2","p","h3","ol","li","ul","blockquote","a","_provideComponents","components","React","start","href","wrapper","MDXLayout","PostLayout","_ref","_data$mdx$frontmatter","_data$mdx","data","children","date","tags","title","mdx","frontmatter","_jsx","DefaultLayout","_jsxs","Container","className","postLayoutContainer","PostLayoutTitle","postLayoutTitle","PostLayoutDate","PostLayoutTags","PostLayoutContent","MDXProvider","GatsbyMDXWrapper","GATSBY_COMPILED_MDX","postLayoutContentRoot","clsx","postLayoutDateRoot","postLayoutTags","Tags","map","tag","Link","to","Tag","postLayoutTitleRoot","ComposedTags","containerRoot","basicLayoutRoot","BasicLayout","about","headerLogo","headerNavigation","headerNavigationItem","headerNavigationItemLink","headerNavigationList","headerRoot","Header","src","srcSet","sizes","alt","rel","target","footerRoot","Footer","_Fragment","emptyComponents","MDXContext","useMDXComponents","contextComponents","properties","allComponents","disableParentContext","Provider","value","r","e","t","f","n","Array","isArray","o","length","arguments"],"sourceRoot":""}