FrontEnd56 [React.js] 나의 this만 undefined가 아닌 이유 리액트 클래스형 컴포넌트를 공부하고 있습니다. 위코드에서 함수형 컴포넌트를 기준으로 리액트를 배우는 중입니다. 그런데 자꾸 공부하면 할수록 클래스형 컴포넌트도 배워서 좀 더 리액트에 대해 잘 알고 싶다는 생각이 들었습니다. 공식문서를 보면 대부분이 클래스형 컴포넌트, 함수형 컴포넌트 2가지를 병행해서 설명해주고 있는데, 그것이 클래스형 컴포넌트를 기준으로 배운 사람을 위함일수도 있지만, 함수형 컴포넌트만으로는 설명이 안되는 부분이 있어서 일지도 모르겠다는 생각을 했거든요.... 생활코딩에 클래스형 컴포넌트 리액트 강의를 보다가... 그래서 생활코딩 리액트 (클래스형 컴포넌트) 강의를 보고 있습니다. 그런데 강의에서 this바인딩에 대해 알려주는 부분에서 저의 this와 egoing님의 this가 다른 것.. 2022. 8. 11. [React.js] 인풋 태그 위 이미지 태그 없애기 인풋태그에 값 적으면 그 위 이미지, 글자 없애기 과제 아닌데 팀원들끼리 막 아이디어 내면서 재밌게 개발했습니다. ㅋㅋㅋ 이것저것 많이 했는데, 포스팅 하면 좋을만한 개발건, 리팩토링건이 있어서 기록으로 남깁니다. 말로 설명하는게 어려워서 그냥 코드 위주로 이야기하겠습니다. ㅎㅎ 위 코드처럼 인풋창 위에 이미지, placholder가 있습니다. 인풋창에 밸류값이 주어지면 해당 이미지와 글자를 없애보았습니다. 글자는 placeholder로 넣어주면 인풋입력할 때 자동적으로 사라집니다 여기에 좀 어울리게 색을 넣기 위해 &::placeholder { opacity: 0.5; }를 넣어줬습니다. 이미지는 useState를 활용해 Change이벤트가 발동하면 hasValue State가 true로 바뀌고, 이를.. 2022. 8. 4. [React] img태그 src public 폴더에서 가져오기 서론 넣고 싶은데 그냥 본론만 넣겠습니다 아 서론 생각났어요!!!!! React 과제 설명에서 public 폴더에 images 폴더 만들어서 이미지 다 넣으라고 하고, img태그는 src값을 '/images/이미지 파일이름'으로 지정하면 된다고 설명이 되어 있었다. 하지만 이 방법은 src폴더 내에 images 폴더가 있을 경우에는 가능한 방법이지만, public 폴더에 있다면 적용이 불가능한 방법이었다. 자료가 잘못되어 있는건지, 의도적으로 구글링과 공식 문서 등을 통해 문제해결하는 과정을 겪게 만들려는건지 나는 알 수 없지만, 어쨌든,,, 구글링과 공식문서를 통해 문제를 해결했다. 해결 방법 HTML 문서 안이라면 아래와 같이 '%PUBLIC_URL%'이 퍼블릭 폴더의 경.. 2022. 8. 1. [javascript] Type 복습하기 MDN 자료 Javascript Data Types 기본 자료형 (Primitive) (불변 자료형) String Number Boolean Undefined Null Symbol (ES6에서 추가 객체 아래는 공부하며 잘 몰랐던 내용입니다. Typeof Null Typeof Null 하면 결과값으로 "object"가 나온다. 이는 null이 빈 객체를 참조하고 있기 떄문이다. Typeof Array 또한 "object"이다. 자바스크립트에선 객체를 이용해 배열을 흉내낸 Array객체를 구현한 것이 Array이기 때문이다. 포이마웹 - 자바스크립트 배열은 배열이 아니다 2022. 7. 20. [VSCode] emmet 귀찮을 때 해결 방법(ReactJS, Typescript 코딩 할 때) ReactJS 배우는 중 평소엔 잘 사용하던 Emmet기능이 도움이 안되더라구요. 위 사진과 같을 때 아래 Router를 탭하면 자동으로 import 해주는데, Emmet을 눌러버리면 단순히 HTML태그가 만들어진다던지, 심지어 useState같은걸 만들때 미리 지정되어 있는 useState 코드만 생성되고 import는 안해주는.... 정말 귀찮은 상황이 펼쳐집니다.😭😭😭 해결 방법 이럴 때 설정을 만지면 귀찮은 상황에서 벗어날 수 있습니다. 윈도우 기준 ctrl + ,으로 설정을 들어가셔서 검색창에 emmet이라고 검색합니다. 아래 사진처럼 Show Expanded Abbreviation을 inMarkupAndStylesheetFilesOnly로 변경합니다. 그럼 이제 HTML/CSS에서만 Emmet.. 2022. 7. 13. 콜백 vs async await Database와 통신할 때 사용하는 2가지 방법 데이버베이스와 통신할 때 데이터베이스의 동작을 기다리기 위해 두가지 방법이 사용된다. { 1) 콜백함수, 2) 프로미스 } 가 두가지 방법인데, 해당 파트는 javascript 문법에서 중요하고 어렵다고 이야기를 많이 들어온 비동기 처리 부분이다. 한번에 이해가 안될것 같아서 글로 남긴다. 아래 콜백 펑션과 async-await의 차이점은 콜백펑션은 콜백이 실행되는 동안 다음 코드들이 실행이 된다는것 (기다려주지 않음), 반면에 await은 해당 동작이 끝날때까지 기다렸다가 끝나면(then) 다음 코드들이 실행된다는 점이다. 조금 더 기초적인 개념으로 생각해보면 setTimeout을 실행하면 해당 시간을 기다리는 동안 다음 코드들이 실행되는데 이게 콜백펑.. 2022. 7. 12. 이전 1 ··· 3 4 5 6 다음
