분류 전체보기 (11) 썸네일형 리스트형 [이노베이션 캠프 WIL Week06] 첫 협업을 하며 느낀 점 (스스로 아쉬웠던 점/ 보완하고 싶은 점) 미니프로젝트때 부족한 부분이 많아서 개인공부를 하게되었다. 그때 내가 몰랐던 부분들을 많이 채울 수 있었다. usestate와 onchange함수를 익혔고 리덕스의 순서정도를 익혔다. 이번 클론코딩부터 다시 팀프로젝트에 참가하게 되었다. 추석연휴인지라 이틀정도 쉬어서 급히 해야할 거 같다. 미리미리 하고 싶은데 잘 안된다. 이번에는 리덕스+axios외에도 css요소가 중요해졌다. 지금 난 리덕스+axios도 잘 모르는데 말이다. [이노베이션 캠프 WIL Week05] Axios axios란 Axios는 브라우저, Node.js를 위해서 만들어진 Promise API를 활요하는 HTTP 비동기 통신 라이브러리이다. 즉 http를 이용해서 서버와 통신하기 위해 사용하는 패키지를 말한다. # HTTP Methods 클라이언트가 웹서버에게 사용자 요청의 목적/종류를 알려주는 수단 이 Method중에서 Axios로 통신하면서 가장 많이 사용되는 메소드들을 정리 1) GET get은 서버의 데이터를 조회할 때 사용합니다. 기본적인 사용방법은 아래와 같습니다. // url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있습니다. // config는 axios 공식문서에서 확인하세요. axios.get(url[, config]) // GET 2)POST axi.. [개인과제 5주차] 리덕스에서 미들웨어 청크의 역할은 뭘까요? 리덕스에서 많이 사용하고 있는 미들웨어중에 하나입니다. thunk를 사용하면 우리가 dispatch를 할때 객체가 아닌 함수를 dispatch 할 수 있게 해줍니다. 즉 dispatch(객체) 가 아니라 dispatch(함수)를 할 수 있게 되는 것이죠! 그래서 중간에 우리가 하고자 하는 작업을 함수를 통해 넣을 수 있고, 그것이 중간에 실행이 되는 것 입니다. 그래서 아래 흐름과 같이 실행이 되는거죠. 그리고 이 함수를 thunk 함수라고 부릅니다. 프로미스는 정확히 말하면 비동기가 아닙니다. 비동기와 프로미스는 각각 무엇일까요? 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특.. [이노베이션 캠프 WIL Week04] 라이프사이클(클래스형 vs 함수형), react hooks 매번 복붙으로 공부중이긴한데, 이렇게 해도 되는건지 모르겠다. 프로젝트 만들라고 하는데... 만들 자신이 없다. 이미 만들기도 전에 포기를 해버리게 된다. 그래도 해봐야지... 일단 뷰부터 만들어보려고한다. 클래스형 컴포넌트 클래스형 컴포넌트는 함수형 컴포넌트와 달리 상태(state)와 라이프사이클(생명 주기 메서드)을 갖습니다. 클래스형 컴포넌트에서는 render() 함수가 반드시 있어야 하고, render() 함수는 JSX를 반환해야 합니다. 함수형 컴포넌트 함수형 컴포넌트는 상태(state)와 라이프사이클을 갖지 않기 때문에 메모리 클래스형 컴포넌트에 비해 자원을 덜 사용하고, 선언하기 편합니다. Hook은 리액트 v16.8 업데이트에서 새로 추가된 기능입니다. Hook은 class를 작성하지 않고.. [이노베이션 캠프 WIL Week03] React : DOM, 서버리스 React 키워드 : DOM, 서버리스 1. dom이란? 출처: https://m.blog.naver.com/magnking/220972680805 [JavaScript] DOM이란 무엇인가? JavaScript를 공부하다보면 브라우저 기반의 여러 객체들에 대해서 듣게 됩니다. 처음부터 이 객체들이 ... blog.naver.com DOM을 조금 풀어서 써 볼까요? DOM은 Document Object Model의 약자입니다. Document는 문서이고 Object는 객체로 번역이 되죠. 그리고 Model은 그냥 모델로 많이 쓰죠. 문서 객체 모델로 번역을 할 수 있겠네요. 번역을 해도 아직 통 감이 오지 않네요. 도대체 이 문서 객체란 것이 무엇일까요? 문서 객체란 이나 같은 html문서의 태그들을.. [week 03] 부모 컴포넌트에서 자식 컴포넌트로 라이프 사이클 흐름 질문 부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다. 컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요? https://velog.io/@jsw4215/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%B6%80%EB%AA%A8%EC%9E%90%EC%8B%9D-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4 [리액트] 부모/자식 라이프사이클 🔐 부모 컴포넌트 A와 자.. [week 03] SPA 방식과 MPA 방식은 무엇인가요? SPA, Single Page Application 단일 페이지 응용 프로그램 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말합니다. 즉, 현재의 HTML을 고정하고 변경되는 부분에 대해서만 서버에서 불러와 클라이언트 사이드에서 렌더링하는 방식인 것입니다. 클라이언트가 서버에 최초로 요청을 하게 되면 HTML, CSS, js 등 사이트의 모든 필요한 소스를 가져오고 다음 요청에는 AJAX를 이용해 변경에 필요한 부분만 가져오는 방식입니다. 1. 최초 페이지 로딩속도가 느립니다. 클라이언트가 최초로 서버에 요청할 때 모든 데이터를 가져오기 때문에 상대적으로 최초 요청에서 속도가 MPA에 비해 상대적으로 느립니다. 그러나.. [이노베이션 캠프 WIL week02 ] 이번 WIL의 키워드 - React: JavaScript의 ES란?, ES5/ES6 문법 차이 양식과 분량은 자유롭게 하되, 키워드를 꼭 넣어서 작성해주세요! ECMA Script의 약어이며 자바스크립트의 표준 규격을 나타내는 용어이고, JavaScript를 표준화시키려고 탄생했다. 뒤에 붙인 5나 6은 새로운 기능이 업데이트되면 붙어지는 버전이라고 생각하면 될 거 같다. ES5는 2009년에, ES6는 2015년에 출시되었습니다. ES5와 ES6와의 차이점은 6년간 새롭게 추가된 기능들을 말하는 것인데요. 1. Let, const 키워드 추가ES5에선 var 밖에 존재하지 않았다. var 는 변수를 선언할 때 사용되는 키워드로, 재할당과 재선언에 굉장히 자유롭다. // ES5 var x = 10; x .. 이전 1 2 다음
