이 블로그 내용은 useState가 아닌, this.state로 상태를 변경하게 됩니다. 두 로직 모두 이해하신 분이시라면, 어떤 걸로 하든 충분히 하실 수 있습니다. 1. state와 이벤트 핸들러를 가지고 있을 InputContainer.js 만들기 import React, { Component } from "react"; import InputComponent from "../components/InputComponent"; class InputContainer extends Component { constructor(props) { super(); this.state = { inputItems: [ { id: 0, title: "", one: "", two: "" } ], inputAddId: 1..
Typescript를 사용하다보면, 서버에서 불러오는 데이터의 명확한 데이터 타입을 모를 경우가 있다. 어떤 다른 사이트에서 제공하는 Open API를 사용하다보면 데이터 타입을 알 수가 없기 때문이다. 그러다 보면, useState([]) 이런식으로, 빈 배열을 가진 useState 방식의 변수들을 만들어주고, return 부분에, [].map((어쩌구, 저쩌구) => {}) 뭐 이런 방식으로 렌더링을 시켜줄텐데.. 에러는 아닌데, [error] Property does not exist on type 'never' 이런 에러를 발견하곤 할 것이다. 그럴 때 해결하는 방법은 간단하다. const [test, setTest] = useState([]); 이렇게, T 타입을, any[] 타입으로 만들어주면..
[ 이전 공부 내용 ] 더보기 2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 1. Intro ( 프로젝트 생성 및 실행해보자 ) 2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 02. Library와 Framework 2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 03. pages 와 static pre rendering 2022.02.15 - [web/React.js] - [ Next.js 공부하기 ] 04. Routing / CSS Module / Style JSX Style.jsx를 하다보면, 그럼 전역으로 어떤 특정 태그의 스타일을 바꾸고 싶은데 어떻게 해 그럼? 이라고 생각한 사람도 있..
[ 이전 공부 내용 ] 더보기 2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 1. Intro ( 프로젝트 생성 및 실행해보자 ) 2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 02. Library와 Framework 2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 03. pages 와 static pre rendering 1. Routing - Next.js에서는, react.js 처럼, react-router-dom을 설치하거나 하는 것을 할 필요가 없다. 굉장히 좋다^^ components 폴더에, navbar.tsx 파일을 생성해주고 아래와 같이 코드를 작성하자. import Link fr..
[ 이전 공부 내용 ] 더보기 2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 1. Intro ( 프로젝트 생성 및 실행해보자 ) 2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 02. Library와 Framework 1. pages - 이전 Library와 framework에서도 말했듯이, pages에 있는 index 파일명은 home이 되고, test.tsx 파일은, /test 경로를 가지게 된다. 파일의 이름이 경로명으로 설정이 된다는 것을 알 수 있다. - 또한 규칙은, typescript는 문제가 없지만, javascript는, export default는 무조건 붙여줘야만 경로 설정이 가능해진다는 것을 주의하자! 2. s..
[ 이전글 보기 ] 2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 1. Intro ( 프로젝트 생성 및 실행해보자 ) [ Next.js 공부하기 ] 1. Intro ( 프로젝트 생성 및 실행해보자 ) 마지막 취업 전 포트폴리오에 공을 들이기 위한 준비를 한다. 바로 Next.js를 배우는 것. Next.js를 배우면서, SSR이 무엇인지, SSR의 장점이 무엇인지 이런 것들을 한 번 공부해보면서 포트폴리오에 includecoding.tistory.com 이번 글은, 라이브러리와 프레임워크의 차이점이 무엇인지를 알아보자. 1. 라이브러리란? - 개발자로서 내가 사용하는 것을 뜻한다. 라이브러리를 사용할 때에는, 내가 원할 때 언제든 어떤 방법으로든 상관없이 불러와서 사..
마지막 취업 전 포트폴리오에 공을 들이기 위한 준비를 한다. 바로 Next.js를 배우는 것. Next.js를 배우면서, SSR이 무엇인지, SSR의 장점이 무엇인지 이런 것들을 한 번 공부해보면서 포트폴리오에 적용을 해볼 것이다. 작업환경 : Mac OS 1. Next.js 프로젝트 생성하기 - 일단 터미널을 켜주고, 나는 바탕화면에 폴더를 만들 예정이기 때문에, cd desktop을 입력해서, desktop을 현재 가리키게 하고 처음부터 자바스크립트가 아닌 타입스크립트 환경에 맞춰서 공부를 했기 때문에, 타입스크립트로 만들 것이다. 밑에처럼 명령어를 입력해주자. npx create-next-app@latest --typescript 그럼 프로젝트 이름이 어떻게 되는 지를 물어보는데, 입력을 하면 된다..
1. 일단 터미널을 이용해서, 원하는 경로에 React.js를 설치한다. ( npm이 설치되어 있어야 합니다. ) [ Javascript ] npx create-react-app '프로젝트 이름' [ Typescript ] npx create-react-app '프로젝트 이름' --template typescript 2. Firebase로 이동해서 프로젝트를 만든다. - 아래 링크를 타고, 프로젝트 만들기 또는 프로젝트 추가를 클릭한다. 애널리틱스는 나중에 추가가 가능하기 때문에, 사용 설정을 꺼주어도 된다. https://console.firebase.google.com/ 로그인 - Google 계정 하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인 accounts.google.c..
- Total
- Today
- Yesterday
- baseofcoding
- Controller
- GitHub
- 프로그래밍
- MVC
- spring boot
- 비지니스 로직
- 뷰포리아
- 유니티로 배우는 C#
- Git
- Vuforia
- Base Of Coding
- 게임프로그래밍
- 스프링
- Servlet
- Next.js
- c#
- CSS
- 유니티
- JSP
- VR
- 안드로이드
- 유니티3D
- Java
- unity3d
- Unity
- Spring
- HTML
- 서블릿
- 프리젠테이션 로직
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |