Study

[JavaScript][clean-code] 직접 접근 지양하기

* 직접 접근 지양하기 - 직접 접근이 가능하면 발생할 수 있는 문제를 예시를 통해 확인 * 예시 const model = { isLogin : false, isValidToken : false }; function login() { model.isLogin = true; model.isValidToken = true; } function logout() { model.isLogin = false; model.isValidToken = false; } someElement.addEventListener('click', login) someElement를 click하였을때 login function이 실행된다. 이때 model에 쉽게 접근할 수 있는점이 문제점이 된다. * 해결방법 this를 사용하거나 객..

[React_study] React Router (setting & routing & Link)

* React Router - 만약 페이지를 나누고 싶다면 일반 html, css, js에서는 그냥 html 파일을 여러개 만들면 된다. 하지만 리액트에서는 html파일을 하나만 사용한다. 그래서 리액트에서는 누가 다른 페이지 요청을 하면 내부에 있는 를 바꿔준뒤 render해주면 된다. react-router-dom이라는 외부 라이브러리를 이용해 구현하는게 일반적이다. * React-router-dom 설치 및 셋팅 방법 아래의 명령어를 이용해 설치 npm install react-router-dom@6 셋팅은 index.js 파일에서 import { BrowserRouter } from "react-router-dom"; 을 이용해 을 감싸주면 된다. import { BrowserRouter } fr..

[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개 무한히 전송 가능하다. ..