뚱이의 이모저모 세상 알기 & 개발 일기 😼 뚱이의 이모저모 세상 알기 & 개발 일기 😼

비전공자로써 처음 Javascript를 공부하기 시작한 분들이 아마 다 비슷비슷할 것이다. 처음부터 var, let, const 등을 시작으로 문자열, 객체, 클래스, 함수 등을 배우게 된다. 즉, 눈 앞에 코드를 쳐보면서 시작을 하는 것이다. 처음에는 그런 것이 재미있게 느껴졌기 때문에 시작을 하는 입장에서는 좋은 방법이라고 생각은 든다. 하지만 이제는! Javascript의 맛을 조금 봤다면, 발을 조금 담궈봤다고 한다면! Javascript의 Event Loop에 대해서도 공부를 해봐야 할 것이다. " Event Loop를 모른다면 Javascript를 안다고 말할 수 없다 " 라는 말을 하는 만큼 Javascript를 사용하는 분들이라면 누구든지 이벤트 루프에 대해서 알아야 할 것이다! 우선은 전..

면접에서 신입에게 가장 많이 물어봤던 것이 브라우저 렌더링 과정이었다. 처음에는 면접을 위해서 달달 외우기만 했었는데 어느정도 시간이 지나고 다시 보니 이해가 되는게 신기했다. 한번 그렇게 해보시기를.... 브라우저 렌더링 과정은 어떻게 될까 1. HTML parsing 브라우저 Render engine이 HTML을 parsing해서 DOM node로 이루어진 DOM Tree를 생성한다. 2. CSS parsing CSS 파일과 Inline style을 parsing하여 CSSOM을 만들게 된다. 3. Render Tree 생성 DOM Tree와 CSSOM을 결합해 Render Tree를 만들게 된다. Render Tree는 어떤 스타일이 적용되어야하고, 순서는 어떻게 나타낼지 즉, 화면에 시각적으로 나..

(앞서 작성한 내용은 배움의 부족으로 나도 알아보기 애매해서... 다시 정리해서 올렸다.) 2021-10-22 수정 완료// (궁금한 점이 있거나, 틀린 부분이 있으면 말씀주세요~~!🧸) 프로젝트의 기획이 바뀌면서 모달을 만들어야 할 일이 생겼다. Modal은 리액트를 공부하다보면 한 번 쯤은 만들어보는 경우가 많이 있어서 간단하다고 생각했다. 그러나 공부를 할 때는 작동 방법에 대해서 배우느라 한 페이지에서 모달 창이 잠깐 나타나기만 하면 됐다. 하지만 프로젝트에서는 여러 곳에서 같은 Modal 창을 사용해야 한다. 그러면 단순히 component로 만들면 되지 않을까? 라고 생각 할 수 있지만 모달창은 의외로 복잡하다 (나만 그런가....) 한 사이트의 글을 발췌해보면 아래와 같다. "React's ..

얼마 전 좋은 기회를 해볼 수 있었다. 바로 신입 프론트엔드 개발자 면접 자리였다. 항상 면접자로서만 준비를 해봤지 면접관으로서의 생각은 못해봤는데 이렇게 경험을 해볼 수 있어서 좋았다. 물론 내 처지에 누가 누구한테 질문을 하겠냐만은... 기술면접은 시니어분에게 맡기고 나는 주로 평소 공부 방법, 학습을 즐기는지, 계속 공부를 해나가야하는데 부담스럽지 않은지 등에 대한 질문을 했다. ( 주변에서 회사에 들어갔다고 안도감에 공부를 놔버리는 경우를 봤기 때문이다...ㅠ_ㅠ ) 어차피 신입 개발자를 뽑는 자리이기 때문에 어렵지 않은 질문들을 했다. 그 중에서도 대답을 곧 잘 하는 사람들의 경우 조금 더 깊은 질문을 하기도 했는데, 그 정도가 바로 CORS 였다. 그런데 CORS를 겪어도 보았고, 블로그에 정..

사실 사람들이 많이 사용하는 것으로는 react-datepicker, react-calendar, react-dates 등이 있다. 하지만 나는 이번 프로젝트에서 템플릿을 기반으로 사용하기 때문에 이미 설치 되어있는 react-flatpickr를 사용해보려고 한다. 어떠한 단점이 있어서 사람들이 많이 사용하지 않는 것 같은데, 결국 어떤 date picker던지 그 코어는 비슷하다고 생각되어 하는 김에 정리를 해놓으면 나중에 다른 것을 사용할 때도 도움이 될 것이라고 생각된다. 어디든지 사용 할 수 있는 flatpickr라는 것이 있는데 내가 사용한 것은 react를 위해서 나온 react-flatpickr 이다. 1. Installation 설치는 npm, yarn 두 가지 중 아무거나 사용할 수 있다..

Javascript를 공부할 때 흔히들 헷갈린다고 하는 것이 있는데 그것이 바로 오늘의 주제이다. 오늘은 스코프(Scope)에 대해서 정리를 해보려고 한다. 우선 Scope에 대한 정의는 강의를 하는 사람, 혹은 책 마다 조금씩 다르다. 몇 가지를 살펴보자면 아래와 같다. 1. 참조 할 수 있는 유효범위에 있으면 접근 가능한 것 2. 변수에 접근 할 수 있는 범위 3. 값이나 표현식이 보이거나 참조 할 수 있는 현재 범위 그런데, 이들을 살펴보면 공통적인 것이 있다. 바로 범위, 접근과 같은 단어들이다. 총싸움 게임을 하거나, 총 관련 혹은 군대 관련 한 것을 좋아하는 분들은 scope 라고 하면 느낌이 올것이다. 바로 저격총 위에 꽂는 망원경을 스코프라고 말한다. 스코프는 이와 비슷하다고 할 수 있다...

Redux는 이제 애증이 되어버렸다. Redux 외에도 contextAPI, mobX 등이 있는데, 물론 필요에 따라서 사용을 한다면 도움이 될 것이다. 하지만 나는 단순히 Redux가 어렵다는 이유로 피해왔고, 그로 인해서 다른 선택을 했었다. 그러나 아무리 mobX가 뜰 것 같다고 하고, 쓰기 편하다고 하더라도 여전히 Redux를 사용하는 회사나 프로젝트가 많고, 최소한 이해는 하고 있어야한다고 생각했다. 더불어 지금 하는 프로젝트를 템플릿을 통해서 실시하다보니 템플릿은 Redux와 context API로 이루어져있었다. 그리고 토이 프로젝트로 하는 것도 state 관리가 필요해서 어떤 것을 사용할까 고민했는데, 겸사겸사 Redux를 사용하기로 했다. 내가 Redux를 무서워하는 이유는 이해가 잘 되..

회사에서 어떤 식으로 github를 통한 repository 관리를 하는지에 대해서 들었고, 그 결과 각 branch를 나누고 feature 단위로 pr 하기로 했다. 다행히 저번에 pr(pull request)을 해본 경험이 있어서 그리 어렵지 않게 해냈지만 그럼에도 잊을 수 있어서, 그리고 처음 해보는 사람들을 위해서 작성해주려고 한다. "코드 만든거 pr 해주세요", "repository 포크 떠서 수정 후 pr 보내주세요" 등 다양한 말을 사용한다. 나도 처음 했을 때는 무슨 말인지 몰라서 물어보기도 하고 시행착오를 겪었다. 그러나 협업을 할 때는 Pull Request를 할 일이 많아질 것이라고 생각되니 알아두면 좋을 것이다. 요약 1. branch 생성 2. 작업 완료 후 add, commit..