뭐라도 기억하기 위한 블로그

🔎 전체코드 한번에 보기 import styled, {keyframes} from "styled-components" const Title = styled.h1` color: tomato; ` const Wrapper = styled.div` display: flex; height: 100vh; width: 100vw; `; const rotateAnimation = keyframes` from { transform: rotate(0deg); border-radius: 0px; } to { transform: rotate(360deg); border-radius: 100px; } `; const Emoji = styled.span` font-size: 36px; `; const Box = styled.d..

※ 해당 글은 노마드코더의 강의를 듣고 복습 및 기록을 위한 포스팅입니다. import styled from "styled-components" const Father = styled.div` /* display: flex; */ `; const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; ` const Circle = styled(Box)` border-radius: 50%; ` const Input =styled.input.attrs({required: true, minLength:10})` background-color: tomato; ` function App() { retu..

🔎 리액트 프로젝트 설치 npx create-react-app 폴더명 🔎 불필요한 파일 삭제 index.js와 App.js만 두고 삭제 해당 파일에서 import 구문들도 함께 삭제 🔎 styled component 설치 npm i styled-components 🔎 리액트 프로젝트 폴더로 진입 후 웹브라우저 실행 cd 폴더명 npm start 🔎 styled components를 사용하는 이유 사용하지 않는다면 style을 하나하나 들여다봐야함 styled components를 사용하면 div를 여러번 지저분하게 사용하지 않을 수 있다. styled components가 자동으로 class명을 만들어준다. 🔎 styled component css 적용 시 자동완성 확장프로그램 vscode-styled-..

벌써 5번째 노트라니~ 뿌듯하다~ 몇개의 노트를 쓸지는 모르겠지만... ✨ setState➡ 이전에는 counter라는 변수에 데이터를 담았다면 다른 방법으로 데이터 담기 ① 함수 내에서 return문 전에 상수 하나 더 만들어주기 const root = document.getElementById("root"); function App() { const [counter, setCounter] = React.useState(0); // [담으려는 data(=> state), data 값을 바꿀 때 사용할 modifier] // modifier는 set뒤에 데이터 이름을 붙여줌 -> ex. setCounter return ( Total clicks: {counter} Click me ); } ReactDOM..

✨ State란? 데이터가 저장되는 곳 이전에 vanilla JS로 만들었던 counter를 state로 만들 수 있다. (바뀌는 데이터) ① 화면에 UI그려주기 마찬가지로 임시로 react를 연습해보기 위해서는 해당 script src를 import 해준다. const root = document.getElementById("root"); let counter = 0; //counter 초기값 변수 설정 const Container = () => ( Total clicks: 0 click me ); ReactDOM.render(, root); ② 변수 담아주기 vanillaJS : span.innerText를 이용해서 span의 텍스트를 바꿔줌 span.innerText = `Total clicks: ..

이전까지 정리한 createElement는 번거로운 방식이다. React element를 생성하는 더 편리한 방식을 사용해야 한다. 더 편리한 도구로 JSX 사용 JSX란? Javscript를 확장한 문법을 의미 ✨ 기존에 쓴 문법을 JSX방식으로 수정하기! ① React.createElement를 JSX로 수정하기 //기존코드 const h3 = React.createElement( "h3", { id:"title", onMouseEnter: () => console.log("mouse enter"), }, "Hello, Im a span" ); //JSX const Title = ( console.log("mouse enter")}> Hello, Im a span ); jsx는 일반 html 코드와 ..

✨ React JS로 버튼 만들기 이전 React JS 기초 01 정리에서는 Javascript로 count 버튼을 만들었다면, 이번엔 드디어 React JS로~~ ① ui 그리기 const root = document.getElementById("root"); const h3 = React.createElement("h3", null , "Hello, Im a span"); const btn = React.createElement("button", null, "click me"); // **span과 button을 둘다 render하고 싶다면? const container = React.createElement("div", null, [h3, btn]); ReactDOM.render(container,..

미루고 미루고 미루다 드디어 마음잡고 다시 공부를 시작해보았는데... 내가 강의를 끝까지 듣고 정리할 수 있을지 모르겠지만 일단 시작이 반이라니까~ 반은 한거 아닐까 ㅎㅎ 해당 정리는 노마드코더의 https://nomadcoders.co/react-for-beginners 강의를 직접 수강후 정리하였습니다 ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders React for Beginners nomadcoders.co ✨ ReactJS를 사용하는 이유 상위 1만개의 웹사이트 중 45%가량은 React를 사용 (에어비앤비, 인스타그램, 페이스북, 넷플릭스) 페이스북이 ReactJS를 만들었고, reactJS에 막대한 투자를 하고있음 금방 폐기되지 않을 가능성 높음. 큰 커뮤니티를..