본문 바로가기
반응형

전체 글266

Component & State & Props의 기본개념 Component - Component는 클래스형과 함수형이 있다. - 생김새와 용도가 다른데, React가 발전을 거듭하며 이젠 생김새만 다르다고 봐도 무방하다. - 리액트는 함수형 사용을 권장한다. - 리액트는 레고이고, 컴포넌트는 레고의 블럭이라고 생각하면 쉽다. Component란? 컴포넌트를 이해하고 잘 써먹으려면 웹 사이트를 잘 조각낼 줄 알아야 한다. Component는 웹 사이트의 조각이고, 우리는 이 조각을 모아서 웹사이트에 뿌려준다. 웹 사이트를 잘 조각낼 줄 아는 사람 = 리액트를 잘 쓰는 사람 아래와 같은 html이 있다. ... ... ... ... 위는 아래와 같이 컴포넌트로 쪼갤 수 있다. 즉, 이 웹 사이트는, 크게 , , 세 개의 컴포넌트가 있고, 컴포넌트는, , 컴포넌트로.. 2021. 8. 30.
JSX 사용하기 JSX란? - 리액트에서는 딱 하나의 빈껍데기인 html 파일만 존재한다. - public 폴더 아래에 있는 index.html - 리액트의 '뷰' 를 그리는 방법은, JSX를 통해 React 요소를 만들고 DOM에 렌더링 시킨다. - 아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없다. 안녕하세요! 시작이 반이다! - 하지만 JSX는 사용 가능 하다. (HTML을 품은 JS === JSX) - 아래는 리액트의 정식 홈페이지이다. JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org 빈 껍데기인 HTML (index.html) JSX가 적용된 App.js import React from 'react'; imp.. 2021. 8. 30.
React 개발환경 설정 및 프로젝트 생성, 코딩 룰 VS CODE - React 코드 편집기로 사용. Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications. code.visualstudio.com Github Desktop - bash 창에서 command 를 입력할 필요 없이 GUI 로 구현되어 있는 깃허브.. 2021. 8. 26.
JS ES6 - Array 내장함수 0. Javascript Array- Array - JavaScript | MDN JavaScript Array 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다. developer.mozilla.org 1. Map - map은 배열에 속한 항목을 변환할 때 많이 사용한다. - 어떤 배열에 속한 항목을 원하는 대로 변환하고, 변환한 값을 새로운 배열로 만들어준다. - 즉, 원본 배열은 값이 변하지 않는다. const array_num = [0, 1, 2, 3, 4, 5]; const new_array = array_num.map((array_item) =>{ return array_item + 1; }); // 새 배열의 값은 원본 배열 원소에 +1 한 값 console.log(ne.. 2021. 8. 26.
JS ES6 - Scope, =, Spread, 삼항연산자 스코프(Scope) 우리가 어떤 변수를 선언했을 때, 그 변수를 사용할 수 있는 유효범위를 스코프라고 한다. 변수에 접근할 수 있는 범위. var: 함수 단위 let: block 단위(변수: let으로 선언한 변수는 값이 변할 수 있음.) const: block 단위(상수: 한번 선언한 값은 바꿀 수 없다.) function scope(){ const a = 0; let b = 0; var c = 0; // {} 증괄호 안에 든 내용을 블럭이라고 표현해요. if(a === 0){ const a = 1; let b = 1; var c = 1; console.log(a, b, c); // 1, 1, 1 } // c의 값은 변경되었다. // var는 함수 단위라서 if문 밖에서 선언한 값이 변한다. (영역이 .. 2021. 8. 26.
JS ES6 - Class 클래스란? 객체 지향 프로그래밍에서 클래스는 특정 객체를 생성하기 위해 변수와 함수를 정의하는 일종의 틀. 객체를 정의하기 위한 상태와 함수로 구성되어 있고, 객체 단위로 코드를 그룹화하고 쉽게 재사용하려고 사용한다. 클래스의 구성 클래스 안에는 객체를 정의하기 위한 상태(property)와 함수가 있다. class Cat { // 생성자 함수 constructor(name) { // 여기서 this는 이 클래스입니다. this.name = name; } // 함수 showName(){ console.log(this.name); } } let cat = new Cat('perl'); cat.showName(); console.log(cat); 생성자 함수: 클래스 인스턴스를 생성하고 생성한 인스턴스를 초.. 2021. 8. 26.
[ 애플 ] 아이패드 에어 4세대 실버 사용기 안녕하세요^____^ 이번에는 아이패드 에어 사용기로 돌아왔어요~~ 구매일은 7월 25일로 한달 되었네요! 구매하게된 이유는 전화하면서 유튜브 볼때 소리가 줄어들잖아요?! 그거때문에 처음으로 생각하게 되었어요. 제가 전자제품을 한번 사고싶으면 살때까지 생 각하기 때문에 최대한 빨리 사는 편이에요 ㅎㅎ. 한달동안 사용해보니 완전 만족하고 있어요!! 개봉기 아이패드 에어4를 구매하였어요! 프로는 너무 비싸서 엄두도 못내겠더라구요 ㅎㅎ 20W 충전기랑 C타입 케이블이 들어있었어요! 에어4는 최대 30W 지원으로, 가장 빠른 속도로 충전하려면 별도의 충전기가 필요하겠네요 ㅎㅎㅎ 앞면 첫 화면이에요! 전작인 에어3과 다르게, 홈버튼이 사라지고 프로와 같은 디자인이 되었어요. 하지만 프로보다 베젤이 비교적 두껍답니.. 2021. 8. 24.
[ 청라 배달기 ] 청라 가마로강정 후기 안녕하세요!! 그동안 시켜먹은것들이 많았는데 포스팅을 안하고 있었어요~ 오랜만입니다. 약 이주전에 먹었던 가마로 강정이랍니다~~ 위치는 여기에요! 청라점이지만 바다쪽에 가까운 청라라 저희집에서는 30분이나 걸어가야 할 거리네요!! 무조건 배달이에요 이건! 배달의 민족에서 닭강정 검색했는데 안나와서 없어진줄 알고 놀랐어요 ㅎㅎ 강정 혹은 가마로 라고 검색하시면 잘 나온답니다 ㅎㅎ. 포장 이때 요청사항에 치킨무는 필요없다고 받지 않았답니다! 또한 일회용품도 안받았어요. (환경사랑 이라고 되어있네요 ㅎㅎ!) 패키징 종이박스에 깔끔하게 들어가있답니다! 맛 선택 - 매콤 & 달콤 맛 선택은 매콤과 달콤 반반으로 하였습니다. 각각 살짝매운 양념치킨과 달달한 간장치킨이라고 생각하시면 될거 같아요. 포장지는 작은데 먹.. 2021. 8. 11.
공학윤리 - 위험에 대한 공학인의 책임 위험에 대한 전문 직업적 의무와 책임 - 위험전문가들의 접근법 준수 - 공적 토론에 전문성으로 기여 > 민주적인 심사숙고 과정에 참여 - 대안적 접근법, 행동지침 인지 (부당한 독단주의와 심각한 혼란 대처) 위험을 알리는 공학자의 주의사항(지침)/책임 - 위험에 대한 대중의 접근법은 위험전문가와 상이하다는 것 인지하기 - ‘위험이 전혀 없는 그런 것은 없다’라는 말은 신중하게 하기 - 공학자의 한계를 인정하기 - 정부 담당자는 대중 보호의 의무를 진다는 것을 감안하기 - 전문 공학조직은 과학기술적 위험 가능성에 대한 객관적인 정보를 제공해야 하는 의무가 있다는 것을 인식하기 - 위험을 평가할 때 공학인은 비판적인 태도가 필요하다. > 다른 관점 이해, 자신의 능력의 한계 인지 등 기술 시스템의 밀접한 결.. 2021. 8. 6.
반응형

티스토리툴바