본문 바로가기

분류 전체보기

 (90)
addEventListener 사용법 addEventListener()는 document의 특정요소(Id,class,tag 등등..) event(ex - click하면 함수를 실행하라, 마우스를 올리면 함수를 실행하라 등등.. )를 등록할 때 사용합니다. const Div = document.getElementbyId("Box") Div.addEventListener("click", click) //아래와 같은 구조를 가진다. addEventListener("이벤트이름", 실행할 함수) 예를 들면, 위의 코드에서는 Div에 addEventListener()를 지정하여, Div를 클릭하면 두번째 인자의 click함수가 실행되는 형태이다. 아래는 자주 사용되는 addEventListener의 이벤트 종류이다. (외울 필요 없다. 그냥 필요할 때..
1.1 + 0.1 == 1.2 가 false인 이유 위 수식이 false인 이유를 알아보기 전에, 우리의 컴퓨터가 실수를 표현하는 원리에 대해 알아보면 좋을 것 같다. 컴퓨터는 0과 1로 이루어진 2진법으로 데이터를 저장한다. 그리고, 정수뿐만 아니라 소수가 포함된 실수또한 2진법으로 저장해야한다. 이렇게 실수를 표현하는 방식은 두 가지로 나뉜다. 고정 소수점 방식과 부동 소수점 방식 고정 소수점 방식(fixed-point) 고정 소수점 방식은 메모리를 정수부와 소수부로 고정으로 나눈다. 소수부의 자릿수를 미리 정하고 고정된 자릿수의 소수를 표현하기 때문에 직관적이다. 직관적이나, 표현가능범위가 매우 작다. 컴퓨터는 효율성과 공간낭비방지를 위해 부동 소수점 방식을 사용한다. 부동 소수점 방식(floating-point) 부동 소수점은 고정 소수점 방식과는..
리액트 geolocation으로 내 위치 좌표값 가져오기 처음에는 너무 신기했다. 내가 있는 위치를 좌표값으로 어떻게 가져오지?? 주위에 있는 유/무선 공유기, 휴대전화 기지국, 각종 네트워크 장비들로부터 획득한 위치 정보 데이터를 사용해서 자신의 위치를 계산해준다고 한다. 그래서 내가 있는 곳의 네트워크 또는 통신 상태에 따라서 위치 정보가 부정확할 수 있다고 합니다. 물론 단말기에 GPS 모듈이 있는 경우에는 비교적 정확할 것이다. 아래는 geolocation을 사용하는 방법이다. 내 위치를 좌표값으로 가져오기 위해서 위와 같은 함수를 불러온다. 그냥 복붙해서 사용하면된다. navigator.geolocation.getCurrentPosition(success, error, options); 위의 (success, error, options) 세 가지 인자..
Socket.io 연결이 안될 때, 확인해봐야 할 것 (소켓 중복, Cors) 아래는 평소 node.js에서 cors를 해결하는 방식이다. app.use(cors(corsOptions)); 하지만, Node 라이브러리 중 "Cors"라이브러리는 Socket.io에서 발생한 Cors를 해결할 수 없다. (Server-Side) 그래서 아래와 같이, Socket.io 코드로 명시적으로 작성해주어야 한다. var socket = io.connect(`채팅서버 주소`,{ cors: { origin: '*' } }); (Client-Side) 혹시나 다른 컴포넌트에서 소켓이 쓰이고 있지는 않은 지, 확인해보자. 필자 같은 경우에는, 서버단에서 Cors문제는 해결이 됬는데, 채팅이 안되거나 2분 뒤에 도착하는 상황이 벌어졌었다. 파일 하나하나를 뒤져보니, 초반에 소켓을 연결하려고 미리 만들어..
슬랙클론코딩 도전 (2022.10.28 ~ 2022.11.03) 항해99 클론코딩주차였다. 주어진 기간은 일주일이였고, 프론트2명 백엔드3명으로 팀이 이루어졌다. 일단 나름 한 번 협업을 해봤다고, 협업이 익숙해지고 편안해지기 시작했다. 이번주는 처음으로 팀원들과 오프라인 만남을 가져보았고, 1박2일동안 코딩도 하고, 맛난 것도 많이 먹었다. 슬랙을 클론하기로 결정한 이유는 넷플릭스로 방향을 잡아보려 했으나, 생각보다 간단하고 themoviedbAPI를 이용하면 백엔드와 교류할 필요도 없을 것 같아서 넷플릭스에서 슬랙으로 경로를 바꾸었다. 아마 유명한 마켓컬리나 에어비앤비도 생각보다 심심했을 거라고 생각한다. (기능적으로 특별한 부분이 없기때문에?_) 슬랙은 그래도 기존까지 우리가 해왔던, CRUD에서 조금 벗어나 웹소켓을 써볼 기회가 있어 재미있었던 것 같다. 일주..
항해 4주차 리액트 Todolist 중간과정 중간과정이라기에는 너무 완성에 가깝긴 하지만, 늦게나마 이렇게라고 과정을 남겨야 겠다. 그래도 아직 목요일까지 2일정도 남아있으니까, 좀 더 기능을 추가하고 스타일 좀 다듬어야겠다. 저번 과제도 똑같이 투두리스트였는데, 이번에는 redux를 사용해서 똑같은 기능을 구현하는 것이였다. 아무래도 prop을 사용하지않고, 내가 원하는 데이터가 전역객체니까 좀 더 편했던 것 같기도 하다. 그냥 원할때마다 데이터를 가져올 수 있으니까? 아직도 약간 찝찝한 점은, 수정기능을 추가하긴 했는데 좀 더 간결한 코드를 작성할 수 있을 것 같은 느낌이 든다. 해당 아이디에 해당하는 객체에만 데이터를 덮어씌우면 끝나는 일인데, 그게 생각보다 잘 안되었다. 그래서 해당아이디 값을 지우고, 새로우 값을 넣어 새로운 배열을 만들어..
Uncaught TypeError: Cannot assign to read only property '0' of object '[object Array]' at Array.sort (<anonymous>) state값을 컴포넌트로 가져와서 정렬해서 사용하고싶었는데, 위와 같은 오류가 발생하였다. 원본배열이 깊은 복사가 아닌, 얕은 복사일 때 이러한 오류가 나타난다고 한다. (배열이 고정된 상태이기 때문이라고함) 그래서 위와 같이, 스프레드 연산자를 이용해서 깊은 복사를 해준 뒤, 정렬하니 잘 작동하였다! 아까 위에서 배열이 고정되어있어 복사를 해주어야 한다고 했는데, 그에 대한 구체적인 답변은 아래 스택오버플로우를 참고하자. https://stackoverflow.com/questions/53420055/error-while-sorting-array-of-objects-cannot-assign-to-read-only-property-2-of/53420326
항해 3주차 리액트 사용하기 항해 3주차에는 리액트를 사용해서 투두리스트를 만들어봤다. 처음에는 너무 익숙치않아서 힘들었는데, 역시나 일주일이 지나니 익숙해진다. 리스트에 투두리스트가 나타나는 것 말고도, 시간이 조금 남아서 로컬스토리지에 데이터저장까지 시도해보았다. 브라우저마다 5mb정도의 데이터를 저장할 수 있으니, 유용하게 사용될 것 같다. 항상 새로고침되면 데이터가 날라가서 짜증났는데, 너무 좋다. 데이터가 잘 들어오고 있다. 보내줄 때 , 객체를 JSON으로 바꿔주고 다시 받아올때는 JSON을 객체로 바꿔준다. 코드는 그냥 아래 두가지만 사용하면 된다. JSON.stringify JSON.parse 이번 과제에서도 CSS를 사용함에 있어, 조금 헤맸던 것 같다. 그냥 마구잡이로 복붙하고, 라이브러리를 사용하다보니 CSS기본..

티스토리툴바