전체 글32 fixed position의 element를 화면 중앙에 배치하기 css file .centering { positioin: fixed; margin: 0 auto; // vertical centering top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; } 2020. 5. 3. React this.state의 this의 의미 React에서 코드를 작성하다가 한번쯤 마주하게 되는 에러가 있다. 📌문제가 발생한 상황 컴포넌트들의 구조는 아래 그림과 같이 생겼다. App 컴포넌트는 fruitList와 searchFruit이라는 두개의 state를 가지고 있고, Search 컴포넌트에서 검색 내용의 input(검색내용)을 받으면 App 컴포넌트의 searchFruit만 변경해주면 되는 상황이다. - App 컴포넌트의 onSearchChange() 함수 onSearchChange(event) { this.setState({ fruitSearch: event.target.value }); } - Search 컴포넌트에서 onSearchChage를 호출하는 부분 const Search = ({ onSearchChange }) => { r.. 2020. 4. 6. 객체 내 key 또는 value로 배열 만들기 const fruit = { fruit1: "apple", fruit2: "banana", fruit3: "kiwi", fruit4: "grape" } 위와 같은 일반적인 객체나 유사배열 객체는 배열에서만 사용할 수 있는 forEach, map 등의 함수를 사용할 수 없다. (유사배열객체는 []로 둘러싸여있지만 배열은 아니므로 배열의 함수를 이용할 수 없다. Array.isArray(obj)로 확인할 수 있다.) 이를 해결할 여러가지 방법들이 있지만 ES8에서 등장한 문법은 이를 아주 간단하게 해결해준다. Object.keys 객체의 key들만 모아 배열을 반환한다. console.log(Object.keys(fruit)); // result: [ 'fruit1', 'fruit2', 'fruit3', '.. 2020. 4. 6. JavaScript 코드 꿀팁들 얼마 전 유튜브에서 'JavaScript Pro Tips - Code This, NOT That' 영상을 보다가 새로 알게된 신기한 것들이 있어 정리하게 되었다. 1. console.log 출력하는 방법 console.log를 이용해 여러 가지 것들을 출력하다보면 어디서 출력한 것인지 체크하기 위해서, const fruit1 = "apple"; const fruit2 = "apple"; const fruit3 = "apple"; console.log('fruit1', fruit1); console.log('fruit2', fruit2); console.log('fruit3', fruit3); 이런 식으로 이름을 명시해주고 적을 때가 종종 있다. 여간 번거로운 작업이 아니다. 이때 사용할 수 있는 간편한 .. 2020. 4. 5. ES6 문법 정리 ES6문법을 사용하면 코드를 더 깔끔하고 직관적으로 표현할 수 있다. let + const var: function scope 함수 scope이기 때문에 함수 안에서 선언된 변수는 특별한 경우가 아니라면 함수 밖에서 접근할 수 없다. 반면 if문이나 while문 등 안에서 선언된 변수를 밖에서 접근하는 것이 가능하다. const, let: block scope 함수 scope보다 더 넓은 범위를 포괄한다. 일반적으로 {}으로 둘러쌓인 부분을 말하며, if문이나 while문 안에서 선언한 변수들도 밖에서 접근할 수 없다. Destructing 객체를 함수의 파라미터로 받아와 사용하는 경우에 편리한 방법이다. 이전에는 일일히 객체에 있는 속성들을 하나하나 변수로 다시 선언해줬었다. const obj = { .. 2020. 4. 1. [에러로그] post request status 가 canceled 인 경우 Error 그림과 같은 형태의 form을 만들고 post request를 보내는 작업을 하고있었는데, postman에서는 통신이 잘 되는 것을 확인했지만 크롬에서는 계속해서 response를 받지 못했다. 왜그런가 이유를 살펴보다가 크롬 개발자 도구의 Network탭에서 보니 status가 canceled로 표시되고 있었다. Solution 이유는 내가 태그 안에서 만든 'register' 버튼 때문이었다. 으로 버튼을 만들 경우 바로 페이지가 reload되기 때문에 을 만들어 놓고 onclick속성으로 서버에 post request를 보내고 있었는데 이 부분에서 문제가 있었다. 안의 은 default속성으로 submit 타입을 가진다. (참고링크) 결과적으로 버튼을 누를때마다 post request를 .. 2020. 3. 31. CSS 우선순위 (Cascade) CSS는 기본적으로 더 나중에 작성된 것이 우선순위가 높다. 그러나 항상 그런 것만도 아니며 조금 더 복잡한 구석이 있기 때문에 주의해야한다. (미리 밝혀두자면 작성 위치에 따른 우선순위는 inline > style태그 > style.css 이며, 본 글은 같은 element에 대해 붙었을 때 CSS가 누구의 손을 들어주는지에 대해 작성했습니다.) 어떤 선택자가 이기는지는 다음 순서에 따른다. (1위가 가장 우선순위가 높다.) 1. Importance 2. Specificity 3. Source order 1. Importance 아래와 같이 !important를 붙여 준 것이 가장 우선순위가 높다. h2 { color: red !important; } 2. Specificity specificity는 .. 2020. 3. 24. this 키워드 (this keyword in JavaScript) 최근 자바스크립트에 대해 공부하며 이해한 내용을 바탕으로 작성한 것이며, 계속해서 새로 알게되는 내용이 있다면 추가할 예정입니다. (* "use strict"모드에서는 다른 방식으로 동작하며 이를 사용하지 않는 경우를 가정하고 글을 작성했음을 밝힙니다.) this란 무엇일까? Mozilla MDN사이트에 의하면 this는 다음과 같다. In most cases, the value of this is determined by how a function is called (runtime binding). 함수가 어떻게 불리는지에 따라서 this의 값이 결정된다고 한다. this 키워드는 해당 함수를 호출하는 객체를 가리키기 위해 사용된다. 함수를 호출하는 객체? 무슨 말일까? 아래의 코드를 살펴보자. var.. 2020. 3. 23. 자바스크립트 호이스팅 (JavaScript hoisting) 이전에 함수 호이스팅에 관해 공부를 하 난 후에 정리하면서 쓴 글이 있다. 그러나 최근에 다시 호이스팅에 대해 공부를 하게 되면서 조금 더 알게 된 내용이 있어 정리하게 됐다. 호이스팅이라는 것은 "끌어올린다"는 뜻이다. console.log(one); console.log(two()); var one = 1; function two(){ return 2; } 위의 코드를 실행시키면 각각 undefined와 2가 결과로 나타난다. C++과 같이 호이스팅이 일어나지 않는 언어를 사용한다면 undefined나 결과가 나올 것이 아니라 정의되지 않는 변수 또는 함수라고 나와야 정상이지만 왜 자바스크립트에서는 이런 결과가 나오는 것인지에 대해 알아보자. 그렇다면 언제, 무엇을 끌어올린다는 것일까? 자바스크립트 .. 2020. 3. 20. 이전 1 2 3 4 다음
