얕은복사 vs 깊은복사 스코프(블록범위, 함수범위) 재귀함수(recursion) 콜백함수(callback) 다른함수의 매개변수로 전달되어 수행되어지는 함수 call by * @값에 의한 복사@로 함수 내에서 매개 변수 값을 변경 시켜도 영향이 미치지 않음 @원시 타입@을 매개 변수로 넘겼을 때 발생 call by reference 주소에 대한 복사로 함수 내에서 매개변수 내 값을 변경시키면 원본 데이터에도 영향을 받음 @객체 타입@을 매개변수로 넘겼을 때 발생 Object.getOwnPropertyDescriptors -> 객체의 상세설명 확인가능 객체에 저장된 값이 함수인경우 -> 메서드 this -> 메서드에서 객체 내부의 속성값을 접근할 수 있는 지시자 Number 대표적인 Number 상수 값 N..
호이스팅(Hoisting) Javascript에서 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 var로 선언한 변수의 경우 호이스팅시 undefined로 변수를 초기화 한다 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다 호이스팅은 ES6 이전의 표준 명세에서는 나타나지 않았음 var변수와 함수 선언문에서만 호이스팅이 일어남 변수 선언이 함수 선언보다 위로 끌어 올려짐 let/const 변수 선언 및 함수 표현식에서는 호이스팅 발생 X 그렇다면 함수 표현식보다 함수 선언문이 무조건 옳은 것인가? 일부 코딩 컨벤션에서는 함수 표현식을 권장하기도 한다. 결론적으로, 어떤 컨벤션을 갖던지 한 가지만 정해서 사용하는 것이 좋다. ..
Event Event는 어떤 사건을 의미 예를들어 브라우저에서의 이벤트란 사용자가 버튼을 클릭했을 때, 웹 페이지에 로드되었을 떄와 같은 것인데 DOM 요소와 관련이 있음 이벤트가 발생하는 시점이나 순서를 사전에 인지할 수 없으므로 일반적인 제어 흐름과는 다른 접근 방식이 필요함. 즉 이벤트가 발생하면 누군가 이를 감지할 수 있어야 하며 그에 대응하는 처리를 호출해 주어야 함 Event Handler 일반적으로 함수에 연결되며 그 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생하면 실행되게끔 하는 함수 이벤트 종류 click, load, keyPress, keyUp, change 등 이벤트 핸들링 방법 이벤트 핸들링 방법은 세 가지가 있음 인라인 이벤트 핸들링 html 코드에 직접 js 코..
서버, 클라이언트 서버는 정보를 제공하는 쪽 클라이언트는 정보를 제공 받는 쪽 웹 브라우저 주소창에 http://www.naver.com을 입력하면, 웹 브라우저는 www.naver.com에 해당하는 컨텐츠를 웹서버에 요청 폼(form) 사용자의 데이터를 서버에 전송하는 방법 사용 로그인 → ID & Password를 입력 회원가입 → 개인정보 입력 블로그 or 게시판 글 작성시/파일 전송시 내부 폼 요소 폼 태그 속성 get 데이터를 256 ~ 4096 byte까지 서버로 넘길 수 있음 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있음 post 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않음 name 폼 제어시 폼 이름 지정 action 폼 태그 내의 내용 처리..
const Box1 = styled.div` width: 100px; height: 100px; `; const Box2 = styled(Box1)` border-radius: 50px; `; const Box1 = styled.div` width: 100px; height: 100px; `; const Box2 = styled.div` width: 100px; height: 100px; border-radius: 50px; `; 1. 상속 위의 Box1, Box2는 border-radius를 제외한 코드의 내용은 동일하다. 상속을 사용하면 반복을 제거할 수 있다. const Btn = styled.button` color: white; background-color: tomato; border-radi..
타입스크립트에서는 타입을 선언해주기 위해 interface를 생성해주고 그 안에 해당 변수에 대한 타입을 작성한다. interface CircleProps{ bgColor: string; // default borderColor?: string; // optional text?: string; // optional } Circle 컴포넌트가 있다고 가정을 하자 interface CircleProps 내 변수의 타입을 선언하는데 일반적인 콜론(:)을 사용한다면 반드시 string에 해당하는 값을 작성해주어야 한다.(default) 하지만 물음표콜론(?:)을 사용하게되면 borderColor: string | undefined와 동일한 의미로 값이 들어가지 않아도 되는 optional value가 된다. [..
const Box1 = styled.div` background-color: red; width: 100px; height: 100px; `; const Box2 = styled.div` background-color: blue; width: 100px; height: 100px; `; 위와 같은 Box를 두 개 만들어 화면에 표현하고 싶다. 하지만 코드 내용이 background-color를 제외한 부분이 모두 동일하기 때문에 중복코드 작성을 피하고 싶다. => 이 때! props를 활용하면 gooooooooood! Box를 하나만 선언해준 다음 props를 이용해 값을 넘겨주는 방식으로 취하면 중복코드의 걱정이 사라진다. 근데 여기서 또다른 에러가 발생한다! 리액트에서는 에러가 발생하지 않지만, 타입..
