with with

React에서 제공하는 useEffect() 함수는 특정 데이터가 변화할 때에만 특정 코드를 실행할 수 있게 해준다. React의 특성상 컴포넌트(함수)내의 일부 데이터가 변화해도 컴포넌트(함수) 전체를 재 실행하여 리턴한다. 그래서 만약에 한 번만 불러와도 될 api의 경우, 사용자가 버튼 몇 번 클릭하면 api가 계속해서 호출되어 쓸데없이 리소스를 잡아먹을 수 있는 상황이 발생할 수 있다는 뜻이다. (rum.. 오타있네요.. run!) 실제로 input에 글자를 치기만 하는데도 Line. 9의 console.log가 계속해서 찍히는 것을 확인할 수 있다. 이런경우를 방지하기 위해 React에서 제시하는 방법은 useEffect이다. useEffect는 반환값은 없지만 두 개의 파라미터를 필요로 한다...

html, css를 공부하자마자 바로 연습할 겸 사이트 하나 만들어봤다. 하지만 만들면서 금세 한계점을 느끼게 된다. 단일 html 사이트 내에서는 어떻게든 만들고 싶은대로 만들 수 있었지만, 여러개의 html 사이트를 만들면 그 사이트 간의 이동이 부드럽지 않을 뿐더러 원하는 효과를 주기 어려웠다. 그렇다고 한 html 파일 안에 모든 코드를 다 넣자니 너무 파일이 커져서 보기에 좋지 않을거 같았다. 그래서 React를 이용해 js 코드로 사이트를 만들어 더욱 유지보수하기 편하고, 분할/정복도 깔끔하게 달성할 수 있도록 사이트를 고쳐보기로 작정했다. 그러기 위해서는 일단 React를 공부해야만 했기에, 바로 시작했다. 그 시작은 우선 React를 설치하는 것! 사실 설치하지 않고도 리엑트를 사용할 수 ..

저번에 일반 함수로 생성자 함수처럼 구현 하면서 생성자 함수를 굳이(필수적으로) 사용해야 하는가에 대한 궁금증이 남았었다. 완벽한 해답을 얻은 건 아니지만 그래도 궁금증이 조금은 해소될만한 답이 나와서 글을 써본다. 저번 포스팅에서 다음과 같이 언급했다. 실제로 두 함수의 차이는 생성자가 객체인지 사용자 정의 생성자인지의 차이와 프로토타입의 구성 뿐이다. 게다가 상속받은 프로토타입의 메서드도 완벽히 동일하다. ...거의 맞는 말이긴 한데(둘째 줄은 틀린 거였음.. 죄송합니다 ㅜ), 프로토타입의 구성에서 js 내부적으로 꽤나 유의미한 차이가 나는거 같다. 그 전에 프로토타입의 정의부터 살펴보자. js에서의 프로토타입은 부모 객체로 부터 상속받은 프로퍼티(속성)들의 집합(객체)을 의미한다. java에 ext..

생성자 함수는 유사한 객체를 여러 개 만들어야 하는 상황에 유용하다. 그런데 사실 생성자 함수와 그냥 함수는 크게 다를 바가 없지만, 관례라 해야하나... 3가지 차이점이 있다. 함수 이름의 첫 자는 대문자로 시작한다. 반드시 new 연산자를 앞에 붙여 호출한다. 생성자 함수 안에는 return문이 없다. (메서드 함수에서 사용되는 부분은 제외하고) 예시를 살펴보자. function User(name, age) { this.name = name; this.age = age; this.introduce = function () { console.log(`Hi, I'm ${this.name}, ${this.age} years old.`); }; } user1 = new User("Jane", 32); 이렇듯..

사전적 정의는 function(함수)과 Lexical Environment(어휘적 환경)의 조합으로, 함수가 생성될 당시의 외부 변수를 기억하고, 생성 이후에도 계속 접근 가능한 코드를 의미한다. ...글로 적으니 무슨 소리인지 모르겠다. 따라서 예시와 함께 알아볼건데, 그 전에 Lexical Env.에 대해 알아보자. Lexical Environment ##################################################### [1] const name = "Woong"; ##################################################### [2] function isAdult(age) { if (age > 19) { console.log(`${name}..

js공부를 하는 중 배열 안에 객체가 들어있는 자료형을 다뤄봤다. let userList = [ { name: "Mike", age: 30 }, { name: "Jane", age: 27 }, { name: "Tom", age: 18 }, ]; 이런 구조였는데, 여기에 userList의 객체의 속성은 유지한 채 새로운 속성을 추가하고 싶을 때 map() 과 Object.assign()을 사용하게 된다. map() 함수를 인자로 받아서 배열 모든 원소에 대해 함수의 기능을 실행한 뒤 새로운 배열로 반환해주는 함수이다. Object.assign() 객체 들을 인자로 받는데, 첫 번째 객체인 타겟 객체에 두 번째 이후의 객체의 요소들을 추가하는 것이다. 적용된 예시는 다음과 같다. let newUserList..