우선 어제 토스에서 프론트엔드 밋업이 있었는데, 우리 조의 멋진누님께서 같이보면 좋을거 같다고 공유를 해주셔서 좋은 말들을 들을 수 있었다.
그리고 그곳에서 일하는 FE분들을 보면서 다시 열정을 충전할 수 있는 기회도 되었다. 나도 공부 열심히 해서 저들 사이에 끼고싶다.....🤩 갖고싶다..허먼밀러....
어제 새벽4시까지 발표자료 조사를 하였는데 오늘 어찌저찌 하다 자료가 다 사라졌다....
갠차나....밍지...이번기회에 더 자세히 공부하는 거지모.....
그리고 오늘은 알고리즘 주차의 마지막 날로 시험을 보았다.
이중 for문을 돌리는 문제였고, 중첩 map으로 시도해 보려고 했지만 오류를 해결하지 못해 for문으로 해결하고 나왔다.
첫번째 답
function solution(arr1, arr2, signs){
let answer=[];
let result =[]
let a = arr1[0]
for(let i = 0; i < arr1.length ; i ++){ // 이중배열이라 arr1의 length까지
for(let j = 0 ; j < arr1[i].length ; j++){ //arr1[i]의 length까지
if(signs[i][j]){ //true면
answer.push(arr1[i][j] + arr2[i][j]) //더해서 배열에 추가
}else{
answer.push(-arr1[i][j] - arr2[i][j]) //아니면빼서 배열에 추가
}
} result.push(answer); // 이중 구조라 새로운 배열에 천체 추가
answer = [] //answer배열의 값을 초기화 해서 다시 값을 추가할수 있도록
} 나는 이중 배열을 만들어주기 위해 빈 배열을 2개나 만들었는데 사실 하나로도 해결이 가능했다.
배열에 [][i]이렇게 넣어주는 방법이 있었다.
혹은 배열은 함수안에서 선언을 해주면 돌때마다 자동으로 리셋이 되어서 마지막에 리셋을 해주지 않아도 될 거같다.
다음은 map사용
return arr1.map((x,i)=>x.map((y,j)=>{
return signs[i][j] ?
(y + arr2[i][j]) : -(y + arr2[i][j])}))}
처음에 값을 아무리 출력을 해도 잘나오는데 마지막
이중배열에서 계속
[undefined,undefined]가 출력되었다.
왜그런고 하니
이중배열이니 map안쪽에서 두번 리턴을 해줘야 한다.
그러니깐 저 식에서는 총 세번의 리턴이 나와야 하는것이다.
하지만 리턴이 하기 싫다면 다른방법이 있다.
{}를 빼주는 것이다.
한줄이기에 가능한 일이고 바깥 map은 짧은니 대괄호를 빼주도록 하자!!
foreach나 map같은 고차함수를 자주자주 사용하는 연습을 해야할거같다.
자바스크립트 강의 필기노트
마지막으로 리액트를 시작하기 앞서 자바스크립트를 제대로 익히고 가지 않으면 리액트내내 마음의 짐이 생길거 같아서 자바스크립트에 세세한 문법들을 다시 잡고가려고 자바스크립트 강의를 정주행하였다.
우선 이론을 기반으로 다졌고, 힙,스택, 실행컨텍스트, 스코프 등 평소에 깊게 공부하지 않았던거 위주로 공부하였다..
강의는 유투브시 시니어코딩의 자바스크립트 강의를 들었고, 일반 강의에서는 들을수 없는 깊은 이야기들을 들을수 있다.
들으면서 쭉쭉쭉 노트정리를 하였고, 정리를 양이 너무 방대하여 못할거같다. 기억이 나지 않는 내용이 있을때마다 꺼내보려고 한다.
객체지향프로그래밍
수납상자와 같은 역할
객체로 그루핑 연관된 함수들을 다른함수와 분류되게 하는게
객체지향의 핵심적아이디어
object orient training
procedure orient training
객체지향 class문법
var nunu = {
q: power;
w: snowball
}
//이똑같은 걸 10개 만들때 쉽게 만들수 있는게 클래스문법
//비슷한 object를 여러개 만들때는 클래스를 만들어라
// classs는 object 뽑는 기계일뿐
옛날문법
function 기계 (구멍){
this.q = 'consume'
this.w = "구멍"
}
new 기계() //똑같은거 만들어주세요, 객체지향 문법의 핵심
신문법
class hero {
constructor (구멍){
this.q = "구멍"
this.w = "snowball}}
클로저
안에서는 밖을 볼수 있지만 밖에서는 안이 안보인다.
함수바깥 script에 저장
함수안 local에 저장
자바스크립트는 정적스코프(렉시컬스코프)--> 함수레벨스코프
로컬 (함수)-클로저(부모함수 스코프)-스크립트(전역)-글로벌
부모함수에 접근가능
실행끝난후에도 접근하는것
stack. 코드를 한줄한줄 실행 .한줄밖에 실행못함(single threaded language)
--> 원래 병렬처리 못한느것
settimeout같은 아이들은 잠깐 대기실에서 대기 : 이런 애들은 정해있다.
eventlistner, ajax요청코드, settimeout
대기실에 있다가 처리를 하고 답을 큐에 한줄씩 줄을 세움 이 대기실에서 스택으로 한줄씩 올려보냄(단, 스택이 비었을때만)
변수를 만남 --> heap에 변수갖다씀
10초걸린느 연산뒤에 이벤트 넣으면 안됨
스택을 바쁘게 만들면 안된다.
큐를 바쁘게 하면 안된다 --> 웹사이트가 잘 안돌아감
자바스크립트는 동기적
가끔 비동기적 처리가능
에이씽크 어웨잇 복습
최적화
객체지향디자인패턴
캡슐화
리덕스 컨텍스트 써야함. 라이브러리를 다 써야함.
apsnet 리덕스의 단점을 모드 커버함
자바스크립트 강의1강
JS engine
싱글쿼테이션이 뭘까
자바스크립트 제대로 알기
cpu: 트랜지스터의 집합 --> or(덧셈), and , xor(두값이 같으면 참 틀리면 거짓)연산이 대부분
데이터 값을 메모리에 담는다.
cpu: 중앙연산장치
여기에는 캐시와 메모리가 있다.
메모리는 ssd를 쓰고 있다.
메모리의 한칸을 cell : 한칸에 8비트 : 8자가 들어갈 수 있다.
캐시:
var x =1
선언: var x 식별자의 존재를 알린다.
정의 : x = 1
js는 선언과 정의가 함께다.
선언만 해도 undefined가 출력됨
==> 선언과 정의를 구별할 필요가 없음
식별자 : x
값을 나타내는것 : 리터럴 1
var : 렉시컬 함수 스코프
let : 렉시컬 블럭 스코프
const :constant 변경금지
가능한 const와 블럭스코프를 사용한다.
함수 스코프 :
만약 var가 함수안에서 선언되었다.
하지만 var는 함수스코프 이기때문에 함수속에서는 어디서든 접근가능하며
함수의 제일 위로 끌어올려짐 : 호이스팅이 일어남.
동작측면의 스코프
정적스코프, 동적스코프
자바스크립트는 정적스코프
레벨측면
전역,지역스코프
호이스팅과 스코프체인
var는 함수 제일위로 올라감
function도 함수스코프
스코프체인 : 외부에서 내부함수는 접근불가
object타입은 힙에다 저장 메모리는 8바이트니까 다 저장할수가 없다.
그래서 주소만 참조 --> 객체타입
===시도 주소만 비교 주소가 다르니 false
명시적 타입변환과
암묵적 타입변환
컴파일 : 메모리확보
호이스팅: 컴파일 하는 순간에 모든 코드를 훑음. 컴파일 통과시 선언문 체크 자바스크립트엔진이 선언문을 쫙올림
실행컨텍스트에 어떤 변수를 쓸건지 저장. const는 메모리를 딱 저장가능 (속도빠름 static영역) let,var은 고정값이 아니라 메모리를 비워놔야 한다.
그래서 const를 쓸수있으면 무조건 써라
stactic영역 메모리에 넣어놓고 재사용
함수호출: call
함수는 한가지만해라 짧ㅅ을수록 좋다.
함수선언문;:함수 호이스팅:
함수표현식 : 변수호이스팅에 속함.
var last
var fullname = function (){
last = 'hong'
let last // 블럭 안에서 호이스팅이 되기 때문에 가능.
return functiioon(first){
return last + first}}
var last // 어디에서든 선언해도됨 어차피 호이스팅으로 올라갈꺼니깐
let last // 오류 함수블럭스코프 함수블럭속에 없기때문에 .
x = fullname('gildong')// 함수실행 -> fullname호출 fullname을 실행한 결과는? function (first)전체(리턴문이니깐) x = function(first)이렇게 주소가 잡힘
y = x(gildong) 이렇게 했을때 홍길동이나옴
이런문제가 코테에 나올 수 있다. 이거의 메모리주소 이렇게 써야함.
그이유 : 함수를 실행하면 실행한ㄴ 결과가 변수 x에 저장이 되는거고, 결과는 리턴문에있다.
var fullname =( function (){ //함수 바로실행시 괄호넣기
var last = 'hong'
let last
return functiioon(first){
return last + first}}()) //함수 바로실행시 fullname 함수는 return functiioon(first)과 같다.
x = fullname('gildong' )//x의 값이 달라진다. 홍길동으로
클린코드 책 꼭 읽어야함
실행컨텍스트
last 'hong'
중요
function f(primitive, obj){
primitive += 100
obj.name = 'kim'
}
let num = 100
var person = {name : 'lee'}
console.log(num) //100
console.log(person) //{name:lee}
f(num, person) //num은 f함수 primitive로 아규먼트에 값이 새로 생성된다. 원래있던거랑 연결되는거 아니다.
새로생긴 primiitive의 값은 200
obj는 주소참조 주소를 따라갔더니 name =lee 인데 함수에서 kim으로 바꼇다.
이뮤터블이니깐 num은 100-3벚주소 , primitive는 200-5번주소
그래서 오브젝트 전달은 신중해야 한다.
obj는 그래서 ..obj이렇게 보낸다.
재귀함수
factorial
콜백 정말중요
갔다가 돌아옴
함수를 불러서 거기 갔다가 원한느 값을 가지고
다시 원래함수로 돌아옴
객체지향 프로그래밍 object oriented programming
세가지 속성
1.상속성(부모의 특징을 자식이 갖고있다. prototype) overriding overloading
2. 다형성()
3. 은닉성
strict mode
오해의 소지가 있는 함수를 쓰면 안되겠다.
애매한this쓰면 안됨
호이스팅도 조심
일부만 하용해도 오해의 소지가 있다.
바깥쪽 컴포넌트에서 사용(리액트에서)
eslint
구문오류, 오해으ㅢ 소지 잡아줌
prettier
세미콜론 잡아줌
built - in
표준빌트인객체(parseint, 스트링, 심벌, )
호스트빌트인객체(브라우저)dom bom
커스텀빌트인객체(내가)
실행컨텍스트 정확하게 알아야한다.
실행가능한코드 : 전역코드, 함수소개코드,eval,module(코드뭉치)
평가 --> 실행:
array
순수함수 : 본래의 배열을 안바꾸는아이들
slice, concat, map , filter
리액트에서는 이아이들을 써야함안그럼 문제가 발생한다.
다른컴포넌트에서 조작이 일어나면 문제가 생긴다.
hash 함수
볼 책만 몇개만 껴내놈
arra(5).fill(0) //arr다섯칸인데 0으로 다채워
arr.from(length, value,index)
array.0f(1) //1이라는 값을 갖고있다.
arr.push
pop
shift
unshift // .많이쓰인다. 글을 추가하고 최신걸 제일 위로 올리고 싶을땟( reverse는 메모리부담)
-->위 4개 함수를 사용해서 스택과 큐를 구현하세요 push 랑 pop만 있으면됨
고차함수는 무조건 순수함수
sort 무조건 -1 0 1 이거 세개로 리턴해야함
arr.reduce((sum,a)=> sum+a.id,0)
--> sum +1 ==> sum은 처음에 0초기값을 0이라고 준거임
0을 안주면 초기값은 첫번째 배열 + 두번째 배열
유니크한 배열 [set][...유사배열] 배열을 만들어주고, 계속 하나씩 next를 불러줘라
[...argument].reduce (리듀스는 어래이의 함수. 유사배열을 배열로 만들어줘서 )
arr.slice() 해도된다.
set과 map
인덱스가없다.
사용하는 이유
접속한 사람만 데이터를 뽑고싶을때 데이터의 인덱스가 없을수도 있닫. 그럴때
빠르다
