IT's 우

1. 프로젝트 생성하고 필요한 라이브러리 설치 1) 프로젝트 생성 yarn create react-app 프로젝트명 2) 필요한 라이브러리 터미널에 설치 yarn add sass-loader sass classnames react-icons open-color - sass-loader: scss 파일을 사용하기 위해서 설치 - sass : scss 파일을 사용하기 위해서 설치 - classnames : css를 작성할 classname을 편리하게 작성하기 위한 라이브러리 - react-icons : 아이콘을 사용하기 위한 라이브러리, https://react-icons.github.io/react-icons - open-color : 색상을 직접 값으로 설정하는 것이 아니고 색상 이름과 정수 1개의 농도..

자바스크립트의 데이터 타입(원시 값, 참조값) - 원시값 기본 자료형(단순 데이터) Number, String, Boolean, Null, Undefined 등 변수에 원시 값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장됨. 할당한 변수를 조작하려고 하면 저장된 실제 값이 조작됨. - 참조값 여러 자료형으로 구성되는 메모리에 저장된 객체 -> Object, Symbol 등 해당 변수에 객체를 저장하면 독립적인 메모리 공간에 값을 저장하고, 변수에 저장된 메모리 공간의 참조(위치 값)를 저장하게 됨-> 그래서 할당된 변수를 조작하는 것은 사실 객체 자체를 조작하는 것이 아닌, 해당 객체의 참조를 조작하는 것. 깊은 복사 깊은 복사된 객체는 객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 ..

props 상위 컴포넌트가 하위 컴포넌트에게 데이터를 넘겨주고자 할 때 사용 - props는 properties를 줄인 표현으로 상위 Component에서 하위 Component의 속성을 설정할 때 사용하는 요소 - props 값은 해당 Component를 불러와 사용하는 부모 Component에서만 설정할 수 있음 - props 값 설정 및 검증 - 상위 Component에서는 시작 태그 안에 이름=값의 형태로 설정 - 함수형 Component 에서는 첫 번째 매개변수로 전달되고 클래스형 컴포넌트의 경우에는 객체 안의 props라는 속성에 전달됨 state 컴포넌트 내에서 생성해서 수정과 삭제가 가능한 개체로 변경이 되면 컴포넌트를 리랜더링 ref 컴포넌트를 조작하고자 할 때 생성 filter 매개변수..

브라우저에 데이터 저장 1) 브라우저에 데이터를 저장하는 이유 불필요한 트래픽을 줄이기 위해서 메일 앱의 경우 매번 서버에 접속해서 서버의 데이터를 받아 노는 것은 자원의 낭비가 될 수 있습니다. 맨 처음 접속을 할 때는 데이터를 다운로드 받고(파일의 존재 여부를 확인) 다음부터는 마지막 업데이트된 시간을 비교해서 양쪽의 시간이 다르면 데이터가 수정된 것이므로 다운로드를 하고 양쪽의 시간이 같다면 업데이트된 내용이 없으므로 다운로드를 하지 않도록 구현 offline 상태에서도 데이터를 사용할 수 있도록 하기 위해서 2) 브라우저에 데이터를 저장하는 방법 Web Storage LocalStorage Map의 형태로 저장 SessionStorage Web SQL 관계형 데이터베이서(SQLites3- 외부에서..

1. Geo Location 1) 개요 디바이스의 물리적 위치 정보를 파악하기 위한 Javascript API 위치 정보 2) 위치 정보 사용 가능 여부 확인 navigator.geolocation의 값 확인 3) 위치 정보를 가져와서 한 번만 사용하기 navigator.geolocation.getCurrentPosition(위치 정보를 가져오는 데 성공했을 때 호출되는 함수, 위치 정보를 가져오는 데 실패했을 때 호출되는 함수, 옵션) 4) 위치 정보를 계속 가져와서 사용하기 let 변수 = navaigetor.geolocation.watchPosition(위치 정보를 가져오는데 성공했을 때 호출되는 함수, 위치 정보를 가져오는데 실패했을 때 호출되는 함수, 옵션)로 위치 정보를 계속해서 파악하고 cl..

데이터 표현 방법 서로 다른 방식의 컴퓨터에서 데이터를 주고받으려면 표준적인 포맷이 있어야 한다. Parsing: 가져온 데이터를 해석하는 과정 서버 입장에서는 이 데이터 표현방식을 데이터를 만들어서 제공하는 것이 중요하고 클라이언트 입장에서는 이 데이터를 파싱 해서 출력하는 것이 중요하다. DTD: HTML이나 XML은 브라우저가 해석하기도 하고 설정에 이용하는 경우에는 설정을 만든 곳에서 해석을 해야 하는데 이 해석하는 위치를 DTD라고 한다. 1) 텍스트 일반 문자열 구분 기호를 가지고 구분할 수 있도록 만든 포맷을 csv라고 한다. 변하지 않는 데이터를 제공하고자 할 때 주로 이용 용량이 작기 때문 2) XML 태그 형식으로 데이터 표현 해석을 개발자가 한다는 것이 HTML과 다른 점 설정이나 데..

개념 JavaScript는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한 번에 처리하는 데도 한계가 있음 ES6에서는 비동기 처리를 위한 또 다른 패턴으로 Promise를 도입 Promise는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있음 CallBack Hall 비동기 처리를 위해 콜백 패턴을 사용하면 처리 순서를 보장하기 위해 여러 개의 콜백 함수가 네스팅(nesting, 중첩)되어 복잡도가 높아지는 콜백 헬이 발생 Promise는 Promise 생성자 함수를 통해 인스턴스화하며 Promise 생성자 함수는 비동..