UMC React Study 7주차 🤝리액트로 협업하기 회사에서 인수인계 받은 코드가 일반적이지 않고 이해하기 어렵다면? 동료 개발자가 내 코드를 이해하는데 너무 오랜 시간이 소요된다고 불편함을 토로하면? 위와 같은 문제들을 회사에 가서 협업을 본격적으로 하기 시작하면서 많이 발생한다. 협업을 위해 코딩 컨벤션에 익숙해지는 것이 중요하다. 코딩 컨벤션 코딩 컨벤션(Coding Conventions)은 협업 시 유지보수 및 가독성, 코드 이해를 위해 지켜지는 개발자들 사이의 규칙을 의미한다. 코딩 컨벤션은 규칙이기 때문에 지키지 않는다고 에러가 발생하지는 않는다. 팀 혹은 회사마다 각기 다양한 코딩 컨벤션들을 볼 수 있다. ☘️ 뱅크샐러드 웹 코딩 컨벤션 ☘️ 카카오 개발자의 팀 코딩 컨벤션에 대한 고찰 ☘️ 리액트 코딩 컨벤션 예시 소셜 로그인 : 인증코드 요청 및 받기 : 카카오 서버로부터 받은 인증 코드를 로 전달 : 인증 코드로 토큰 요청 및 받기 …

UMC React Study 6주차 🌐React Network 서버(Server) Server = Serve + -er : 서브하는 사람 실생활에서 서브하는 사람을 종업원(홀 알바)로 비유할 수 있다. 손님이 많은 경우에 홀 알바를 고용하는 것처럼, 서버 또한 클라이언트가 많아야 존재 이유가 있다. Server : Client = 1 : N 네트워크 통신의 흐름 손님 = Client Android, iOS, Safari, Chrome, Firefox 홀 알바 = Web Server Apache, Nginx 주방 = Backend Language PHP → Laravel , codeigniter ASP → ASP.net JSP → Spring, Spring boot JS → Node.js Python → Django 스마트 냉장고 시스템 = DBMS MySQL, MongoDB, MSSQL, Oracle 식료품 창조 = DB 네트워크 통신 시 클라이언트가 …

UMC React Study 5주차 🌳상태관리 라이브러리의 필요성 React.js는 단방향 데이터 흐름을 가진다. 부모 컴포넌트에서 자식 컴포넌트 방향으로 를 통해 데이터를 전달하는 것이 일반적이다. 이러한 특징은 서비스의 구조를 직관적으로 만들어주지만, 몇 가지 비효율적인 특징도 발생한다. 1-depth 사이의 부모-자식 컴포넌트 간에 함수를 전달하여 state를 끌어올리는 것은 간단할 수 있다. 하지만 만약 여러 depth 차이가 나는 컴포넌트 간에 state를 전달하려면 쓸데없이 state가 전달되는 bridge 컴포넌트가 반드시 존재해야 해서 비효율적이다. 또한, 여러 컴포넌트에서 동일한 state 값을 사용하고 싶은 경우에 state를 local storage에 저장하여 사용 할 수도 있지만, 변화를 즉시 화면에 반영해줘야 하는 경우에는 state를 모두 공유해야 하는 번거로움이 생긴다. 최상위 부모에 state를 정의해두고, 해당 state를 공유하기를 …

UMC React Study 4주차 🎨CSS-technology CSS-in-JS 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법. 최근 웹 애플리케이션을 여러 개의 재활용이 가능한 빌링 블록으로 분리하여 개발하는 컴포넌트 기반 방법이 주가 되고 있다. , : styled-components , : CSS-Modules CSS-Frameworks 사용자 친화적인 UI를 그대로 가져다가 쓸 수 있으며, 개발 속도 향상 및 간결한 CSS 코드 작성이 가능하다. Tailwind CSS React Bootstrap Ant Design Semantic UI SCSS CSS를 전처리 해주는 기능을 제공하며, CSS Preprocessor라고 부르기도 한다. CSS의 단점을 보완하기 위한 CSS의 확장으로 나온 스크립트 언어이다. 기존의 복잡한 CSS 코드를 쉽게 입력하고, CSS가 동작하기 전에 CSS로 변환시켜준다. CSS…

UMC React Study 3주차 🎡리액트 라우팅(React Routing) 라우팅(Routing)이란, 사용자가 요청한 URL에 맞는 페이지를 보여주는 것이다. 리액트는 SPA 방식으로 렌더링하기 때문에 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태로 동작한다. 은 신규 페이지를 불러오지 않는 상황에서 각각의 URL에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리이다. 설치 주요 요소 : 라우팅에 포함시킬 페이지들은 모두 컴포넌트로 감싸줘야 한다. : 컴포넌트는 여러 Route를 감싸서 그중 규칙이 일치하는 Route 단 하나만을 렌더링 시켜주는 역할을 한다. : 모든 Route에 공통으로 들어가는 요소가 있다면, 밖으로 빼줘야 한다. (ex-Header.jsx) : 태그의 속성에는 경로, 속성에는 해당 경로에 띄워줄 컴포넌트를 넣어준다. : 특정 컴포넌트에 여러 경로를 매칭하고 …

UMC React Study 2주차 🪝 Hooks Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. 클래스형 컴포넌트는 문법이 어렵고, 코드의 재사용성이 낮으며 축소가 어렵다. 이러한 클래스형 컴포넌트의 단점을 보완하기 위해 가 등장하였다. 하지만 함수형 컴포넌트에서는 클래스형 컴포넌트의 장점인 State나 Life Cycle Method을 다루는 기능을 사용하지 못한다. 이를 해결하기 위해 이 등장했다. 은 함수형 컴포넌트에서 state와 lifecycle 기능을 사용할 수 있게 해주는 함수이다. Hooks의 대표적인 기능인 와 를 살펴보도록 하자. 🧘🏻‍♀️ useState 지난 시간에 배웠던 가 컴포넌트의 외부 input 값이라면, 는 컴포넌트 내부 input 값이라고 할 수 있다. 함수형 컴포넌트는 리렌더링될 때 내부의 모든 코드가 재실행되기 때문에 …

UMC React Study 1주차 🌏 React의 탄생 배경 동일한 뷰에서 불필요하게 코드 반복하는 문제점 페이지 이동 시 새로고침이 발생하며 매번 데이터를 불러오는 문제점 →️ 기존의 웹에 이러한 문제점을 개선하기 위해 라는 라이브러리가 탄생하게 되었다. 🧩 React의 특징 Virtual DOM 우선 은 Document Object Model의 약자로서, HTML 문서에 접근하기 위한 인터페이스이다. DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트를 이용해 콘텐츠를 추가, 수정, 삭제하거나 이벤트를 처리할 수 있도록 한다. 은 가상 DOM을 의미하는데, virtual DOM을 이용하면 실제 DOM에 접근하여 조작하는 대신에 이를 추상화시킨 자바스크립트 객체를 구성하여 사용한다. React에서 변한 데이터를 실제 DOM에 업데이트하는 과정은 다음과 같으며, 연산 횟수가 줄어들어 더 효율적으로 작업을 처리할 수 있다. 데이터가 업데이트 되면, …

UMC 10주차 워크북 서버와의 협업 협업 → 개발 ( 프론트엔드 + 백엔드 ) 협업 시 어떤 가 필요할지 회의 → 의견 취합, 적극 의견 제시 API 및 데이터 없이 프론트 개발을 시작해야 하는 경우 대부분 → 디자인 시안대로 하는 것이 중요 API 명세서가 나올 때쯤 퍼블리싱 완료한 화면에 데이터 코드 작성 경청 및 수용, 의견 적극 제시, 책임감, 존중, 소통, 믿음, 역지사지••• 퍼블리싱 : HTML, CSS을 위주로 화면을 디자인대로 구현하는 작업. 동적인 데이터가 들어가는 곳이라면 더미 데이터를 사용하여 구현. 더미 데이터 : 가짜 데이터. 간단하게 JSON 파일을 만들어서 최소한의 데이터를 만들어 놓은 것. 더미 데이터를 만들어 보는 과정을 통해 데이터에 대해 고민해보고, 백엔드와의 소통이 수월해질 수 있다. figma UI 디자인 툴. 색상, 폰트 등 간략한 코드 및 정보 확인 가능(30% 정도 참고) api 명세서 api 내용을…

UMC 9주차 워크북 라우팅(Routing) 이란 URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말한다. 👉 https://expressjs.com/ko/starter/basic-routing.html CRUD 는 데이터 처리 기능 4가지를 의미한다. HTTP 요청 메서드와 연결하면 다음과 같다. Create(생성) ⇒ Read(조회) ⇒ Update(갱신) ⇒ Delete(삭제) ⇒ HTTP 상태 코드(http status codes) 는 클라이언트가 보낸 HTTP 요청에 대한 서버의 응답 코드로, 상태 코드에 따라 요청의 성공/실패 여부를 판단한다. 1xx : 요청을 받았으며 프로세스를 계속한다. 2xx : 요청을 성공적으로 받았으며 인식했고 수용했다. 3xx : 요청 완료를 위해 추가 작업 조치가 필요하다. 4xx : 요청 문법이 잘못되었거…

UMC 8주차 워크북 HTTP = HyperText Transfer Protocol → 프론트와 서버 간의 데이터 통신 방법 중 하나 = HyperText Transfer Protocol Secure → HTTP + 보안 URL address HTTP Request Method : 기존의 데이터를 접근해서 사용하는 메서드(read 기능) : 기존 데이터에 새로운 데이터를 추가하는 메서드 : 기존의 데이터를 수정하는 메서드 : 데이터를 삭제하는 메서드 XML 👉 https://developer.mozilla.org/en-US/docs/Web/XML/XML_introduction JSON 👉 https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON 데이터 통신 fetch 는 브라우저에서 제공해주는 메서드이므로 별도의 설치가 필요 없다. Promise async & await…

UMC 7주차 워크북 동기 & 비동기 : 순서대로 일을 처리하는 방식 : 순서대로 일을 처리 하지 않고 빨리 처리할 수 있는 것들을 먼저 처리하는 방식 자바스크립트는 이지만, 비동기적으로 처리하기 위해 사용할 수 있는 함수가 이다. 1, 3, 4, 6, 8, 10은 동기적으로 먼저 처리되고, 5, 2, 9, 7은 동기적으로 처리가 된 후에 설정된 시간이 작은 것부터 순차적으로 비동기적으로 처리된다. : 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정한다. : 타이머가 만료된 뒤 실행할 function : 함수 대신 문자열을 지정하는 대체 구문 (optional) : 주어진 함수 또는 코드를 실행하기 전에 기다릴 밀리초 단위 시간 (optional) : function에 전달할 추가 매개변수 Callback (콜백함수) : 함수 안에 인자로 들어가는 함수 (비동기적으로 사용될 수도 있고, 동기적으로 사용될 수도 있다.) 콜백함수…

UMC 6주차 워크북 Local Storage 로그인 정보와 같이 계속 유지되어야 하는 데이터를 저장하기 위해 를 사용한다. 말 그대로 로컬 환경의 저장 공간에 정보를 저정하는 것이다. 개발자 도구를 통해 Application - Local Storage를 누르면 해당 페이지에서 로컬 스토리지에 저장되고 있는 정보 목록을 확인할 수 있고, Key - Value 형태로 저장된다. Local Storage가 사용되는 기능 중요 CSS 저장용 웹페이지간 정보 전달(웹서버를 경유하지 않고 정보 로컬에 유지) Canvas나 이미지에 대한 임시 저장 기능(base64로 변환) 현재 읽은 글의 히스토리 저장(카운팅, 읽은글 표시 등으로 활용) 웹페이지의 개인화 설정들에 대한 저장과 제공(캐쉬로 활용) 웹서버에 필수적으로 접근해야 하는 캐쉬용(캐쉬로 먼저 서비스 제공, 차후에 업데이트) 글쓰기를 하다가 사용자가 창을 벗어난 경우 관련 작성하던 내용 백업/복구용 Sesstion Stora…

UMC 5주차 워크북 이벤트 핸들러(Event Handler) 콜백함수를 라고 한다. 이벤트 핸들러는 가독성 및 유지보수를 위해 따로 작성하는 것이 좋다. 함수 뒤에 호출 기호가 없는 이유는 콜백함수이기 때문이다. 콜백은 클릭이 이루어질 때마다 함수를 자동적으로 호출해준다. 이벤트 핸들러의 단점은 동일한 이벤트에 서로 다른 콜백함수를 지정할 경우 뒤의 이벤트 핸들러가 앞의 이벤트 핸들러를 덮어씌운다. 이벤트 리스너(Event Listner) 이벤트 핸들러와 다르게 동일한 이벤트에 서로 다른 콜백함수를 실행할 수 있다. addEventListener는 아래와 같이 사용할 수 있으며, 인자들은 다음과 같다. - type listener options useCapture 설명 수신할 이벤트 유형을 나타내는 대소문자 구분 문자열(이벤트명) 지정한 이벤트(이벤트 인터페이스를 구현한 객체)를 수신할 객체(콜백함수) 이벤트 수신기의 특징을 지정할 수 있는 객체(옵션) 이벤트 대상…

UMC 4주차 워크북 document document = html. 개발자 도구를 켜서 console에 document를 입력하면 전체 선택되는 것을 확인할 수 있다. DOM을 선택한 변수는 다른 변수와 구분하기 위해 $ 표시를 하는데, 생략해도 무관하다. DOM을 제어하는 것이 곧 HTML을 제어하는 것이다. 자바스크립트는 HTML의 DOM 객체를 가져와 조작할 수 있다. element를 가져오고, element의 텍스트를 읽고, element를 생성, 삭제, 수정할 수 있다. ➕참고 : https://grace-go.tistory.com/78 dom elements 가져오기 : 해당되는 태그를 모두 지정해서 유사 배열(HTMLCollection)에 넣는다. document가 아닌 dom을 선택한 변수를 선택하여 영역을 제한할 수 있다. : 해당되는 클래스를 모두 지정해서 유사 배열(HTMLCollection)에 넣는다. : 해당되는 id를 배열이 아닌 eleme…

UMC 3주차 워크북 변수(Variable) : 데이터를 저장하는 상자 : 변하지 않는 데이터 값 넣을 때 사용. 한 번 값을 할당하면 재할당 할 수 없다. : 데이터 값이 변할 때 사용. 선언 : 변수를 정의하는 것 초기화 : 정의한 변수에 넣는 첫 번째 값 재할당 : 이미 값이 존재하는 변수에 다시 값을 넣는 것 자료형(Data type) : 문자열 : 숫자 : 큰 값의 숫자 : true, false : 중복되지 않는 고유값 : 비어있는 값. 수동적으로(의도적으로) 값이 없음을 나타낸다. : 비어있는 값. 자동적으로 값이 없음을 나타낸다. : 함수, 배열, 객체 연산자(Operator) : +, -, /, *, %, **, ++, — : = : +, += : ==, ===(데이터 타입까지 비교), !=, !==, >, <, >=, <= : : 조건 중 하나라도 false이면 false : 두 개의 조건이 모두 false여야 false …

UMC 2주차 워크북(2) CSS 속성(property) 태그는 컨텐츠 크기와 상관 없이 한 줄을 차지하는 태그인 요소와 컨텐츠 크기만큼 차지하는 태그인 요소가 있다. 너비와 높이를 지정해주는 width, height 속성은 block 요소만 사용 가능하다. inline 요소는 적용해도 변화가 없다. 이런 특성을 변경해주는 속성이 이다. block tag : p, div, ul, li, h1-h6 inline tag : span, a, img, button : 요소를 사라지게 한다. : block 요소를 inline 요소처럼 사용한다. : inline 요소를 block 요소처럼 사용한다. : inline과 block이 합쳐진 것으로, inline처럼 한 줄에 여러 요소들을 둘 수 있고 block처럼 width와 height를 지정할 수 있다. : 요소의 테두리를 설정한다. , , 값을 설정한다. (순서대로 작성 시 너비, 스타일, 색 순서로 작성)…

UMC 2주차 워크북(1) CSS html이 뼈대 역할을 했다면, 는 살(외관)의 역할이라고 할 수 있다. 의 줄임말로, 사용자에게 문서를 표시하는 방법을 지정하는 언어이다. 기본 텍스트 문서를 꾸며주는 역할을 한다. html에서 외부 요소와 연결하는 를 사용하여 css를 외부 파일로 만든 후에 html과 연결할 수 있다. CSS 선택자 CSS의 문법은 다음과 같다. 는 html 요소 선택하는 역할을 한다. 태그 : 를 선택한다. 클래스 : 태그와 상관없이 동일한 스타일을 에 주고 싶을 때 사용한다. 하나의 요소에 여러 개의 클래스를 사용할 수 있고(공백으로 구분), 중복일 경우 위에서 순차적으로 실행되기 때문에 마지막에 실행되는 코드로 적용된다. 예시: 영희 = 학생, 알바생, 안경 쓴 사람 id : 클래스는 동일한 클래스 이름을 여러 요소에 사용할 수 있었지만, id는 동일한 id 값을 가진 id가 있으면 안 되고 에만 사용해야 한다. 하나의 요소가 여러 …

UMC 1주차 워크북 Web 웹이란 무엇일까? 이란 의 줄임말으로서, 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미한다. 인터넷 서비스의 일종이며, 전 세계적으로 많은 정보들이 오가는 공간이다. 웹의 역사 웹은 아이디어를 주고 받을 때 공통된 공간에 각자의 정보를 올리고 관리할 수 있는 정보 관리 시스템에서 시작되었으며, 1989년 팀 버스너리가 발명하였다. Web의 특징 웹은 인터넷 상에서 텍스트, 이미지, 비디오 등 멀티미디어 정보를 하이텍스트 방식으로 연결하여 제공한다. 란, 문서 내부에 또 다른 문서로 연결되도록 하는 (다른 문서에 관한 참조 정보)를 사용하여 여러 문서를 연결하는 기술이다. HTML tag 란 정보를 정의 하는 형식을 의미한다. plain text에 의미를 부여하기 위해 사용되며, 태그마다 지원하는 다양한 속성을 사용할 수 있다. 태그는 와 가 세트로 구성되어있으며, 닫는 태그가 없는 도 있다. dom 은 의 줄임말…

UMC 2기 합격 후기 UMC⭐️ 👉UMC 홈페이지 https://makeus-challenge.oopy.io/umc 는 University Makeus Challenge의 약자인 이다. 디자이너, PM과 함께 협업하여 개발하고, 앱을 런칭하는 활동을 한다. 스터디, 해커톤, 팀 프로젝트까지 모든 과정을 6개월 동안 진행한다. 자세한 커리큘럼은 사진에서 확인 가능👇 지원 동기🙌 과 단톡방에 UMC 홍보가 올라온 것을 보고 바로 1기 서비스 랜딩 페이지를 구경했다. 1기는 우리 학교가 없기도 했고, 안드로이드 파트만 있었어서 조금 고민되긴 했지만 나에게 좋은 기회가 될 것 같아서 지원했다. 작년에 교내 스터디를 하면서 협업을 조금이나마 경험해볼 수 있었는데, 그때 다른 사람들과 함께 개발하는 즐거움을 깨달아버렸다. 그래서 휴학한 동안 연합 동아리나 부트 캠프를 알아보고 있던 중이었는데 마침 운명처럼☄️ 나타난 UMC. iOS, Android, Web, Node.js…