본문 바로가기

전체 글

(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 라는 라..

[2024 React.js 스터디] 김지나 #6주차 2장. 리액트 컴포넌트 스타일링하기- 리액트에서 컴포넌트를 스타일링 하는 가장 기본적인 방법은 css 파일을 만들어서 import해서 사용하는 것- 컴포넌트를 스타일링 할 때 자주 사용되는 기술들: Sass, CSS Module, styled-components 01. Sass: CSS pre-processor, 복잡한 작업 쉽게 가능, 코드 재활용성.가독성 높여줌, 유지보수 쉬움- .scss, .sass 두 가지 확장자가 있음, 보통 scss 문법이 더 많이 사용되므로 .scss 확장자로 작성하겠음 - 새로운 리액트 프로젝트 만들고 node-sass 라이브러리 설치하기 - Button 컴포넌트 만들기- src 디렉토리에 components 디렉토리를 생성 후 그 안에 Button.js 만들기- But..

[2024 Spring Boot 스터디] 유태근 #2 주차 - 스프링 컨테이너와 스프링 빈 스프링 컨테이너와 스프링 빈전 주차때 스프링 컨테이너에 객체를 스프링 빈으로 등록하고, 스프링 컨테이너에서 스프링 빈을 찾아서 사용하는 방식으로 변경하는 작업으로 마무리했다.스프링 컨테이너의 특성 및 역할생성할 때는 구성 정보를 지정해주어야 한다.파라미터로 넘어온 설정 클래스 정보를 사용해서 스프링 빈을 등록한다. @Bean 으로 직접 등록해주면 해당 함수명이 빈의 이름으로 등록된다.설정 정보를 참고해서 Bean들의 의존관계를 주입한다.스프링 빈에는 Role에 따라 2가지로 나눌 수 있다.ROLE_APPICATION : 우리가 직접 정의한 빈ROLE_INFRASTRUCTURE : 스프링 내부에서 사용하는 빈스프링 빈 조회스프링 컨테이너에 등록된 스프링 빈은 이름, 타입, 구현 타입 등으로 조회할 수 있다..

[2024 Spring Boot 스터디] 김호 #2 주차 - 본격적인 Spring Boot 3 Server 및 Test 환경 구성 (3 ~ 4장) 1. Spring Boot 3 개발 환경 개선 본격적으로 Spring Boot 3 server를 구성하기 전에 개발 환경을 수정한다. 1-1. build.gradle 수정build.gradle의 기존 내용에 [그림 1-1]의 내용을 추가한다.Spring Data JPA library는 Spring Boot 전용 JPA library이다.H2 library는 local 및 test 환경에서 In-Memory Database의 data를 객체화하여 작업을 수행할 수 있는 환경을 지원한다.Lombok library는 반복되는 method 작성 작업을 최소화하는 절차를 제공한다. 1-2. templates directory 생성HTML과 같은 view를 저장하기 위해 main/resources/ 경로에 temp..

[2024 React.js 스터디] 정호용 #6주차 "React.JS 꾸미기" 오메 일주일이 후딱 갑니다... 정신없는 요즘..01. SassSass(Syntactically Awesome Style Sheets)란... CSS 전처리기로서, 1. 복잡한 작업을 쉽게2. 코드의 재활용성 향상3. 코드의 가독성 향상을 지원하여 유지보수를 용이하게 해 주는!문법적으로 짱 멋진 스타일시트라고 한다. Sass는 두 가지 확장자(.scss/ .sass)를 지원한다. 이 두 가지의 문법은 아주 다르다던데.. $font-stack: Helvetica, sans-serif$primary-color: #333body font: 100% $font-stack color: $primary-colorsass$font-stack: Helvetica, sans-serif;$primary-co..

[2024 Spring Boot 스터디] 정성원 #2 주차 - 스프링 컨테이너 1. 스프링 컨테이너이전 주차에서 이야기했던 컨테이너에 대해 자세히 알아보자.일단은 ApplicationContext 인터페이스가 스프링 컨테이너라고 알고 가자.// 스프링 컨테이너 생성하기ApplicationContext applicationContext = new AnnoationConfigApplicationContext(AppConfig.class); ApplicationContext는 위와 같은 방식으로 생성할 수 있다. AppConfig는 지난 주차에 만들었던 클래스를 참고하자.스프링 컨테이너는 XML을 기반으로 만들 수도 있고, 위 예시처럼 어노테이션 기반의 자바 설정 클래스로도 만들 수 있다.스프링 컨테이너의 생성 과정스프링 컨테이너가 어떻게 생성되는지 알아보자.먼저 스프링 빈 저장소 테이..

[2024 React.js 스터디] 박지민 #6주차 "리액트 컴포넌트 스타일링하기" 1. Sass- Sass (Syntactically Awesome Style Sheets) 는 CSS pre-processor로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐 만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게 해줌- Sass 에서는 두가지의 확장자 (.scss/.sass) 를 지원// sass$font-stack: Helvetica, sans-serif$primary-color: #333body font: 100% $font-stack color: $primary-color // scss$font-stack: Helvetica, sans-serif;$primary-color: #333;body { font: 100% $font-stack; ..

[2024 Spring Boot 스터디] 남윤찬#2 주차 - 4~5 섹션 (작성 중) 섹션 4. 스프링 컨테이너와 스프링 빈 ApplicationContext applicationContext = new AnnotationConfigApplicationContext(AppConfig.class);위 코드를 통해 스프링 컨테이너를 생성한다.스프링 컨테이너를 생성할 때는 AppConfig와 같은 구성 정보를 지정해준다.이처럼 구성 정보를 통해 스프링 컨테이너가 객체들의 의존 관계를 주입해준다.그리고 스프링 컨테이너는 BeanFactory라는 스프링 컨테이너의 최상위 인터페이스를 상속하여, 이것이 제공하는 getBean() 메서드를 사용해 다음과 같이 컨테이너 내의 Bean을 조회할 수 있다.class ApplicationContextBasicFindTest { AnnotationConf..

[WINK 공식 홈페이지] Next.js 스터디 👨🏻‍💻 [frontend / 신진욱] Next.js 프레임워크를 사용하여 WINK 공식 홈페이지를 개발하기로 하여, 스터디 중 이해하는데 도움이 될 만한 포스트를 남겨보겠습니다.Next.js를 사용하여 개발을 하면 async, await을 자주 보게 될텐데 무엇인지 알아보겠습니다.서버 사이드 렌더링이란?클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식입니다.즉, 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면(view)을 만들어 제공하는 것입니다. Next.js는 SSR 기반이다보니 기본적으로 컴포넌트는 서버 컴포넌트 입니다.그래서 Next.js는 서버 컴포넌트에 비동기/대기(async/await)를 도입하고 클라이언트 컴포넌트에 새로운 use() 훅을 도입하는 등 지원을 하고 있습니다. async ..

[2024 Node.js 스터디] 김수아 #4주차 "Node.js 6,7,9장" ●ch6서버 제작 과정에서의 불편함 해소하고 편의기능 추가한 웹 서버 프레임워크, 익스프레스▶6.1_익스프레스 프로젝트 시작하기하나의 폴더 생성그 폴더 안에 package.json생성 후 코드작성npm start 입력후 localhost3000에 접속해 확인▶6.2_자주 사용하는 미들웨어미들웨어는 익스프레스의 핵심이다요청과 응답의 중간(middle)에 위치하여 미들웨어라 불린다미들웨어는 요청과 응답을 조작해 기능을 추가하거나 나쁜 요청을 걸러내기도 한다 morganmorgan 연결 후 localhost:3000에 다시 접속해보면 기존 로그 외에 추가적인 로그를 볼 수 있다요청과 응답에 대한 정보를 콘솔에 기록app.use(morgan('dev')); //미들웨어 사용하기인수로 dev외에 combine..

[2024 Node.js 스터디] 장민우 #5주차 "인생이란" 6장 익스프레스 웹 서버 만들기6.1 익스프레스 프로젝트 시작하기4장, 5장 제대로 공부하셨다면 package.json을 제일 먼저 생성해주셔야 하는 것 다들 아실 겁니다! npm init으로 콘솔에서 단계적으로 내용물을 입력해도 되고npm init -y를 입력해 파일을 만든 뒤 내용을 수정해도 됩니다.사실 저는 npm init 하고 마음에 안 들어서 package.json 들어가서 재작성했어요 ㅎ... 아 그리고 "scripts": { "start" : "nodemon app" 까먹지 말고 작성해주셔야 합니다!! nodemon app을 하면 app.js를 nodemon으로 실행한다는 뜻입니다. const express = require('express');const..

[2024 Node.js 스터디] 조상혁 5주차 "Node.js 6 ,7 장" 6장 expressexpress 시작하기 익스프레스를 시작하기 위해서는 package.json이 필요하기에 이를 생성해주는 npm init 을 먼저 입력$ npm init // package.json 생성$ npm i express // 익스프레스 다운$ npm i -D nodemon // 서버 자동 재시작기능 다운 //app.jsconst express = require('express'); // 익스프레스 불러오기const path = require('path'); //path 모듈 불러오기const app = express(); // Express 모듈을 실행해 app 변수에 할당app.set('port', process.env.PORT || 3000); //set을 통해 실행될 포트 설정// 라우..

[2024 Node.js 스터디] 김민서 #5주차 익스프레스 프로젝트 시작하기//package.json{ "name": "learn-express", "version": "0.0.1", "description": "익스프레스를 배우자", "main": "app.js", "scripts": { "start": "nodemon app" }, "author": "ZeroCho", "license": "MIT"}항상 package.json을 제일 먼저 생성해야 한다. npm init 명령어를 사용하기 or 직접 파일 만들기$ npm i express$ npm i -D nodemonscripts 부분에 start 속성은 꼭 넣어야 한다. nodemon app을 하면 app.js를 nodemon으로 실행한다는 뜻이다. 서버 코드를 수정하면 no..

[2024 Node.js 스터디] 김태일 #5주차 06. 익스프레스 웹 서버 만들기익스프레스 : 서버를 제작하는 과정에서 겪게 되는 불편을 해소하고 편의 기능을 추가한 웹 서버 프레임워크- http 모듈의 요청과 응답 객체에 추가 기능 부여- 기존 메서드들 사용가능, 편리한 메서드들 추가해 기능 보완- 코드를 분리하기 쉽게 만들어 관리하기 용이- if문으로 요청 메서드와 주별 구별하지 않아도 됨 06.1 익스프레스 프로젝트 시작하기1) learn-express 폴더 생성2) 항상 package.json 제일 먼저 생성 --> npm init 명령어를 콘솔에서 호출해 단계적으로 내용물 입력 or npm init -y를 입력해 파일을 만든 뒤 내용 수정package.json{ "name": "learn-express", "version": "0.0.1"..

[2024 Node.js 스터디] 김규현 5주차 6. 익스프레스 프로젝트 시작하기 한 폴더안에 package.json, app.js 생성후 코드작성이후 npm start 입력후 localhost3000에 접속해 확인 자주 사용하는 미들웨어 미들웨어는 app.use와 함께 사용되고 app.use(미들웨어)꼴임미들웨어를 통해 요청과 응답에 다양한 기능을 추가할 수 있고, 이미 많은 사람이 유용한 기능들을 패키지로 만들어짐 morganmorgan 연결후 local 콘솔에 나오는 GET / 500 6.358 ms - 50 로그는 morgan 미들웨어에서 나오는 것요청과 응답에 대한 정보를 콘솔에 기록 staticstatic 미들웨어는 정적인 파일들을 제공하는 라우터 역할을 함 body-parser요청의 본문에 있는 데이터를 해석해서 req.body 객체로 만..

[2024 신입부원 기초 스터디] 백채린 #5주차 (Clock_실습) window.onload()- 해당 요소가 완전히 로드되었을 때, 자동으로 호출되는 함수를 지정하는 속성- 웹 페이지에 여러번 사용해도 window.onload() 함수는 하나만 적용 window.onload = () => { console.log("wink");} Data 객체 - 날짜와 시간을 위한 메소드를 제공하는 빌트인 객체, 생성자 함수• 시간 메소드: getHours(), getMinutes(), getSeconds() ...• 날짜 메소드: getFullYear(), getMonth(), getDate() ... let date = new Date();console.log(date); //현재 날짜 및 시간 출력 innerText: Element의 속성, 해당 Element 내에서 사용..

[WINK 공식 홈페이지] Next.js 백엔드 정리 💫 [backend / 손대현] 서론우리 팀은 기존 Front-End만 존재하는 프로젝트를 엎는 것이 아닌, 기능 추가 및 업데이트 방식으로 프로젝트를 이어나가기로 했다. 일단, 기존 프로젝트의 스펙은 Next.js 13.1.6 버전을 사용하였는데, 2023년 10월 26일에 출시한 Next.js 14 버전으로 업데이트하고자 하였다. Next.js의 전반적인 지식은 백엔드 팀원인 유건 선배님이 작성하신 Next.js 블로그를 꼭 읽어보자.나는 많은 Next.js의 기능 중 백엔드에 집중하여 소개하고자 한다.React의 백엔드Full-Stack Framework 인 Next.js와 다르게 React는 Front-End Framework 이기 때문에 백엔드 코드를 React에서 작성하면 안 된다.물론 억지로 작성할 순 있지만, 보안적인 정..

[2024 신입부원 기초 스터디] 박건민 #6주차 웹 기초 스터디 마무리~ Date 객체날짜와시간(년,월,일,시,분,초,밀리초)을위한메소드를제공하는빌트인 객체, 생성자 함수시간메소드:getHours(),getMinutes(),getSeconds()...날짜메소드:getFullYear().getMonth(),getDate()... innerText와 innerHTMLinnerText: Element의 속성으로, 해당 Element 내에서 사용자에게보여지는 텍스트 값을 가져오거나 설정 가능innerHTML: Element의 속성으로, 해당 Element의 HTML, XML을 가져오거나 설정 가능// innerText 사용// 스타일 적용되지 않은 기본 폰트로 innerText 출력const innerT = document.getElementById('innerT');innerT...

이전 1 2 3 4 ··· 17 다음

티스토리툴바