본문 바로가기

분류 전체보기

(11)
Sequelize 를 통한 DB연결에 대하여 ORM - Object Relational Mapping 직역하자면 , 객체 관계 맵핑이다. ORM은 Object Relational Mapping(객체-관계 매핑)의 약자. 자동으로 DBMS의 데이터를 객체 형태로 변환해줘서 더 객체 지향적인 코드를 생산할 수 있도록 도와주다. 이를 통해 개발자는 데이터를 가지고 어떤 작업을 할지에만 집중할 수 있게 되고 또한 손쉽게 DBMS를 변경할 수 있어서 제품이 높은 이식성을 가질 수 있게 된다. 이를 통해서 쿼리문을 사용하지 않고, 쉽게 Database를 조작 할 수 있다. 우선 , Terminal에 들어가 mysql에 접속해준다. --> mysql -u id -p password back 서버에 server.js 파일을 만들고 dialect : 에는 사용할 ..
Hook 수업 복습 //작성중 커스텀 훅을 쓰는 이유? 컴포넌트를 만들다보면 반복되는 로직이 자주 발생한다. 특히 회원가입과 같은 input을 관리하는 코드는 관리할때마다 꽤나 비슷한 코드가 반복된다. -함수형 프로그래밍 오늘의 구현 목표는 조건을 단 회원가입 이다. - ID칸에 아무것도 입력하지 않으면 '이메일이 입력되지 않았습니다.' 를 화면에 출력한다. - 마찬가지로 PWD칸에 아무것도 입력하지 않으면 '비밀번호가 입력되지 않았습니다'를 출력한다. 아이디에서는 이메일의 유효성을 검사한다. 패스워드에서는 8자 이상의 패스워드 조건을 만족하지 못하면 '8자 이상의 패스워드를 사용해야합니다' 라는 결과를 출력한다. 우선 UseInput 1.useInput 커스텀 훅 만들기 const useInput = (defaultValue) =>..
Custom Hook 과 내장 훅 우리가 오늘(2022-4-26)에 만든 커스텀 훅 const useInput = (defaultValue) => { const [value, setValue] = useState(defaultValue) const onChange = e => { setValue(e.target.value) } return { value, onChange } } 커스텀 훅은 최상위 코드에 호출해야한다. Form 안에 있는 useEffect()는 기존 리액트에서 내장(미리 만들어놓은 ) 훅을 가져와 사용했다. const Form = () => { useEffect(() => { if (submit) { console.log('나 회원가입 시켜줘') if (Object.keys(errors).length === 0) { al..
Hook 이란 무엇인가... 더보기 1. 내가 이해한 Hook hook은 함수처럼 미리 만들어놓고 사용한다 . 그러면 함수와는 뭐가 다른가 Hook은 함수 컴포넌트에서 React 'state' 와 생명주기 기능 (life cycle) 를 사용할수 있게 해준다. 그리고 무조건 최상위 레벨에서만 훅을 호출해야한다. -> 레벨은 블록단위를 뜻하는데 Component를 정의하는는 코드내에서 제일 바깥, 즉 최상위 레벨에서만 훅을 호출해야한다. React에서 제공하는 컴포넌트가 사용할 수 있는 내장 메서드 같은 것들 2. Hook 사용시 장점 -계층의 변화 없이 상태 관련 로직을 다시 사용 할수 있다 -클래스 없이 React의 기능들을 사용 할 수있다. -작은 함수의 묶음으로 Component를 나누어 사용가능하다. -일부 Component..
객체안에 배열과 객체 접근해보기 정답 : obj.children[1].children.children()
Class 개념 정리 클래스 클래스는 객체를 생성하기 위한 틀(템플릿) 이라고 많이들 이야기한다. 붕어빵 틀 을 클래스에 비유하고 객체를 붕어빵이라 비유한다. 이렇게 객체지향적인 코딩을 하는 이유는 데이터를 캡슐화해서 재사용하고 유지보수하기 용이함을 이용하기 위해서다. 1. 클래스 선언 에 대하여... class 명령어와 클래스명을 선언한다. 안에 인자로 받을 변수들을 선언해주면 후에 더 용이하게 데이터조작이 가능하다. constructor(생성자)는 class 객체의 초기값을 설정해 줄 수있다. 이는 한 클래스 내부에서 단 한개만 존재할수 있다. (두개는 error) 좀 더 자세히 알아보기 위해 해당 결과값은 다음과 같다. class로 만들어준 예시 person이라는 이름의 객체가 생성되었다. 2. 클래스 메서드 이용해보기..
React 틱택토 3편 2편에서는 calculateWinner 즉 승자예측 함수까지 작성을 완료했다 이제 본 코드에 함수를 호출에서 사용하면 해당 게임에 대한 코드작성도 마무리 하게 된다. board 컴포넌트 안에 winner라는 변수를 선언하고 calculateWinner 함수를 호출한다.(인자값은 sqaures) 그리고 그 밑에 || or 연산자를 통해 winner != null을 추가해준다 즉 승자가 없어도 게임이 계속 진행되는 것이다. 이제 페이지에 채워줄 render 함수로 가보자 Render() 마찬가지로 winner라는 변수를 선언하고 현재상태의 squares라는 인자값을 가진 calculateWinner 함수를 호출한다.. 그리고 상태변수 status 를 선언해주고 대망의 삼항연산자 안에 삼항연산자를 선언한다. ..
React 틱택토 게임 2편 1편에서 state (상태)를 선언하고 setState 메소드를 통해서 플레이어 구분까지 완료했다. 한번 클릭한 버튼에 조건을 걸어서 중복클릭 금지하기. 위 이미지에서 ||뒤에 코드는 WINNER 후에 승자예측후 winner 가 없으면 계속 게임을 진행하게 하는 코드이다. 우선 앞의 코드를 설명해야 하는데 - squares배열의 값이 null이 아닌경우 ( X 나 O 로 클릭되어있음) 해당 함수 밑에 코드를 읽지않고 함수를 종료시킨다. 여기서 해당함수는 handleClcik함수이다. 따라서 위의 조건문을 선언할 때는 위치가 굉장히 중요하다. 승자결정 마지막으로 승자 결정 함수를 작성해보자 0 1 2 3 4 5 6 7 8 이라 생각하고 , 빙고가 되는 경우를 모두 찾아서 line이라는 변수에 넣어준다. (..
React - 틱택토 게임 1편 내가 이해한 틱택토 게임 = 빙고 게임이다. 게임의 규칙은 다음과 같다. -3x3으로 시작하고 선공 X 후공 O 으로 진행한다. -승자가 나오면 게임은 중단된다. -한번 클릭된 버튼은 재클릭되지 않는다. 해당 게임을 만들기 위해서는 우선 페이지 영역을 나눠야 할것이다. 1. Winner 와 Next Player를 표시해주는 영역 2. 3x3 = 9칸의 빙고판 위 게임은 3개의 컴포넌트로 구성되어 있다. Board, Game,Square Game Component에서는 Board를 렌더하고, Board는 Square를 렌더한다. Sqare 컴포넌트는 Button을 렌더하는 방식으로 작동한다. 이렇게 세개의 컴포넌트를 각각 작성하고 제일 밑에 Game 컴포넌트 안에 를 함으로 각각 컴포넌트가 위 설명처럼 연..
React -props와 state는 무엇인가 우선 , 내가 이해한 Props와 State Props와 State는 화면을 구성하는 데이터 라고 이해했다. 그리고 component가 화면이다. 1.props properties의 줄임말이다. 어떠한 값을 컴포넌트에게 전달을 할때 사용한다. 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할때 사용하는 개념이다. 2.State State는 상태다. 나는 이것을 React에서 사용하는 변수를 저장하는 곳이라고 생각했다. 여기서 state라는 객체의 정보를 수정하고싶으면 setState()라는 함수를 이용하여 상태값을 변경한다. 둘의 차이점은 다음과 같다. props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고..