[GraphQL] GraphQL이란?
·
Server/Database
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-..
[CSS] keyframes animation 실습
·
Web/HTML+CSS
이렇게 동작한다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..
나만의 일기장 CSS 사용해서 만들기(실습)
·
Web/HTML+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 "@..
[React] Component 와 State
·
Framework(Library)/React
1. 컴포넌트(Component)란? - React로 만들어진 앱을 이루는 최소단위 - 데이터(props)를 입력받아 View(state)상태에 따라 DOM Node를 출력하는 함수 - Component 이름은 항상 대문자로 시작 - UI 또는 기능을 부품화 해서 재사용 가능하게 하는 것 - 페이지도 하나의 큰 Component 가 될 수 있다 - 함수형과 클래스형 두가지가 있다 1) 함수형 컴포넌트 (Stateless Functional Component) - 가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성하는 것이다 - 사용하기 더 쉽기 때문에 주로 함수형을 사용한다 export default function MyFunction() { //JavaScrip 작성 return( 함수형..
Git/GitHub
·
Devops/Git & SVN
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..
[JAVA] 입출력 스트림(자바I/O 스트림)
·
Language/Java
더보기 프로그램은 데이터를 읽고 출력하는 작업을 빈번히 수행한다. 데이터는 키보드를 통해 입력될 수 있고, 파일 또는 네트워크로부터 입력될 수도 있다. 반대로 모니터로 출력될 수도 있고, 파일 또는 네트워크로 출력될 수도 있다. 데이터를 읽고 출력하기 위해 사용되는 입출력 API에 대해 알아보자 자바에서 데이터는 스트림(Stream)을 통해 입출력된다. 스트림은 단일 방향으로 연속적으로 흘러가는 것을 말하는데, 데이터는 출발지에서 도착지로 흘러간다. 프로그램이 출발지냐 도착지냐에 따라서 사용하는 스트림의 종류가 결정된다. 프로그램이 도착지이면 데이터를 입력받아야 하므로 입력 스트림을 사용한다. 프로그램이 출발지이면 데이터를 출력해야 하므로 출력 스트림을 사용한다. 입출력 스트림의 종류 java.io 패키..
[JAVA] throws 키워드 : 예외 떠넘기기
·
Language/Java
메소드 내부에서 예외가 발생할 수 있는 코드를 작성할 때 try-catch 블록으로 예외를 처리한다. https://sy-blog.tistory.com/76?category=899823 예외 처리 코드 (try - catch - finally) try - catch - finally 블록은 생성자 내부와 메소드 내부에서 작성되어 일반 예외와 실행 예외가 발생할 경우 예외 처리를 할 수 있도록 해준다. ∙ try 블록에는 예외 발생 가능 코드가 위치한다. ∙ t sy-blog.tistory.com 하지만 경우에 따라서는 메소드를 호출한 곳으로 예외를 떠 넘길수도 있다. 이때 사용하는 키워드가 throws이다. throws 키워드는 메소드 선언부 끝에 작성되어 메소드에서 처리하지 않은 예외를 호출한 곳으로 ..
바인딩(Binding)
·
Web/JSP
서블릿에서 다른 서블릿으로 전달하려는 데이터의 양이 많을 때는 GET방식으로 데이터를 전달하는 것이 불편하다. 서블릿에서 다른 서블릿 또는 JSP로 대량의 데이터를 공유하거나 전달하고 싶을 때는 바인딩 기능을 사용한다. 웹 프로그램 실행 히 데이터를 서블릿 관련 객체에 저장하는 방법으로, 주로 HttpServletRequest, Httpession, ServletContext 객체에서 사용되며 저장된 데이터는 프로그램 실행 시 서블릿이나 JSP에서 공유하여 사용한다. 관련 메소드 기능 setAttribute(객체명, "객체값") 데이터를 객체에 바인딩 한다. 객체명 = 객체값 ex) address = "수원시 권선구" getAttribute(String name) setAttribute에서 받아온 데이터..
[JSP] MVC 디자인 패턴
·
Web/JSP
MVC란 Model - View - Controller 의 약자로, 일반 PC 프로그램 개발에 사용되는 디자인 채턴을 웹 어플리케이션에 도입한 것. 즉, 웹 어플리케이션을 화면 부분, 요청 처리부분, 로직 처리 부분으롤 나누어 개발하는 방법 MVC 특징 ∙ 각 기능이 분리되어 있어 개발 및 유지보수가 편하다. ∙ 각 기능의 재사용성이 높아진다. ∙ 디자이너와 개발자의 작업을 분업화해섯 쉽개 개발할 수 있다. MVC 구성요소 ∙ Model : 비즈니스 로직을 처리한다. ∙ Controller : 사용자의 요청 및 흐름 제어를 담당한다. ∙ View : 사용자에게 보여줄 화면을 담당한다. 컨트롤러는 사용자로부터 요청을 받아 어떤 비즈니스 로직을 처리해야 할 지 제어한다. 모델은 데이터베이스 연동 같은 비즈니..