열심히 만들어 놓은 게시글 등록 페이지 input 창에 값을 입력해놓고 등록하기 버튼을 눌렀는데 띠용... 아무것도 뜨지 않는다... 코드를 살펴보면 import { Page } from "@/styles/board"; import { Header, Wrapper, Inform, Vector, Name, Date, Body, Title, Contents, } from "@/styles/board_detail"; import { gql, useQuery } from "@apollo/client"; import { useRouter } from "next/router"; //useQuery안에 담은 변수 만들자 const FETCH_BOARD = gql` query fetchBoard($boardId: ID..

React란? React는 javascript를 쉽고 효율적으로 사용할 수 있도록 Facebook에서 만든 도구이다 대표적인 서비스로는 페이스북, 인스타그램, 에어비앤비 등이 있다 OS(내 컴퓨터에 설치 해야 할 것) 1. VS code 2. VScode - Extension 3. Node.js 설치 (LTS 버전) 4. Yarn 설치 : sudo npm install -g yarn 폴더에 설치해야 할 것 ⭐ 여기서부터는 컴퓨터에 node.js가 설치되어 있어야 한다 ⭐ 1. 바탕화면에 폴더 만들기 (이름은 영어로!) 2. vscode에서 폴더 열기 3. 터미널은 git bash로 돼있어야 한다. 4. 아래 명령어를 터미널에 입력해서 설치한다. npx create-next-app 5. 만든 폴더로 이동한..

HTTP 통신 HTTP란 두 컴퓨터간에 텍스트 데이터를 주고 받는 길이 길을 통해 요청(request)과 응답(response)을 주고받음Back-end 컴퓨터와 주고받는다 API API란 HTTP요청을 Back-end 컴퓨터에 보냈을 때 실행되는 Back-end 기능이다여러개의 HTTP 길이 존재하고 각각의 요청마다 담당자가 필요한데이 담당자가 API Back-end 개발자가 만든 함수 이 API 종류에는 Rest-API와 GraphQL-API가 있다. GraphQL Rest-API는 응답 결과로 모든 데이터를 받아야만 하지만 GraphQL-API는 필요한 데이터만 골라 받을 수 있다. 이러한 이유로 각 API에 전송을 요청하는 담당자도 다르다 Rest-API는 axios GraphQL은 apollo-..

이렇게 동작한다Keyframes 와 animation을 이용해 위와 같이 움직이는 효과를 만드는 실습을 했다.html과 css를 사용했는데 문제는 css파일이 아닌 React에서 쓰는 @emotion/styled를 이용해JavaScript 파일에서 태그 대신 함수를 만들어 사용했기 때문에 Keyframes를 어떻게 사용해야하는지 몰라 한참을 해매다가 겨우 성공!!ㅜㅜ 일단 기본적으로 css에서는@keyframes titleText { 0% { transform: translateY(70px); opacity: 0; } 92% { transform: translateY(-10px); } 100% { transform: transl..

index.js import { Page, Wrapper, Title, Content, Text1, Text2, Text3, Text4, Subtitle, DiaryDate, } from "@/styles/my_diary/mydiary"; export default function MyDiary() { return ( 나만의 일기장 나만의 일기장 입니다! 원하는 색과 사이즈로 일기장을 커스텀 해보세요. Have a Good Day.😊 📌 쭈꾸미의 일기 오늘은 김치찜을 먹었다. 🧀치즈 계란말이 도 같이 나오는 세트였다. 맛있어서 정신없이 먹다보니 배가 너무 불러서 힘들었다. 내일은 과식하지 말아야겠다!! 2023년 3월 8일 날씨 맑음☀️ ); } mydiary.js import styled from "@..

1. 컴포넌트(Component)란? - React로 만들어진 앱을 이루는 최소단위 - 데이터(props)를 입력받아 View(state)상태에 따라 DOM Node를 출력하는 함수 - Component 이름은 항상 대문자로 시작 - UI 또는 기능을 부품화 해서 재사용 가능하게 하는 것 - 페이지도 하나의 큰 Component 가 될 수 있다 - 함수형과 클래스형 두가지가 있다 1) 함수형 컴포넌트 (Stateless Functional Component) - 가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성하는 것이다 - 사용하기 더 쉽기 때문에 주로 함수형을 사용한다 export default function MyFunction() { //JavaScrip 작성 return( 함수형..

Git이란? 버전 관리 시스템 - 누가, 언제, 어떤 파일을 저장하였는가? - 특정 시점으로 소스코드 복원이 가능한가? 개인 컴퓨터에 설치 GitHub란? Git을 온라인으로 관리할 수 있는 클라우드 Git 호스팅 서비스 개발과 유지보수, 완성된 코드를 서비스에 반영 작업한 코드를 GitHub에 업로드 한다 Repositories 작업기록을 모아놓는 폴더 - 브랜치(master) : 배포용, 실제 서비스, 여기에 직접 작업을 하면 안됨 - 브랜치(dev) : master를 통으로 복사한 것, 여기서 개발하고 테스트한 다음에 덮어쓰기함 1. git 기본 설정하기 git config --global user.name "user name" git config --global user.email user ema..

더보기 프로그램은 데이터를 읽고 출력하는 작업을 빈번히 수행한다. 데이터는 키보드를 통해 입력될 수 있고, 파일 또는 네트워크로부터 입력될 수도 있다. 반대로 모니터로 출력될 수도 있고, 파일 또는 네트워크로 출력될 수도 있다. 데이터를 읽고 출력하기 위해 사용되는 입출력 API에 대해 알아보자 자바에서 데이터는 스트림(Stream)을 통해 입출력된다. 스트림은 단일 방향으로 연속적으로 흘러가는 것을 말하는데, 데이터는 출발지에서 도착지로 흘러간다. 프로그램이 출발지냐 도착지냐에 따라서 사용하는 스트림의 종류가 결정된다. 프로그램이 도착지이면 데이터를 입력받아야 하므로 입력 스트림을 사용한다. 프로그램이 출발지이면 데이터를 출력해야 하므로 출력 스트림을 사용한다. 입출력 스트림의 종류 java.io 패키..

메소드 내부에서 예외가 발생할 수 있는 코드를 작성할 때 try-catch 블록으로 예외를 처리한다. https://sy-blog.tistory.com/76?category=899823 예외 처리 코드 (try - catch - finally) try - catch - finally 블록은 생성자 내부와 메소드 내부에서 작성되어 일반 예외와 실행 예외가 발생할 경우 예외 처리를 할 수 있도록 해준다. ∙ try 블록에는 예외 발생 가능 코드가 위치한다. ∙ t sy-blog.tistory.com 하지만 경우에 따라서는 메소드를 호출한 곳으로 예외를 떠 넘길수도 있다. 이때 사용하는 키워드가 throws이다. throws 키워드는 메소드 선언부 끝에 작성되어 메소드에서 처리하지 않은 예외를 호출한 곳으로 ..