미래학자

최근에 코딩 인터뷰 완전분석이라는 책으로 이직을 준비하고 있습니다. 흔히 면접을 할 때, 어떤것을 준비해야할 지 모르는 경우가 많습니다. 그래서 무작정 인터뷰를 해봐라 라는 조언을 받습니다. 이건 정말 사실 입니다. 직접 면접의 분위기를 알고, 질문에 대해 대답을 해보는 연습은 매우 중요합니다. 그렇지만, 다양한 면접 상황을 실제 면접으로만 경험치를 쌓기에는 무리가 있기 때문에, 책을 통해 간접적인 경험을 얻는 것은 유용하다고 할 수 있습니다. 저는 코딩 인터뷰 완전 정복이라는 책을 통해 코딩 인터뷰를 학습해보았습니다. 간략하게 정리하기 때문에, 예시와 사례는 자세히 표시하지 않겠습니다. 만약, 필요하다면 책을 구매하셔서 자세히 보시면 도움이 될 것같습니다. 책이 800페이지가 넘는 분량이기 때문에, 저..

최근에 코딩 인터뷰 완전분석이라는 책으로 이직을 준비하고 있습니다. 흔히 면접을 할 때, 어떤것을 준비해야할 지 모르는 경우가 많습니다. 그래서 무작정 인터뷰를 해봐라 라는 조언을 받습니다. 이건 정말 사실 입니다. 직접 면접의 분위기를 알고, 질문에 대해 대답을 해보는 연습은 매우 중요합니다. 그렇지만, 다양한 면접 상황을 실제 면접으로만 경험치를 쌓기에는 무리가 있기 때문에, 책을 통해 간접적인 경험을 얻는 것은 유용하다고 할 수 있습니다. 저는 코딩 인터뷰 완전 정복이라는 책을 통해 코딩 인터뷰를 학습해보았습니다. 간략하게 정리하기 때문에, 예시와 사례는 자세히 표시하지 않겠습니다. 만약, 필요하다면 책을 구매하셔서 자세히 보시면 도움이 될 것같습니다. 책이 800페이지가 넘는 분량이기 때문에, 저..

이 글은 velog에 정리한 글을 가져온 것 입니다.본문 링크입니다.최근 프론트엔드 경력자 면접을 봤습니다. 리액트를 사용하는 프론트엔드 개발자를 구하는 자리기에 리액트 관련 질문을 예상했지만, 보기 좋게 빗나갔습니다. 질문의 대다수가 웹개발의 기본인 JS, CSS에 대한 질문이었고 설명을 하려니 잘 안되는 부분이 있었습니다. 제가 받은 질문 중 저 스스로도 잘 모르거나 헷갈렸던 질문들에 대해 정리를 해보았습니다.편의상 높임말을 사용하지 않고 작성하였습니다. 내용 중 틀린 내용이 있을 겁니다. 댓글로 알려주시면 찾아서 더욱 정확하게 수정하도록 하겠습니다.면접에 나왔던 질문DocTypemeta태그들script 태그의 위치이벤트 버블링, 이벤트 캡쳐호이스팅, 실행컨텍스트이벤트루프체이닝의 장단점DOM에서 id..

트리는 컴퓨터 구조에서 많이 사용하는 구조 입니다. 가장 대표적인 예로 파일 시스템이 있습니다.이진트리는 다음과 같은 구조로 되어 있습니다.하나의 노드는 자식노드를 최대 2개까지만 가질 수 있죠. 이진 탐색 트리는 이진 트리와 형태가 같으면서 한 가지 조건이 더 붙어 있습니다. 바로 왼쪽 자식 노드는 부모 노드의 수보다가 작은 값을 가지고오른쪽 노드는 부모 노드의 수 보다 큰 값을 가진다는 규칙 입니다. 위노드에서 그럼 중복된 숫자가 제거가 됩니다. 왜냐 하면 크거나 작지 않고 같은 값이기 때문에 위 규칙이 어긋나기 때문입니다. 그러면 조금 수정하면 위와 같은 형태가 되겠습니다. 제가 js로 구현한 코드는 아래와 같습니다.. 이진 트리는 insert, delete, search 모두 Log(N)의 복잡도..

stackstack은 FILO(first in last out) 형태의 자료구조입니다. 간단히 엘레베이터를 떠올리면 됩니다. 마지막에 탄 사람이 처음으로 나가겠죠? 문앞에 있으니 method 설명 push 새로운 아이템을 추가합니다. top 마지막에 추가한 아이템을 가르킵니다. pop 마지막에 추가한 아이템을 꺼냅니다. empty 스택에 아이템이 더 있는지 확인합니다. 간단히 네 가지 메소드가 있습니다. 여기서 헷갈리는것이 top과 pop의 차이입니다.간단히 말하면 pop은 마지막 아이템을 리턴하고 stack에서 제거합니다. top은 아이템을 리턴만 하게 되지요. 코드는 다음과 같습니다. Queuequeue는 FIFO(first in first out) 형태의 자료구조입니다. 간단히 은행 번호표를 생각하..

이번에는 연결 리스트를 js로 구현해보았습니다. 연결 리스트를 알고 계신다를 전제로,, 연결리스트의 스펙을 먼저 보겠습니다. method 설명 add(...arg) 새로운 아이템을 추가합니다. 인자가 하나 또는 두 개이며, 인자가 하나일 땐 해당 인자를 값으로 하는 아이템을 맨 마지막에 추가합니다. 인자가 두개라면, 첫 번째 인자는 추가될 인덱스고 두 번째 인자가 값이 됩니다. get(index) index에 위치한 Node를 반환합니다. 만약 해당 노드가 존재하지 않는다면 null을 리턴합니다. size() 아이템의 총 개수를 반환합니다. contains(value)리스트 내부에 해당 값을 갖는 노드가 존재하는지 여부 remove(index)인덱스에 존재하는 아이템을 제거합니다. 전체 코드는 다음과 같..

카운팅 정렬은 특정 문제 상황이 발생했을 때 효율이 굉장히 좋아진다. 간단한 예로 영어로 된 소설 하나를 알파벳순으로 정렬한 배열을 얻고 싶다할 때사용할 수 있다. 계수 정렬(counting sort)데이터셋은 다음과 같다. [ 1, 3, 4, 4, 1, 4, 3, 4, 0 ]위 데이터셋은 1 ~ 5까지의 값 중 하나다.가질 수 있는 값의 최대 값을 크기로 하는 배열C를 만든다. (여기서는 5가 최고값이므로 크기가 5인 배열을 준비한다.)나온 값의 갯수를 카운팅한다. C = [ 1, 2, 0, 2, 4 ] (0은 1개, 1은 2개, 2는 0개, 3는 2개 4는 4개)2에서 처럼 최대값을 크기로 하는 배열A를 만든다. 배열 A에는 누적합을 넣는다.누적합을 구한다. A = [1, 3, 3, 5, 9] A[k..

이번에는 js로 퀵 정렬과 합병정렬을 짜보았습니다. 개인적으로 C로 짰을때는 배열의 인덱스라든지 배열의 크기라든지 구현하는데 불편했었는데, js로는 고민없이 생각대로 짜는게 쉬웠습니다. (맞습니다. 저 배열의 인덱스 그런게 참 복잡해서 잘 못하고 싫어합니다.) 우선 합병 정렬은 배열을 계속해서 두 그룹으로 분할하고, 분할이 완료되면 두 그룹을 합칠 때 순서대로 합치는 방식 입니다. 코드를 보면, 조금은 복잡하게 느껴질 수도 있겠네요. 두 함수가 있습니다. 하나는 하나의 배열을 두 그룹으로 분할하는 함수고,또 하나는 두 배열을 정렬된 하나의 배열로 만드는 함수 입니다. 두 그룹으로 나눌때, 짝수라면 정확히 반반 나뉘겠지만, 홀수 일 때는 다른 크기의 그룹으로 나뉩니다. 그 처리를 위해 Math의 반올림 함..

js로 자료구조를 간단히 짜보려 한다. 그냥 단순히 리마인딩하기 위해 짜보는 거라 좋은 코드가 아닐 수 있다... 버블, 선택, 삽입 정렬은 빅오가 n^2이고, 간단하게 코드로 짤 수 있기 때문에 기본적인 정렬 아이디에서 자주 등장한다. 물론 자료가 많아지면, 매우 느린 단점이 있다. ( 어느정도 정렬된 형태면 그렇게 느리지 않지만,,) 버블 정렬 버블 정렬은 이웃한 아이템들을 비교하며 왼쪽 값이 더 크다면 자리 변경을 하는데, 이러한 동작은 계속적으로 반복 하여 정렬하는 방식이다. 최악의 상황은완전 반대로 값이 정렬되어 있을 때인데, 엄청 많이 반복해서 비효율이다. 선택 정렬 맨 왼쪽부터 시작해서 이후의 남은 값중 가장 작은 값을 골라 변경하는 정렬. 뭔가 인간이 사용하는 직관적인 정렬 방식 삽입 정렬..

React는 현재 프론트엔드에서 가장 인기 좋은 라이브러리 입니다. React외에 vue나 angular도 좋은 대안입니다.저는 JSX를 제외하면 표준 자바스크립트 문법을 적극적으로 사용하는 점이 마음에 들어서 React를 선택하게 되었습니다. 제가 React를 프로덕트 레벨에서 사용해보지 못해서 다른 분들에 비해 잘 모르는 것도 많고 틀린 개념도 많이 있을 수 있습니다.그런 부분은 계속해서 책을 보면서 업데이트 하는 것으로 하고 초보자의 관점에서 React를 시작하는 것에 대해 살펴 볼 생각입니다. React는 러닝 커브가 낮고 비교적 쉽다는 말을 합니다. 그러나 저는 또 리액트를 처음 시작하는 분들 중 많은 분들이 쉽다고 느끼지 못할 것이라 생각합니다.그 이유는 개발 환경이 간단하지 않기 때문입니다...