Tech Log

JSX와 자바스크립트 JSX안에서는 자바스크립트 표현식을 쓸 수 있다. 자바스크립트 값을 JSX안에서 렌더링 할 수 있다. 위와 같이 작성을 해서 자바스크립트를 JSX에서 사용할 수 있다. 웹 페이지에 정상적으로 나오는 것을 확인할 수 있다. const 키워드에 대해서 잠깐 설명하자면 const 키워드를 사용하면 해당 값은 함수 단위가 아닌 블록 단위에서 쓰일 수 있다. let 키워드도 마찬가지로 scope가 블록단위다. let과 const는 한 블록 내에서 중복 선언이 불가능하다. let과 const의 다른 점은 const는 값을 한 번 설정하면 바꿀 수 없다는 것이다. 반면 let은 값이 유동적으로 바뀔 수 있다. let와 const와 다르게 var은 scope가 함수 단위이다. 2.2.1 조건부 연..

JSX 문법은 간략하게 소개하고 다음 포스팅에 다른 문법을 게시한다. JSX : 자바스크립트의 확장 문법이다. JSX로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트의 형태의 코드로 변환된다. *바벨 : 입력과 출력이 모두 자바스크립트 코드인 컴파일러를 말함. JSX 를 자바스크립트안에서 사용할 수 있게 해준다. JXS는 리액트로 프로젝트를 개발할 때 사용되며 공식적인 자바스크립트 문법이 아니다. 바벨을 통해 개발자들이 임의로 만든 문법이다. function App() { return ( Hello react ); } function App() { return React.createElement(“div“, null, “Hello “, React.c..

props는 properties의 약자이다. 컴포넌트의 속성을 지정할 때 사용한다. 따라서, 한 컴포넌트를 이용해서 속성을 매번 다르게 지정할 수 있다. 그 결과로 코드를 효율성있게 작성할 수 있게 된다. props 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있다. 다시 말해 props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값인데, 자식 컴포넌트에서는 props를 받아오기만 하고, 받아 온 props를 직접 수정 할 수 없다. 예를 들어, 위와 같은 컴포넌트가 있다고 하자. Subject 컴포넌트의 속성 값을, props를 이용해 변경해보자. 이전에 보인 Subject 컴포넌트의 코드를 이용해서 위와 같이 웹 페이지를 만들게 된다. aaa라는 글자를 이전 사진에 나온 웹페이지처럼 제목으로 ..

(본문의 내용과 관련이 없을 수 있겠지만, 위 코드에 쓰이는 태그를 잠깐 설명하자면 기능상으로는 영향을 끼치는 것이 없다. 그렇지만 코드를 읽기 쉽게 여기가 header라는 것을 알려주기 위해 사용한다. 와 태그도 마찬가지다) 만약에 사진 속에 있는 태그 안의 코드가 정말 많은 양의 코드로 이루어져있다고 하자. 마찬가지로 태그 안의 내용과 태그 안의 내용도 몇 만줄이 되는 코드로 이루어져 있다고 하자. 그 결과는 코드를 읽기가 어렵고 혼란스러운 상태가 될 것이다. 이때 코드를 읽을 때는 , , 태그를 숨겨놓았지만, 웹 페이지 상에는 그 내용의 코드가 있다면 편할 것이다. 예를 들면 위와 같은 것이다. 정말 긴 태그와 그 내용이 있다고 하고, 그것에 따로 이름을 붙여 라는 태그로 대체한다고 하자. 매우 긴..

리액트 공부에 도움되는 사이트 목록 - CodeSandbox : 리액트에서 만든 결과를 바로 볼 수 있음 - toolchain Component에 본격적으로 들어서기 앞서 개괄적으로 정리해보았다. react의 component는 javascript에서 사용하는 사용자 정의 태그와 비슷하다. component의 장점 가독성 재사용성 유지보수 -> 실시간으로 변경된 내용이 업데이트된다. 개발 환경 설정할 때 만들어놓은 샘플을 예로 들면, 샘플 폴더 안에 있는 src에 App.js를 살펴보면 Component를 볼 수 있다. 사진에 나오는 index.js의 이라는 것이 js로 말하면 사용자 정의 태그이고, react에서는 컴포넌트라고 볼 수 있다. 사진에 나오는 클래스 안에 있는 내용이 컴포넌트의 실제 구현이..

이 모든 설정 과정은 Windows 기준이다. 1.2.1 Node.js 설치 먼저 Node.js를 반드시 설치해야 한다. 리액트 애플리케이션은 웹 브라우저에서 실행되므로 Node.js와 직접적인 연관은 없다. 그러나 프로젝트를 개발하는 데 쓰이는 주요 도구들이 Node.js를 사용한다. Node.js를 설치하면 Node.js 패키지 도구인 npm이 설치된다. Windows는 공식 홈페이지 https://nodejs.org/ko/download/ 에서 설치한다. 1.2.2 yarn 설치 npm 대신에 yarn이라는 패키지 관리자 도구를 설치한다. yarn은 npm을 대체할 수 있으며 npm보다 빠르며 효율적인 캐시 시스템과 기타 부가 기능을 제공한다. Windows는 https://yarnpkg.com/e..

배경 프로그램 내 사용자에게서 어떤 작업을 받으면 모델 데이터를 조회하거나 수정하고, 변경된 사항을 (아키텍처에 있는)뷰에 반영한다. 이와같이 특정 부분을 변경하는 규칙을 정하는 것은 애플리케이션의 규모가 크면 상당히 복잡해진다. 또한, 제대로 관리하지 않으면 성능이 떨어질 수도 있다. 이때 페이스북이 아이디어를 고안해냈다. 이것은 어떤 데이터가 변할 때마다 어떤 변화에 대해 고민하는 것이 아니라, 기존 뷰를 없애버리고 처음부터 다시 렌더링하는 아이디어이다. 페이스북 개발 팀이 이 방식으로 최대한 성능을 아끼고 편안한 사용자 경험을 제공하고자 구현한 것이 리액트(React)다. 정의 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용. 구조가 MVC, MVW인 프레임워크와 달리 오직 V(View..

2021/3/25(목) DSC 리액트 스터디 시작 리액트를 통해서 앱 개발을 한다. 이 활동을 통해 팀원들과 협업 능력을 향상시키고 개발 지식을 더 많이 얻었으면 좋겠다. 앱을 개발하고 배포하는 것은 처음이라 긴장이 되기도 하지만, 모르는 만큼 열심히 활동해서 개발자라는 목표에 더 가까워졌음 한다!