전체 글
-
[React] 부모 자식 컴포넌트의 흐름Frontend/React 2022. 7. 25. 13:37
부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다. 컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요? 컴포넌트란 리액트에서 컴포넌트란 화면을 구성하는 하나의 단위이다. // App 컴포넌트 function App (){ return } 하나의 블럭 개념인데 즉 그냥 함수이다. 리액트에서 컴포넌트를 만든다라는 건 return값으로 html을 반환하는 함수를 뜻한다. ### 흐름 설명 컴포넌트 A에서 “르탄이”라는 state를 ..
-
220723 TILTIL 2022. 7. 25. 13:28
오늘 할 일 주특기 교육 주 차 2일째. 어제는 거지같은 엘리스의 토끼굴에 빠져서 정작 리액트는 많은 공부를 하지못했다. 젠장할 할 공부는 많고 할 일도 많고 만들 것도 많은 데 시간은 없다. 영화 리미트리스에 나오는 약 먹고싶다 ㅋㅋㅋㅋ 오늘 한 것 & 더 봐야할 것 Javascript & React에서 가장 많이 쓰이는 배열 내장 함수 4가지. map(), filter(), concat(), from() map()은 각 배열의 요소에 인자값을 적용시켜주는 것.(원본 배열에 손대지 않는다.) filter()는 이름처럼 배열을 원하는 조건을 줘서 필터링된 값만 꺼낼 수 있는 함수. concat()은 서로 다른 배열의 요소값들을 합쳐서 새로운 배열을 만들어 주는 함수. from() 화살표 함수는 이제야 좀..
-
220722 TILTIL 2022. 7. 23. 15:17
오늘 할 일 항해99 주특기 주 차 시작이다. 대충 예상은 했지만 역시나 할 일이 산더미같다. 이해하고 활용해봐야 되는 부분들도 어마어마하다. 이번주야말로 시간을 효율성있게 사용해야한다. 그냥 엉덩이만 붙이고 있는다고 해결될 일이 아니다. 이번 주 차 부터 개인 역량과 진도차가 심해질 것을 예상된다. 그냥 해야할 일을 하자. 항해 측에서 제공한 리액트 기초 인강의 양이 어마무시하다. 부지런하게 안들으면 다 듣지도 못할 것 같다. 한큐에 끝내버리자. 여러번 반복해서 듣는거 귀찮기도 하고 시간도 많이 소요해서 로스가 많이난다. 개인과제와 팀과제가 나눠져 있지만 이번주 역시 개인성이 짙다. 약간 쓸데 없는 잡생각 하지말고 그냥 하자. 생각은 그만할 떄 됐다. TIL에서 대략적으로만 체크해두거나 적어둔 내용들을..
-
실습과제항해99 2022. 7. 21. 18:43
실습 과제 콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요. 주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요. let b = 1; function hi () { const a = 1; let b = 100; b++; console.log(a,b); } //console.log(a); console.log(b); hi(); console.log(b); 문제 풀이 let b = 1; const a = 1; // a변수 값을 전역변수로 빼준다. function hi () { let b = 100; b++; console.log(a,b); } console.log(a); console.log..
-
호이스팅과 TDZ는 무엇일까 ?Frontend/JavaScript 2022. 7. 21. 18:02
스코프, 호이스팅, TDZ 스코프 자바스크립트의 스코프는 함수 레벨 스코프를 따른다. 같은 함수 레벨에 존재하면 값을 참조할 수 있다는 건데 ES6에서 let 키워드가 도입되면서 블록 레벨 스코프를 사용할 수 있게 됐다. 전역 스코프 - 어디서든 참조 가능 전역 변수 - 전역 스코프를 갖는 전역 변수 - 어디서든 참조 가능 지역 스코프 - 함수 자신과 하위 함수에서만 참조 가능 지역 변수 - 지역 스코프를 갖는 지역 변수 - 함수 내에서 선언된 변수로 해당 함수와 해당 함수의 하위 함수에서 참조 가능 암묵적 전역 변수 - 선언하지 않은 변수에 값을 할당하면 전역 객체의 프로퍼티가 되어 전역 변수처럼 동작한다. - 하지만 변수 선언이 없었기 때문에 호이스팅은 발생하지 않는다. (variable = 1) =..
-
JavaScript 객체와 불변성이란 ?Frontend/JavaScript 2022. 7. 21. 17:49
기본형 데이터와 참조형 데이터 데이터 타입은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다. 7개의 데이터 타입을 제공하며, 7개의 데이터 타입은 기본형(원시형) 타입, 객체 타입으로 분류할 수 있다. 구분 데이터 타입 설명 기본형(원시형) 타입 숫자(number) 타입 숫자. 정수와 실수 구분없이 하나의 숫자 타입만 존재 문자열(string) 타입 문자열 불리언(boolean) 타입 논리적 참(ture)과 거짓(false) undefined 타입 var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌(symbol) 타입 ES6에서 추가된 7번째 타입 객체 타입 객체, 함수, 배열 등 기본(원시)형에는 Number..
-
220720 TILTIL 2022. 7. 21. 09:47
오늘 할 일 항해99 알고리즘 주차 6일차. 뭔가 팍하고 실력적으로 상승한 부분이 있나 의문이 들지만 건물을 짓기 전에 묵묵하게 땅을 판다는 느낌으로 오늘도 그냥 하는 중이다. 고민이나 생각을 해봐야된다면 항해99라는 플랫폼 상 짧은 시간안에 많은 것을 쌓아올려야 하기 떄문에 그러한 효율적인 부분에서 제대로 하고 있는가. 혹은 좀 비효율적으로 진행하고 있기떄문에 실력의 향상이 더디진 않는가. 현재 어떠한 부분을 바꿔야 좀 더 시간이 절약되고 효율적인 실력상승으로 이어지는가이다. 문제는 알고리즘 주 차라는 말에 무색하게 거의 담당하는 문제밖에 풀지 못하였다. 그에 해당하는 팀원들의 리뷰같은 것들을 보며 알고리즘의 흐름과 메소드, 문법적인 부분과 근본적인 부분을 공부하기에 바빠서 정신없던 것 같다. 하루에 ..