분류 전체보기
-
Data Structure(자료구조) - Dictionary(Object)Trainings/세션 정리 2020. 5. 22. 10:00
Dictionary란? : key - value 형태의 값을 저장할 수 있는 자료구조를 말한다. JavaScript에서는 이를 Object(객체)라 부른다. ex) 이름 : '박보검' 이름은 박보검 등 실제 데이터 값과 데이터를 설명하는 key의 대응 관계를 표현할 때 유용하다. Dictionary의 특징 - Set과 마찬가지로 특정 순서대로 데이터를 리턴하지 않는다. - 수정(mutable)이 가능하다. - Key의 값은 중복될 수 없다. 만약, 중복된 key값이 있다면 먼저 있던 key와 value를 대체한다. Dictionary의 내부 구조 - Set와 비슷하게 Dictionary(Object) 활용 방법 1. 데이터가 주어지거나 딕셔너리의 내용이 고정되어 있는 경우 사용되는 방법 // dictio..
-
Data Structure(자료구조) - 자료구조 - SetTrainings/세션 정리 2020. 5. 21. 12:00
Set은 원래 ES6가 등장하기 이전에는 자바스크립트 자체는 set을 구현하고 있지 않았다. ES6가 등장하고 Set이라는 것이 나오고 set은 데이터 타입 중의 하나인데, 중복되는 값을 가지지 않는 값들의 리스트를 말한다. 대신 객체 형식으로 반환된다. 배열과 set의 차이점 배열보다 set이 더 빠르다. Set이란? Set은 array나 list처럼 순열 자료구조이며, 순서라는 개념 또한 존재하지 않는 순열 자료구조를 의미한다. Set의 특징 - 데이터를 비순차적으로 저장할 수 있는 순열 자료구조이다. - 삽입 순서대로 저장되지 않기 때문에 특정한 순서를 기대할 수 없다. - 동일한 값을 여러 번 삽입이 불가능하고, 만약 동일한 값이 중복 저장될 경우 하나의 값만 저장된다. set을 만들 때new S..
-
React - 메인 페이지 기능 구현React/기본 2020. 5. 20. 10:00
Assignment 메인 페이지 - 사용자가 댓글 입력 후 Enter를 누르거나 왼쪽의 버튼 클릭 시 댓글이 추가되도록 구현해주세요. 피드 컴포넌트는 인스타그램에서 피드에 해당하는 부분이다. 바로 이 부분이다. Feed.js 댓글 구현할 부분은 이 부분이다. Comment.js 먼저 사용자가 먼저 댓글을 입력했을 때를 생각해보자. 일단 state안에 commentList: [], commentText: "", userId: "ljtaek2"ljtaek2"라는 값을 미리 초기화를 시켰다. input 태그에 무언가를 입력하는 순간 onChange 이벤트 핸들러가 실행되고, commentState라는 함수가 실행된다. commentState 함수 안에서 event를 이용해서 해당 input값을 setState..
-
React - 로그인 페이지 기능 구현React/기본 2020. 5. 19. 10:00
로그인 페이지의 기능을 구현해보자! Login.js 1. import React from "react"; : react 라이브러리에서 react의 함수나 클래스들을 가져와서 그 기능을 사용하려고 하는 구문이라고 보면 된다. import { withRouter } from "react-router-dom"; : "react-router-dom"은 DOM에 접근하고 DOM이 인식할 수 있는 컴포넌트들만 뺀 라이브러리이다. "react-router-dom" 안에 있는 withRouter라는 2. class Login extends React.Component { render(){ return(); } } export default withRouter(Login); : class형 컴포넌트를 만드는 형식이다. ..
-
css - Sass의 네스팅 (nesting)CSS/SCSS 2020. 5. 18. 10:00
SaSS란? : CSS를 보다 효율적으로 편리하게 사용하기 위해 만들어진 언어이다. SaSS를 쓰는 이유 : 리엑트는 index.js와 index.html로 여기서 각종 컴포넌트들이 합쳐지기 때문에 방대한 양의 css의 class이름들이 겹쳐서 오류가 난다. 하지만, SCSS의 네스팅(nesting) 기능을 사용하면 오류가 나지 않을 것이다. 그렇기 때문에 SCSS를 써야 한다. 예시로 알아보자. 소스는 여기서 확인! wjdxor133/westagram Contribute to wjdxor133/westagram development by creating an account on GitHub. github.com Login.css * { box-sizing: border-box; } body { back..
-
React - React의 탄생React/기본 2020. 5. 17. 12:00
React의 탄생 React가 생기기 전에 순수 자바스크립트를 통해 브라우저를 관리해왔다. 하지만, 순수 자바스크립트만으로는 대규모의 웹 프로젝트를 관리하기가 어렵고, 성능도 많이 떨어졌다. 이러한 문제들을 해결하기 위해 시간이 지나고 수많은 라이브러리(ex. React)와 프레임워크(ex. Angular, Vue.js)들이 나오기 시작했다. 그중 우리가 공부할 리액트는 페이스북 개발 팀에서 개발한 것이며, 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 만들어졌다고 한다. React와 다른 프레임워크의 차이 먼저, React와는 달리 Angular, Vue.js와 같은 프레임워크는 보통 MVC, MVW 아키텍처로 애플리케이션을 구조화한다. 이러한 구조들의 공통점은 모델(Model)과 뷰..
-
JavaScript의 반복문 종류Trainings/세션 정리 2020. 5. 16. 19:46
for 문 가장 대표적인 반복문은 for문이지만, for문을 이미 익숙해졌기 때문에 따로 정리하지 않는다. for문 이외에도 자주 쓰이는 반복문을 정리할 것이다. 1. for in 문 - 객체의 property에 루프를 실행한다. - 예제를 보면 idx에 배열의 값이 아닌 index가 담기는 것을 확인할 수 있다. 2. for of 문 - 배열에서의 값에 대한 루프를 실행하는 반복문이다. 3. forEach 문 - 함수의 parameter 값으로는 1. (value) -> 배열의 값 2. (value, index) -> 배열 값, 배열의 위치 3. (value, index, array) -> 배열 값, 배열의 위치, 배열 전체 , array를 쓰긴 하지만, 없어도 상관없다.
-
React - React의 routerReact/기본 2020. 5. 15. 12:00
Routing란? 간단히 말하면, 경로 이동 혹은 페이지 이동이라고 생각하면 된다. 예를 들어 사용자가 로그인을 위해 /Login에 접근했을 때, react-router는 로그인 페이지를 렌더링 해준다. 하지만, Create React App(CRA)에 특별히 routing(경로 이동)을 위한 로직이 들어있지 않기 때문에 따로 설치해서 사용해야 한다. 왜냐하면, React는 프레임워크가 아니라 오로지 뷰로만 이루어진 라이브러리 이기 때문에, 필요한 기능들을 따로 설치해서 사용해야만 한다. reacttraining.com/react-router/web/guides/quick-start React Router: Declarative Routing for React Learn once, Route Anywhe..