개발자
-
[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-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-09Trainings/이전 TIL 기록 2020. 3. 9. 23:45
[노마드 코더] ReactJS로 웹 서비스 만들기 #3.3 Planning the Movie Component 까지 수강 [배운 내용] [code] class App extends React.Component{ constructor(props){ super(props); console.log("Hello"); } state = { count: 0 }; add = () => { this.setState(current => ({ count: current.count + 1 })); }; minus = () => { this.setState(current => ({ count: current.count -1 })); }; componentDidMount() { console.log("component rend..
-
[TIL] 2020-03-08Trainings/이전 TIL 기록 2020. 3. 8. 23:54
[노마드 코더] ReactJS로 웹 서비스 만들기 #3.1 All you need to know about State까지 수강 [배운 내용] this의 값은 함수를 호출하는 방법에서 결정된다. 1. 전역에서 this console.log(this); // window {...} this.a = 'A'; console.log(window.a) // 'A' this.hello = 'world'; console.log(window.hello) // 'world' cat = "Meow"; console.log(window.cat) // 'Meow' console.log(cat) // 'Meow' thist는 기본적으로 전역 객체인 window에 바인딩된다. 2. 함수에서의 this function foo() {..