이번 글을 통해 배워갈 내용 CORS policy 문제를 해결하는 한 가지 방법 서론 후배가 도움이 필요해서 연락이 왔다 문제는 바로 학교 프로젝트에서 열린 데이터를 프론트 단에서 바로 가지고 와서 쓰고 싶은데 (아래는 열린 데이터 광장 주소) https://data.seoul.go.kr/ 열린데이터광장 메인 데이터분류,데이터검색,데이터활용 data.seoul.go.kr 아래와 같이 에러가 뜬다는 것이다. " Access to fetch at 'http://example.com/movies.json' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass acc..
이번 글을 통해 배워갈 내용 리액트개발을 할때 빠른 속도로 코딩을 하게 도와주는 익스텐션인 심플 리액트 스니펫스를 알아보겠습니다. 먼저 VS 코드 익스텐션 아이콘 클릭 후 익스텐션 검색창에 Simple React Snippets를 검색합니다. 그리고 설치 버튼을 누릅니다.(이부분이 설치전에는 install로 보입니다) 설치가 완료되면 사용해 보겠습니다. 컴포넌트js 파일을 만듭니다. 그리고 여기서부터 마법이 실행되는데 예를 들어 React를 임포트하고 싶다면 imr 치고 엔터 치면 됩니다. stateless function component를 만들고 거기다가 navbar 클래스를 가진 nav를 만들고자 한다면 3초 안에 위와 같이 치면 됩니다. 그외에도 여러가지 단축키가 있는데 단축키들은 아래 사이트에서..
VS 코드에서 타입스크립트 컴파일러 설치하기 이번 글을 통해 배워갈 내용 VS 코드에서 타입스크립트를 설치하고 실행하는 법을 배워보겠습니다. 먼저 노드가 깔려 있는지 확인 합니다. node -v 를 입력 했을때 버전이 뜨지 않는 경우 노드가 깔려있지 않은것이기 때문에 https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위에 사이트 방문 후에 설치 후 에 진행 해주시면 됩니다. 특정 로컬 프로젝트에서만이 아니고 글로벌에서 실행 가능하게 설치 하겠습니다. npm install -g typescript 그뒤에 컴파일 설정을 하기 위해서 tsc --init 을..
이번 글을 통해 배워갈 내용 Next Js에서 Do not use 해결 하는 방법 Next Js에서 Do not use 오류 무시하는 방법 VS Code 로 Next JS 프로젝트를 진행하는 도중 Do not use . Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element.eslint(@next/next/no-img-element) 라는 문구가 나오면서 오류를 해결 하라고 나옵니다. 이는 HTML '' 태그를 이용해서 이미지를 출력하는 것보다 Next.js에 탑재된 이미지 컴포넌트를 쓰면 이미지를 최적화하고 성능을 향상 시킬수 있어서 eslint가 경고를 보여주는 것입니다. eslint 설정에서 경고..
이번 글을 통해 배워갈 내용 3 x 3 틱택토 게임의 승자를 정하는 방법을 알아봅니다. 3 x 3 틱택토 게임에서 승리를 하는 방법은 총 8 가지가 있습니다. 이를 배열로 표현해서 판별하는 방법으로 튜토리얼에서는 승자를 정합니다. (BFS 나 DFS 로도 가능합니다만 시간 관계상 리액트 튜토리얼을 그대로 설명하겠습니다.) CalculateWinner 라는 함수를 만듭니다 lines 라는 const 변수 안에는 이길수 있는 경우의 수 (위에 설명한 8가지를 넣고) for문을 돌려서 lines의 조건에 부합하는지 아닌지 판별해주는 함수입니다. export default function calculateWinner(squares) { const lines = [ [0, 1, 2], [3, 4, 5], [6, ..
이번 글을 통해 배워갈 내용 리액트에서 간단한 불 값으로 순서를 정해봅니다. Board Class에서 현재는 "X" 를 입력하는 기능이 있지만 "O" 를 입력하는 기능이 없습니다. 간단한 Bool로 상태를 변경해서 플레이어 순서를 정해보겠습니다. 먼저 생성자에 xIsNext라는 값을 초기화 해서 "X" 가 첫 플레이를 하도록 설정합니다. constructor(props) { super(props); this.state = { squares: Array(9).fill(null), xIsNext: true, }; } 그 다음 handleClick 함수가 실행될때 XIsNext 값을 변경해서 다음 플레이어가 턴을 넘겨 받을수 있도록 변경합니다. handleClick(i) { const squares = thi..
이번 글을 통해 배워갈 내용 function components 지금까지는 클래스 컴포넌트를 사용해서 예제를 작성했습니다. 클래스에서는 React.Compoent를 상속 받아서 render method로 출력을 했습니다만 일부 컴포넌트는 Class 없이 함수로 간단하게 표현 할 수 있습니다. 이를 통해 더 간결하고 명확한 코드를 작성 할 수 있습니다. 상황에 맞게 둘중에 적합한 방법을 쓰는게 좋을 것 같습니다. 제가 참조하는 리액트 공식 문서 튜토리얼에서는 Square 클래스를 함수로 변경하기에 저도 한번 보고 따라서 변경해보겠습니다. // import React from "react"; // before // export default class Square extends React.Component ..
이번 글을 통해 배워갈 내용 controlled components 여러개의 자식 컴포넌트에서 부모가 데이터를 얻을 때 혹은 두개의 자식 컴포넌트 간에 데이터를 주고 받을 때 공유하는 State(상태)를 부모 컴포넌트에서 선언해줘서 관리를 해줍니다. 부모 컴포넌트는 자식들에게 데이터를 props를 통해 전달하고 이는 부모와 자식 그리고 자식과 자식 간에 데이터를 동기화 해줍니다. constructor(props) { super(props); this.state = { squares: Array(9).fill(null), }; } 먼저 보드 클래스에 생성자를 추가해줍니다. 그뒤에 renderSqaure 함수를 변경해줍니다. renderSquare(i) { return ; } 위에서 한 내용을 설명하자면 B..
