본문 바로가기

모두 보기

 (96)
[번역] React Components, Elements, 그리고 Instances 2020. 4. 22. 13:07 본 포스트는 Dan Abramov의 React Components, Elements, and Instances를 번역한 글입니다. 많은 사람들이 React에서 components와 컴포넌트의 instance, 그리고 elements를 혼동합니다. 왜 화면에 그려지는 무언가를 의미하는 각각 다른 세 개의 용어가 있을까요? 당신이 React를 처음 접했을 때 아마 컴포넌트 클래스와 인스턴스만 사용해서 개발하였을 겁니다. 예를 들어, 당신은 클래스를 생성해서 Button 컴포넌트를 선언했다고 합시다. 프로그램이 실행되었을 때, 아마 이 컴포넌트의 여러 인스턴스가 있고, 각각은 인스턴스만의 고유한 props와 지역 state가 존재할 것입니다. 이것은 전통적인 객체 지향 UI 프로그래밍입니다. 그럼 elemen..
06. 프로토타입 2020. 4. 16. 15:24 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. 2019년 6월 NHN OOP 교육에서 배운 프로토타입 내용 또한 첨가하였습니다. 2022-02-20 추가 이전에는 JS는 객체지향프로그래밍의 상속을 구현하기 위해 프로토타입을 지원한다고 생각했는데, 지금 읽어보니 전혀 아니다..!! 프로토타입, 즉 원형이 되는 객체를 기반으로 하되, 문맥(context)에 따라 의미를 다르게 가져갈 수 있음을 구현한 것이다. 임성묵 개발자님의 자바스크립트는 왜 프로토타입을 선택했을까 참고 복기하기 전 주절주절... 이 책을 세 번 읽으면서, 또 OOP 문제를 내·외부에서 설계해보면서도 프로토타입이란 개념은 ..
05. 클로저 2020. 4. 12. 20:47 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. 1. 클로저의 원리 MDN에서는 클로저를 다음처럼 설명하였다. A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). 클로저는 원리를 알아야 그 의미를 이해하기 수월하다. 다음 예시를 보면 var outer = function () { var a = 1; var inner = function () { console.log(++a); } inner(); ..
[HackerRank] Sherlock and Anagrams (Javascript) 2020. 4. 11. 01:26 요즘 머리 환기 겸 간간히 코딩 테스트를 연습하고 있는데 문자열 관련한 문제를 풀던 중 중요한 사실을 하나 알았다. 우선 문제는 다음과 같다. 문제 설명. 주어진 문자열의 부분 문자열 중 Anagram의 개수를 찾는 것. ※ Anagram: 문자열의 길이와 포함된 문자의 개수가 같은 두 문자열의 집합 예를 들어 'abba'이면, [a, a], [b, b], [ab, ba], [abb, bba]가 Anagram이므로 4를 리턴해야 한다. 출처. https://www.hackerrank.com/challenges/sherlock-and-anagrams/problem 아무리 머리를 싸매도 O(n^4)밖에 생각이 안나서 Brute Force로 풀었다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ..
[리액트] Hook 렌더링 최적화 실무 적용기 2020. 4. 9. 16:47 최근에 Daily DevBlog에서 useCallback과 React.memo을 통한 렌더링 최적화에 관한 글을 읽었다. 글을 읽고 깨달은 것은 내가 지금까지 useCallback을 잘못 사용하고 있었다는 점이었다. 마침 챗봇 빌더의 설정 페이지를 시작으로 점차 렌더링 최적화를 적용해나갈 계획이었기 때문에 이를 수정하고자 한다. 더불어 리액트 훅 기반 프론트엔드 개발 시 주의할 점에서 state는 독립적으로 설정해야 하는 점 또한 적용할 것이다. 1. useCallback과 React.memo와의 관계성 우선 공식문서를 꼼꼼히 읽으면서 useCallback의 올바른 쓰임새부터 파악했다. 이것은, 불필요한 렌더링을 방지하기 위해 (예로 shouldComponentUpdate를 사용하여) 참조의 동일성에 의..
[리액트] Toast 알람 구현 (2) 2020. 4. 7. 16:20 3/31일에 Toast 알람을 custom hook으로 한 파일 내에서 구현을 하였다. 그러다 보니 해당 컴포넌트를 함수 실행으로 가져온다거나, 컴포넌트 업데이트를 위한 별도의 state를 두는 등의 좋지 않은 패턴을 썼었다. 저번 포스팅에서의 개선점들을 다시 열거하자면, 1. ToastContainer를 함수로 쓰는게 거슬린다! 로 쓰고 싶다 ㅠㅠ 2. setInterval()이 성능에 영향을 줄 거 같다. 따라서 시각적인 변화는 requestAnimationFrame의 콜백함수에서 해결하고 싶은데 가능할까? 3. trigger state말고 ToastBox 업데이트를 할 수 있는 방법을 찾아보자. 등의 고려 사항이 있었다. 따라서 오픈 소스 라이브러리인 react-toastify 소스 코드를 분석해보..
TDZ (Temporal Dead Zone)이란? 2020. 4. 6. 11:45 본 내용은 Don't Use Javascript Variables Without Knowing Temporal Dead Zone을 번역한 'TDZ를 모른 채 자바스크립트 변수를 사용하지 말라' 글을 기반으로 요약한 글입니다. [출처] TDZ를 모른 채 자바스크립트 변수를 사용하지 말라 TDZ을 모른 채 자바스크립트 변수를 사용하지 말라 간단한 질문을 하나 하겠다. 아래 코드 스니펫에서 에러가 발생할까? 첫 번째 코드는 인스턴스를 생성한 다음 클래스를 선언한다. ui.toast.com 1. TDZ란? 변수 선언 이전에 변수를 참조하는 영역. 해당 영역에서 선언 이전에 참조한 변수는 참조 에러가 발생한다. 즉, TDZ에 영향을 받는 변수는 선언 이전에 참조하는 것을 금지하고 있다. TDZ가 자바스크립트에서 ..
04. 콜백 함수 2020. 4. 4. 15:44 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. 1. 콜백함수란? 콜백함수는 어떤 함수의 인자로 활용되어, 그 제어권또한 함께 위임받은 함수다. 우리가 흔히 addEventListener, forEach와 같은 반복 메소드 등의 첫번째 인자로 넘기는 함수가 곧 콜백함수로, 원하는 시점(버튼 클릭 등)에 특정 함수를 호출할 수 있도록 할 수 있다. 2. ★ 콜백함수는 함수다. 너무 당연한 말이지만 이는 매우x100 중요한 의미이다. 다음의 메소드를 콜백함수로 넘기면 (1)과 (2)의 this는 각각 무엇일까? var obj = { name: "juj", func: function (val, ..
[리액트]크로스 브라우징 이슈 해결 경험기 2020. 4. 3. 00:44 처음 챗봇 빌더 서비스를 기획할 때 IE10, 11, Edge까지 지원하는걸 목표로 잡았다 따라서 polyfill을 맞춰주는 babel 로더를 웹팩 로더에 추가하여 기본 크로스 브라우징은 설정하였으나 그럼에도 레이아웃이 틀어지거나 원하는 대로 기능이 동작하지 않는 등의 이슈가 있어 정리해서 다음에도 유의해야 겠다. 가장 예전에 했던 크로스 브라우징 이슈부터 정리하였다. [목차] 1. input focus를 잃는 현상 2. IE10에서 z-index 어긋나는 현상 3. flex 속성 미적용 4. css var() 미지원 5. 기타 이슈 1. input focus를 잃는 현상 원인: 리액트 컴포넌트 라이프 사이클로 인한 rerendering 2019년 6월 1차 고도화가 끝나고 첫 리팩토링 때 발생했던 이슈..
[리액트] Toast 알람 구현 (1) 2020. 3. 31. 21:50 현재 챗봇 빌더에 구현되어있는 Toast 메세지는 직접 구현한 부분이다. 다만 단점은 여느 라이브러리처럼 여러 개가 뜨는 형식이 아닌 하나만 뜰 수 있는 구조로 구현된 상태였다. 그리고 컴포넌트와 기능 부분을 나눈다고 뷰와 컨트롤러 부분이 각각 /components 와 /helpers에 구현했는데 따로 불러와서 쓰는게 어색했다. 따라서 이번에 Toast 알람을 개선하는 것을 Task로 잡고 시도했었다. 마침 최근에 본 기술 인터뷰 때 받은 테스트에서 유사한 요구사항을 가지고 있어 이것을 집에서 다시 풀면서 어느정도 아이디어를 얻을 수 있었다. (정작 테스트볼 때는 이렇게 못풀었어서 아쉽다...ㅠ 함수형 프로그래밍에 익숙해져 있던 탓인지 OOP로 풀 생각을 못함..U_U) [요구 사항] 1. 여러 개의 T..
세 번의 프론트엔드 기술 면접 후기들 2020. 3. 30. 16:00 2020.08.24. 이 글은 3월 말에 막 이직 준비를 시작했을 때 썼던 글이다. 지금은 이직해서 새로운 환경에서 적응 + 근무 중이라 이제 이 글을 공개해도 될 거 같다 :) 이 때는 공부가 더 안된 상태에서 봤던 라이브 코딩들이라 내 무식함이 부끄럽지만 앞으로 이직 준비하시는 분들께 도움이 된다면야....! 결과는 이랬다. 첫번째. 라이브 코딩 합격 > 최종 불합격 두번째. 라이브 코딩 불합격 세번째. 라이브 코딩 합격 > 최종 합격 ※ 후회, 자책 주의 2020.03.30. 최근에 봤던 세 번의 경력 면접을 보면서 느낀 점과 앞으로는 어떻게 해야겠다를 정리하였다. 기업 규모와는 관련없이 라이브코딩은 다들 보는 추세인거 같다. 그런데 세 번 모두 유형이 달라서 아주 신비롭다. 비록 다 떨어졌지만[1..
해쉬 테이블 2020. 3. 29. 23:00 해쉬테이블은 자바스크립트의 객체, 브라우저 기본객체인 로컬스토리지 등에 사용된 자료구조라 잘 알아야 한다. 해쉬테이블은 key를 해싱(hashing)하여 해쉬 코드로 변환 후 해당 코드의 위치에 값을 저장하는 테이블로, key를 알면 해싱함수를 통해 삽입, 삭제, 검색을 바로 수행할 수 있어 O(1)의 시간복잡도를 가진다. 해쉬테이블에서 중요한 건 해싱 함수인데 해싱 함수는 다음 세가지 성질을 지녀야 한다. 1. 같은 입력값에 대해 항상 같은 출력값을 계산 2. 시간 복잡도는 O(1)이어야 함 3. 배열 내 인덱스를 고르게 분포할 수 있게끔 계산 다른 key라도 해싱함수에 따라 같은 해쉬 코드로 변환될 수 있는데 이를 충돌이라고 한다. 충돌을 해결하는 방법으로는 크게 개방 주소법(Open Addressi..

티스토리툴바