반응형

18년 12월 5일 수요일 회사 내에서 제안서 발표를 진행 했다.

주어진 시간은 10분. 발표를 해보면 알겠지만 발표 시간이 10분이라는 시간은 짧은 시간이다.

앞에 사람들은 100여명이 있었다. 발표에 앞서 떨리는 사람부터 스크립트를 읽는 사람들 까지 다양하다. 전 부터 소모임이나 또는 평가에 앞서 발표를 했던 것이 경험이 있는지 큰 떨림은 없었다. 단지 내가 만든 내용을 사람들에게 전하기만 하면 되니까 큰 어려움은 없으리라 생각 했다. 발표가 끝난 후에도 사람들이 말해 주길 멋진 발표였다. 재미있었다. 그리고 완전 발표를 잘 하더라 라는 칭찬들도 들었다. 하지만 스스로 반성도 필요하다.


발표를 하고 난 이후에 앞으로 조금은 고쳐야 될 점이 2가지가 있다.

잘못된 점은 팔을 발표대 탁자에 잠시 괴고 있었다는 점이다. 이건 여유가 있다는 느낌 보다는 조금은 건방지다는 느낌이 있을 수 있다. 차라리 탁자 앞에 있을 것이 아니고 사람들 앞에 나가서는게 더 좋은 방법 일 수도 있겠다. 당당하게 사람들 앞에 서서 발표를 하자.


두번째로는 피티 발표 리허설을 전혀 하지 않았다는 것이다. 내가 만든 피티니까 그냥 발표하면 되겠지라는 생각이 아니고 조금 더 최선을 다하도록 하자.


19년도 조금 더 열심히 활동하고 많은 발표 할 수 있는 기회들이 있으면 좋겠다.

가만히 마음속으로 생각해 본다. 

세계적 기업들 앞에서 발표를 하는 내 모습.

테드와 같은 발표의 장에서 사람들에게 발표를 하는 내 모습.

나라고 못 할 것이 없으니까.

나도 할 수 있으니까.

반응형

'개발 이야기' 카테고리의 다른 글

#2 흰 띠를 매라 그리고 무지를 드러내고 무지와 맞서라  (0) 2019.09.05
#1 언어를 하나 선택하고 능숙해지자  (0) 2019.08.31
일일업무 / 실행계획 / 쉘스크립트  (0) 2019.08.02
What I want.  (0) 2018.12.29
18년 회고(데이터 사이언스, DB튜닝, 컨트리뷰톤 후기) 그리고 19년  (0) 2018.11.30
반응형

JS 를 사용하다 보면 html의 클래스 이름 및 태그를 갖고 오기 위해서 querySelector 을 많이 사용합니다.

MDN문서를 제대로 읽어 보고 제대로 알고 써야 겠습니다.


기본형태

element = baseElement.querySelector(selectors);


리턴되는 값은 인자를 받아 일치하는 baseElement의 자손의 엘리먼트를 갖고 옵니다.

이 엘리먼트를 갖고 오면 js로 html의 값들을 변경 할 수 있습니다 이 내용은 예제를 만들어 보고 다시 살펴 보겠습니다.


첫번째로 selectors는 document 전체에서 일치하는 엘리먼트를 갖고 오고 이후에 이 엘리먼트를 이용하여 자손의 엘리먼트들을

다시 갖고 올 수 있습니다.


예제

index.html

<body>
<div class = "test">
<h1>Hello Selector </h1>
</div>

<script = src="main.js"></script>
</body>



main.js

const myDiv = document.querySelector(".test"),
        myH1 = myDiv.querySelector("h1");

console.log(myDiv);
console.log(myH1);


main.js 에서 html의 엘리먼트를 갖고와서 html을 컨트롤 할 수 있습니다.

h1을 갖고 올 때는 myDiv 자손 엘리먼트 중 h1을 갖고 옵니다.

로그를 확인 해보도록 합시다.

반응형

'Programming > JavaScript' 카테고리의 다른 글

[JS] SyntaxError: Unexpected identifier 에러(es6)  (0) 2019.08.11
[JS] js에러, [nodemon] app crashed - waiting for file changes before starting...  (0) 2019.03.18
[JS] javascript 의 객체 개념  (0) 2019.01.08
[JS] webpack(웹팩)이란? 그리고 webpack 심플한 가이드  (0) 2018.12.03
[JS] node.js 설치(리눅스 / 우분투)  (0) 2018.12.01
반응형

이번 파트는 실제로 js앱을 만들어 보는 시간이다.

앞전의 배운 것들 그리고 js앱을 어떻게 만들어 가는지 직접 배울 수 있다.

기능별로 하나씩 하나씩 만들어 간다.


기능 만들기 순서.

- 시간 보여주기 (clock.js)

- 유저이름을 받고 로컬스토리지에 저장 (greeting.js)

- to-do list (todo.js)

- image background(bg.js)

- getting weather(wheather.js)


노마드코더



강의내용 중.

- html에서의 class 네이밍 (js에서 사용하면 js-이름 을 사용한다)

- init 함수를 만들고 호출 해준다

- Date object의 사용법 및 `` 내에서 삼항연사자 사용 가능

- setInterver 사용

- localStorage 사용

- classList.add / classList.remove를 사용한 css 속성을 부여

- console.dir(event.target.parentNode.id) 을 통한 부모 id 구하기

- localStroage는 string만 저장 가능하기 때문에 JSON.stringify(toDos) 를 통해서 string으로 변경 후 저장

- string -> object(Json) 형으로 변경은 JSON.parse(loadedToDos)

- forEact와 filter  사용

- genRandom() 랜덤 숫자 만들기

- new Image() image 삽입 -> 여기서도 css 미리 만들어 놓고 classList로 더해준다.

- fetch 만 사용 하면 해당 api 호출 한다. 이 호출은 개발자 도구 -> 네트워크에서 호출 내용 및 결과 확인이 가능하다.

- .then사용은 fetch 호출이 끝날 때까지 기다려닸다가 then내용 수행 한다. (fetch를 통한 데이터가 완전히 들어 올 때까지 기다린다.)

반응형

'Lecture > Develop' 카테고리의 다른 글

[css] Nicolas, CSS 마스터클래스 (#2-1 Css Grid)(노마드코더 후기)  (0) 2018.12.20
[css] Nicolas, CSS 마스터클래스 (#1 Flexbox)(노마드코더 후기)  (0) 2018.12.15
[수학] 선형대수학 강의 khan academy 리뷰 (벡터와 공간, 행렬변환, 기저)  (0) 2018.12.12
[JS 강의] Nicolas, 초보자를 위한 바닐라 JavaScript (#2 Practice)(노마드코더 후기)  (5) 2018.12.04
[JS 강의] Nicolas, 초보자를 위한 바닐라 JavaScript (#1 Theory)(노마드코더 후기)  (0) 2018.12.03
반응형

앞전의 강의에서는 Vanilla JS의 필요성을 설명해주고 Practice부터는 JS의 문법들을 설명 해준다. 전에 JS책을 한권 보면서 DOM관련해서 별 깨달음 없이 그냥 읽어 내려갔었다. id를 갖고 오는 구나 정도만 인지 했다. 하지만 이번 강의를 듣고 나니 JS를 확실히 내 스스로도 사용 할 수 있겠구나 라는 생각이 든다. 물론 이것저것 값을 바꿔 가면서 코딩을 한다면 처음에는 시간이 조금 걸리겠지만 말이다. 스스로 작성을 할 수 있다는 것이 중요하다.

앞에 강의까지는 몰랐지만 JS를 처음 공부하는사람이라면 반드시 들어야 되는 강의이다.

리액트만 잘 사용하는게 중요한게 아니었다.



- 모르는 내용 있으면 찾아보고 나아가자.

- 궁금한 것이 있으면 JS는 찍어보자.

- 다음 파트의 앱을 만들기 시작할 때 만들어가는 순서(과정)을 눈여겨 보자.


노마드코더



강의내용중.

- console이라는 obejct가 있고 그 안에 log라는 함수(속성)이 있어. console.log()

-> console.log(console) 찍어보자.

- About function (making, calling)

- About string( " ",  ' ', ` `)

function sayHello(name, age) {
console.log("My name: ", name, ", My age: ", age);
console.log(`My name: ${name}, My age: ${age}`);
}

- 위에서 이야기 했듯이 object안에 함수 선언 가능

const cal = {
plus: function(a, b) {
return a+b;
}
}

const plus = cal.plus(10+5);

- html에 있는 모든 요소들을 갖고 오고 객체로 변경 -> DOM(Document Object Module)

(객체로 변경하면 innerHTML같은 속성도 사용 가능) 

const title = document.getElementById('title');
title.innerHTML = "Hi! JS!!";
//console.dir(title) title내부를 보기 위해서는 dir로 확인
//확인 후 속성들을 변경 가능 위에 innerHTML처럼 변경 가능
//title.style.color = "red";

-> 변경 하고 싶은 내용들을 확인 후 변경 할 수 있다.

- 자바스크립트는 css와 html을 갖고오는데 그치지 않고 이벤트를 주기 위해서 만들어 졌다.

-> 클릭, 크기조절, 드래그, 마우스엔터, 온라인, 오프라인 등등의 이벤트들. 이벤트는 MDN에서 찾아보자.

function handleResize(event) {    //이벤트를 다룰 함수를 만들 때 event 인자가 붙어. 인자 안 쓰고 사용하지 않아도 무방
console.log("I have been resized");
console.log(event)            // 그래도 event한번 찍어보자.

}

window.addEventListenet("resize", handleResize);
//handleResize()라고 호출 하면 이벤트 리슨 없이 바로 호출된다. 이 이벤트는 윈도우 창이 리사이즈 될 때 호출.

title.addEventListenet("click", clickHandleFunc);

- if문에 할 일 없으면 block


반응형

'Lecture > Develop' 카테고리의 다른 글

[css] Nicolas, CSS 마스터클래스 (#2-1 Css Grid)(노마드코더 후기)  (0) 2018.12.20
[css] Nicolas, CSS 마스터클래스 (#1 Flexbox)(노마드코더 후기)  (0) 2018.12.15
[수학] 선형대수학 강의 khan academy 리뷰 (벡터와 공간, 행렬변환, 기저)  (0) 2018.12.12
[JS 강의] Nicolas, 초보자를 위한 바닐라 JavaScript (#3)(노마드코더 후기)  (0) 2018.12.05
[JS 강의] Nicolas, 초보자를 위한 바닐라 JavaScript (#1 Theory)(노마드코더 후기)  (0) 2018.12.03
반응형

강의 내용 중.

- Vanilla Js를 이해 하면 리액트와 같은 라이브러리나 또는 다른 프레임웍을 사용할 때 문제가 없을 것이다.

- 웹상에서의 모든 것은 Vanilla Js 로 이뤄져있다.

-  Js 파일은 body 아래에 존재한다.

- alert / console.log TEST

- 강의에서 배우는 내용은 JS적 언어를 배우는 것이 아닌 컨셉을 배운다.

- Variable 선언

- let / const / var

-> let 같은 경우는 let a변수 선언 후 아래에서 a를 다시 선언하게 된다면 경고 발생

- Data Types

- Array

const dayOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", true, 54];

-> 변수를 각각 선언하는 것이 아닌 배열을 이용하자

-> 똑같은 자료형만 입력하는 것이 아닌 다양한 자료형도 같이 선언 가능


- Object

const junInfo = {
name: "mj",
age: 29,
handsome: true,
gender: "Male",
favWeek: ["Mon", "Tue"],
favFood: [{name:"buger", spicy: false}, {name: "nodle, spicy: true}]
}

console.log(junInfo);
console.log(junInfo.name);

junInfo.name = "GoMJ";

-> 배열과 달리 속성들이 있다.



유튜브 강의링크

노마드아카데미



프로그래밍을 처음 시작하는 사람들에게 정말 추천 하는 강좌이다.

책 한권을 다 읽고 프로그래밍을 시작할려고 하면 지루해지기 쉽다. 무언가를 만들기전에 지치고 말 것이다.

하지만 위의 강좌는 핵심들만 알려주고 바로 프로그래밍을 시작할 것 같다. (아직까지는 이론의 대한 10강의만 본 상태이다.)

자바스크립트에 대해서는 제대로 공부를 해보지 않고 리엑트를 사용했는데 Object 개념들은 정말 놓치기 쉬운 개념인 것 같다.

강의를 쭉 보고 공부하고 습득한 이후에 개념적 이론이 부족하다면 자바스크립트 바이블이라 불리는 내용들을 읽고 공부해야겠다.

일단 프로그래밍을 시작해보자.


ps) 잘 동작하는지의 대해서 작게 테스트하면서 움직이자.


반응형

'Lecture > Develop' 카테고리의 다른 글

[css] Nicolas, CSS 마스터클래스 (#2-1 Css Grid)(노마드코더 후기)  (0) 2018.12.20
[css] Nicolas, CSS 마스터클래스 (#1 Flexbox)(노마드코더 후기)  (0) 2018.12.15
[수학] 선형대수학 강의 khan academy 리뷰 (벡터와 공간, 행렬변환, 기저)  (0) 2018.12.12
[JS 강의] Nicolas, 초보자를 위한 바닐라 JavaScript (#3)(노마드코더 후기)  (0) 2018.12.05
[JS 강의] Nicolas, 초보자를 위한 바닐라 JavaScript (#2 Practice)(노마드코더 후기)  (5) 2018.12.04

+ Recent posts

티스토리툴바