GDG on Campus Sookmyung

1. styled-components (링크) React에서 스타일링을 하는 방법은 여러 가지가 있습니다. 그 중에서도 styled-components는 일명 CSS in JS 기술의 일종으로, JavaScript 안에 CSS를 작성하는 것을 의미합니다. styled-components 는 현존하는 CSS in JS 관련 리액트 라이브러리 중에서 가장 인기 있는 라이브러리입니다. 그래서 이번 스터디에서 한번 사용해보기로 결정하였습니다! 일반 CSS와의 차이 리액트에서 컴포넌트를 스타일링 하는 가장 기본적인 방법은 css 파일을 만들어서 컴포넌트에 import해서 사용하는 것입니다. 우리가 HTML 문서를 작성하고 .css 파일을 작성하는 것과 똑같습니다. 또는 CSS 클래스 중첩 방지를 위해 .modul..

더보기 목차 1. 교재 내용 실습하기 1-1. EC2에 프로젝트 clone 하기 1-2. 배포 스크립트 만들기 1-3. 외부 Security 파일 등록하기 1-4. 스프링 부트 프로젝트로 RDS 접근하기 1-5. EC2에서 소셜 로그인 하기 2. 실습 중 에러 해결하기 2-1. mysql 드라이버 에러 2-2. test 애플리케이션 빌드 에러 3. 자바 웹 애플리케이션의 동작과 배포 3-1. 자바 웹 애플리케이션 배포 3-2. 웹 애플리케이션이 동작하는 방법 3-3. 지속적인 통합과 배포 1. 교재 내용 실습하기 1-1. EC2에 프로젝트 clone 하기 깃허브 프로젝트 clone 하기 -EC2에 git 설치하기 sudo yum install git -레포 저장할 디렉터리 생성 mkdir ~/app &&..

이분 탐색 정렬되어 있는 리스트에서 탐색 범위를 절반씩 좁혀가며 데이터를 탐색하는 방법. 시작점, 끝점, 중간점을 이용하여 탐색 범위를 설정한다. 단계마다 탐색 범위를 절반씩 줄이기 때문에 시간복잡도는 O(log N)이다. (순차 탐색: 리스트 안에 있는 특정한 데이터를 찾기 위해 앞에서부터 데리터를 하나씩 확인하는 방법.) 파라매트릭 탐색 주어진 범위 내에서 원하는 값 또는 원하는 조건에 가장 일치하는 값을 찾아내는 알고리즘 최적화 문제를 결정 문제로 바꾸어 풀 수 있게 된다. 즉, 주어진 상황에서 최솟값, 최댓값 등의 특정 값을 구하는 문제를 특정 값이 어떠한 조건을 만족하는지만 확인하면 되는 문제로 바뀐다는 의미이다. c++에서는 이진 탐색으로 원소를 탐색하는 lower_bound, upper_bo..

Redux Toolkit (RTK) The official, opinionated, batteries-included toolset for efficient Redux development => Redux Toolkit은 Redux를 더 쉽게 사용하기 위해 만들어졌다. 1) 설치 # NPM $ npm install @reduxjs/toolkit # Yarn $ yarn add @reduxjs/toolkit 2) RTK method 1. createAction 기존 Redux에서 action을 정의하기 위해 action type 상수와 action creator 함수를 각각 선언해야 했지만 createAction은 이 두 선언을 하나로 결합해 준다. createAction은 action type을 단일 인..

11 폼 1) 폼이란 무엇인가? 사용자로부터 입력을 받기 위해 사용한다. 텍스트, 체크박스, 셀렉트 등 사용자가 무언가 선택을 해야 하는 것을 모두 폼이라고 한다. 2) 제어 컴포넌트 사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트이다. 즉, 그 값이 리액트의 통제를 받는 입력 폼 엘리먼트이다. function NameForm(props) { const [value, setValue] = useState(''); const handleChange = (event) => { setValue(event.target.value); } const handleSubmit = (event) => { alert('입력한 이름: ' + value); event.preventDefault(); } ret..

인간 뉴런의 자극 전달 과정에 아이디어를 착안하여 Machine Learning Algorithm 이 발생하였다. 뉴런은 단순하게 동작이 된다. 인간의 뉴런은 시냅스를 통하여 다른 뉴런으로부터 자극을 전달받고 시냅스를 통하여 다른 뉴런에게 자극을 전달하는 과정을 통해서 학습을 진행한다. x = 신호(입력값), input w = 가중치, Weight b = 편향, Bias f = 활성화 함수, Activation Function 여러개의 퍼셉트론의 합을 전달해주는 시냅스의 역할은 여러 layer를 잇는 weight/bias(error)가 된다. 들어오는 어떤 신호 input 과 가중치를 곱하여 Bias 를 더한 값이 일정값을 넘어가게 되면 activation(활성화)이 된다. X1, X2를 Linear하게..

Introduction One-Stage Detector 이미지가 들어오면 Conv & FC Layers를 거져서 output을 만들게 되고 이를 통해서 Classification과 Box Regression을 진행한다. Two-Stage Detector 원본 이미지 -> Region Proposal -> 객체가 있을 것 같은 영역을 찾아낸다. 원본 이밎 -> Classification를 통해서 Feature map을 뽑아낸 후 -> Proposed Regions를 Feature map에 투영시켜서 Classification과 Box Regression을 진행 YOLO Main Contribution object detection 을 regression problem으로 관점 전환 Unified Arch..

📌 사용자 레벨 관리 기능 추가 구현해야 할 레벨 시스템 사용자의 레벨은 BASIC, SILVER, GOLD 세 가지 중 하나. 처음 가입한 사용자는 BASIC 레벨 가입 후 50회 이상 로그인시 SILVER 레벨 SILVER에서 30번 이상 추천을 받으면 GOLD 레벨 레벨의 변경 작업은 일정 주기마다 일괄적으로 진행 (그때그때 ❌) Level 클래스 추가 각 레벨을 어떻게 저장할 지 생각해보자. 정수형(int)으로 저장하는 방법 -> ⛔️ 범위를 벗어나는 값이 들어갈 수도 있음 Enum 이용 // Level.java public enum Level { BASIC(1), SILVER(2), GOLD(3); // 세개의 enum 객체를 정의한다. private final int value; Level(i..

REST API를 알아보기 앞서 REST란 “Representational State Transfer” 의 약자 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. * 자원: 소프트웨어가 관리하는 것들, url Ex) 문서, 소프트웨어 자체 ,데이터, 그림등 상태(정보) 전달 : 데이터가 요청되어지는 시점에서 자원의 상태(정보)를 전달한다. =>JSON 혹은 XML를 통해 데이터를 주고 받는 것이 일반적이다. REST API의 작동 클라이언트가 서버에 요청을 전송. 클라이언트가 API 문서에 따라 서버가 이해하는 방식으로 요청 형식을 지정. 서버가 클라이언트를 인증, 해당 요청을 수행할 수 있는 권한이 클라이언트에 있는지 확인. 서버가 요청을 수신및 내부적 ..

교재 6장, 7장 Chap 6. AWS 서버 환경을 만들어보자 -AWS EC2 클라우드 서비스 : AWS, Azure, GCP … 외부에서 생성한 서비스에 접근 가능한 방법 ⇒ 24시간 작동하는 서버가 필수적 이때 집 PC를 24시간 내내 구동은 사실상 불가능 → 클라우드 서비스를 통해 제공 인터넷(클라우드)를 통해 서버, 스토리지, 데이터베이스, 네트워크, 소프트웨어, 모니터링 등 컴퓨터 서비스 제공 클라우드 서비스 중 하나 모든 AWS 서비스는 IaaS 사용 IaaS (Infrastructure as a Service) 기존 물리 장비 + 미들웨어 함께 묶어둔 추상화 서비스 가상머신, 스토리지, 네트워크, 운영체제 등 IT 인프라 대여 서비스 EX) AWS - EC2, S3 등 존재 AWS 서버 환경..