개념정리
-
[TIL] 2020-04-06Trainings/이전 TIL 기록 2020. 4. 6. 23:43
[ groomedu ] - 웹 표준 사이트 만들기(2019) 26강 로그인 폼 만들기까지 수강 [ 노마드코더 ] - 바닐라 JS로 크롬 앱 만들기 #2.3 Modifying the DOM with JS #2.7 DOM - If else - Function practice part Two까지 재수강 - ReactJS로 웹 서비스 만들기 #3.1 All you need to know about State #3.2 Component Life Cycle까지 재수강
-
[TIL] 2020-03-27Trainings/이전 TIL 기록 2020. 3. 27. 23:49
[ groomedu ] - 웹 표준 사이트 만들기(2019) 14강 전체 메뉴까지 수강 [ 노마드 코더 ] - ReactJS로 웹 서비스 만들기 #2. 2 Dynamic Component Generation까지 수강 [ 배운 내용 ] 이미지를 표현하는 방법 1. img 태그로 표현(의미가 있을 때) src속성, alt속성 2. background 속성으로 표현(의미가 없을 때) - 대체 문자 X 3. 이미지를 background 속성 - 웹 표준 준수하기 위해서 가상으로 대체 문자를 만들어 줘야함(IR 효과), 이미지 스프라이트 효과 /* IR 효과 */ /* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */ .ir_pm { display: block; overflow: hidden; font-size..
-
[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()를 ..