분류 전체보기
-
2020.07.16되돌아보기중 part2TIL 2020. 7. 17. 15:26
여러 단계를 지나오면서, 객체.. 객체을 잘 사용할수 있는가 라고 물어보면.. 항상 NO 였다. 그 부분을 명확히 느낀 것은 ES6 destructing 을 접하고 부터다. 그 질질 끌고온 부분을 다시 정리해보려 한다. 구조분해할당 배열과 객체 //배열 구조분해할당 data = ['apple', 'banana', 'carrot', 'egg', 'fru'] let [a,,,b] = data; console.log(a) //apple console.log(b) //egg let [...list] = data; console.log(list) //['apple', 'banana', 'carrot', 'egg', 'fru'] let obj = { name : 'jake', age : 29, phone : 010..
-
2020.07.16되돌아보기중 part1TIL 2020. 7. 16. 16:01
이번 web HA를 진행하면서, 내가 클릭이벤트에 대해 이해하고 있는가에 대해 생각해보았다. 그래서 단순한 클릭 이벤트를 작성해보고, var & let 의 차이 closure 에 대한 부분을 다시 생각하며 상기 해보고 있다. 익숙하다면 거침없이 사용했어야 했다고 생각하지만, 이번에 어버버하다가 적용하지 못했다는 것이 마음에 걸려 다시 확인해보았다. 반복문에 대한 이해도 체크. let data = [1, 2, undefined, NaN, null, 'a', '' ] // for(let i=0; i{ // console.log(value) // }) //for in 은 배열에서, 상위 prototype에 추가가 되었을때, //추가적으로 출력해주므로 사용하지않는 것을 추천 // for(let value in ..
-
2020.07.08카테고리 없음 2020. 7. 10. 01:19
React 웹페이지를 살펴보면 유저와의 다양한 상호작용이 존재한다. 이 상호작용 중 버튼 클릭을 예시로 들어보고자 한다. 웹페이지에서 버튼을 클릭 시, 배경화면 바뀌는 버튼이 있다고 해보자. 바꿀 이미지 DOM을 찾고, 소스를 바꿀 이미지로 변경, 바뀐이미지를 띄워주는 작업이 필요하다. 이렇게 관리해야 할 DOM이 많아질수록 관리하기가 어려워진다. 이런 관리문제를 최소화 하고, 기능개발에 집중하기 위해, 리액트 뷰 앵글러와 같은 라이브러리, 프레임워크를 사용하게되었다고한다 리액트는 컴포넌트(하나의 의미를 가진 독립적인 단위모듈)라는 개념에 집중하고 있는 프론트엔드 라이브러리이다. 컴포넌트 - 하나의 의미를 가진 독립적인 모듈 리액트는 컴포넌트 단위로 개발을 진행한다 Component - 리액트에서는 화면..
-
2020.07.06~07 TILTIL 2020. 7. 8. 00:24
HTTP NETWORK TAB으로, 요청과 응답을 확인 실제로 구글 사이트를 네트워크 검사 네트워크 탭에서, 새로고침으로 하나 골라서, 헤더의 response & request를 확인 응답 상태는 200 으로 OK 요청 메서드는 GET 으로 확인! HTTP statusCode & Method & Header : contentType & MIME - HTTP method GET : 특정 리소스를 받아와서 표시하는 것을 요청합니다. POST : 새로운 자원을 생성 PUT&PATCH : PUT(존재하는 자원들 모두를 변경) PATCH(존재하는 자원들 중 일부 변경) DELETE : 존재하는 자원 삭제 OPTIONS : 목표자원과의 통신 옵션을 설명하기 위해 사용 됩니다. **OPTION method 요청에 대..
-
2020.07.06 TILTIL 2020. 7. 6. 23:49
JSON.parse - 이 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JAVASCRIPT 값이나, 객체를 생성 - 선택적으로, reviver함수를 인수로 전달할 경우, 결과를 반환하기 전에 변형할 수 있습니다 JSON.stringify - 이 메서드는 JAVASCRIPT 값이나, 객체를 JSON 문자열로 변환합니다. - 선택적으로, replacer를 함수로 전달할 경우, 변환 전 값을 변형할 수 있고, 배열로 전달할 경우 지정한 속성만 결과에 포함합니다.
-
2020.07.02~03 TILTIL 2020. 7. 4. 17:56
Elements of Web Architecture browser : HTML,CSS,JAVASCRIPT로 작성된 코드를 내부 엔진(해독하는 역할-코드를 이진수로 이진수를 코드로)으로 해독하여 사용자가 쉽게 이해 할 수 있는 형태의 컨텐츠로 보여주는 역할을 한다. server : resource(자원)을 제공하는 주체, 클라이언트에서 자원을 요청(request)시, 응답(response)하여 자료를 제공합니다. API : 서버자원을 잘 가져다 쓸 수있게 만들어 놓은 interface -> 서버의 자원을 사용할 수 있는 메소드들의 모음 이라고 할 수 있다 HTTP (Hypertext Transfer Protocol) 클라이언트와 서버가 통신하기 위해 http라는 규약과 규칙을 지키면서 통신을 한다. htt..
-
2020.07.01TILTIL 2020. 7. 2. 00:57
TInteraction with Server ( = API를 활용해서 UI를 만드는 스프린트) 아래 다섯 단어를 내가 표현할 수 있어야 한다. browser server API HTTP Ajax Achievement Goals Web Architectures 클라이언트, 서버, API 가 무엇인지 정의 내릴 수 있다. 클라이언트 : 인터넷에 연결된 사용자의 디바이스 혹은 접근할 수 있는 소프트웨어, 터미널의 역할을 수행하는 컴퓨터, 사용자 입력을 주로 수행하며, 서버에 대한 응답을 화면에 표시 서버 : 자원(resource)을 제공하는 주체 - 클라이언트가 자원을 요청하면 해당 요청을 적절하게 처리하는 역할을 함, 웹페이지 지원이나 공유데이터의 처리 및 저장 등의 비즈니스 로직을 주로 수행한다. API ..
-
2020.07.01 TIL(array.sort)카테고리 없음 2020. 7. 1. 09:58
배열의 내용 자체를 오름차순 및 내림차순으로 정리하는 sort라는 메서드를 사용해 보았다. 기존배열의 변형을 피하기 위해 slice하여, sort를 진행하였다. let newArr = [65,2,74,1,867,234] var sort1 = newArr.slice(0).sort(function(a,b){return a-b}) //[1, 2, 65, 74, 234, 867] var sort2 = newArr.slice(0).sort(function(a,b){return b-a}) //[867, 234, 74, 65, 2, 1]