전체 글

[React_study] import & export

* export default / import 문법 DB들을 state로 만들고 싶은데 useState()안에 넣기에는 너무 길이가 긴 경우 다른파일에 보관하였다가 import해올 수 있다. * export default / import 예시 코드 - export default 변수명; 이렇게 쓰면 원하는 변수를 밖으로 내보낼 수 있다. - export 했던 변수를 다른 파일에서 사용하고 싶으면 import 작명 from './파일경로'로 작성하면 된다. (유의점) - 변수, 함수, 자료형 전부 export 가능 - 파일마다 export default 라는 키워드는 하나만 사용가능하다. - 파일경로는 ./ 부터 시작해야한다. 현재경로라는 뜻 // data.js 파일 const number = 10; ex..

[React_study] public 폴더 & 이미지 넣기

* public 폴더의 용도 이미지 같은 static 파일의 경우 public폴더에 보관하여도 된다. 리액트로 개발을 끝내면 build 작업을 하게 되는데 지금까지 작성한 코드를 하나의 파일로 압축해주는 작업이다. src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 내용들은 그대로 보존된다. 그래서 형태를 보존하고 싶은 파일은 public폴더에 넣으면 된다. 이미지, txt, json등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관해도 상관없다. JS파일은 제외(압축이 필요함) * public 폴더에 있는 이미지 사용할 때는 위의 예시처럼 "/이미지경로"로 사용하면된다. css파일에서도 "/이미지경로"로 사용하면 된다. public 폴더에 넣으면 impor..

[React_study] 사용자가 입력한 글 다루기(input)

* 에 입력한 값 가져오기 { console.log(e.target.value) }}/> e 혹은 event라는 파라미터 추가 e.target.value값을 출력해보면 현재 안에 입력된 값을 가져올 수 있다. e는 이벤트 객체라는 이름으로 부르는데 현재 발생하는 이벤트와 관련한 유용한 기능들을 제공하는 일종의 변수이다. (작명은 e 말고 자유롭게 해도 된다.) (참고사항) e.target : 현재 이벤트가 발생한 곳 e.preventDefault() : 이벤트 기본 동작을 막아준다. e.stopPropagation() : 이벤트 버블링을 막아준다. * 에 뭔가 입력시 코드를 실행하기 onChange 혹은 onInput 이벤트 핸들러를 이용한다. onChange 혹은 onInput은 에 유저가 뭔가 입력을..

[React_study] 자식이 부모의 state 가져다쓰고 싶을 때는 props

* props를 이용하여서 부모 -> 자식으로 state전송하는 방법 자식 component사용하는 곳에 가서 자식 component 만드는 function으로 가서 props라는 파라미터를 등록후 props.작명 및 사용 보통은 props의 명과 state의 명을 동일하게 해준다. 아래의 예시를 통해 확인 title이라는 부모 컴포넌트의 state를 자식 컴포넌트 에 전송해봅시다. function App (){ const [title, setTitle] = useState('Hello world'); return ( ) } function Modal(props){ return ( { props.title } date content ) } props는 10개, 100개, 100개 무한히 전송 가능하다. ..

[JavaScript][clean-code] hasOwnProperty

* hasOwnProperty - property를 가지고 있는가? - 가지고있다면 true 없다면 false를 반환한다. const person = { name : 'hyeonwoo' } person.hasOwnProperty(name); // true person.hasOwnProperty(age); // false JavaScript는 프로퍼티 명칭으로서 hasOwnProperty를 보호하지 않는다. 그러므로 이 명칭을 사용하는 프로퍼티를 가지는 객체가 존재하려면 즉, 올바른 결과들을 얻기 위해서는 외부 hasOwnProperty를 사용해야한다. 아래의 예시를 통해 확인해보기 * 예시를 통한 확인 (hasOwnProperty) // hasOwnProperty라는 메서드와 bar라는 문자열을 가지고 ..

[JavaScript][clean-code] Prototype 조작 지양하기

* Prototype 조작 지양하기 - 왜 지양해야할까? 자바스크립트가 이미 굉장히 발전했기 때문에 굳이 생성자 함수를 만들고 prototype를 조작할 이유가 없다. 직접 만들어서 모듈화 하면 된다. 직접 만들어서 모듈화 > 배포 > NPM 자바스크립트의 내장객체를 애초에 건들지 말자(어렵고 위험하다.) (JS는 몽키패치 언어여서 런타임에 동작되는 것들을 멋대로 꺼낼 수 있다.) class를 활용하면 된다. (아래의 예시 참조) class Car { constructor(name, brand) { this.name = name; this.brand = brand; } sayName() { return this.brand + '-' + this.name; } } const casper = new Car(..