본문 바로가기

전체 글

 (91)
React_0강 React React는 메타(메타 플랫폼, 페이스북)에서 개발한 웹/앱의 View를 개발할 수 있는 오픈 소스 라이브러리이다. 자바스크립트 라이브러리이며, 기본적으로 모듈형 개발이기 때문에 생산성이 높아 현재 대세라 볼 수 있다. 사용자가 조작하기 위한 UI, UI를 컨트롤하기 위한 로직, 데이터를 처리하는 비즈니스 로직 등 3가지로 분류해 개발하는 패턴 중 하나가 바로 여태까지 배웠던 MVC 패턴이다. 여기서 React는 사용자가 조각하기 위한 UI 만들기를 도와준다. React가 가지는 특징은 다음과 같다. 선언형이다. 컴포넌트 기반으로 재사용성이 뛰어나다. Virtual DOM(가상돔) 기반으로 가볍게 사용할 수 있다. 컴포넌트는 state와 props을 가진다. 선언형인 React는 컴포넌트를 얻..
ES6_3강 문법(3) 1. Class 객체를 생성하기 위해 템플릿을 작성하는 문법으로 자바의 class와 유사하다. 문법) class MyClass { constructor(member1, member2) { this.member1 = member1; this.member2 = member2; } function( ... ) { ... } } constructor = 생성자 2. import와 export Javascript 응용프로그램의 성능 향상을 위한 기법이다. 별도의 재사용 가능한 구성 요소(객체, 값 등)을 작성하고, 코드를 모듈화하여 처리할 수 있다. import : 정의된 모듈화 코드를 불러오는데 사용 export : 모듈화된 코드를 정의하는데 사용 참고) 실행하기 위해선 http-server를 설치하..
ES6_2강 문법(2) 1. 화살표 함수(=>) 함수 표현식을 화살표 함수로 표현할 수 있다. 함수를 간결하게 작성할 수 있는 방식으로, 가독성 및 유지 봇성을 높이는 방식이다. 변수 = (매개변수) => { ... }; const func = (p) => { ... }; 매개변수가 하나일 경우 괄호를 생략 const func = p => { ... }; 매개변수가 없거나 둘 이상일 경우 괄호 필수 const func = () => { ... }; const func = (a, b) => { ,,, }; 정의부에 return [값 || 식] 뿐인 함수는 return과 {, }를 생략 const func = function(p) { return p + 1; }; const func = p => {p + 1}; cons..
ES6_1강 문법(1) 1. let, const 키워드 var 한 가지만 사용하던 변수 선언에 추가된 키워드이다. * 호이스팅(hosing) : 사용을 먼저, 선언은 나중에 2. 템플릿 리터럴 let a = 10; -> 10을 리터럴 `(back tick)을 사용하여 변수의 값을 리터럴처럼 사용한다. 변수의 값을 출력할 때는 '${변수}'를 입력한다. ex) /ES5 var str1 = ', '; var str2 = 'World!'; var str3 = 'Hello' + str1 + str2; //출력 : Hello, World! //ES6 let str1 = ', '; let str2 = 'World!'; let str3 = `Hello${str1}${str2}`; 3. 구조 분해 할당(Spread) 객체나 배열에..
Project(4)-4. 전체 마무리 프로젝트 최종 모습 팀원들과 함께 만든 프로젝트를 합친 모습이다. 회원 탈퇴의 경우 추가적으로 만든 기능이나 오류 해결이 되지 않아 영상에 포함시키지는 못했다. 프로젝트 후기 서로 다른 파트를 맡더라도 하나의 결과물을 만들어내는 것이 프로젝트인데 전반적으로 통일감 없는 디자인에 아쉬움을 느꼈다. 초반에 소통하며 정확한 화면 설계를 진행했어야 했지만 팀장도 아니고 제일 어린 내가 그 부분을 주도하기에는 어려움이 있었다. 그럼에도 컬러감은 동일하게 가져가자는 이야기에 다들 수긍해주어 다행이었다. 화면 구성에 부족함을 느꼈던 팀원이 적극적으로 다른 사람의 의견을 수용해주어 이만큼의 결과물이 나왔다고 생각한다. 또한 개발 과정에서 한 팀원의 욕심으로 되려 진행이 늦어졌었으나 팀장에게 나의 의견을 적극적으로 피력..
Project(4)-3. 등록 페이지 페이지 구성 등록 페이지는 메인페이지와는 다르게 구성하는 방법으로 부트스트랩을 사용했다. 그러나 예전처럼 직접 부트스트랩 사이트에 들어가 무료 버전을 직접 다운받고 코드를 뜯어고치는 방식이 아닌 CDN 방식을 차용했다. 여기서 CDN 방식이란 사용하고 싶은 테마의 사이트를 코드화하여 가져오는 것이다. CDN 방식을 사용할 때는 가지고 오고 싶은 테마의 코드와 함께 버전과 맞는 부트스트랩 Js 코드도 가져와야 한다. 내가 사용한 것은 다음과 같다. 이렇게 하여 부트스트랩에서 제공한 테마를 기본으로, 태그의 위치 및 의 스타일을 변경하여 꾸며주었다. 기능 기능은 꽤 간단히 구현했다. 모든 요소를 잘 작성해주었다면 DB에 해당 내용이 저장되고 alert를 이용해 성공했다는 메시지를 띄웠다. - service...
Project(4)-2. 메인페이지 페이지 구성 이번에는 부트스트랩을 사용하지 않고 여태 배웠던 내용들을 토대로 구성하였다. 1. 슬라이더슬라이더는 총 3개의 사진으로 구성했다. 좌우 버튼 없이 하단의 라디오버튼으로 구성하였으며, 'vh'와 'vw' 단위값을 이용해 모니터 너비와 관계없이 모니터 대비 슬라이더의 크기를 일정하게 유지할 수 있도록 해주었다. 초반에는 직접 픽셀값을 주어 다른 모니터에서 봤을 때 슬라이더 속 이미지가 깨지는 등의 어려움이 존재했으나 팀원의 도움으로 해결할 수 있었다. 각 슬라이더 이미지는 미리캔버스에서 직접 만들어보았다. 2. 목록 테이블 목록 테이블을 구성할 때 제일 위에 있을 목록의 제목들은 드래그를 했을 때 계속해서 고정돼 나타나게끔 해주었다. 구글링을 통해 고정시키는 방법을 구성해보았지만 잘 되지 않았고..
Project(4)-1. 주제 프로젝트 주제 선정 1. 주제 선정 조건 이번에 새로 맞이한 팀원들의 실력은 조금 뒤떨어지거나 혹은 나처럼 평이한 수준이었다. 그래서 다음과 같은 기준을 세워 주제를 정하기로 하였다. 수업에서 진행된 예제를 비슷하게 따라갈 수 있는 주제 쉬운 화면 구성 어렵지 않게 추가 요소를 고민해볼 수 있는 주제 2. 내가 고민한 주제 아무도 주제를 생각해올 것 같지 않아 전날부터 생각해본 팀 주제는 총 2개였다. 이때 로그인과 회원가입 절차는 기본적으로 포함되어 있다. 독후감 사이트 메인페이지 카테고리 개념의 다양한 독서 목록 => 이때 제공되는 정보는 책 제목, 작가, 출판일 책 상세 페이지 책 목록 중에서 택하면 보이는 화면 => 추가로 줄거리 및 사용자들이 작성한 독후감 목록이 나타남 독후감 작성 페이지 독후..

티스토리툴바