본문 바로가기

이노베이션캠프/지식쌓기

(8)

첫 협업을 하며 느낀 점 (스스로 아쉬웠던 점/ 보완하고 싶은 점) 맛집탐방😋 (4조) https://github.com/s2hlimi/mini 🟡제작기간 & 팀원 소개 2022.09.02 ~ 2022.09.08 FE: 심혜림 BE: https://github.com/prscsl/mini_project_T 🟡와이어프레임 🟡구현기능 (1) 공통 API 명세서 작성하기 UI 구현하기 (2)조건부 렌더링 로그인 시에만 글쓰기 작성 및 댓글 작성가능 버튼 보이게 표시 자신의 글 및 댓글만 수정 삭제 가능 (3)회원가입, 로그인 CRUD 구현 회원가입(유효성검사) 중복확인 비밀번호 (유효성검사) 비밀번호 확인 (유효성검사) 로그인 (회원, 비밀번호확인) (4)본문 CRUD 구현 게시글 리스트 조회 하기 본문 조회 하기 본문 추가 하기(이미지포함) 본문 삭제 하기(이미지포함) 본문..

라이프사이클(클래스형 vs 함수형), react hooks LifeCycle Method LifeCycle Method 는 한국어로 "생명주기 메서드" 라고 부른다. 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 이다. 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있다. 생명주기 메서드는 클래스형 컴포넌트에서만 사용 할 수 있다. render( ) 함수 컴포넌트 모양새를 정의, 컴포넌트에서 가장 중요한 메서드, 라이프사이클 메서드 중 유일한 필수 메서드 this.props와 this.state에 접근할 수 있으며, 리액트 요소를 반환 constructor 메서드 constructor(props) { ... } 이것은 컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행, 이 메서드에서는 초..

5주차 과제 React 심화 주차 키워드 🔐 리덕스에서 미들웨어 청크의 역할은 뭘까요? 리덕스의 네가지 구성 요소 뷰에서 상태값을 변경시키고 싶을 때 액션을 발생시킨다. 뷰에서 dispatch를 호출하여, 리덕스에게 액션이 발생함을 알리게 된다. 액션을 발생시키면, 그 액션을 미들웨어가 처리한다. 미들웨어는 옵셔널이다. 기능을 넣었다면 미들웨어가 중간에 처리를하고 미들웨어가 없다면, 액션은 바로 리듀서로 넘어간다. 리듀서에서는 해당 액션에 의해서(액션 타입) 상태를 어떻게 변경할지 로직이 담겨져 있다. 그 로직에 맞게 새로운 상태값을 반환한다. 새로운 상태값은 스토어에게 도달하게되고, 스토어는 새로운 상태값을 저장한다. 스토어를 바라보고 있는 옵저버들이 있는데, 옵저버들은 데이터의 변경 사실을 알게된다. 주로 "뷰"가 옵저버가 되는데, 뷰는 데..

React DOM, 서버리스 🟨DOM이란? DOM(Document Object Model)은 웹 페이지를 트리 구조로 나타냅니다. 우리가 작성하는 모든 HTML 조각은 이 트리에 노드로 추가됩니다. JavaScript를 사용하면 이러한 노드(HTML 요소)에 액세스하고 스타일, 속성 등을 업데이트할 수 있습니다. 즉, DOM을 사용하면 JavaScript가 웹 페이지에 쉽게 액세스하고 수정할 수 있습니다. 모든 트리에는 루트 노드가 있어야 합니다. 여기서 루트 노드는 문서입니다. 이 문서 노드는 브라우저의 일부입니다. 작성하는 모든 HTML 태그는 루트 노드 문서의 직접 또는 간접 자식이 됩니다. 🔻아래 이미지는 DOM의 동등한 개념적 트리 구조를 보여줍니다. 🟨서버리스란? 서버리스(serverless)란 개발자가 서버를 관리할 필..

JWT, API 🟨 JWT JWT는 JSON Web Token의 약자로 당사자 간에 정보를 JSON 개체로 안전하게 전송하기 위한 간결하고 자체 포함된 방법을 정의하는 개방형 표준이다. 이 정보는 디지털 서명되어 있으므로 확인하고 신뢰할 수 있다. JWT는 비밀( HMAC 알고리즘 사용) 또는 RSA 를 사용하는 공개/개인 키를 사용하여 서명할 수 있다. Compact : 크기 때문에 URL, POST 매개변수 또는 HTTP 헤더 내부를 통해 보낼 수 있다. 또한 크기 때문에 전송 속도가 빠르다. 자체 포함 : 페이로드에는 데이터베이스를 두 번 이상 쿼리하지 않도록 사용자에 대한 모든 필수 정보가 포함된다. JWT 구조 JWT는 다음과 같이 점( )으로 구분된 세 부분으로 구성된다. xxxxx.yyyyy.zzzzz He..

SPA 방식과 MPA 방식 SPA 방식과 MPA 방식은 무엇인가요? SPA(Single Page Application) MPA(Multi Page Application) 한 개의 페이지로 구성 여러 개의 페이지로 구성 접근방식 현대적인 접근 방식 Google, Facebook, Twitter 등에서 사용 고전적인 접근 방식 전자 상거래 비즈니스와 같이 광범위한 제품 포트폴리오를 보유한 대기업에서 선호하는 옵션 속도 새 데이터를 요청할 때마다 페이지가 완전히 다시 로드되지 않음. 대부분의 앱 리소스를 한 번만 로드하기 때문에 빠름. 새 데이터에 액세스하거나 웹사이트의 다른 부분으로 이동할 때마다 브라우저가 전체 페이지를 처음부터 다시 로드해야 하므로 느림 Coupling 프런트엔드와 백엔드가 분리 단일 페이지 애플리케이션은 서버 측..

JavaScript의 ES란?, ES5/ES6 문법 차이 🟨JavaScript 🔻 JavaScript의 ES란? 1996년에 ECMA(European Computer Manufacturers Association) International이라는 표준 조직은 모든 브라우저 공급업체가 구현할 수 있는 ECMAScript(ES)라는 표준 사양을 만들었습니다. 그리고 Javascript는 ES의 가장 잘 알려진 구현이며 ActionScript(Macromedia/Adobe Systems)와 JScript(Microsoft)는 ES의 다른 구현입니다. ES의 버전 목록: 현재까지 ES는 9개의 버전을 출판했으며 최신 버전(9번째 버전)은 2018년에 출판되었습니다. ES1 1997 ES2 1998 ES3 1999 ES4 포기 ES5 2009 ES6 2015 ES7 ..

프로그래밍 기초(JavaScript) 🟨JavaScript 🔻 JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ? 1. 느슨한 타입(loosely typed)의 동적(dynamic) 언어 JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당) 가능함. let foo = 42 // foo가 숫자 foo = 'bar' // foo가 이제 문자열 foo = true // foo가 이제 불리언 프로그래밍 언어는 다른 유형의 개체 및 변수에 대한 명시적 사양이 필요하지 않은 경우 느슨한 유형 또는 약한 유형. 약한 형식의 프로그래밍 언어에서 "느슨한" 형식 지정 규칙은 잘못되거나 예측할 수 없는 결과를 생성할 수 있음. 동적 측면만 있는 것이 아니라 거의 모든 것이 동적이기 때문에..

이전 1 다음

티스토리툴바