Trainings/이전 TIL 기록
-
[TIL] 2020-03-26Trainings/이전 TIL 기록 2020. 3. 26. 23:52
[ groomedu ] - 웹 표준 사이트 만들기(2019) 헤더 타이틀 & 웹 폰트까지 수강 [ programmers ] - 자바스크립트로 level 1인 k번째 수 문제 풀이 [ 배운 내용 ] - 구글 웹 폰트 가져오는 방법을 배움 - Array.slice(start, [end]) : 자바스크립트의 Array 객체에서 slice() 함수는 배열 요소에서 지정한 값(시작점, 종료점)을 가져오고 싶을 때 사용하는 함수이다. var a = [1, 2, 3, 4, 5]; a.slice(0, 3); // [1, 2, 3]을 반환한다. a.slice(3); // [4, 5]를 반환한다. a.slice(1, -1); // [2, 3, 4]를 반환한다. a.slice(-3, -2) // [3]을 반환한다. - Ar..
-
[TIL] 2020-03-25Trainings/이전 TIL 기록 2020. 3. 25. 22:47
[ groomedu ] - 웹 표준 사이트 만들기(2019) 헤더 타이틀 & 웹 폰트까지 수강 [ 노마드코더 ] - ReactJS로 웹 서비스 만들기 재수강 [ 배운 내용 및 회의록 ] - 둘다 클론 코딩으로 이루어졌기 때문에, 코딩을 하는 것을 따라서 진행하는 중이다. - 웹 표준 사이트를 만들 때, 레이아웃을 구분하기 위해 div에 id값으로 header, contents, footer를 적용해서 기본 틀을 만들고, 또 그 안에서 div로 header안에 또 다른 레이아웃을 구성하고, 또 contents안에 또 다른 레이아웃을 구성하는 방법을 배우고 있다. - 다른 React 강의를 듣고 있지만, 너무 이론 위주이고 중간중간에 모르는 개념들이 많아서, 노마드코더 React강의를 다시 재수강하면서 기본..
-
[TIL] 2020-03-23Trainings/이전 TIL 기록 2020. 3. 23. 23:48
[ groomdue ] 웹 표준 사이트 만들기(2019) 레이아웃 07강까지 수강 1분 코딩 - 자바스크립트 Part2 강좌 수강 [ 배운 내용 ] [ HTML ] - 기존에 사용하는 홈페이지를 마크업 하는 과정을 따라서 코딩함. [ JavaScript ] var, let, const var는 ES2015(ES6) 이전부터 사용되었고, let과 const는 ES6에서 등장했다. var - 함수 스코프를 사용하며 재할당, 재선언 모두 가능하다. var testVar = 1; console.log(testVar); // 1 testVar = 2; console.log(testVar); // 2 var testVar = '1'; console.log(testVar); // '1' - undefiend로 초기화..
-
[TIL] 2020-03-22Trainings/이전 TIL 기록 2020. 3. 22. 23:32
[ groomdue ] - 처음 만난 React(리액트) 조건무 랜더링 중간까지 수강 - 웹 표준 사이트 만들기(2019) 01강 수강 [ 배운 내용 ] [ HTML ] - header, nav, side, contents, footer을 이용해 레이아웃을 알맞게 배치하는 연습함. [ React } Condition Rendering 이란? - 조건이라는 의미를 가지고 있으며, 조건에 따른 렌더링을 의미한다. - 쉽게 말하자면, 조건이 True(참)이면 버튼을 보여주고, False(거짓)이면 버튼을 가리는 것과 같이 조건에 따라서 다른 결과를 보여준다. // 회원인 경우 function UserGreeting(props) { return Welcome back! } // 회원이 아닌 경우 function..
-
[TIL] 2020-03-19Trainings/이전 TIL 기록 2020. 3. 19. 23:46
[ groomedu ] - 처음 만난 React(리액트) Handling Events까지 수강 [ 배운 내용 ] Event란? 어떤 특정한 하나의 사건을 의미하며, 버튼 클릭을 하는 사건, 즉 버튼을 클릭하는 이벤트를 뜻한다. 사용자가 웹 페이지에서 어떠한 버튼을 클릭한 사건이라고 볼 수 있다. 예를 들어, Activate Lasers 버튼이 하나가 있고, onClick이 안에 어떠한 함수를 선언해 놓았다. 버튼을 클릭 했을 때, 이 이벤트가 발생을 하고 이 이벤트가 발생했을 때, 어떠한 처리를 하겠다는 의미를 뜻한다. DOM에도 이벤트가 있고, React에도 이벤트가 있다. [ HTML ] Activate Lasers [ React ] Activate Lasers - React 같은 경우에는 소문자 대..
-
[TIL] 2020-03-18Trainings/이전 TIL 기록 2020. 3. 18. 22:35
[ groomedu ] - 처음 만난 React(리액트) State and Lifecycle까지 수강 [ 배운 내용 ] state란? - 상태라는 의미를 가지고 있다. 즉, 리엑트 컴포넌트의 상태를 의미한다. - 리엑트에서는 데이터를 의미하며, 컴포넌트에 대한 변경 가능한 데이터이기도 하다. - state는 사용자가 정의한다. - 렌더링이나 데이터 흐름에서 사용하는 값들만 state에 포함시켜야 한다. - 그렇지 않은 데이터는 그냥 정적인 데이터로 관리하는 것이 좋다. - state는 자바스크립트의 객체라고 보면 된다. - state는 직접 수정할 수 없다.(하면 안 된다) - 리엑트에서 관리하기 때문에 우리가 수정하면 이상한 방향으로 흘러갈 수 있기 때문이다. - state는 꼭 setState()를 ..
-
[TIL] 2020-03-16Trainings/이전 TIL 기록 2020. 3. 16. 22:20
[ groomedu ] 처음 만난 React(리액트) Componenets and Props까지 수강 [ 배운 내용 ] - 리엑트를 구성하는 구성요소라는 뜻을 가지고 있다. - 레고 블록을 조립하듯이 컴포넌트들을 모아서 개발하는 것과 같은 맥락이다. - 리엑트 컴포넌트에서 입력은 Props이고 출력은 React element이다. 붕어빵 컴포넌트가 존재, 다른 말로 붕어빵 틀이 존재한다면 그 컴포넌트를 가지고 다양한 element, 붕어빵을 만들 수 있다. 다양한 붕어빵(element)를 만들 때, 필요한 것이 Props라는 것이며 이것은 속성이라는 뜻을 가진다. 붕어빵에 들어가는 재료들을 Props라고 이해하면 쉽다. 즉, component의 속성은 Props..
-
[TIL] 2020-03-14Trainings/이전 TIL 기록 2020. 3. 14. 21:51
[groomdue] 가장 핫한 프론트엔드 라이브러리🔥, React 가지고 놀아보기 [배운 내용] - index.js 파일에 들어가면 ReactDOM.render(, document.getElementById('root')); 가 존재한다. - 이 코드가 의미하는 것은 "App 컴포넌트를 root라는 id를 가진 element에 render하라"라는 뜻이다. - 그리고 publib/index.html 파일로 들어가면, 코드가 있을 것이며, 바로 여기에 렌더링 되는 것이다. - 원래 HTML Element에 클래스명을 설정하기 위해서는 class 속성을 사용해야한다. - 하지만 React에서는 class가 아닌 className이라는 속성을 사용해서 클래스명을 지정한다. 왜냐하면, React에서 class는..