TIL

❓ 더보기 버튼 위치가 하나의 column을 차지하는 것이 아닌 전체 column에 걸쳐 확장하고 싶었다. ⭕️ 해결 방법 grid-column: 1 / -1; 해당 속성을 아이템에 적용한다. 그리드의 전체 너비를 차지하게 되었다. 반응형 디자인에서 특정 뷰포트 크기에서 맞추어 아이템을 전체 너비로 확장 가능하다. grid column이 2개일 경우에도 유연하게 확장된다.

1️⃣ webpack cli 활용하기 webpack 커맨드라인 환경 옵션 --env를 사용하면 원하는 만큼 환경 변수를 전달할 수 있다. 환경 변수는 webpack.config.js에서 엑세스할 수 있다. package.json파일의 scripts섹션에서 아래와 같이 설정. "scripts": { "dev": "webpack-dev-server --env development --mode development", "build": "webpack --mode production" }, env 변수를 사용하려면 module.exports를 함수로 변환해야 한다. module.exports = (env, { mode }) => { const environment = env.NODE_ENV === 'develo..

CRA (Craete-React-App) CLI 도구를 이용해 React 초기 환경 세팅을 자동으로 해줘서 매우 편한데 대표적으로 Webpack, Babel이 있다. '알아서 세팅해주니 좋네'보단 why에 포커스를 두자. 📌 웹팩 Webpack은 자바스크립트 애플리케이션을 위한 정적 모듈 번들러(static module bundler)이다. Webpack은 애플리케이션을 구성하는 다양한 자원(HTML, CSS, JavaScript, 이미지 등)을 모듈로 보고 의존 관계를 가진 모듈을 하나의 번들로 묶어준다. 이렇게 번들링된 자원은 브라우저에서 로딩할 수 있는 형태가 되며, 이를 이용하여 웹 애플리케이션을 실행할 수 있다. 중요한 것은 자바스크립트만 모듈이 아니라 웹 어플리케이션 동작에 필요한 구성요소 모..

📌 REST API REST API는 웹 서비스를 설계하고 구현하는 아키텍쳐 스타일 중 하나다. 그냥 클라이언트와 서버가 통신하며 리소스를 공유하기 위한 방법론 URI를 사용해 리소스를 표현한다. HTTP Request Method(GET POST PUT PATCH DELETE)를 사용해 리소스에 대한 행위를 정의한다. 클라이언트와 서버가 데이터를 주고받는 포멧으로 XML, JSON을 사용한다. 📌 RESTful API REST 아키텍처 스타일의 제약 조건을 충족시키고 있다는 의미다. 컨벤션에 따라 API를 작성함으로서 이해도 및 호환성을 높이는 것이 주 목적이다. 제약 조건 클라이언트와 서버는 독립적이어야 하며, 서로간의 의존성이 없어야 한다. - 클라이언트와 서버 구조 서버는 클라이언트의 상태를 저장..

vite로 리액트 프로젝트 환경 생성하다 발생 .eslintrc.cjs 파일 들어가서 env: { ..., node: true } 추가하기 As-is To-be

뭐야 .. 원격 저장소 git pull 했을 때 새로 생성한 브랜치는 외 않가져와..? 🤔 이것을 해결하기 위한 원격 저장소 정보를 최신 정보로 업데이트 하는 git 명령어..! 원격 저장소 정보 업데이트 git remote update ➡ 원격 저장소의 모든 branch 정보를 업데이트한다. 원격 저장소의 branch 가져오기 git checkout -t [원격 저장소의 branch 이름] ➡ 로컬의 동일한 이름의 branch를 생성하면서 해당 branch로 checkout을 한다.

가끔보면 package 앞에 @가 붙는 경우가 있는데 평소엔 그냥 무심코 지나갔던 부분이라 별로 신경을 안썼지만 오늘 모듈 설치하다가 문뜩 궁금해서 찾아봤다. ( ex. @meterial-ui/core ) 몇몇의 package는 scope를 가지는데 scope를 가지고 있는 패키지는 이름을 정하는 룰이 있다. 바로 @ symbol과 / 를 사용하는 것! 이것을 scoped packages 라고 부르며 npm에 새로 추가된 기능 npm 패키지에 네임스페이스를 적용하여 아래와 같은 규칙을 정한다. global modules : 현재 존재하는 컨벤션 네임을 따른 모듈. (일반적인 패키지 작명 컨벤션을 따른다는 뜻인듯) scoped modules : 조직이나 그룹에 “scoped” 된 새로운 모듈. @조직이름/..

📌 Json Web Token (JWT) 인증에 필요한 정보들을 암호화시킨 토큰 JSON Web Token (JWT) 은 웹 표준 (RFC 7519)으로서 두 개체에서 JSON 객체를 사용하여 가볍고 자가 수용적인 (self-contained) 방식으로 정보를 안전성 있게 전달하기 위한 방법이다. self-contained (자가 수용적) → JWT는 필요한 모든 정보를 자체적으로 지니고 있다. 토큰에 대한 기본정보, 전달할 정보(유저 인증의 경우 유저 정보), 검증된 토큰임을 증명하는 signature를 포함하고 있다. → JWT는 자가 수용적이기 때문에 두 개체 사이에 손쉽게 전달할 수 있다. HTTP 통신에서 헤더에 넣어서 전달하거나, URL의 파라미터(쿼리), body 등 다양한 방식으로 전달할 ..