목록2021/03 (38)
hmk run dev
1. constructor() : 생성자 함수라고도 부릅니다. 컴포넌트가 생성되면 가장 처음 호출되는 친구죠! 컨스트럭쳐 안에서 props, state 생성? 해줌 2. render(): 리턴 값으로 ui요소를 반환함 우리가 만들어 둔 컴포넌트들을 출력? 해주는 친구 state, props 데이터를 꺼내서 보여줌 3. componentDidMount() 컴포넌트 들이 화면에 나타나는 것이 완료되면 그 순간 실행됨 첫번째 렌더링 후 딱 한번 실행 // 재 렌더시 작동 x ajax 호출, 함수호출, 이벤트 등록 4. componentDidUpdate() 컴포넌트 디드마운트가 첫 렌더에만 출력된다고 하는데. 이 친구는 리렌더링을 완료한 후에 실행된다. 이 함수에 중요한 파라미터가 2개 있는데, prevProp..
항해를 시작한 지도 어느덧 3주 차가 되어간다. 이번 주도 저번 주에 이어서 알고리즘 공부를 이어 나갔는데 문제 난이도 또한 저번 주보다 높아져서 벽을 느끼면서도 이해하려고 노력했던 것 같다 자신에 대한 답답함과 알고리즘에 대한 두려움을 느꼈던 2주였지만 뒤돌아 보면 파이썬 문법도 몰랐던 내가 다소 난이도가 낮은 알고리즘 문제를 풀어내는 모습을 보면서 신기했다. 물론 DFS & BFS와 같은 난이도의 문제들을 풀기에 다소 역량이 부족하지만 앞으로 남은 항해 과정 동안 주특기로 선택한 리액트 공부, 프로젝트 중에도 틈틈이 공부를 해야겠다고 다짐했다! 그리고 팀원들과 협업하는 것에 대해서 많이 배웠던 한주였다. 3명의 팀원들이 비슷한 배경지식을 가지고 있어 서로 공감하고 협업하는데 도움이 많이 됐다 서로의 ..
리덕스란? 상태를 관리해주는 것 데이터를 관리한다는 뜻 아래 코드로 인스톨 yarn add redux react-redux 1. State 데이터 리덕스에서 저장하고 있는 상태값 2. Action 상태에 변화가 필요할 때 발생함 3. ActionCreator 액션을 만들기 위해 사용 4. Reducer 리덕스에 저장된 데이터를 변경하는 함수 액션 생성함수 콜 > 액션만듦 > 현재상태를 받아서 > 다른 데이터로 리턴 5. Store 우리가 데이터를 볼 수 있게 도와주는 친구 6. dispatch 우리가 많이쓰게 될 내장함수 정~~말 많이쓴다 액션을 발생 시키는 역할 세가지 특징 store는 1개만 쓴다 // 무조건 1프로젝트 당 1개의 스토어 store의 state는 오직 action으로만 변경 가능하다 ..
라우팅이란 쉽게말해서 페이지를 돌아다니는 것이다. 일단 패키지를 하나 선택해서 인스톨하자! www.npmjs.com/package/react-router-dom react-router-dom DOM bindings for React Router www.npmjs.com yarn add react-router-dom으로 설치! 아래 코드로 import import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; 아래코드 index.js에 추가 import { BrowserRouter } from "react-router-dom"; 라우트 사용방법 두 가지 Route 사용방법 1: 넘겨줄 props가 없을 때 Route 사용..
먼저 DOM에 대해 알아보자 DOM을 아시나요? DOM은 html 단위 하나하나를 객체로 생각하는 모델입니다. 예를 들면, 'div태그'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있겠죠? 이런 구조를 트리 구조라고 합니다. 네, 맞습니다! DOM이 트리구조란 소리입니다. DFS BFS 생각이 나네요... DOM 트리 중 하나가 수정될 때 모든 돔을 뒤지는 게 비효율 적이어서 생긴 게 바로 가상 돔이다 가상 돔의 동작 방식은 기존 DOM과 어떤 행동 후 새로 그린 DOM을 비교해서 바뀐 부분만 교체 >> 업데이트 처리가 매우 간결하다 DOM을 그리거나 갈아 끼우는 것은 렌더링, 리렌더링 이라고 한다 라이프 사이클이란? 한마디로 컴포넌트의 인생? 생명주기라고 할 수 있다. 함수형 ..
yarn start 전에 yarn add styled-components 장점 class 이름 짓기에서 해방 컴포넌트에 스타일을 직접 적기 때문에 간단하고 직관적 import logo from './logo.svg'; import styled from 'styled-components' function App() { return ( hello react ); } const MyStyled = styled.div` //스타일드 컴포넌트 작성 방법 width: 50vw; height: 150px; padding: 10px; border-radius: 15px; color: #fff; &:hover: { background-color: #ddd; } background-color: ${(props) => (p..
SCSS란 그냥 CSS를 편하게 쓰도록 도와주는 친구라고 보면 된다 뒤에 .scss 라고 붙인 파일을 붙여저 style.css에 있는 내용을 모두 복사 붙이기 그리고 터미널에서 scss 확장 파일을 인스톨 해줘야한다 # 오류 메시지를 보면서 하나씩 설치하면 너무 느리니, 이번엔 제가 필요 패키지를 싹 가져왔어요! # 그대로 복사해주세요! 아래 코드로 scss 확장 설치 yarn add node-sass open-color sass-loader classnames 기본문법은 css와 유사하다 그러나 nesting이 가능하다 아래처럼 묶어서 ```scss //scss 네스팅 (묶어주기) div { p { color: #888888; font: { // 폰트 속성도 묶어주기 family:sans-serif; ..
리액트는 기본적으로 단방향으로만 데이터 전송?이 가능하다 부모컴포넌트는 자식에게 데이터를 넘겨줄 수 있지만 자식컴포넌트는 부모에게 데이터를 줄 수 없다! 함수형 컴포넌트의 장점 클래스형 컴포넌트보다 선언이 간편하다. function App() ... 클래스형 컴포넌트보다 메모리 자원을 덜 사용한다. 프로젝트 빌드 후 배포할 때 결과물의 파일 크기가 더 작다. (클래스형 컴포넌트와의 성능과 파일 크기 면에선 크게 차이가 없지만 함수형 컴포넌트가 좀 더 작음) 하지만 큰 단점이 하나 있다. 함수형 컴포넌트의 단점 state 와 라이프사이클 API 사용이 불가능하다. 그렇지만 이 단점은 리액트 v16.8 버전 이후 Hooks 라는 기능이 도입 되면서 해결 되었다. 클래스형 컴포넌트와 똑같이 사용할 수 있는 것..
리액트는 레고 컴포넌트는 레고블록 컴포넌트에는 '클래스형'과 '함수형'이 있습니다 웹 사이트는, 크게 , , 세 개의 컴포넌트가 있고, 컴포넌트는, , 컴포넌트로 이루어져 있다 리액트 코딩룰 폴더는 소문자로 시작하는 카멜케이스를 사용 JS파일, 컴포넌트 이름은 대문자로 시작하는 카멜케이스를 사용 폴더나 파일 앞 글자는 대문자로 시작해야한다 버킷리스트 컴포넌트 // 리액트 패키지를 불러옵니다. import React from 'react'; // 함수형 컴포넌트는 이렇게 쓸 수도 있고 // function Bucketlist(props){ // return ( // 버킷 리스트 // ); // } // 이렇게 쓸 수도 있어요. =>가 들어간 함수를 화살표 함수라고 불러요. // 저희는 앞으로 화살표 함수를..
www.notion.so/1-f54ec720d23d4a30be3a0d47bb9573b2#0be6b03eb2e04dbe9670f3ce2de59ad3 [스파르타코딩클럽] 프론트엔드의 꽃, 리액트 - 1주차 매 주차 강의자료 시작에 PDF파일을 올려두었어요! www.notion.so 리액트 환경 셋팅은 위의 링크를 참고하면 된다 리액트는 레고 같은친구다 CRA란?? 여러 블럭을 모아놓은 패키지? 라고 할 수 있다 리액트에선 프로젝트를 앱이라고 부르기도 한다! 리액트의 기본문법 JSX 아래처럼 변수에 html을 저장 할 수있다 앞에서 말했듯이 마치 레고같다..! const start_half = 안녕하세요! 시작이 반이다! ; JSX의 규칙 1. 태그는 꼭 닫아주기 , // 특정 태그는 /하나만 뒤에 달아줘도 ..