정현's 블로그

1. React - 클론코딩 주차(Colley 클론 중) 1) 협업 시 느낀점 다른 사람들이 열심히 하는 모습을 보고 분발하게 됨. 다른 사람의 코드를 볼 수 있는 게 장점. 나와의 차이점을 알 수 있고 배울 점들이 많다는 것을 알게 됨. 리덕스 스토어를 Mypage와 연결하는 부분을 맡았고 심지어 구현까지 해볼 수 있게 됨. 이게 뭐라고 뿌듯했음. 후딱 끝내버리고 팀원분들 도와드리러 가야겠다. 2) 아쉬운 점 백에서 어떤 코드와 구조로 진행되는 지 알아보고 싶은데.. 막상 봐보니 뭔소린지도 모르겠고 그냥 '리액트에 집중해야지' 생각하게 됨.

1. React 1) Axios Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용합니다. 2) HTTP Methods 클라이언트가 웹서버에게 사용자 요청의 목적/종류를 알리는 수단 3) GET axios.get(url,[,config]) GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도임. 주소에 있는 쿼리스트링을 활용해서 정보를 전달하는 것이지 GET메서드는 값이나 상태등을 바꿀 수 없다. 4) POST axios.post("url주소",{ data객체 },[,config]) post 메서드의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 ..

1. React 1) Class형 vs 함수형 1-1) 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const name = 'react'; return {name} } export default App; 1-2) 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component { render() { const name = 'react'; return {name} } } export default App; 출처: https://devowen.com/298 1-3) 차이점 정리 함수형: State, LifeCycle 관련 기능 사용 불가능.(Hook..

1. React 숙련 주 1) 배운 것 Document Object Model의 줄임말. 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성함. 웹브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있음. 가상돔에서 작성 후 마지막에 비교하여 바뀐부분만 진짜 DOM에 반영한다. 동적 라우팅: 1. -> :(콜론)처리 후 cat_name하면 nabi, 치즈 등 random 한 값이 들어올 수 있도록 해줄 수 있음. 2. -> 아예 컴포넌트 값 명시. React-router-dom 버전에 따라 컴파일 시 오류날 수 있음. 버전에 따라 코딩법도 좀 다름. /cat?name=nabi -> ?ke..

강의마다 리액트 버전(?) 이 달라 똑같이 코드 쳤는데도 에러나는 경우가 부지기수... 리액트가 빨리 변하는 언어라는 걸 체감. 나한테 제일 잘 맞는 강의 찾아서 그거 하나만 죽어라 파야지. 1) Constructor Component가 실행될 때, Constructor 함수가 있다면 Constructor가 제일 먼저 실행된다. 초기화 담당. 2) 상위 컴포넌트 State값 -> 하위 컴포넌트 Props값으로 전달 -> 얼마든지 가능. 3) 4) 5)

1. React 1) Spread 문법 let a1 = [1,2,3] let a2 = [4,5,6] let a3 = [...a1, ...a2] a3 = [1, 2, 3, 4, 5, 6] 로 출력됨. 2) className -> DOM요소가 아니라 React 요소임. 3) 가상 DOM - 찐 DOM 내비두고 메모리 위에 가상 DOM 구현. - 마지막에 비교해보고 수정된 부분 찐에 추가. 4) 내가 짠 코드 5) 다른사람 코드

1. React 1) getElementsByClassName -> Class로 Dom요소에 접근 -> 스타일을 바꿀 수 있음 -> click과 같은 이벤트 추가할 수 있음. 2) CSS - Calc 함수 3) Camel Case - 띄어쓰기 대신 대문자 사용.(낙타 등과 같다고 해서 이렇게 붙였다고 함) 4) Const, Let, Var - Const, Let은 블록레벨 스코프를 갖는다. - Var는 함수레벨 스코프를 갖는다. -> 각 변수에 1을 할당하여 선언하고 if문 돌린 후 또다시 선언하면 Const, Let은 Console 창에 '0'으로 뜬다. if문 전에 선언한 Const, Let의 값과 다르다는 것임. 5) contructor - 생성자 함수 - 함수가 생성되면 초기화시켜줌. 6) sup..