intro

어제 늦게와서 .. 일찍 시작하자 했는데 더 늦게 시작하다니
오늘 코드스피츠 도강하는 날

플래닝

0. 몸 풀기 그냥 코드 드랍 2시간 정도 따라하면서 뭐 만들기 !
   하다 보니 별 도움이 안 되는 것 같은 느낌이 들어서 … 패스

1. 배민찬 html css 구조 잡기

2. 운동 (O)

3. Daily Algorithm

Daily Algorithm

아쉽다…
바이너리 서치 왜 생각을 못했지 … logN
anagram도 dic ->으로 해서 key값을 돌려보며 비교해보면 금방인데 근데 key를 돌려서 다른데 넣어줘서 비교한다는 생각이 안 떠올라서 오래걸렸다 _=

01 금방 무난
02 head/ tail이 정확히 어떻게 되는지에 따라서 … for문을 쓰지 않는 것을 보니 재귀로 풀어보라는 것 같다. 그래서 idx를 클로저로 계속 넣어주는 방식을 택했다.
03 for-for-for 돌리면서 답을 찾으면 쉬운데 시간 복잡도 o(n^2 or on^2logn)
이기 때문에 0이 있는 구간 없는 구간을 나눠서 for-for로 0이 있는 구간 세트랑
0이 없는 set를 구하게 했는데
0이 없는 set에서 어떻게 구해야 될지 좀 막혔다. …
04 anagram
05 binary 다시 풀어보기 … 내일
오늘은 알고리즘만 생각보다 너무 많이 했다. 고로 내일 다시 정리해야겠다.

배민찬 html & css 구조 잡기 !!!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//todoMvc에서 있는 delegate helper함수를 써보려고 했는데 eventDelegation 시키는 함수 같아 보인다. ... 음 아직 제대로 이해 못 한 것 같으니 일단 쓰지 말고 패스하자 


export const $delegate =(target, selector, type, handler, capture)=> {
	const dispatchEvent = event => {
		const targetElement = event.target;
		const potentialElements = target.querySelectorAll(selector);
		let i = potentialElements.length;

		while (i--) {
			if (potentialElements[i] === targetElement) {
				handler.call(targetElement, event);
				break;
			}
		}
	};

	$on(target, type, dispatchEvent, !!capture);
}

오늘의 좋은 점 아쉬운 점

깃헙에 초록 불 이 조금 진하게 들어오니 좋다 성취감 높이기 위해서 자잘하게 커밋 많이 해봐야겠다. :D
잘한 점

1. 운동
2. 알고리즘 꾸준히 + til꾸준히 (알고리즘은 다만 좀 더 체계적으로 공부하기를)
3. nextCamp 설계는 하고 있다. 드디어 시작 했냐 얌마 ! :D 네이밍 짓기가.. 어렵다. 특히 비슷한 것들이 많아서
   linkList nav같은 것들이 너무 많아서 이를 어떻게 구별할지 적절한 방법이 잘 아 떠올랐다.

• 아쉬운 점

1. 또 늦잠
2. NextStep… 그래도 너무 늦게 설계하기 시작함 거의 5시부터 하기 시작했는데 -> 운동+간단한 알고리즘 5문제…. 이게 다다 시간효율이 왜 이리 떨어졌는지 모르겠다.
   내일은 한 번 실제로 공부한 시간 체크 + 뽀모도로 타이머 좀 잘 사용해봐야겠다.

코드스피츠 es6 1주차

코드스쿼드 동호회인 줄 코드스쿼드 사람 거의 7명은 된 것 같았는데 넘나 신기 왠지 앞으로도 이런 모임에서 자주 볼 것 같다 ㅋㅋ
비전공자로 이런 기초 개론 듣는 점은 진짜 좋은 듯 하다 시야가 넓어진 느낌이 들었다.

오늘 강의 좋았는데 가장 큰 포인트 2개는

• 내가 왜 이렇게 짰는지 말 할 수 있어야 된다.
  가치, 원칙, 패턴
  가치 의사소통 , 심플, 유연함
  원칙 지역화, 중복제거, 대칭성
  패턴 복잡한 상황을 예상 , 선배들의 패턴화 한 과정을 적절히 적용
  개발론
  설계론
  각종 적용 패턴
  결국 가치 원칙 패턴 -> 돈 -> 시간* 리소스 -> 이윤

내가 왜 이렇게 짰는지 잘 설명할 수 있게 짜짜!!!

• 진짜 돈 잘 버는 능력있는 개발자가 되고 싶으면
  깊게 + 9년 의사가 전문지식 + 연습만 하듯이
  엄청난 노오력이 필요하다는 것을 인지하고 공부하기 !

프로그래밍 & 타이밍

컴퓨터에게 명령하는 것

고로 그 과정으로

1. 우리가 좀 이해하기 좋은 언어코드 린트타임
2. 기계어 embeded 컴파일타임
3. 파일
4. 로드 -> 메모리에 적재되고 런타임
5. 실행

스크립트 언어는 로드 된 다음 컴파일이 되었다 어쨌든 컴파일이 브라우저 안에서 하기 때문에
디버깅 더 어렵 +_+ -> 고로 더 신경써서 잘 짜야 됨 !

이과정은 잘 생각이 안 남 ! 나중에 강의 보고 다시 복습하기 !

1. lagugae
2. load
3. 컴파일
4. 실행

용어들을 다 설명할 수 있도록 공부할 것 !

결국 메모리에 로드 된 애들은 명령어 단위, 메모리 -데이터 들을 하나씩 외부 버스를 타고 실행할 메모리들에 넣어주면서
명령어들을 디코딩해석 예에 맞게 해석 메모리 데이터를 예에서 가지고 놀 메모리에 필요할 떄 마다 가지고 오고 이와 함께 연산
또 바깥에 메모리에 연산 결과를 넣어줄 것은 넣어주고 왔다리 갔다리 하면서 실행 되고 모든 명령어들을 실행하면 종료 !

로드 되고 메모리에 할당을 하고 실행되는데 ? 컴파일은 뭐야?
컴파일은 결국 가상메모리에 미리 테스트를 한다 vtable을 바탕으로 나중에 실제 쓸 메모리에 맵핑 시킨다.

레퍼런스에 레퍼런스 !
결국 참조 값을 할당했을 때 가리킨 참조값이 바뀌면 꼬이는 문제가 있기 때문에
레퍼런스에 또 레퍼런스를 두고 그 레퍼런스 값을 할당하면 레퍼런스타입 안에 프로퍼티 값은 바뀌어도 레퍼런스 값을 참조하고 있는 것은 바뀔 일이 없으니까
이런 식으로 관계 설정을 잘 한다고 !

프로그래밍 & 자바스크립트 기본 문법

• Lexical Grammar mdn
  제어문자 control character
  공백문자 white space
  개행문자 line terminators
  예약어 token
  리터럴 {}, [] , ….값이나 표기를 표현할 떄 최소 단위

• 언어

• States 문
  컴파일러 -> 기초 for, if, 등등 flow 제어 -> 문 실행할 떄 주는 힌트 어떻게 처리할지 function -> 식 메모리에 값을 할당함
  복문 인정 ;;;;;;;;;;;
  선언문 var, const, let

변수 메모리 주소에 이름을 단 것
메모리 주소 , 타입, 크기 -> vtable에 써넣었다가 나중에 맵핑

• 표현 식
• 식별자

NextStep

배민찬 사이트를 보며 nav같은 LinkList와 SLider 모듈들이 엄청 많이 나오는 것을 보고 이런 엘리먼트 단위로 모듈을 만들면 좋을 것 같다.
Header의 범위를 어디까지 산정할지 ?
아까 얘기한 ul-li-a 이런 애들 class Name 구분화가 좀 .. 떠오르는 이름이 없다 gnb lnb이런 것도 있는데 header는 다 gnb여서 …

sass 똑똑한 사용을 좀 공부하면서 계속 리팩토링 시켜야겠다. 일단 node-sass 깔낀 함

rough한 마크업은 이렇게 크게 잡아놨다. section2부터도 같은 모듈이 반복된다. slider-banner

rough Mark up

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

header 
 download , nav 
 title , searchboar , ul-linked 
 
main
 section 
 - main menu
 - slider (L)
 - slider (M)*2
 
 section 1 bestSeller 
 - nav
 - album preview 
 
 section 2 
 * 2-1 밑 반찬
 - slider
 - banner
 * 2-2 메인 반찬
 - slider 
 - banner
* 2-3 국 찌개 
 - slider 
 - banner
 * 2-4 간편식 
 - slider 
 - banner
 * 2-5 간식
 - slider 
 - banner
 
 section 3 qnA 
 - nav qnA 
 - notice 
 - contect info 

footer
- nav 
- company info

폴더구조

일단 러프하게

1
2
3
4
5
6
7
8

css
--- base 

js
--- nav 
--- slider 
--- header 
--- footer