본문 바로가기

반응형

분류 전체보기

(420)
[2024 Spring Boot 스터디] 정호용 #3 주차 - 5~6장 (미완) 05장. 데이터베이스 조작이 편해지는 ORM5.1 데이터베이스란?데이터를 매우 효율적으로 보관하고 꺼내볼 수 있는 곳이다.이점? -> 많은 사람이 안전하게 데이터를 사용/관리할 수 있다.DBMS데이터베이스를 관리하기 위한 소프트웨어를 DBMS(DataBase Management System) 이라 한다.데이터베이스 -> 많은 사람이 사용 -> 동시 접근이 가능해야 함.DBMS -> 위와 같은 요구사항들을 만족 & 효율적으로 데이터베이스를 관리/운영함.MySQL, Oracle 등이 DBMS이다.종류에 따라 관계형, 객체-관계형, 도큐먼트형, 비관계형 등으로 나뉜다. 관계형 DBMSrelational DBMS, 즉 RDBMS이라 한다.관계형 모델을 기반으로 한다. (즉 테이블 형태로 이루어진 데이터 저장소를..
[2024 React.js 스터디] 김지나 #7주차 4장. API 연동하기- 웹 애플리케이션을 만들 때, 데이터를 보존시키고 다른 사람들도 조회할 수 있게 하려면 서버를 만들고 서버의 API를 사용해서 데이터를 읽고 써야 함 1. API 연동의 기본- 새 프로젝트 만들고 axios 라이브러리 설치$ npx create-react-app api-integrate$ cd api-integrate$ yarn add axios- axios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청 가능- REST API를 사용할 때에는 하고 싶은 작업에 따라 다른 메서드로 요청할 수 있음(GET: 데이터 조회, POST: 데이터 등록, PUT: 데이터 수정, DELETE: 데이터 제거) - axios 사용법import axios from 'a..
[2024 React.js 스터디] 이서영 #6주차 리액트 컴포넌트 스타일링 하기 1. Sass ( Syntactically Awesome Style Sheets ) - CSS pre-processor : CSS 문서의 작성에 도움을 주는 도구- 복잡한 작업 쉽게쉽게- 코드의 재활용성, 가독성 높여줌 -> 유지보수 쉽게 시작하기(1) 리액트 프로젝트 만들기 이 프로젝트 디렉토리(Styling)에 node-sass 라이브러리 설치$ cd styling-with-sass$ yarn add node-sass (2) Button 컴포넌트 만들기src 디렉토리에 components 디렉터리 생성 -> 안에 Button 만들기버튼 만들고 스타일링 기존 css에서 사용x 문법들을 사용- $blue: #228be6; 스타일 파일에서 사용할 수 있는 변수 선언- ligh..
[2024 React.js 스터디] 류상우 #6주차 2-1. SassSass (Syntactically Awesome Style Sheets) 는 CSS pre-processor 로서, 작업의 간결화, 코드의 재활용성 증가, 코드의 가독성 증가 등을 통해 유지보수를 쉽게 해준다.여기서 CSS pre-processor(CSS 전처리기)는 CSS 문서의 양을 효율적으로 처리하고 관리해 주는 통합적인 단어이며  Sass, Less, stylus 등이 있다. Sass는 두 가지 확장자(.sass/.scss)를 지원한다. 두 확장자는 문법이 다른데 현재는 scss 문법을 주로 사용하므로 .scss 확장자로 스타일을 작성할 것이다.  우선 styling-with-sass라는 이름의 새로운 리액트 프로젝트를 만들고 해당 디렉터리에 node-sass 라이브러리를 설치한..
[2024 React.js 스터디] 박건민 #6주차 01. SassSass (Syntactically Awesome Style Sheets: 문법적으로 짱짱.. 멋진..... 스타일시트)는 CSS pre-processor 로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐 만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게 해준다. 새로운 리액트 프로젝트 및 라이브러리 설치$ npx create-react-app styling-with-sass$ cd styling-with-sass$ yarn add node-sass  Button 컴포넌트 만들기Button.jsimport React from 'react';import './Button.scss';function Button({ children }) { return {chil..
[2024 신입부원 기초 스터디] 이종윤 #6주차 (웹 기초 스터디 마무리~) 이번 시간에는 마무리로 지금까지 배운 js를 활용하여 마지막 실습을 했다.실습 내용은 'stop watch' 만들기!!!이 실습을 하기 전에 선행 되어야 할 개념 부터 배우자.  1. Date 객체란?저번 시간에도 배웠지만 Date 객체는 날짜를 저장할 수 있고, 날짜와 관련된 메서드도 제공해주는 내장 객체이다. new Date()를 호출하면 새로운 Date 객체가 만들어지는데, new Date()는 다음과 같은 형태로 호출할 수 있다. 2. innerText와 innerHTML란? innerText 는 태그 안의 텍스트를 가져오거나 바꾸는 기능을 한다.(바뀌는 범위 : 텍스트 => 텍스트만 바뀜) innerHTML는 태그 자체를 가져오거나 바꾸는 기능을 한다.(바뀌는 범위 : 텍스트 => 전체 다 바뀜..
[2024 Spring Boot 스터디] 정호용 #2 주차 - 스프링부트 구조 이해 및 테스트 3장 스프링 부트 구조 이해하기스프링부트에는 3가지 계층이 있다.1. 프레젠테이션 계층HTTP 요청을 받고, 이 요청을 비즈니스 계층으로 전송하는 역할컨트롤러가 바로 프레젠테이션 계층 역할을 한다.  2. 비즈니스 계층모든 비즈니스 로직을 처리한다. 비즈니스 로직은 서비스를 만들기 위한 로직을 말한다.웹사이트에서 벌어지는 모든 작업을 처리한다. 3. 퍼시스턴스 계층모든 데이터베이스 관련 로직을 처리한다.  스프링부트의 디렉터리1. main실제 코드를 작성하는 공간이다.프로젝트 실행에 필효한 소스코드, 리소스 파일이 모두 여기 들어있다. 2. test프로젝트의 소스 코드를 테스트할 목적의 코드, 리소스 파일이 들어있다. 3. build.gradle빌드를 설정하는 파일. 의존성이나 플러그인 설정 등 4. s..
[2024 React.js 스터디] 한승훈 #6주차 안녕하세요!오늘은 리액트를 이용한 컴포넌트 스타일링에 대해 배워보도록 할게요~~기본적으로 리액트는 css 파일을 만들고, 이것을 컴포넌트로 import 하는 것입니다.이것도 인라인보다는 편리하지만, 더 나은 방법들을 살펴볼게요. 1. SASSSASS는?- css의 pre-processor입니다.- 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐 만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게해줍니다.- 문법에는 sass, scss 두 종류가 존재하나, 더 대중적으로 사용되는 scss를 배워보도록 합니다. 먼저 새로운 리액트 프로젝트를 만드세요.$ npx create-react-app styling-with-sass그 다음에는, 해당 프로젝트 디렉터리에 node-sass 라는 라..

반응형