React.js
-
[React 튜터링 일지] React 기본 3, 4주차React.js 2020. 12. 15. 16:50
소소하게 React를 이용한 웹 개발 튜터링을 진행하게 되어 일지를 남긴다. 1. 또 Github 생각보다 Github으로 원활하게 협업하는 수준까지 전달하기는 쉽지않다. Pull Request 통한 작업 방법과, branch를 생성하는 기준, Head 등에 대해 설명 그 다음주 (4주차) 확인때도 원하는 레벨?이 아니어서 Git PR 통한 작업 반영 방법에 대해 다시 설명. PR 리뷰는 월요일까지 해주고, 리뷰에 대한 변경은 그 PR에 보이도록, 화-수 안에 반영하는 스케줄을 확정지었다. branch naming에 대해 논의 - 개인적으로는 fix/... feature/... 식이 좋다. 많이들 그렇게 쓰기도 하니까. 2. 코드리뷰와 함께 성장하다. 튜터링의 대부분 시간을 함께 코드리뷰 하면서 보낸다...
-
[React 튜터링 일지] React 기본 2주차React.js 2020. 12. 3. 13:13
소소하게 React를 이용한 웹 개발 튜터링을 진행하게 되어 일지를 남긴다. 1. Github Commit, Branch, Remote repository, staging 등 Pull Request 통한 코드 반영 필요성과 PR 생성 방법 develop branch 기준 개발하도록 전달 2. 코드리뷰 rendering function에 validation logic 있어서 분리 요청 함수에는 각자 "역할" "책임"이 있고 그에 맞게 적절히 분리되어야 한다.Class 내부의 method는 소문자로 시작하는게 국룰이다. radio button handling 코드 예시 추가 https://github.com/qnbz209/pogomgom-react/pull/1/commits/a60a9366a61ec6662e..
-
[React 튜터링 일지] React 기본 1주차React.js 2020. 11. 27. 02:05
소소하게 React를 이용한 웹 개발 튜터링을 진행하게 되어 일지를 남긴다. 1. React를 이용한 웹 개발 stack에 대한 설명 보통 react와 함께 react-router, redux를 사용한다. react-router는 SPA에서 url path에 따라 다른 react component를 렌더링하게 도와준다. redux는 중앙 데이터 저장소(store)로 react의 한방향 데이터 전달로 인한 개발 번거로움을 덜어준다. 위 항목 얘기하면서 component가 뭔지, redux 얘기하면서 redux 없이 실제 헤비한 웹 개발하면 어떤 불편함이 있을지 설명하기위해 Component Tree 구조에 대해 설명함 2. Component란? React는 Component로 이뤄진 Tree이다. Comp..
-
[초심자 튜터링] React의 render() 리턴에 대하여React.js 2020. 11. 26. 02:04
개인적으로 React를 소소히 튜터링하는 중인데, 튜터링하며 받는 질문에 대한 답변을 공유한다. 초심자 기준이라 완전 초심자용 내용일수도. 질문: React render에서 왜 에러가 나나요? 질문 코드 예시 class App from React.Component { // 생략 someFunction() { return someFunction; } render() { return ( ...생략... someFunction() ); } } 답변 1: JSX 구문 안에서 javascript 구문은 { }으로 감싸져야 합니다. 여기서는 render함수의 return으로 "JSX 문법을 사용한 것" 반환하고 있습니다. 그리고 Javascript 변환시 JSX 부분이라고 생각할 겁니다. 지금 이대로라면 (답변 2..
-
React project structure articlesReact.js 2020. 11. 17. 11:05
React 튜터링을 위해 조사하며 찾은 좋은 article들을 모아봤다 1. medium.com/@Charles_Stover/optimal-file-structure-for-react-applications-f3e35ad0a145 Optimal file structure for React applications Dan Abramov famously officialized the file structure for React applications as “move files around until they feel right.” I do not want to… medium.com "One of the most important and agreed upon structures for a React projec..
-
React Router에 대해서 내가 모르던 것들React.js 2020. 11. 4. 13:27
1. react-router-dom vs react-router react-router는 SPA(Single Page Application)에서 페이지 이동(새롭게 페이지 GET을 해오고, 다시 그리고, 그 사이에 사용자는 깜빡인다고 느껴지는 과정들) 없이 화면간 이동을 할 수 있게 만들어주는 library입니다. react-router는 이러한 기술의 core입니다. react-router를 import해서 쓰고 있는것이 react-router-dom인데, react-router-dom은 이제 웹(프론트엔드)을 개발하면서 필요한 dom 요소들을 렌더링하는 component를 추가로 가지고 있습니다. 는 브라우저 렌더링할때 tag를 그리고, 는 뒤로가기 앞으로가기 등의 이동 이력을 관리하는 window...
-
virtual DOM에 대해서React.js 2020. 10. 20. 01:27
1. 기존 DOM의 문제가 뭐길래? - 브라우저가 html을 받아서 그릴때, SPA에서 화려한(?) User Interaction을 위해서 DOM 조작을 할 때 무슨일이 일어날까? 처음 HTML을 받은 경우에는 이를 파싱해서 DOM Node로 이뤄진 트리를 만든다. 이 Node는 각각 HTML element에 대해 존재한다. DOM Tree와 css 등 스타일 문서를 통해 Node에 그 Node의 스타일을 붙여주고, 이런 렌더링 정보를 담고있는 Render Tree를 만든다. Render Tree를 만드는데에 많은 computing이 필요하다. 스타일 문서를 파싱하는것부터 시작해서... 만들어진 Render Tree를 통해 실제 화면의 어느 자리에 위치할지 계산하는 레이아웃 과정을 거치면 실제 화면에 각..