전체 글 (669) 썸네일형 리스트형 [2024-2 React.js 스터디 ] 김지수 #4주차 컴포넌트 만들기우선 create-react-app 을 사용하여 새로운 프로젝트를 만들어주세요.$ npx create-react-app mashup-todolist 해당 디렉터리에 들어가서 이번 프로젝트에서 필요한 라이브러리 react-icons 와 styled-components 를 설치하세요.$ cd mashup-todolist$ yarn add react-icons styled-components 만들어야 할 컴포넌트 확인하기TodoTemplate이 컴포넌트는 우리가 만들 투두리스트의 레이아웃을 설정하는 컴포넌트입니다. 페이지의 중앙에 그림자가 적용된 흰색 박스를 보여줍니다.TodoHead이 컴포넌트는 오늘의 날짜와 요일을 보여주고, 앞으로 해야 할 일이 몇개 남았는지 보여줍니다.TodoList이 컴.. [2024-2 Java 스터디] 김재승 #5주차 목차콘솔 입출력파일 입출력자바에서 콘솔과 파일을 통해 데이터를 입력하고 출력하는 방법을 알아보자. 콘솔 입출력은 사용자의 입력을 받고 프로그램의 출력을 보여줄 때, 파일 입출력은 데이터를 파일로 저장하거나 불러올 때 유용하게 사용된다. 1. 콘솔 입출력자바의 콘솔 입출력은 Scanner와 System 클래스를 활용하여 데이터를 읽고 출력할 수 있다.콘솔 입력 예제 (Scanner)Scanner 클래스를 사용하면 간편하게 콘솔 입력을 받을 수 있다import java.util.Scanner;public class ConsoleInputExample { public static void main(String[] args) { Scanner scanner = new Scanner(System.. [2024-2 Node.js 스터디] 류상우 #4주차 7장 MySQL예전에 노드로 랭킹 서버를 만들었는데 서버를 재실행할 때마다 랭킹이 초기화됐었다. 그래서 데이터베이스를 구축하고 싶었는데 어떻게 하는지 몰라서 그냥 재실행 할 때마다 깃허브에 있는 JSON 파일을 갱신해줬던 기억이 있다. 2년이나 지났으니 이제는 할 수 있기를 바란다. 7-1. 데이터베이스란?데이터베이스: 관련성을 가지며 중복이 없는 데이터들의 집합DMBS( DataBase Management System ): 데이터베이스를 관리하는 시스템RDMBS (Relational DMBS): 관계형 DMBS. Oracle, MySQL, MSSQL 등이 있음 7-2. MySQL 설치, 7-3. 워크벤치 설치하기Server File Permissions 부분은 교재에 없길래 그냥 첫 번째 옵션을 선택.. [2024-2 Node.js 스터디] 김민재 #4주차 데이터베이스란?데이터베이스관련성을 가지며 중복이 없는 데이터들의 집합데이터베이스를 관리하느 시스템 DBMSDBMS 중 관계형 DBMS인 MySQL을 사용데이터베이스 및 테이블 생성데이터베이스 생성CREATE SCHEMA [데이터베이스명]데이터베이스를 생성하는 명령어이다스키마는 데이터베이스와 같은 개념이라고 보면 된다데이터 베이스 생성CREATE SCHEMA `nodejs` DEFAULT CHARACTER SET utf8mb4 DEFAULT COLLATE utf8mb4_general_ci;'nodejs'라는 이름의 데이터베이스를 생성하고use nodejs;를 이용해 nodejs 데이터베이스를 사용하겠다고 알린다- CREATE SCHEMA 같은 구문은 예악어로 MySQL이 기본적으로 알고 있음, 대문자로 쓰.. [2024-2 Java 스터디] 김재승 #4주차 목차 Default Constructor Constructor Overloading Interface Polymorphism Abstract Class디폴트 생성자, 생성자 오버로딩, 인터페이스, 다형성, 그리고 추상 클래스에 대한 내용을 알아보자.1. 디폴트 생성자 (Default Constructor)자바에서 생성자가 없을 때 컴파일러가 자동으로 제공하는 생성자를 바로 디폴트 생성자라고 부른다.디폴트 생성자는 매개 변수가 없으며, 객체 생성 시 초기값을 설정하지 않아도 사용할 수 있다는 특징이 있다.public class Car { // 필드 private String model; private int year; // 디폴트 생성자 public Car() { .. [2024 - 2 웹기초 스터디] 김재승 #2주차 웹 개발의 중요한 요소인 CSS에 대해 알아보겠습니다.CSS는 웹 페이지의 디자인과 레이아웃을 담당하는 역할을 하며,html로 만든 사이트를 더욱 이쁘게 보이도록 하는데 도움을 줍니다.1. CSS란 무엇인가?CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 정의하는 언어입니다. HTML이 구조를 담당한다면, CSS는 그 구조를 시각적으로 꾸며주는 역할을 합니다. CSS를 사용하면 글꼴, 색상, 간격, 정렬 등 다양한 시각적 요소를 쉽게 조정할 수 있습니다.CSS의 기본 구조CSS는 선택자와 선언 블록으로 이루어집니다.선택자 { 속성: 값;} 예를 들어, 아래의 코드는 모든 태그의 색상을 파란색으로 설정하는 방법입니다.ex)h1 { color: blue;}2. CSS.. [2024-2 웹기초 스터디] 이민형 #2주차 Css 누구니? CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의하는 언어로HTML로 작성된 구조에 색상, 레이아웃, 폰트, 간격 등의 시각적 요소를 추가하는 데 사용된다.CSS를 사용하면 웹 페이지의 디자인과 레이아웃을 효율적으로 관리할 수 있다. 주요 기능HTML 요소에 스타일을 적용 (색상, 크기, 폰트 등)웹 페이지의 레이아웃 조정 (위치, 정렬, 크기, 간격 등)반응형 디자인 구현 (화면 크기에 맞춰 스타일 변경) CSS 기본 문법은 선택자(selector), 속성(property), 값(value)으로 구성된다.CSS는 HTML 요소에 스타일을 적용하기 위한 규칙을 정의한다. 기본 구조선택자 { 속성: 값;} 선택자: HTML 요소를 지정예: p, h1, ... [2024-2 웹기초 스터디 #2주차] 김민재 - CSS CSS란? CSS: Cascading Style SheetsCascading : 계단식Style : 멋을 내다Sheets : (종이) 한 장⇒ 계단식으로 스타일을 정의하는 문서HTML + CSS ⇒ 문서 열기 ⇒ 코드 해석 ⇒ 웹 페이지HTML이 없는 CSS는 사실상 의미가 없다문법 학습 및 속성의 종류기본 문법 및 사용 방법**CSS 기본 문법**선택자{ 속성명: 속성값;}선택자: 어떤 요소에 스타일을 적용할지에 대한 정보{중괄호}: 선택한 요소에 적용할 스타일을 정의하는 영역속성명: 어떤 스타일을 정의하고 싶은지에 대한 정보(색상, 크기 등)속상값 : 어떻게 정의하고 싶은가에 대한 정보HTML에 CSS를 더하려면인라인 스타일: 태그에 직접 기술하기스타일 태그: 스타일시트를 위한 태그를 추가하여 작성하.. Java[2024-2 Java 스터디] 이민형 #4주차 (5-5장) 자바를 "자바라" (Java "java") 자바. 상속을 받다. 상속이 무슨 뜻인지 아는가?상속은 뒤를 잇다 혹은 너거들이 아는 그 부모와 자식간의 상속도 있다. 자 자바에도 부모와 자식이 존재한다.다음 코드를 보자.class Animal { String name; void setName(String name) { this.name = name; }}class Dog extends Animal { // Animal 클래스를 상속한다.}public class Sample { public static void main(String[] args) { Dog dog = new Dog(); dog.setName("poppy"); Sy.. [2024-2 Java 스터디] 김지수 #4주차 상속class Animal { String name; void setName(String name) { this.name = name; }}class Dog extends Animal { // Animal 클래스를 상속한다.}public class Sample { public static void main(String[] args) { Dog dog = new Dog(); dog.setName("poppy"); System.out.println(dog.name); }}poppy클래스 상속을 위해서는 extends라는 키워드를 사용한다. 이제 Dog 클래스는 Animal 클래스를 상속하게 되었다. Dog 클래스에 객체 변수인 n.. [2024-2 Java 스터디] 이서영 #3주차 5-1. 객체는 왜 필요할까 계산기를 자바로 구현할 수 있음근데 여러 개를 구현하려면? 각각의 계산기는 값이 유지되어야함객체를 모른다면 계산기 여러 대의 클래스를 각각 만듬class Calculator1 { static int result = 0; static int add(int num) { result += num; return result; }}class Calculator2 { static int result = 0; static int add(int num) { result += num; return result; }}public class Sample { public static void main(Strin.. [2024-2 Java 스터디] 이가인 #4주차 목차상속자식 클래스의 기능 확장IS - A 관계 (상속 관계)메서드 오버라이딩 (메서드 덮어쓰기)메서드 오버로딩다중상속생성자정의, 생성자 규칙디폴트 생성자생성자 오버로딩인터페이스필요한 이유디폴트 메서드다형성추상클래스정의, 특징 상속자식 클래스의 기능확장보통 자식 클래스는 부모 클래스의 기능에 더하여 좀 더 많은 기능을 갖도록 작성할 수 있다.class Animal { String name; void setName(String name) { this.name = name; }}class Dog extends Animal { void sleep() { System.out.println(this.name+" zzz"); }}public class Sample.. [2024-2 SpringBoot 스터디] 탁태현 #2주차 DI의 3가지 방법 강의에서는 DI를 하는 방법이 필드 주입, 생성자 주입, setter주입 이렇게 3가지가 존재 한다고 한다. 이것들에 대해서 자세히 알아보았다. 필드 주입필드 주입은 spring에서 제공하는 @Autowried 라는 어노테이션을 이용한다. @Serviceclass ThemeService { @Autowired private ThemeRepo themeRepo; public void 유저아이디로_주제_전체_가져오기() throws Exception { ... }}interface ThemeRepo{...{@Repositoryclass ThemeRepoImpl implements ThemeRepo {...}다음과 같이 의존성을 주입을 하고자 하는 객체 앞에 .. [2024-2 SpringBoot 스터디] 윤성욱 #2주차 JDBC vs SQL Mapper vs ORM세 기술 모두 데이터 접근 기술 자바에서 관계형 DB를 접근하기 위해서는 데이터베이스와 자바 간의 인터페이스를 담당하는 데이터 접근 기술이 필요= 데이터를 데이터베이스에 저장하고 불어오기 위해 중개 역할을 하는 기술이 필요하다 ( 순수 JDBC (Java에서 사용) )1) Spring JDBC (Ex. JdbcTemplate)2) SQL Mapper3) ORM : 메모리 상의 데이터를 파일 시스템, 관계형DB 혹은 객체DB 등을 활용하여 영구적으로 저장하여 영속성을 부여한다( 일반적으로 애플리케이션의 데이터는 메모리(RAM)에 임시로 저장되는데, 메모리에 저장된 데이터는 프로그램이 종료되거나 시스템이 꺼지면 사라진다 )Persistence (영속성)데이터를 생.. [2024-2 Java 스터디] 정채은 #4주차 [5-5] 상속상속 : 부모 기능 ---> 자식 클래스 extends : 클래스 상속 위해 꼭 필요함 !!! class Animal { String name; void setName(String name) { this.name = name; }}class Dog extends Animal { void sleep() { System.out.println(this.name+" zzz"); }}public class Sample { public static void main(String[] args) { Dog dog = new Dog(); dog.setName("poppy"); System.out.println(.. [2024-2 Java 스터디] 강보경 #4주차 상속상속이란 자식 클래스가 부모 클래스의 기능을 그대로 물려받는 기능으로 extends 키워드를 사용한다class Animal { String name; void setName(String name) { this.name = name; }}class Duck extends Animal { // Animal 클래스를 상속한다.}public class Sample { public static void main(String[] args) { Duck duck = new Duck(); dog.setName("duckling"); System.out.println(duck.name); // duckling }} Duck 클래스에 객체.. [2024-2 Spring Boot 스터디] 김문기 #2주 생성자 주입(DI)우리가 이전 시간에 만들었던 Controller, Service, Repository 객체들을 스프링에서 사용하기 위해서는 스프링 빈에 등록해 주어야 한다.우선 각 코드들이 정확히 무슨 기능을 하는 지 설명하자면Controller : 화면(View)과 비즈니스 로직(Model)를 연결시키는 다리 역할을 한다. 쉽게 말해서 주소 매핑을 해주는 기능을 한다고 생각하면 된다.Service: Controller에서 요청을 받아 비즈니스 로직을 수행하여 실행하거나 값을 리턴하는 역할을 수행 한다.# Controller가 주문을 받으면 Service가 음료를 제작하는 느낌이다.Repository: 이 객체는 이름 그대로S DB에 접근이 가능 한 객체라고 생각하면 편하다.우리가 만든 이 객체들을 스.. [2024-2 React.js 스터디] 이서영 #3주차 리액트 컴포넌트 스타일링 css파일 생성 → 컴포넌트에서 import (가장 기본적인 방법) 스타일링시 자주 사용되는 기술들SassCSS Modulestyled-components 1. Sass→ CSS pre-processor→ 복잡한 작업을 쉽게→ 코드의 재활용성, 가독성 높여줌 (유지보수 easy) 리액트 프로젝트 생성 후 node-sass 설치$ yarn add node-sass // Sass를 CSS로 변환해주는 역할 1-1. Button 컴포넌트 만들기src 디렉터리에 components 디렉터리 생성→ components 디렉터리 안에 Button.js, Button.scss 생성 기존 css에서 사용 못하는 문법들을 사용ex. 스타일파일에서 사용할 수 있는 변수 선언 / lighten(),.. [2024-2 Spring Boot 스터디] 김아리 #2 주차 스프링 빈과 의존관계컨포넌트 스캔과 자동 의존관계 설정스프링은 스프링 컨테이너에서 객체를 생성하여 스프링 빈으로 등록한 후 관리한다.MemberController에서 MemberService을 가져와서 사용할 때 매번 new 하면 그때마다 새로운 객체가 생성된다.new 하지 않고 스프링 컨테이너에 객체를 생성한 다음 그 객체를 가져다가 쓰자컨트롤러 뿐만 아니라 서비스, 리포지토리까지 @Service, @Repository로 스프링 컨테이너에 자동 등록해야 가져다 쓸 수 있다.그 다음 @Autowired + 생성자 주입하여 컨테이너에 있는 객체를 연결한다. 컨포넌트 스캔 원리@Component : 이 어노테이션이 있으면 스프링 빈으로 자동 등록한다.다음 어노테이션도 @Component를 포함하여 스프링 .. [2024-2 SpringBoot 스터디] 조상혁 #2주차 이 블로그는 스프링입문 - 코드로 배우는 스프링 부트를 기반으로 쓰여졌습니다. 스프링 빈과 의존관계 스프링 빈(Bean)스프링 컨테이너가 관리하는 자바 객체를 뜻하며, 하나 이상의 빈(Bean)을 관리한다.의존성을 만들기 위하여 사용한다고 한다. 객체가 의존관계를 등록할 때 스프링 컨테이너에서 해당하는 빈을 찾고, 그 빈과 의존성을 만든다. 스프링 빈의 등록방법은 2가지 정도가 있다. 컴포넌트 스캔과 자동 의존관계 설정 자바 코드로 직접 스프링 빈 등록하기++ 빈(Bean)은 스프링 컨테이너에 의해 관리되는 재사용 가능한 소프트웨어 컴포넌트이다. 🟢 [Spring] 스프링 빈(Bean) 이란?📌 스프링 빈(Bean) 이란? 빈(Bean)은 스프링 컨테이너에 의해 관리되는 재사용 가능한 소프트웨어 컴.. [2024-2 React.js 스터디] 윤아영 #3주차 1. SassSass는 CSS pre-processor로서 복잡한 작업을 쉽게 해주고, 코드의 재활용성과 가독성을 높여주어 유지보수를 쉽게 해준다.Sass에서는 .scss, .sass 두가지 확장자를 지원한다. 보통 .scss 문법이 더 많이 사용되고, 이 글에서는 .scss를 사용할 것이다. 1) 시작프로젝트 디렉터리에 다음 명령어를 사용하여 node-sass 라이브러리(Sass를 CSS로 변환해주는 라이브러리)를 설치한다.$ cd styling-with-sass$ yarn add node-sass// 또는$ npm install node-sass 2) Button 컴포넌트 만들기Button 컴포넌트를 만들고, Sass를 사용하여 스타일링해보자.// components/Button.jsimport Re.. [2024-2 React.js 스터디 ] 김지수 #3주차 보호되어 있는 글입니다. [2024-2 Java 스터디] 김태일 #4주차 05-5 상속- 상속 : 자식 클래스가 부모 클래스의 기능을 그대로 물려받는 것- extends 키워드를 사용하여 상속class Animal { String name; void setName(String name) { this.name = name; }}class Dog extends Animal { // Animal 클래스를 상속한다.}public class Sample { public static void main(String[] args) { Dog dog = new Dog(); dog.setName("poppy"); System.out.println(dog.name); }} 1. 자식 클래스의 기능 확장하기- Dog .. [2024-2 웹기초 스터디] 김지수 #2주차 css란?css는 Cascading Style Sheets를 의미한다.Cascading: 계단식Style: 멋을 내다Sheets: (종이) 한 장정리하묜 계단식으로 스타일을 정의하는 문서이다. css가 일하려면css 문서(코드) 자체는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTM 문서의 스타일을 정의하는 데 있으므로 HTML 문서가 없는 CSS 문서는 사실상 의미가 없다. HTML: 웹 문서의 콘텐츠 구성하는 언어CSS: 웹 문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치 등) CSS 기본 문법 CSS 기본 문법 사용 예 주석 HTML에 CSS를 더하려면HTML 문서에 CSS 문서(코드)를 적용하고자 할 때는 다음과 같은 방식들을 사용할 수 있다. 인라인 스타일: 태그에 직접.. [2024-2 Java 스터디] 김민서 #4주차 상속 상속 - 자식 클래스가 부모 클래스의 기능을 그대로 물려받을 수 있는 기능, extends를 사용해 클래스 상속을 한다* 부모 클래스를 상속받은 자식 클래스는 부모 클래스의 기능에 더하여 더 많은 기능을 갖도록 할 수 있다 IS-A 관계객체 지향 프로그래밍에서 상속 관계를 설명하는 개념 (ex. Dog 클래스가 Animal 클래스를 상속받으면, Dog는 Animal의 하위 개념이 됨)-> 자식 클래스의 객체는 부모 클래스의 자료형으로 사용할 수 있다 Object 클래스자바의 모든 클래스는 자동으로 Object 클래스를 상속받는다.-> 자바에서 생성되는 모든 클래스는 Object 자료형으로 사용할 수 있다 메서드 오버라이딩부모 클래스의 메서드를 자식 클래스가 동일한 형태로 또 다시 구현하는 행위 메서.. 이전 1 2 3 4 5 6 7 8 ··· 27 다음 목록 더보기
