vscode를 이용하다보면 파란색 밑줄이 쳐지면서 Unknown word라고 뜰 때가 있다 에러는 아니라 문제가 생기진 않지만 코드를 보는데 매우매우 불편...😣 자세히 보면 cSpell에 다루는 것 같은데 cSpell 은 Node를 설치할 때 같이 설치된 파일이다 파일을 삭제할 수도 있지만 간단하게 최상위 폴더에서 파일을 하나 만들어준다. 이름은 .cspell.json 파일을 만들었다면 아래와같이 적어주면 된다.
Frontend
BoardWrite()라는 컴포넌트를 만들어서 등록페이지와 수정페이지에서 재사용 할 것이다 등록페이지에 들어갔을때는 등록이라고 뜨고, 수정페이지에 들어갔을 때는 수정이라고 떠야하는데 페이지 2개를 만들 필요없이 컴포넌트를 재사용해서 만들 수 있다. export default function BoardWriteUI(props) { return ( {props.isEdit ? "수정" : "등록"}페이지 작성자: 제목: 내용: {props.isEdit ? "수정하기" : "등록하기"} ); } props를 이용하면 된다. {props.isEdit ? "수정하기" : "등록하기"} 에서 isEdit가 true면 수정하기 false면 등록하기가 뜬다. 여기서 주의할 점은 number 인데 등록하기 버튼을 눌렀을..
열심히 만들어 놓은 게시글 등록 페이지 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. 만든 폴더로 이동한..
이렇게 동작한다 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: translateY(0); opacity: 1; } } 이런식으로 css파일에 넣..
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( 함수형..
서블릿에서 다른 서블릿으로 전달하려는 데이터의 양이 많을 때는 GET방식으로 데이터를 전달하는 것이 불편하다. 서블릿에서 다른 서블릿 또는 JSP로 대량의 데이터를 공유하거나 전달하고 싶을 때는 바인딩 기능을 사용한다. 웹 프로그램 실행 히 데이터를 서블릿 관련 객체에 저장하는 방법으로, 주로 HttpServletRequest, Httpession, ServletContext 객체에서 사용되며 저장된 데이터는 프로그램 실행 시 서블릿이나 JSP에서 공유하여 사용한다. 관련 메소드 기능 setAttribute(객체명, "객체값") 데이터를 객체에 바인딩 한다. 객체명 = 객체값 ex) address = "수원시 권선구" getAttribute(String name) setAttribute에서 받아온 데이터..
MVC란 Model - View - Controller 의 약자로, 일반 PC 프로그램 개발에 사용되는 디자인 채턴을 웹 어플리케이션에 도입한 것. 즉, 웹 어플리케이션을 화면 부분, 요청 처리부분, 로직 처리 부분으롤 나누어 개발하는 방법 MVC 특징 ∙ 각 기능이 분리되어 있어 개발 및 유지보수가 편하다. ∙ 각 기능의 재사용성이 높아진다. ∙ 디자이너와 개발자의 작업을 분업화해섯 쉽개 개발할 수 있다. MVC 구성요소 ∙ Model : 비즈니스 로직을 처리한다. ∙ Controller : 사용자의 요청 및 흐름 제어를 담당한다. ∙ View : 사용자에게 보여줄 화면을 담당한다. 컨트롤러는 사용자로부터 요청을 받아 어떤 비즈니스 로직을 처리해야 할 지 제어한다. 모델은 데이터베이스 연동 같은 비즈니..
