전체 글 (669) 썸네일형 리스트형 [2024-2 Spring Boot 스터디] 김문기 #1주 Gradle 이란?gradle은 오픈소스 빌드 자동화 툴로, 거의 모든 타입의 소프트웨어를 빌드할 수 있는 유연함을 가진다.하지만 인텔리제이의 외부 라이브러리를 열어보면 내가 설정한 것 외에도 많은 라이브러리들이 추가되어있는 것 을 볼 수 있다.왜 그런걸까??그 이유는 Gradle은 의존관계가 있는 모든 라이브러리를 전부 함께 다운로드하기 때문이다. View 환경 설정1. Welcome Page스프링 부트는 Welcome Page 기능을 제공한다.=> static폴더에 index.html을 넣어두면 스프링부트가 처음 실행 할 때 이 html 파일을 Welcome Page로 보여준다.2. thymeleaf 템플릿 엔진 이란?thymeleaf 템플릿 엔진은 컨트롤러가 전달하는 데이터를 이용해 동적으로 화면을.. [2024-2 Java 스터디] 김민서 #1주차 자바 코드의 구조클래스 블록 : public class 클래스명 { , 클래스명과 소스 파일의 이름은 동일해야함, 여러 메서드 블록을 포함, {}로 둘러싼다메서드 블록 : [public|private|protected] [static] (리턴자료형|void) 메서드명(입력자료형 매개변수, ...) { 명령문(statement); ... }, 리턴 값이 있을 때는 리턴 자료형을 반드시 표기, 없는 경우는 void, {}로 영역을 구분한다. 변수와 자료형 1. 변수변수 값 변경 후엔 기존 값은 사라짐변수 선언 시에 한번에 여러개 선언 가능 ex. int a, b;변수 선언과 초기화 동시 가능 ex. int a= 10;한번에 여러 번수 선언과 초기화도 가능 ex. int c=3, d=4;변수 초기화를 하지 않.. [2024-2 React.js 스터디] 김지수 #1주차 리액트는 어쩌다 만들어졌을까?리액트는 어떠한 상태가 바뀌었을때, 그 상태에 따라 DOM 을 어떻게 업데이트 할 지 규칙을 정하는 것이 아니라, 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다면 어떨까? 라는 아이디어에서 개발이 시작되었습니다. 리액트는 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI 를 Virtual DOM 을 통해서 렌더링합니다. 그리고 나서 리액트 개발팀이 만든 매우 효율적인 비교 알고리즘을 통하여 실제 브라우저에 보여지고 있는 DOM 과 비교를 한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM 에 패치시켜줍니다. 이를 통하여, "업데이트를 어떻게 할 지" 에 대한 고민을 하지 않으면서, 빠른 성능도 지켜낼 수 있게 되었습니다.리액트 컴포넌트App.jsimport R.. [2024-2 Java 스터디] 김지수 #1주차 테고리 없음jisu00913 2024. 10. 8. 15:55자바란?처음에는 가전제품에 탑재해 동작하는 프로그램을 만들기 위해 탄생했으나 지금은 웹과 모바일 앱 개발에서 가장 많이 사용하는 언어로 성장했다.자바는 특히 우리나라에서 쓰이는 프로그래밍 언어 중 사용 빈도가 매우 높다. 기업에서 사용하는 프로그램의 80% 이상은 자바로 만들어졌다고 해도 과언이 아니다. 또한 오랜 시간 굳건히 생태계를 구축하고 유지해 왔기 때문에, 자바를 기반으로 한 수많은 라이브러리들이 존재한다. 따라서 우리나라 기업에서 개발자로 일하고 싶다면 자바를 배울 것을 강력히 추천한다.자바의 8가지 특징간단하다 (Simple)자바는 고급 언어에 들어 있는 여러 요소 중에서 불필요하다고 판단되는 것을 모두 제거했다. 객체 지향적이다 .. [2024-2 Java 스터디] 이가인 #1주차 자바란자바 코드의 구조변수자료형배열리스트메서드 정리 자바객체 지향 언어웹, 모바일 앱 개발에서 가장 많이 사용됨우리나라 기업에서 많이 사용되어 자바를 기반으로 한 수많은 라이브러리들이 존재 --> 자바 강력 추천자바 코드의 구조 public class Sample { // 클래스명 Sample public static void main(String[] args) { /* static이 붙으면 클래스 메서드가 되어 객체를 만들지 않아도 'Sample.main'으로 호출가능*/ // 메서드명 main System.out.println("Hello java"); // 메서드 안에는 명령문이 있으며 명령문은 반드시 세미콜론을 붙여 문장이 끝났다는걸 표시해야함 }} 클래.. [2024-2 Node.js 스터디] 류상우 #1주차 1. 핵심 개념 이해하기 1-1. 서버서버: 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 또는 프로그램클라이언트: 요청을 보내는 주체(브라우저, 데스크탑 프로그램, 서버 등)1-2. 자바스크립트 런타임Node.js: Chrome V8 Javascript 엔진으로 빌드된 자바스크립트 런타임런타임: 특정 언어로 만든 프로그램들을 실행할 수 있는 환경V8: 구글에서 개발한 크롬의 엔진, 기존 JS의 문제였던 속도를 보완libuv: 노드에서 사용하는 라이브러리로 노드의 특성인 이벤트 기반, 논블로킹 I/O 모델을 구현1-3. 이벤트 기반이벤트 기반: 이벤트(클릭, 네트워크 요청 등) 가 발생할 때 미리 지정해둔 작업을 수행하는 방식특정 이벤트가 발생할 때 수행할 것을 미리 설정해야함. 이를 이벤.. [2024-2 Node.js 스터디] 김민재 #1주차 1. 핵심 개념 이해하기1.1 서버서버: 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 or 프로그램클라이언트(브라우저) ←—응답———요청—→ 서버 1.2 자바스크립트 런타임런타임: 특정 언어로 만든 프로그램들을 실행할 수 있는 환경node는 자바스크립트 런타임 1.3 이벤트 기반이벤트 기반: 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식ex) 클릭, 네트워크 요청 이벤트 기반 시스템은 미리 무엇을 할지 등록해야하는데 이를 이벤트 리스너에 콜백 함수를 등록한다 표현호출된 함수는 호출 스택에 쌓이게 됨이벤트 루프: 이벤트 발생 시 호출할 콜백 함수들을 관리하고, 호출된 콜백 함수의 실행 순서 결정백그라운드: setTimeout 같은 타이머나 이벤트 리스터들이 대기하는 곳태스크 .. [2024 ROS 스터디] <김예원> #2주차 -<ROS 용어 정리 및 명령어> ROS 용어정리 Node : 최소 단위의 실행 가능한 프로세스 Package : 하나 이상의 노드, 노드 실행을 위한 정보를 묶은것 Message : 메시지를 통해 노드간의 데이터를 주고 받음 1. 서버 (서비스 요청) 2. 서버-> 클라이언트 (서비스 응답) ROS의 가장 기본적인 기술적 포인트는 노드간의 메시지 통신이다. 1. 마스터 구동 2. 서브스크라이버 노드 구동 3. 퍼블리셔 노드 구동 4. 퍼블리셔 정보 알림 5. 퍼블리셔 노드에 접속 요청 6. 서브 스크라이버 노드에 접속 응답 7. TCP접속 8. 메시지 전송 9. 서비스 요청 및 응답 ROS 메시지 -메시지는 노드간에 데이터를 주고 받을 때 사용하는 데이터 형태 - 토픽, 서비스, 액션은 모두 메시지를 사용 - 단순 자료.. [2024 ROS 스터디] <김예원> #1주차 - <ROS 소개 > 로봇 소프트웨어 플랫폼 SW플랫폼이 가져온 변화 - 하드웨어 인터페이스 통합 - 하드웨어 추상화, 규격화, 모듈화 => 사용자 수요에 맞는 서비스에 집중 로봇 소프트웨어 플랫폼이 가져올 미래는 - 더 많은 sw 인력들의 로보틱스 분야로 진입하여 로봇 제품에 참여가능 => 로봇 개발이 급속도로 발전할 수 있는 계기 로봇 운영 체제 ROS - ROS는 오픈 소스로 로봇 메타 오퍼레이팅 시스템이다. => ROS는 메타 운영 체제(어플리케이션과 분산 컴퓨팅 자원 간의 가상화 레이어로 분산 컴퓨팅 자원을 활용하여, 스케줄링 및 로드, 에러 처리 등을 실행하는 시스템)이다 (윈도우와 같은 전통적인 운영체제는 아니지만 이용은 하고 있음) ROS는 client layer, Robotics application, Ro.. [2024 여름방학 React.js 스터디] 이종윤 #6주차 API: API(application programing interface)는 소프트웨어 애플리케이션이 서로 통신하여 데이터, 특징 및 기능을 교환할 수 있도록 하는 일련의 규칙 또는 프로토콜이다.$ npx create-react-app api-integrate우선 이 코드로 React라는 JavaScript 라이브러리를 사용하여 새로운 웹 애플리케이션 프로젝트를 생성한다.$ cd api-integrate$ yarn add axios그리고 그 만든 곳으로 이동하고 axios라이브러리를 설치한다.axios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청을 할 수 있다. GET: 데이터 조회POST: 데이터 등록PUT: 데이터 수정DELETE: 데이터 제거PATCH: 데이터 일.. [2024 여름방학 React.js 스터디] #6주차 이가인 API 연동의 기본 1. axios 라이브러리 설치$ cd api-integrate$ yarn add axios REST API 메서드 의미GET: 데이터 조회 -> axios.get( api주소 )POST: 데이터 등록axios.post('/users', { username: 'blabla', name: 'blabla'});PUT: 데이터 수정DELETE: 데이터 제거PATCH: 리소스 일부 수정HEAD: GET과 비슷하지만, 응답 본문(body)은 포함하지 않고, 헤더 정보만을 반환 useState 와 useEffect 로 데이터 로딩 useState : 요청상태 관리useEffect : 렌더링 시점에 요청 시작요청의 결과import React, { useState, useEffect } .. [2024 여름방학 React.js 스터디] 정채은 #6주차 React Router v6 튜토리얼1. 라우팅이란?사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것 리액트에서 라우트 시스템을 구축하기위해 사용할 수 있는 2가지 선택지 리액트 라우터: 이 라이브러리는 컴포넌트 기반으로 라우팅 시스템을 설정가능 Next.js: 리액트 프로젝트의 프레임워크 이 프레임워크는 우리가 사용했던 Create React App처럼 리액트 프로젝트 설정을 하는 기능, 라우팅 시스템, 최적화, 다국어 시스템 지원, 서버 사이드 렌더링 등 다양한 기능 제공, 프레임워크의 라우팅 시스템은 파일 경로 기반으로 작동 2. 싱글 페이지 애플리케이션이란?한 개의 페이지로 이루어진 애플리케이션 이때 드는 의문점 : 리액트 라우터를 사용하여 여러 페이지로 구성된 프로젝트를 만들 수 있다고.. [2024 여름방학 React.js 스터디] 김민서 #6주차 API 연동의 기본 API를 호출하기 위한 axios 라이브러리를 설치한다 - REST APIURI는 정보의 자원을 표현해야 한다 (리소스명은 동사보다 명사를 사용)자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE 등)로 표현한다Method역할POSTPOST를 통해 해당 URI를 요청하면 리소스를 생성한다GETGET를 통해 해당 리소스를 조회한다PUTPUT를 통해 해당 리소스를 수정한다DELETEDELETE를 통해 리소스를 삭제한다 URI 설계 시 주의사항슬래시 구분자(/)는 계층 관계를 나타내는 데 사용http://restapi.example.com/houses/apartmentsURI 마지막 문자로 슬래시를 포함하지 않는다http://restapi.example.com.. [2024 여름방학 React.js 스터디] 백채린 #6주차 1. API 연동의 기본 API 연동을 하기 위한 프로젝트를 새로 만들기 $ npx create-react-app api-integrate API 호출을 위한 axios 라이브러리 설치 $ cd api-integrate$ yarn add axios → axios를 사용해서 GET(데이터 조회), PUT(데이터 수정), POST(데이터 등록), DELETE(데이터 제거) 등의 메서드로 API 요청 가능 axios의 사용법 import axios from 'axios';// getaxios.get('/users/1');// 데이터 등록, 첫 번째 파라미터에는 API 주소, 두 번째 파라미터에는 등록하고자 하는 정보axios.post('/users', { username: 'blabla', name: 'b.. [2024 여름방학 Node.js 스터디] 백채린 #4주차 5~6장 5장 패키지 매니저 5.1 npm 알아보기 - npm(Node Package Manager) 이란?노드 패키지 매니저, 다른 사람들이 미리 작성해 놓은 코드들이 공개되어 있는 서버npm에 업로드된 노드 모듈을 패키지라고 부른다. * yarn: npm의 대체자, 페이스북이 내놓은 패캐지 매니저* pnpm: npm의 성능을 개선한 패키지 매니저 5.2 package.json으로 패키지 관리하기 같은 패키지라도 버전별로 기능이 다를 수 있기 때문에 프로젝트를 설치할 때 패키지도 동일한 버전을 설치해야 하는데이때 설치한 패키지의 버전을 관리하는 파일이 package.json→ 노드 프로젝트를 시작하기 전, 폴더 내부에 무조건 package.json부터 만들고 시작해야 한다 !! npm으로 package.js.. [2024 여름방학 Node.js 스터디] 김지나 #4주차 5장. 패키지 매니저 5.1. npm 알아보기- npm: 노드 패키지 매니저 - 패키지: npm에 업로드된 노드 모듈- 자바스크립트 프로그램은 패키지로 npm에 등록되어 있으므로 필요에 따라 설치해서 사용하면 됨 5.2. package.json으로 패키지 관리하기- package.json: 설치한 패키지의 버전을 관리하는 파일- 노드 프로젝트를 시작하기 전에는 폴더 내부에 package.json부터 만들고 시작해야 함!!package name패키지의 이름version패키지의 버전entry point자바스크립트 실행 파일 진입점test command코드를 테스트할 때 입력할 명령어를 의미git repository코드를 저장해둔 깃(Git) 저장소 주소를 의미keywords패키지를 쉽게 찾을 수 있게 함li.. [2024 여름방학 Node.js 스터디] 이종윤 #4주차 NPM(Node Package Manager): Node.js의 패키지를 관리할 수 있는 도구이다. Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공한다. 자신이 작성한 패키지를 공개할 수도 있고 필요한 패키지를 검색하여 재사용할 수도 있다.* 명령줄 인터페이스(CLI)는 키보드를 이용해 운영 체제와 상호 작용하는 소프트웨어 메커니즘이다.NPM사용법먼저 npm을 사용하기 위해서는 npm을 설치하기 전에 먼저 package.json이라는 파일을 만들어야한다.package.json라는 파일은 설치된 패키지들을 보여주고 패키지들의 버전을 관리하는 파일이다. 1. 우선 콘솔창에 ' $ npm init.. [2024 여름방학 React.js 스터디] 정채은 #5주차 [2장 - 1] Sass Sass는 CSS의 기능을 확장해주는 전처리기이며, .scss와 .sass 두 가지 문법을 지원.scss 문법이 더 널리 사용되므로, 이 튜토리얼에서는 .scss를 중심으로 진행Sass 기본 개념Sass의 문법:.scss: CSS와 유사한 문법을 사용하여, 기존 CSS와의 호환성 굳.sass: 더 간결한 문법을 사용하지만, CSS와의 호환성은 떨어질 수 있음.변수 사용: Sass에서는 변수를 사용하여 반복되는 값들을 관리 가능 예를 들어, 버튼 색상을 변수로 정의하고 이를 여러 곳에서 재사용 가능Mixin: 반복되는 CSS 코드 블록을 재사용할 수 있는 방법 예를 들어, 버튼 색상에 대한 mixin을 정의하여 다양한 버튼 색상에 .. [2024 여름방학 React.js 스터디] 이가인 #5주차 리액트에서 컴포넌트를 스타일링 하는 가장 기본적인 방법: css 파일을 만들어서 컴포넌트에서 import 해서 사용하는 것 SassCSS Modulestyled-components 1. Sass시작node-sass 라이브러리 설치(Sass->CSS변환) cd styling-with-sass $ yarn add node-sass Button 컴포넌트 만들기& : 부모 선택자 참조 $blue: #228be6; // 주석 선언 background: $blue; // 주석 사용 &:hover { //:hover 상태(사용자가 요소 위에 마우스를 올렸을 때) background: lighten($blue, 10%); // 색상 10% 밝게 } &:active { //:ac.. [2024 여름방학 React.js 스터디] 김태일 #5주차 "리액트 컴포넌트 스타일링" 00. 리액트 컴포넌트 스타일링 방법- 컴포넌트를 스타일링 할 때 자주 사용되는 기술1) Sass2) CSS Module3) styled-components 01. Sass- CSS pre-processor- 복잡한 작업을 쉽게 할 수 있도록 해주고, 코드의 재활용성 및 가독성을 높여줌- 두 가지 확장자 (.scss/.sass) 를 지원01-1 시작하기1) 새로운 리액트 프로젝트 만들기$ npx create-react-app styling-with-sass 2) 해당 프로젝트 디렉터리에 node-sass(Sass를 CSS로 변환해주는 역할) 라이브러리 설치$ cd styling-with-sass$ yarn add node-sass 01-2 Button 컴포넌트 만들기1) src 디렉터리에 componen.. [2024 여름방학 React.js 스터디] 김민서 #5주차 Sass Css pre-processor, 복잡한 작업을 쉽게 할 수 있게 해주고 코드의 재활용성과 가독성을 높여준다두가지의 확장자 (.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; color: $primary-color;} 1. 시작하기$ npx create-react-app styling-with-sas$ cd styling.. [2024 여름방학 React.js 스터디] 이종윤 #5주차 리엑트 컴포넌트 스타일링하기리액트에서 컴포넌트를 스타일링 하는 가장 기본적인 방법은 css 파일을 만들어서 컴포넌트에서 import 해서 사용하는 것 이다. 하지만 컴포넌트를 스타일링 할 때 다른 도구들을 사용하면 훨씬 더 편하게 작업을 할 수 있다.SassCSS Modulestyled-components이 블로그에서 위 3가지 기술들을 볼 것이다.1. Sass: CSS의 단점을 보완하기 위해 만든 CSS 전처리기이다. 보통 CSS를 사용하다보면 단순 반복되는 부분이 많은 등, 불편함이 느껴지기 마련인데, Sass는 이 부분을 거의 완전히 해소시켜주는 스타일시트 언어다. Sass에는 Sass와 SCSS가 있다.또한 CSS의 확장팩 같은 언어이기 때문에 CSS 파일 그 자체를 SCSS로 확장자만 바꾸어주어.. [2024 여름방학 React.js 스터디] 이정욱 #4주차 react 하기 힘들어요 10. useRef 로 특정 DOM 선택하기특정 DOM 을 선택하기 위해서 DOM selector를 사용할 수도 있지만, ex) getElementById리액트를 사용하는 프로젝트에서도 가끔 DOM 을 직접 선택해야 하는데그때 사용하는 것이 UseRef() 이다. 함수형 컴포넌트에서 ref를 사용하려면 useRef 라는 Hook 함수를 사용해준다. 사용하는 법은 1.react 라이브러리에서 useRef를 불러온다import React, { useState, useRef } from 'react'; 2. useRef 객체를 생성해준다.const nameInput = useRef(); 3. 생성한 객체를 선택하고 싶은 DOM 에서 ref 값으로 지정한다. 4. 선택한 DOM을 참조하고 싶을 때 해당 객체의 .. [2024 여름방학 React.js 스터디] 이가인 #4주차 10. useRef 로 특정 DOM 선택ref, useRef 의미ref는 React에서 DOM 요소나 클래스 인스턴스를 참조할 수 있게 해주는 속성이며 주로 직접 DOM 접근이 필요한 경우 사용useRef는 함수형 컴포넌트에서 ref를 사용할 때 사용하는 React Hook.useRef는 렌더링 간에 값을 유지할 수 있도록 함ref와 함께 DOM 요소나 값을 참조하는 데 사용됨react에서 ref를 사용하는이유DOM 접근: React의 가상 DOM은 실제 DOM을 추상화하기 때문에, 직접 DOM을 조작해야 할 때 ref를 사용함. (ex 포커스를 설정하거나, 스크롤 위치를 조절할 때 )자식 컴포넌트의 접근: 클래스 기반 컴포넌트에서 자식 컴포넌트의 메서드나 인스턴스에 접근해야 할 때 ref를 사용함. 함.. [2024 여름방학 React.js 스터디] 이종윤 #4주차 useRef: useRef는 리액트 훅의 한 종류로, Ref는 reference(참조)의 줄임말이다. - useRef를 이용하면 특정한 DOM요소에 접근이 가능하면, 불필요한 재렌더링을 하지 않는다는 장점이 있다.const 변수명 = useRef(초기값) useRef는 변수명에 초기값을 적는 식으로 만든다.이러한 결과값으로, {current: 초기값} 을 지닌 객체가 반환된다.useRef에서 기억할 것은 이러한 current라는 키값을 지닌 프로퍼티가 생성되고, 값에 어떤 변경을 줄때도 이 current를 이용해서 한다는 점이다. 그리고 이렇게 반환할 수 있다.useRef() 를 사용 할 때 파라미터를 넣어주면, 이 값이 .current 값의 기본값이 된다.그리고 이 값을 수정 할때에는 .curren.. 이전 1 ··· 5 6 7 8 9 10 11 ··· 27 다음
