GDG on Campus Sookmyung

4 엘리먼트 렌더링 1) 엘리먼트에 대해 알아보기 엘리먼트는 리액트 앱의 가장 작은 빌딩 블록으로 즉, 리액트 앱을 구성하는 요소를 의미한다. 엘리먼트는 원래 웹사이트에 대한 모든 정보를 담고 있는 객체인 DOM(Document Object Model)에서 사용하는 용어이다. 실제 브라우저 DOM에 존재하는 엘리먼트는 DOM 엘리먼트, 리액트의 Virtual DOM에 존재하는 엘리먼트가 리액트 엘리먼트이다. => 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현으로 볼 수 있다. 리액트 엘리먼트는 컴포넌트 유형과 속성 및 내부의 모든 자식에 대한 정보를 포함하고 있는 자바스크립트 객체 형태로 존재한다. Virtual DOM은 변경된 부분을 계산하고 해당 부분만을 다시 렌더링한다. 엘리먼트는 불변성을 가져, ..

1 React 1) 리액트는 무엇인가? A JavaScript library for building user interfaces 라이브러리: 자주 사용되는 기능들을 정리해 모아 놓은 것 사용자 인터페이스(User interface, UI): 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 입력과 출력을 제어해 주는 것 ex) 버튼, 텍스트 입력창 2) 프레임워크 vs 라이브러리 프레임워크: 프로그램에 흐름에 대한 제어 권한을 프레임워크가 가지고 있음 라이브러리: 개발자가 필요한 부분만 필요할 때마다 사용하는 형태 3) 리액트의 장점 빠른 업데이트 & 렌더링 속도 - Virtual DOM: 가상의 돔, 빠른 업데이트를 위해 React에서 사용함 - DOM(Document Object M..

목차 React-Bootstrap란? 시작하기 여러 가지 컴포넌트 사용하기 react-bootstrap으로 인프런 사이트 클론 코딩하기 참고 자료 React-Bootstrap 공식 문서 1. react-bootstrap란? 부트스트랩(bootstrap)은 오픈소스 프론트엔드 프레임워크이다. 웹사이트를 쉽게 만들 수 있도록 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 제공하고 있다. 리액트에서 부트스트랩을 사용하는 경로는 react-bootstrap, reactstrap 두 가지가 있는데, 본 스터디에서는 react-bootstrap을 사용한다. react-bootstrap은 기존의 부트스트랩을 리액트 스타일의 컴포넌트로 압축하여 코드가 간단해진다는 장점이 있다. 2...

🌼 Solution Challenge 2021 결과발표 5월의 어느날, Solution Challenge 결과가 메일로 나왔다.. 그 결과는..!!! 상상도 못했는데 Solution Challenge 50에 들어서 Semi Finalist가 되었고 Top 10과 Top 3를 선정하는 결승에 진출할 수 있게 되었다. (오예오예 상상도 못했는데 수상하게 되니 더욱 기뻤고 Top 10에 대한 의지가 불타올랐다..🔥) Top 50의 혜택을 받아서 결승에 진출한 만큼 어떠한 방향으로 프로젝트를 디벨롭해야할지 고민이 되었고 작년 한국에서 Top 10에 선발된 심해 팀에게 몇가지 궁금한 사항에 대해 질문하고 그에 따른 답을 얻을 수 있었다. 질문 1차 심사때보다 어떻게 얼마만큼 발전해야하는가 (기존 내용에서 얼만큼 ..

❄️ 눈송이 유형 테스트 ❄️ 프로젝트 요약 숙명여대의 마스코트인 눈송이를 통해 내가 어떤 유형의 숙명여대 학생(눈송이)인지 분석해보는 심리테스트 기반 프로젝트 프로젝트 형태 사이드 프로젝트 개발 기간 2021.02.01-2021.02.28 기술 스택 Front-end: React Back-end: Django Rest Framework, MySQL, Google Cloud Platform 구현 기능 로그인 없이 누구나 작성할 수 있는 방명록 챗봇 형태의 유형테스트 단과대별 통계 확인하기 카카오톡으로 공유하기 팀원 프론트엔드 남수연, 서희 백엔드 유지연 기획 권은지 데모 영상 Gitribute_(권은지, 남수연, 서희, 유지연).mov Gitribute_(권은지, ᄂ..

각자 알아서 맡은 바를 하고 회의시간에 만나 무슨 일을 했는지 공유해서, 추가 및 수정해야하는 부분을 정하며 개발이 진행되고 있습니다. 프로젝트 상태 아무 뜻이 없던 페이지명을 rename하여 의미 부여를 함. SecondPage, ThirdPage, FourthPage -> CategoryPage, CollectionPage, PlacePage CollectionPage, PlacePage에서 지도 기능이 사라져 페이지 구조가 변동됨. modal로 들어있던 form을 분리해서 page로 만듦. Collection과 Place 추가를 위한 empty card를 만듦. user Login, Register 구현 Place를 나의 Collection에 추가하기 댓글 목록 보기, 댓글 작성하기 Mypage에 ..

1. Backend : 심세령, 이나경 Frontend 팀의 UI와 Backend 팀의 개발에 따라 DB가 조금씩 수정되었다. MongoDB 생성, nodejs와 DB 연결, URI 정리, user 로그인 구현, schema collection과 place 부분 2. Frontend : 권나현, 김주연 회의를 통해 'Collection 추가하기' 페이지를 추가하는 등 UI 수정을 했고 Bootstrap 같은 framework를 사용하지 않고 html과 css로 직접 모든 것을 만들어보기로 했다. 여러 페이지에서 자주 사용되는 Components를 먼저 만들었다. 권나현 : Category card, Collection card, Place card 김주연 : Header, Footer Components..

프로젝트 종료 저번주에 해결하지 못했던 반응형 이슈와 차트 기능, 질문이 로딩되지 않은 상태에서 질문 창을 열었을 시 발생하는 오류 예외 처리를 이번 주에 해내면서 2달 내내 투자했던 눈송이 유형 테스트 프로젝트가 끝이 났다. 개발에 온 힘을 다한 것은 물론, 8가지의 눈송이 일러스트도 직접 그려 준비했으니 많은 학우들이 우리 테스트에 참여해 줬으면 좋겠다. 테스트는 눈송이와 같이 대화하는 형식으로 진행된다. 아래의 선택지를 통해 눈송이가 묻는 질문에 대답할 수 있다. 실제 사람과 대화하는 것처럼 채팅 이벤트에 딜레이를 주고 각 대화가 서로의 트리거가 되어 순서대로 하나하나 렌더링하는 것이 힘들었었다. 채팅 구현한 서희 언니.. 너무 수고 많았다. 테스트가 끝나면 본인이 어떤 유형의 눈송이인지 확인할 수..

이번주는 다른 팀원들의 피드백을 바탕으로 개선할 사항을 중점적으로 회의하였고, 이 결과를 바탕으로 주제를 구체화하고 구현하기 위한 월별 커리큘럼 및 스터디 계획, 사용할 프레임워크 등을 확정하였다. 2021.01.12 회의 내용은 다음과 같다. 다른 팀원들이 남겨준 피드백을 보고, 팀 주제와 구체적인 방향성에 대해 다시 생각해봤다. (특히나, 팀의 방향성 및 프로젝트의 물품, 솔루션 챌린지의 참가목적, 보완할 점 - 마이룸 등) 먼저, 팀블로그 형식을 규격화했다. 필요한 얘기는 슬랙에 남기고, 자료 정리는 공유 구글 드라이브-회의록에 정리한다. 매 회의의 서기를 정하였다. (남수연님) 근황 토크를 회의 시작 전에 꼭 하고, 의견을 내면 칭찬을 많이 해주기로 했다. 그 후 깃 마이룸, 혹은 통계치를 보여줄..

리액트에 구글 웹 폰트 적용하기 1. 아래 사이트에서 사용하고 싶은 폰트를 고른다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 원하는 글꼴 선택 - Select this style - Selected family - @import 3. 리액트에 적용하기 페이지 상단에 보여지는 header.js의 제목, 메뉴 이름에 폰트를 적용하려고 한다. import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import './header.c..