본문 바로가기

Study Memos

 (206)
전화번호 부 만들기 튜토리얼 1/4 (Section 6) 참고> velopert.com/3634 * 이 튜토리얼을 따라하려고 create-react-app 을 하니 React가 더이상 -g 로 create-react-app을 사용하는 방식을 지원하지 않는다는 말이 나왔다. 그래서 기존에 내 컴에 깔려있던 create-react-app을 npm uninstall create-react-app으로 지운 후, npx create-react-app phone-book 으로 React 앱을 생성하였다. 1. Computed property names: 어떤 객체의 property에 접근할 수 있게 해주는 문법, ECMAScript 2015부터 적용됨. ex) 이벤트를 받을 때 [e.target.name]: e.target.value 로 사용할 수 있음 2. 부모 컴포넌..
LifeCycle API (Section 5) 참고> velopert.com/3631 1. LifeCycle API: 컴포넌트가 사용자의 브라우저에서 나타날 때, 사라질 때, 업데이트 될 때 호출되는 API -> 옴총 중요!! 2. componentWillMount : 컴포넌트가 새로 만들어질 때마다 호출됨 -> 이 API는 컴포넌트가 사용자의 화면에 나가기 직전에 호출됨 -> 이 API는 크게 신경쓰지 않아도 됨 -> 원래 서버측 JavaScript에서 썼었는데 React v16.3에서는 이 API가 deprecated됨 -> React v16.3 이후부터는 UNSAFE_componentWillMount() 라는 이름으로 사용됨 3. componentDidMount -> 컴포넌트가 사용자의 화면에 나타나게 됐을 때 호출됨 -> DOM을 사용해야 하..
props, state (Section 4) 참고> velopert.com/3629 1. 리액트 컴포넌트에서 다루는 데이터는 두 개로 나뉨: props, state 2. props: 부모 컴포넌트가 자식 컴포넌트에게 주는 값 -> 자식 컴포넌트는 props를 받아오기만 하고, 받아온 props를 직접 수정할 수는 없음 3. state: 컴포넌트 내부에서 선연하며 내부에서 값을 변경할 수 있음 4. 자신이 받아온 props 값은 "this." 키워드를 통해 조회 가능 5. props의 기본값을 설정할 때에는 컴포넌트의 defaultProps를 설정할 수 있음 6. 함수형 컴포넌트와 클래스형 컴포넌트의 주요 차이점은 state와 LifeCycle이 빠져있다는 점. -> 성능상 미세한 차이가 있으나, 무수히 많은 컴포넌트를 렌더링할게 아니라면 성능적으로..
JSX (Section 3) 참고> velopert.com/3626 1. React를 사용하면 웹 애플리케이션에서 사용하는 UI를 재사용 가능한 컴포넌트로 분리하여 작성하기 때문에 프로젝트의 유지보수성을 우수하게 해줌 2. import 구문: 파일에서 JSX를 사용하려면, 현재 파일에 필요한 React Component를 꼭 import 해야 함. 3. webpack은 빌드시 파일의 확장자에 따라 다른 작업을 자동으로 해줌 -> CSS 파일을 불러오면 메인 프로젝트에서 사용한 프로젝트를 한 파일에 모두 결합해줌 -> JavaScript 파일을 불러오면 모든 코드들이 제대로 로딩되게끔 순서를 설정하고 하나의 파일로 합쳐줌. -> svg처럼 따로 설정되지 않은 확장자의 경우 그냥 파일로 불러오고 나중에 사본을 만들어 그 경로를 받아옴...
React 프로젝트 시작하기 (Section 2) 참고> velopert.com/3621 1. React를 제대로 쓰려면 Node, yarn, Webpack, Babel 등의 도구를 설치해야 함. -> 입문자에겐 좀 어려운 과정이어서 페이스북에서 create-react-app 도구를 제공해줌. 2. Webpack을 사용하는 이유: 여러 개의 JSX 파일로 나뉜 React 컴포넌트를 한개로 결합하기 위해 사용. 3. Babel을 사용하는 이유: JSX를 비롯한 새로운 JavaScript 문법들을 사용하기 위해 사용.
React 란 (Section 1) 참고> velopert.com/3612 1. 요즘 웹은 단순한 웹 페이지가 아니라 웹 애플리케이션. -> 브라우저 상으로 자연스러운 흐름을 통한 많은 것을 할 수 있음. 2. 사용자와의 인터랙션이 별로 없는 웹사이트라면 프론트엔드 라이브러리를 굳이 쓸 필요 없이 직접 만들면 됨. -> But, 인터랙션이 많아지고 프로젝트 규모가 커지면 라이브러리가 꼭 필요 3. 대표적인 JavaScript 라이브러리로 Angular, Ember, Backbone, Vue, React 등이 있음 -> 라이브러리들마다 저마다의 특성이 있음 4. Angular -> 라우터, HTTP 클라이언트 등 웹 프로젝트에서 필요한 대부분의 도구들이 내장 -> Angular 1은 나온지 오래되서 많은 기업에서 이미 사용중임 -> Angu..
빨간색 버튼 만들기 (Section 65) 1. Owner Draw 기술: Windows 운영체제가 개발자로 하여금 컨트롤의 색상을 자신이 원하는 색상으로 변경할 수 있도록 지원해주는 기술 -> 컨트롤의 'Owner Draw' 속성을 True로 하면 해당 컨트롤은 스스로 그림을 그리지 않음. -> 컨트롤이 다시 그려져야 할 때마다 WM_DRAWITEM 메시지를 대화 상자로 보내서 사용자가 직접 그릴 수 있도록 함
Notify 메시지 (Section 63) 참고> blog.naver.com/tipsware/221144458154 1. Notify 메시지: 자식 Window에 일어난 사건을 부모 Window에게 알리기 위해 전달하는 메시지 ex) 부모 Window내의 자식 Widnow인 버튼을 클릭했을 때 부모가 그 이벤트를 알고 싶을 때 2. Windows 기본 컨트롤은 비교적 단순한 작업만 수행하기 때문에 WM_COMMAND 메시지로 Notify를 하면 됨 3. Windows 운영체제가 발전하면서 컨트롤들이 점점 복잡해졌고, WM_COMMAND 메시지로는 Notify 정보를 저장할 수 없게 되어 WM_NOTIFY 메시지가 새롭게 추가됨 4. 컨트롤마다 Notify 정보가 다르기 때문에 C 언어의 포인터 문법을 OOP의 다형성 개념과 비슷하게 사용함. 그래..

티스토리툴바