본문 바로가기

전체 글

 (133)
(HTTP/네트워크) Mixed Content Error: The request has been blocked because it requested an insecure HTTP resource 오늘은 Mixed Content Error: The request has been blocked because it requested an insecure HTTP resource 에러에 대하여 기록하고자 한다. POSTMAN으로 openweathermap에서 획득한 API Key로 서울의 기후 정보를 GET메소드로 요청하였다. 하지만 insecure HTTP 요청이라고 해서 POSTMAN에서 해당 request 자체를 하지 않고 있다. openweathermap 뿐만 아니라 다른 곳의 요청도 Mixed Content Error 로 처리되지 않고 있다. Mixed Content Issue http와 달리 https보안이 강화된 프로토콜이다. 그래서 https로 통신을 하다가 중간에 http로 연결이 발생..
TIL - 211101 [React] 상태관리 Achievement Goals 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다. Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다. Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다. Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다. Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다. Chapter 1 - 상태관리 1. 프론트엔드 개발에서의 상태관리 상태: UI에 동적으로 표현될 데이터 상태 변경이 일어나는 곳과 상태 변경의 영향을 받는 곳으로 구분 Side Effect : 상태를 ..
(Javascript) 크롬 개발자 도구 Local Storage 활용 구글 크롬 브라우저의 개발자 도구에서 Application 탭을 보면 왼쪽에 Local Storage라고 확인이 된다.로컬 스토리지는 쿠기나 세션과 같이 데이터를 저장하는 장소 중 하나이다. 로컬 스토리지의 데이터 저장 기간은 만료가 없고 항상 문자열로만 저장이 되어야 한다. 메소드 getItem : 로컬 스토리지에 저장되어 있는 데이터 값을 불러오는 메소드 setItem : 로컬 스토리지에 데이터를 저장하는 메소드 const greeting = document.querySelector("h1"); const yourName = localStorage.getItem("name"); if (yourName === null) { const name = prompt("이름을 입력해주세요."); localSto..
(Javascript) JSON 기본 1. 개념 Javascript(Javascript Object Notation)의 객체를 범용적으로 읽을 수 있는 문자열 형태로 변환 객체는 타입 변환을 통해 String 형 변환 할 경우 객체 내용이 포함되지 않기 때문에 JSON형태로 변환 필요 웹에서 데이터를 전송할 때 주로 사용 JSON에서 키와 속성은 오직 큰따옴표만 사용. 키와 값, 키-값 쌍사이에는 공백이 있으면 안됨 2. JSON.stringify let obj = { sender : 'holystory', receiver : 'KAKAO', date : '21.10.20', num : 1, } console.log(JSON.stringify(obj)) // '{"sender":"holystory","receiver":"KAKAO","dat..
(자료구조) [Graph] 인접 행렬 생성하기 Application Point metrix의 행렬 크기 변수 max 사용 metrix의 행렬 크기를 구하기 위한 식 이중 for문 사용하지 않음. curMax를 구할 때 Math.mat 함수의 인자에 edges[i]에 spread연산자를 활용하고 slice로 잘라주었음. 인접행렬을 생성하는 반복문 for 형태는 암기할 것. let matrix = []; for(let i = 0; i max) max = y; } } } for(let i = 0; i { if(e[2] === 'directed') { matrix[e[0]][e[1]] = 1; } else if(e[2] === 'undirected'){ matrix[e[0]][e[1]] = 1; matrix[e[1]][e[0]] = 1; } }) retur..
(CSS) 변형-2D Transform, CSS 좌표 체계 CSS3에서는 transform 속성을 사용하여 HTML 요소를 변형(transform)시킬 수 있다. transform에서 x, y, z 좌표를 사용한다. 좌표는 아래 그림과 같다. CSS 좌표체계에서 기준점은 브라우저의 왼쪽 상단이다. 이 기준점 각 축의 화살표 방향이 양의 방향이고, 반대는 음의 방향이다. Z축은 모니터에 있는 사용자의 방향을 가리킨다. transform의 메소드 translateY로 예를 들어보자. translateY(y)는 요소를 Y축을 기준으로 y만큼 이동시킨다는 의미다. y의 값이 양수일 경우 요소는 아래와 그림의 빨간선만큼 이동한다.
TIL 211006 - [자료구조/알고리즘] 재귀 보호되어 있는 글입니다.
(Javascript 에러) Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document' 트위터 클론 코딩 중이다. 게시물은 태그의 후손 선택자 로 열거되어있다. 리액트 onClick 이벤트 핸들러를 활용한 해당 게시물 삭제 기능을 구현하고 있다. 이벤트 핸들러 handleDeleteTweet로 value값 tweet.id를 전달하고 tweet.id의 값과 동일한 id 값을 가진 게시물을 (여기서는 삭제버튼을 클릭한 게시물) 변수 selected에 할당하고 삭제해주는 것이다. 이때 querySelector의 인자로 id를 넣어주었는데 SyntaxError 발생하였다. 해결방법을 찾아보았다. querySelector는 인자값으로 숫자를 받지 않는다고 한다. id는 고유의 값인데 숫자를 고유의 값으로 인식하지 않는다는 이유다. 그래서 id의 값이 숫자로만 이루어져있고 그 id값으로 태그를 선별해..

티스토리툴바