프론트엔드 공부/React 13

32일차 프론트엔드 공부 - State

- 프론트엔드 공부 32일차 -React의 핵심 Component란?UI 또는 기능을 부품화해서 재사용 가능하게 하는  것 함수형 컴포넌트가 클래스형 컴포넌트보다 훨씬 간단하다하지만, 함수형 컴포넌트 그 자체만으로는 클래스형 컴포넌트의 모든 기능을 흉내낼 수 없다.그래서 React에서 `함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 도구를 만들어 주었는데, 이 도구를 Hooks(훅) 이라고 부른다. Hooks란?use로 시작하것들 useState?State를 만들어준다 state?컴포넌트에서 사용하는 변수 1. 변수 만드는 방법 비교let count = 0const count = 0 const[ count, setCount ] = useState(0)const[ 변수명, 변수바꾸..

31일차 프론트엔드 공부 -나만의 페이지 만들기 실습 01

- 프론트엔드 공부 31일차 -   참고사항export const ContentText = styled.textarea`  width: 996px;  height: 480px;  font-size: 16px;  border: 1px solid #bdbdbd;  padding: 16px;`; textarea 태그란? input 태그보다 더 많은 내용의 텍스트를 불러올때 사용하는 태그이다. 입력되는 글자가 많을 경우 자동 줄바꿈의 효과가 있다.   SettingRadio type="radio" id="youtube" name="radio-button" />RadioText htmlFor="youtube">유튜브RadioText>SettingRadio type="radio" id="image" name="ra..

30일차 프론트엔드 공부 - Node.js

- 프론트엔드 공부 30일차 -프로그램 설치1. VSCODE 설치2. Node.js 설치3. Yarn 설치 폴더에 기능 설치하기1. 바탕화면에 폴더 만들기2. 폴더에 "class" 라는 이름의 Next.js 프로젝트 설치하기3. class 폴더에 Emotion(CSS 쉽게 만들어주는 기능) 설치4. class 폴더에 Apollo-Client, Graphql(백엔드 통신 쉽게 해주는 기능) 설치5. class 폴더에 Ant-Design(누가 만든 버튼과 인풋창 등) 설치6. class 폴더에 Axios(백엔드 통신 쉽게 해주는 기능2) 설치VSCODE 추가 익스텐션vscode-styled-components 설 프로그램 설치1. 인터넷을 통해 VSCODE 설치2. 인터넷에 Node.js 검색 후 설치3. ..