민프

https://www.typescriptlang.org/ JavaScript With Syntax For Types. TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code. www.typescriptlang.org 이번엔 typeScript + styledComponents에 대한 포스팅을 해보려고 하는데 먼저 간단하게 typeScript에 대해서 설명을 해보자면 공식홈페이지에 의하면 TypeScript는 JavaScript를 기반으로 만..

1. theme적용 이번 포스팅에서는 style Component의 themes에 대해서 알아볼 것 이다. theme 이란, 기본적으로 모든 색상들을 가지고 있는 object이고, 모든 색깔을 하나의 Ojbect 안에 넣어놨기 때문에 매우 유용하다. 왜냐하면 나중에 색깔을 바꿀 때 그 Component의 색상을 일일이 바꿔주는게 아니라 Ojbect만 바꿔주면 되기 떄문이다. 우리가 다크모드를 구현한다고 하면, 50%는 Theme의 역할이라고 보면 되고, 나머지 50%는 local State Management라고 알고 있으면 된다. theme을 적용해보자 1. theme을 실행하기 위해선 index.jsx를 수정해줘야한다. (import ThemeProvider... ) ================in..

Styled Component를 이용해서 1. 애니메이션을 적용해보자 2. Box 컴포넌트에서 다른 태그를 선택해서 스타일을 적용해볼 수 있고, 호버(active...등등) 효과도 추가해보자 3. 내가 만든 컴포넌트를 넣어서 태그에 종속되지 않도록 만들어 줄 수 도 있다. 4. Box 컴포넌트 안에 있는 emoji태그와 밖에있는 emoji태그를 구분해보자 이번엔 애니메이션을 적용해보자 - 코드 1 import styled, { keyframes } from "styled-components"; //styled-components를 사용할때에는 작은 따옴표, 큰따옴표가 아닌 //backtick을 사용해야한다. const Father = styled.div` display: flex; `; const rot..

? 만약 우리가 컴포넌트의 태그를 바꾸고 싶은데 스타일은 바꾸고 싶지 않을 때 어떤 일이 일어날까? 예를 들어서 컴포넌트를 추가하지 않고 이미 있는 컴포넌트의 태그에서 내가 원하는 태그로 쓰고싶을때에는 import styled from "styled-components"; //styled-components를 사용할때에는 작은 따옴표, 큰따옴표가 아닌 //backtick을 사용해야한다. const Father = styled.div` display: flex; `; const Btn = styled.button` color: white; background-color: tomato; border: 0; border-radius: 15px; `; function App() { return ( Login L..

먼저 ㅇ. create-react-app (CRA)로 프로젝트를 만들고 ㅇ. src에 index.js, App.js만 남아있도록 한다. ㅇ. App.js, index.js 내용을 수정한다. 여기서 App.js는 아무것도 반환하고 있지 말아야한다. ㅇ. 터미널에 npm i Styled-components를 입력하고 ㅇ. styled-components의 자동완성을 사용하려면 vscode-styled-components 익스텐션을 설치해줘야한다. ㅇ. 마지막으로 npm start로 실행되는지 확인 자 이제 Styled Components의 적용 전 / 후를 알아보자 - Styled Components 적용 전 function App() { return ( ); } export default App; 이런식으..

https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com React에서 스타일을 입히는 방법은 ㅇ. Global Style 적용 - import를 해주면 이 코드들이 어플리케이션 전체 적용되는거라서 혹시 모를 클래스 이름의 중복을 조심해야한다.. ㅇ. css File을 입혀주는 것 (CSS 모듈) - 이것 또한 계속 ClassName들을 복사 붙여넣기 해줘야 함으로 귀찮다 (사람마다 다르지만 귀찮게 느껴지는 사람도 있을 것 이다.) 또한 라..

- 카카오 맵 API 페이지에 접속 -> 시작하기 클릭 https://apis.map.kakao.com/web/ 2. 키버튼 클릭 3. 애플리케이션 추가하기 클릭 (이름과 사업자명 입력) 4. 키 발급 확인 후 플랫폼 설정하기 클릭 -> 주소를 설정해줘야한다. (저는 테스트이기에 localhost:3000) 이렇게 하면 준비는 끝났고 이제 카카오지도 API를 적용해보자 카카오지도 API 적용 전체 코드는 아래와 같다 결과화면 구글지도가 잘 나오는 것을 확인할 수 있다. https://apis.map.kakao.com/web/guide/ 위 링크의 가이드를 잘 참고해서 필요한 기능을 적용해보자