목록Development/React JS (38)
초보 개발자의 성장 일기
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/biyrAY/btsAPV2SUxk/tb3DmLiLOebKQ4tVdoSj00/img.png)
동기(synchronous) 해당 코드 블록을 실행할 때 thread의 제어권을 넘기지 않고 순서대로 실행하는 것을 의미한다. console.log("This is synchronous...") for (let i = 0; i < 1000000000; ++i) { console.log("I am blocking the main thread...") } console.log("This is synchronous...DONE!") 비동기(asynchronous) 코드의 순서와 다르게 실행된다. 비동기 처리 코드를 감싼 블록은 task queue에 넣어지며 main thread가 동기 코드를 실행한 후에 제어권이 돌아왔을 때 이벤트 루프가 task queue에 넣어진 비동기 코드를 실행한다. setTimeou..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dA6iVr/btsAF5THm5p/byR56n2irkK1y8bjT8XTQK/img.png)
SPA SPA(Single Page Application)은 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식으로 유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낀다. 리액트는 SPA 방식이다. React Router를 통한 SPA 내 화면 전환 및 주소 값 변경은 서버가 아니라 클라이언트 측에서 일어나기 때문에 Client-Side Routing이라고 한다. Client-side routing 기술을 활용, 페이지 진입 시 리로드없이 라우팅한다. AJAX 기술을 활용, 페이지 이동 시 서버에 데이터만 요청하여 자바스크립트로 페이지를 만든다. MPA와 다르게, 여러 페이지를 하나의 앱의 구성요소로 보고 여러 페이지 간의 스타일, 컴포넌트를 재활용하는 방향으로 구현한다. 자바스크립트만을 활용해 전체 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/MTKJZ/btsAxT6UtDB/CWO4s3FhLVLKJUHzaESQK1/img.png)
CSS import CSS(혹은SCSS, Sass) 파일을 import 해서 사용한다. 필요한 모든 CSS스타일을 하나의 파일에 작성하여, 자바스크립트 파일과 코드 분리가 가능하다. 단순히 CSS 파일만을 import 하여 사용할 수 있어 편리하다. 컴포넌트가 많지 않을 경우, 하나의 CSS 파일에 코드를 관리하는 것도 가능하다. CSS파일은 분리할 수 있으나, namespace를 나눌 수 없다. 스타일이 겹칠 경우 cascading rule에 따라, 마지막에 나온 룰이 덮어 씌워진다. Button.JS import'button.css' functionButton({children}) { return( {children} ) } Button.CSS .button { background-color: ora..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cS6TuD/btsAqK3fAvF/qSNji9fE05kvCfvvA7h271/img.png)
Hooks 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기위해 사용한다. Hook의 이름은 반드시 ‘use’로 시작해야 한다. 최상위 Level에서만 Hook을 호출 할 수 있다. State Hook const App = () => { const [state이름, setState이름] = useState(초기값) } useState는 컴포넌트 내 동적인 데이터를 관리할 수 있다. 최초에 useState가 호출 될 때 초기값으로 설정되며 이후 재렌더링이 될 경우 무시된다. state는 읽기전용 이므로 직접 수정하면 안된다. state를 변경하기 위해서는 setState를 이용한다. state가 변경되면 자동으로 컴포넌트가 재렌더링된다. state를 변경하기 위해..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b70lof/btsAmGFIfjR/b5jQ3Klm8eBHVEM7SqkAt1/img.png)
Props Component에 원하는 값을 넘겨줄때 사용하며 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열등 JavaScript의 요소라면 제한이없다. 주로Component의‘재사용’을 위해 사용한다. props는 읽기 전용으로 임의로 값을 변경해 사용해선 안되고 변경하고 싶다면 새로운 변수를 생성해야 한다. props를 활용해 component 만들기 const Greeting = (props) => { return { props.username } } export default Greeting; const Greeting = (props) => { const { username } = props; return { username } } export default Greeting; const Gree..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Q9EV5/btsAhdKAwY4/xQLKbeBTpy3vNOto0ziwpk/img.png)
React란? 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 Component: React에서 서비스를 개발하는데 있어 독립적인 단위로 쪼개어 구현 Virtual DOM: 가상적인 표현을 메모리에 저장하고 ReactDOM과같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 JSX: JavaScript 내에서 UI를 작성하기 위해 개발자에게 익숙한 환경 제공 HTML과유사 npx 명령어 npm create-reaxt-app [디렉토리명]: 패키지를 1회성으로 내려받아 실행할 때 사용한다. cd [디렉토리명]: [디렉토리명]으로 이동한다. npm start: 현재 디렉토리의 프로젝트를 실행한다. npm build: 파일을 압축하고 번들링 하는 과정이다. 라이브러리 npm inst..
새로운 개념 css box model ? Sass ? css box model box-sizing content-box의 크기를 말하며 크기를 정의하기 위해 width, height가 디폴드 값이 된다. 예를들어 width: 150px, heigh: 300px로 정의해보자. 이 때 content의 크기가 위와 같이 정의가 되고, padding 100px을 넣었을 경우 content-box는 양옆, 위, 아래 각각 100px이 추가되어 width: 150px + 200px = 350px, height: 300px + 200px = 500px이 되는 것이다. 이렇게 하면 레이아웃 구성시 이렇게 따로 계산하게 되면 레이아웃 작성 시 이해하기 어려움 (코드랑 보여지는 부분이 다름) 쉬운 레이아웃을 정의하기 위해..
새로운 개념 스타일링? Sass? styled-components? 번들사이즈? 스타일링은 왜 하는가? 웹이 스타일링 없이 글만 작성되있으면 한눈에 알아보기 힘들고 당황스럽다. 효율과 사용성을 위해 사용, 좋은 앱을 만들기 위한 것, 결국 사용자에게 더 나은 UI를 구현하기 위한 방법이다! 정말 말 그대로 웹을 스타일링 하는것을 의미! 스타일링의 방법 1. CSS import : css 파일을 따로 만들어 import해서 css 파일을 가져옴 Button.JSX import 'button.css' // button.css를 가져옴 funtion Button({ children }) { // chidren이라는 컴포넌트를 사용될 때 함수 구현 return ( // html button태그 생성, class..