if(kakao)2021함께 나아가는 더 나은 세상https://if.kakao.com/session/88변경에 유연한 컴포넌트이번 포스트에서는 변경에 유연하게 대응할 수 있는 컴포넌트에 대해 이야기해보려고 한다 TL;DR 컴포넌트는 데이터를 중심으로 추상화한다. 일반적인 인터페이스로 컴포넌트를 디자인한다. 변경에 유연하다는 것 우리가 작성하는 소프트웨어는 지속가능해야 한다. 클린 코드에 입각하여 코드가 잘 읽히도록 작성하는 것 그 자체가 목적이 되어서는 안 된다. 우리가 작성하는 코드는 예상할 수 없는 변경에 그나마 유연하게 대응할 수 있어야 한다.https://jbee.io/web/components-should-be-flexible/velog.iohttps://velog.io/@teo/2022-CSS-Reset-%EB%8B%A4%EC%8B%9C-%EC%8D%A8%EB%B3%B4%EA%B8%B0meyerweb.comThe goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested.https://meyerweb.com/eric/tools/css/reset/CSS3 Box Model | PoiemaWeb모든 HTML 요소는 Box 형태의 영역을 가지고 있다. Box 형태란 물론 사각형을 의미한다. 이 Box는 마진(Margin), 테두리(Border), 패딩(Padding), 콘텐츠(Contents)로 구성된다. 브라우저는 박스 모델의 크기(dimension)와 프로퍼티(색, 배경, 모양 등), 위치를 근거로 하여 렌더링을 실행한다. 웹디자인은 콘텐츠를 담을 박스 모델을 정의하고 CSS 프로퍼티를 통해 스타일(배경, 폰트와 텍스트 등)과 위치 및 정렬을 지정하는 것이라고 할 수 있다.https://poiemaweb.com/css3-box-modelGitHub - typescript-cheatsheets/react: Cheatsheets for experienced React developers getting started with TypeScriptCheatsheets for experienced React developers getting started with TypeScript 👋 This repo is maintained by @swyx, @eps1lon and @filiptammergard. We're so happy you want to try out TypeScript with React! If you see anything wrong or missing, please file an issue!https://github.com/typescript-cheatsheets/react제네릭 | 타입스크립트 핸드북제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다. 특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용됩니다. 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것 을 의미합니다. 아래 코드를 보겠습니다. 위 함수는 text라는 파라미터에 값을 넘겨 받아 text를 반환해줍니다. hi, 10, true 등 어떤 값이 들어가더라도 그대로 반환합니다.https://joshua1988.github.io/ts/guide/generics.html#%EC%A0%9C%EB%84%A4%EB%A6%AD-generics-%EC%9D%98-%EC%82%AC%EC%A0%84%EC%A0%81-%EC%A0%95%EC%9D%98[Recoil] Recoil 200% 활용하기안녕하세요! 이번에 쿠키파킹을 개발 하면서 recoil을 처음으로 사용해 보았고 베타버전이 출시된 이후 운영해 보면서 리팩토링과 최적화에 신경쓰다보니 recoil의 atom 만 전역 state 개념으로 사용했지 다른 기능들을 사용하지 못했던 느낌을 받아, 200% 활용하기 두 번째 포스팅으로 정하여 공부하고 실제로 쿠키파킹을 리팩토링 하려고 합니다. 이 포스팅에서 recoil과 selector에 대한 기본적인 usage는 React스러운 상태관리 라이브러리 :: Recoil 를 참고해 주세요!https://velog.io/@juno7803/Recoil-Recoil-200-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0Next.js 100% 활용하기 (feat. getInitialProps, getStaticPath, getStaticProps, getServerSideProps, storybook)솝트 28기에 키릭스 를 개발하며 next.js+typescript를 처음 도입해 사용해봤었는데, 이번에 회사에서 온라인 코딩파티를 개발하며 SSR에서 고려해야 하는데 고려하지 못한 지점들을 새롭게 알게 되었습니다. 그래서 이번엔 SSR을 구현하는 데 있어서 next.js를 어떻게 활용해야하는지 좀 더 구체적인 방법들을 정리해보았습니다.https://velog.io/@devstone/Next.js-100-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0-feat.-initialProps-webpack-storybookChanwhe KimMarch 5th 2020 제가 근무하는 왓챠에서는 별도 프레임워크를 사용하지 않고 SSR을 하고 있어요. 실제 제품에서는 코드가 좀 더 섬세히 구조화 되고 필요한 설정이 추가 되었지만, SSR의 기본적인 흐름은 대부분 유사한 것 같아 아래와 같이 정리해 보아요. Introduction Prerequisite Why Server Side Rendering?https://chanwhe-kim.netlify.app/blog/ssr/[JavaScript] 뒤로가기 히스토리가 없는 것을 어떻게 알 수 있을까?모바일 웹앱을 개발하는 과정에서, 메인 parent 페이지을 제외하고 모든 child 페이지에서 최상단에는 항상 ← 뒤로가기 버튼이 존재하게 디자인이 되었다. 보통은 메인 parent 페이지를 통해 child 페이지로 이동하지만, 때로는 외부에서 child 페이지에 바로 접근하는 경우도 생겼다. 이런 경우 뒤로가기 버튼에 history.back() 을 넣으면 아무런 동작을 하지 않게 되는 문제가 드러났다. 어떻게 해야할까?https://programmingsummaries.tistory.com/318
![[Recoil] Recoil 200% 활용하기](https://www.notion.so/image/https%3A%2F%2Fstatic.velog.io%2Ffavicon.ico?table=block&id=acf6a57d-9680-4546-8efe-32aaefb69d9d&cache=v2)
![[Recoil] Recoil 200% 활용하기](https://www.notion.so/image/https%3A%2F%2Fvelog.velcdn.com%2Fimages%2Fjuno7803%2Fpost%2F96b970e7-445c-48e2-9bc3-b6e45b55d538%2Frecoil.png?table=block&id=acf6a57d-9680-4546-8efe-32aaefb69d9d&cache=v2)
![[JavaScript] 뒤로가기 히스토리가 없는 것을 어떻게 알 수 있을까?](https://www.notion.so/image/https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Ftop%2Ffavicon_0630.ico?table=block&id=bef1f8eb-b880-4f22-bfa6-7c065ccf3bb7&cache=v2)
![[JavaScript] 뒤로가기 히스토리가 없는 것을 어떻게 알 수 있을까?](https://www.notion.so/image/https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png?table=block&id=bef1f8eb-b880-4f22-bfa6-7c065ccf3bb7&cache=v2)