YG - 96년생 , 강아지 있음, 개발자 희망

React/Next/Javscript Eslint Import/Order (import 순서) 설정하는 방법 0. 이 글을 쓰게 된 계기 과거부터 지금까지 import를 순서를 관리한다면 일일이 수동으로 알파벳 순으로 맞춰주었었는데 리엑트에서 폴더가 많아지고, 컴포넌트가 많아지다 보니 불편함을 느꼈습니다. 그러던 와중 다른 크루가 import/order에 대해 포스팅 한 글을 보고 적용해 봐야겠다고 마음먹었었고, 새로운 프로젝트를 할 때 어떻게 했는지 기억하기 위해 작성하게 되었습니다. 1. Import 순서를 설정하면 좋은 점 일관성 유지: import 문이 일관된 순서로 작성되면 코드를 이해하기 쉬워집니다. 모듈 경로를 알파벳순으로 정렬하면 모듈 검색이 용이해집니다. 충돌 방지: 일부 모듈은 다른 모..

CRA(create-react-app)로 만든 프로젝트 / Storybook 7 버전에서 절대 경로를 설정하는 방법 (with craco) / jest 절대 경로 설정하기 0. 이 글을 적게 된 계기 스토리북 절대 경로를 설정하지 않아 발생한 에러가 났습니다. Module not found: Can't resolve "@" Field 'browser' doesn't contain a valid alias configuration CRA로 만든 프로젝트에서 절대 경로 설정하는 방법은 많이 있으나 스토리북 7 버전 환경에서 절대 경로를 설정한 예시를 찾기가 어려워 나중에 제가 다시 볼 목적으로 글을 작성하게 되었습니다. 그리고 이러한 정보가 필요한 사람들에게 도움이 되었으면 좋겠습니다. CRA(create-..

설치 npm install @apollo/client graphql Get started with Apollo Client Hello! 👋 This short tutorial gets you up and running with Apollo Client. If you're using a React sandbox from CodeSandbox and you encounter a TypeError, try downgrading the version of the graphql package to 15.8.0 in the Dependencies panel. If you encou www.apollographql.com 설정 graphQL을 사용하는 서버의 주소를 uri로 설정합니다. client.js import..

API를 그대로 사용하면 안 좋은 이유는? 외부 API를 그대로 사용하면 제공해 주는 서비스의 API에 크게 의존하게 됩니다. 예시 1) 기상청으로부터 받아오는 API - date 기상청의 API 중 date를 일반 문자열로 받아 사용하는 코드를 작성했다고 가정해 봅시다. 기상청에서 API 중 date를 year, month, day로 이루어진 객체로 바꾸게 된다면 작성했던 코드 중 date 부분은 전부 수정해야 합니다. 2~3개라면 괜찮지만 그 개수가 많아질수록 코드를 일일이 바꾸는데 시간이 듭니다. 예시 2) API를 받아오는 플랫폼 변경 - 한국 기상청 -> 미국 기상청 API를 제공해 주는 곳을 변경해야 할 때가 있을 텐데요. 이때 한국 기상청과 미국 기상청에서 제공하는 API는 많이 다를 것입니..

function 함수 function func(){ } 화살표 함수 const func2=()=>{} function 함수와 화살표 함수의 차이점 function 함수에서는 prototype이 있고, 화살표 함수에는 없습니다. 따라서 더 가볍게 사용할 수 있고, 본래 함수의 역할이 아닌 생성자로 사용할 수 없습니다. 또한 화살표 함수는 caller와 arguments가 감싸져 있어 getter로 불러와야 한다는 특징이 있습니다. 그리고 화살표 함수는 this를 바인딩하지 않는다는 특징이 있습니다. 원래 함수의 역할로 사용한다고 하면 this를 사용해야 할 필요가 없습니다. this를 사용해야 할 경우에는 class 혹은 객체 메서드 선언 방식을 통해 사용하면 되겠습니다. 따라서 함수를 사용할 때에는 더 ..

class CSS 속성을 줄 때 클래스를 이용합니다. 그 이유는 CSS 속성을 고치기 위해 class 명을 고치게 되어도 사이트 로직에 영향을 주지 않게 하기 위함입니다. 예를 들어 회사에 퍼블리서와 개발자가 따로 있다면 퍼블리셔 - 개발자 간의 협업을 할 때 서로 건드리는 부분을 달리 해서 서로의 작업에 영향을 주지 않도록 하는 것입니다. id Javascript 코드에서 querySelector를 지정할 때 사용합니다. class와 id를 구분 지어 사용하는 컨벤션의 장점과 단점 id와 class를 나누어 사용하는 컨벤션을 사용한다면 CSS를 바꾸거나, 로직을 변경할 때 id 혹은 class를 변경해도 영향을 덜 준다는 장점이 있습니다. 단점으로는 불필요한 id와 class를 만들어 사용하는 경우가..

글이 전하려고 하는 정보 커스텀 엘리먼트와 쉐도우 돔을 이용하여 메서드 형식으로 사용하는 방법, CSS 속성을 주는 방법, 타입스크립트에서 타입 지정하는 방법 등등 사용하며 배운 지식을 전하려고 합니다. Custom-element를 사용하는 방법 https://developer.mozilla.org/ko/docs/Web/Web_Components/Using_custom_elements 사용자 정의 요소 사용하기 - 웹 컴포넌트 | MDN 웹 컴포넌트 표준의 주요 기능 중 하나는 사용자 정의 페이지 기능을 제공하는 길고 중첩된 요소들의 묶음으로 만족하는 것보다는, HTML 페이지에서 기능을 캡슐화하는 사용자 정의 요소를 생성 developer.mozilla.org Shadow Dom을 사용하는 방법 htt..

Type vs Interface 타입스크립트에서는 값의 모양이나 구조를 정의하기 위해 type 과 interface 모두 사용되지만 , 둘은 약간의 차이가 있습니다 - 공통점 type과 interface 모두 타입스크립트에서 객체의 타입, 함수의 타입 등을 정의할 수 있습니다 변수 타입 , 함수의 반환값을 지정하는 데 둘 다 사용할 수 있습니다 type과 interface 모두 확장하여 새 유형을 만들 수 있습니다 - 차이점 type은 기존 타입의 새 이름을 정의하는 방법이며, interface는 새로운 객체를 처음부터 정의합니다. 즉 type은 타입의 타입 별칭(Type Alias)을 지정하는데 사용할 수 있고 interface는 완전히 새로운 유형을 정의하는 데 사용할 수 있습니다 type은 선언된 ..