초보 개발자의 성장 일기

동기(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..

SPA SPA(Single Page Application)은 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식으로 유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낀다. 리액트는 SPA 방식이다. React Router를 통한 SPA 내 화면 전환 및 주소 값 변경은 서버가 아니라 클라이언트 측에서 일어나기 때문에 Client-Side Routing이라고 한다. Client-side routing 기술을 활용, 페이지 진입 시 리로드없이 라우팅한다. AJAX 기술을 활용, 페이지 이동 시 서버에 데이터만 요청하여 자바스크립트로 페이지를 만든다. MPA와 다르게, 여러 페이지를 하나의 앱의 구성요소로 보고 여러 페이지 간의 스타일, 컴포넌트를 재활용하는 방향으로 구현한다. 자바스크립트만을 활용해 전체 ..

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..

Hooks 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기위해 사용한다. Hook의 이름은 반드시 ‘use’로 시작해야 한다. 최상위 Level에서만 Hook을 호출 할 수 있다. State Hook const App = () => { const [state이름, setState이름] = useState(초기값) } useState는 컴포넌트 내 동적인 데이터를 관리할 수 있다. 최초에 useState가 호출 될 때 초기값으로 설정되며 이후 재렌더링이 될 경우 무시된다. state는 읽기전용 이므로 직접 수정하면 안된다. state를 변경하기 위해서는 setState를 이용한다. state가 변경되면 자동으로 컴포넌트가 재렌더링된다. state를 변경하기 위해..

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..

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..