본문 바로가기

전체 글79

자바스크립트 프로토타입 개념이 어려운 사람들을 위해 📋 목차 서론 함수 객체의 내부구조 프로토타입(prototype)과 프로토(proto), 프로토체인이 뭐야? 왜 사용하는거야? 코드의 재사용, 상속에 대하여 참고자료 ✔️ 서론 자바스크립트를 막 공부하기 시작한 자린이(자바스크립트 어린이) 분들이나, 자바스크립트에 대해 깊이 공부 해보신적 없는 모든 분들 중에 혹시 프로토타입을 잘 모르고 계신다면 읽어보시면 좋을 것 같습니다. 잘못된 정보나 피드백, 이해하기 어려운 부분이 있으시면 댓글 부탁드립니다. ✔️ 함수 객체의 내부구조 Javacript 에서는 함수를 정의하고, 파싱단계에 들어가면, 내부적으로 수행되는 작업이 있습니다. 아래와 같은 함수를 정의할때 어떤일이 벌어지는지 한번 알아보겠습니다. function Dog() {} 1.해당 함수에 Constr.. 2021. 3. 1.
NODE.JS 기반으로 알고리즘 풀때 입력받는 방법 서론 알고리즘 사이트는 여러가지가 있는데 프로그래머스 나 leetCode와 같은 사이트는 자동으로 입력을 처리해주고 함수내 알고리즘 코드만 작성하면 되는거라 입력받는 것에 대한 고민은 따로 안했었습니다. 근데 이번에 백준으로 알고리즘 풀어보면서 NODE.JS 기반이라 입력을 따로 처리 해줘야 해서 좀 번거로운 것 같단 생각을 했습니다. 익숙하지도 않고요 ㅜㅜ 그래서 백준에서 JS로 알고리즘 풀 때 입력처리를 어떻게 해야하는지 좀 알아보도록 하겠습니다. readline 모듈 사용하기 우선 모듈은 readline 모듈을 사용하도록 하겠습니다. 여러가지 방법이 있던데, 이번시간에는 readline으로 알아보겠습니다.(근데 이 모듈이 런타임 에러를 발생시킬 수도 있다네요 확실히 엄청 느립니다 ㅜㅜ) 한줄 입력 .. 2021. 2. 26.
Error 정리: React-Uncaught SyntaxError: Unexpected token < 리액트로 프로젝트 후 빌드를 하고 나면 React-Uncaught SyntaxError: Unexpected token 2021. 2. 24.
leetCode1315. Sum of Nodes with Even-Valued Grandparent - 문제: [Sum of Nodes with Even-Valued Grandparent](https://leetcode.com/problems/sum-of-nodes-with-even-valued-grandparent/) - 난이도: leetcode 기준 Medium 문제 해설 짝수조부모를 가진 노드의 합을 구하는 문제 였는데 Medium 치고 난이도가 높지는 않았다. 애초에 모든 노드를 checking을 했어야 해서 단순하게 BFS or DFS로 탐색을 하면 되는문제 였다. 난 DFS로 풀었다. root로 들어오는 트리노드는 아래와 같이 만들어졌다. ** * Definition for a binary tree node. * function TreeNode(val, left, right) { * this.. 2021. 2. 20.
WebSoket (stompJS+React) 채팅 이번에는 채팅은 어떻게 구현되는지, 어떤 기술이 사용되는지 함께 알아보도록 하겠습니다. 🖐🏻 잠깐! 스프링+리액트 조합의 채팅을 구현하는 포스팅 중 일부입니다. (stomp, soket.js) 저는 프론트를 맡고 있고 스프링을 다룰 줄 몰라 스프링 코드는 제공하지 않습니다. 하지만 기본 개념을 같이 다루어보며 DB 구조와 채팅 구현이 어떻게 이루어지는지를 알아보겠습니다. ✍🏻 목록 웹소켓? 그게 뭐야? 웹소켓 프로토콜 우리가 선택한 DB 구조 웹소켓 클라이언트 만들기(with React) 참고자료 🙋🏻‍♀️ 웹소켓 ? 그게 뭐야? 기본적으로 클라이언트와 서버의 관계는 stateless 하게 이루어져 있습니다. 즉 클라이언트에서 Request 를 날리면 서버에서 Response 하는 과정으로 이루어져있습니.. 2021. 2. 14.
React-virtualized 로 보이는 부분만 렌더링 하여 최적화 시키기 React + React-virtualized 를 조합한 무한 스크롤링 구현에 대해 다루고 있습니다.목차무한스크롤링이란 무엇인가?무한스크롤링을 개선하는 두가지 방법리액트에서 무한스크롤링 최적화를 도와주는 React-virtualized 사용해보기무한스크롤링이란 무엇인가 ?여러분들도 한번쯤은 무한 스크롤링 처리가 되어있는 웹사이트를 이용해보신 경험이 있을 것 입니다.보통 컨텐츠를 로드할때는 수천 수만개의 컨텐츠를 한번에 로드 하는 것이 아닌,사용자가 스크롤을 내릴때마다 10개 씩 20개씩 불러옵니다.무한 스크롤 자체의 구현은 그리 어렵지 않았습니다.내 스크롤이 창 아래에 닿으면 새로운 게시물을 불러오면 됩니다.하지만, 로드한 컨텐츠가 많아지면 많아질 수록 리플로우의 계산횟수가 많아지기에 렌더링 속도는 더욱.. 2021. 2. 12.