Vue는 React와 달리, setState() 같이 상태를 set해주는 함수를 쓰지 않고도 data, 즉 상태를 변경하면 자동으로 상태가 업데이트 된다. 이게 어떻게 가능한걸까? 이게 궁금해서 이 글을 작성하게 되었다.일반적인 블로그 글을 보면 Vue.js는 gett

이 강의는 유인동 님의 함수형 프로그래밍과 JavaScript ES6+ 강의를 듣고 이해한 부분과 다른 자료를 통해 더 알게 된 내용을 함께 정리한 글입니다. 프로그래밍 패러다임(Programming Paradigm)은 프로그래머에게 프로그래밍의 관점을 갖게 하고 코

코드를 명료하게 표현하는 데 가장 중요한 요소 하나는 바로 이름 이다. 그래서 함수, 모듈, 변수, 클래스 등은 그 이름만 보고도 각각이 무슨 일을 하고 어떻게 사용해야 하는지 명확히 알 수 있도록 엄청나게 신경 써서 이름을 지어야 한다.사실상 가장 중요하지 않을까?똑

앞 장에서는 간단한 예시로 저자가 생각하는 리팩터링에 대해 소개했고, 이번 장에서는 시야를 넓혀 리팩터링 전반에 적용되는 원칙 몇 가지에 대해 알아보겠다. 먼저 정의부터 보자. 리팩터링 정의 리팩터링[명사]: 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이

defer 브라우저는 defer 속성이 있는 스크립트(이하 defer 스크립트 또는 지연 스크립트)를 '백그라운드’에서 다운로드 합니다. 따라서 지연 스크립트를 다운로드 하는 도중에도 HTML 파싱이 멈추지 않습니다. 그리고 defer 스크립트 실행은 페이지 구성이

Naver D2 브라우저는 어떻게 동작하는가? 글을 읽고 있는데 viewport라는 개념이 자꾸 나오는데 정확한 의미를 몰라서 쓰게 된 글이다. > 이 글은 MDN 문서를 참고해 작성되었습니다. 작성자 본인이 이해하기 쉽게 작성된 글입니다. viewport 정의

이 글은 웹폰트 사용하기, 웹 폰트 사용과 최근 동향 두 글을 메인으로 읽고 요약, 정리 + 제 생각을 추가한 글입니다. 보통 멋진 글꼴을 발견한다면 어떻게 적용하는가? 일단 나는 글꼴 그 동안 글꼴(폰트) 적용에 많은 노력, 시간이 필요한 줄 모르고 그냥 html

이 글은 flexbox로 만들 수 있는 10가지 레이아웃 을 읽고 이해한 부분을 요약, 정리한 글입니다. 프론트엔드 개발자라면 display: flex; 속성은 정말 많이 사용하고 있을 것이다. 레이아웃을 쉽게 할 수 있는 방법이니까. 가로축 중앙 정렬을 위해서 아

URL은 Uniform Resource Locator의 약자로, 인터넷의 리소스를 가리키는 표준 이름이다.URL은 웹 상의 리소스가 어디에 있고 어떻게 접근할 수 있는지 알려주는 역할출처: https://yurimkoo.github.io/http/2019/08

전 세계의 웹브라우저, 서버, 웹 애플리케이션은 모두 HTTP(Hypertext Transfer Protocol)를 통해 서로 대화한다. > HTTP는 현대 인터넷의 공용어이다. 이 책에서는 HTTP에 대해 설명, HTTP가 어떻게 통신하는지, 얼마나 많은 웹 앱이

여기서 잠시 멈춰 서서 지금까지 리팩터링한 결과를 살펴보자. 대략 이런 코드가 나왔을 것이다. (정확한 코드는 책을 통해 확인하자) 코드 구조가 한결 나아졌다. 최상위의 statement() 함수는 이제 단 일곱 줄 뿐이며, 출력할 문장을 생성하는 일만 한다. 계산

시작 미뤄두고 미뤄두던 리팩토링 2판을 읽기 시작했다..! Vue.js 공부하기도, 사이드 프로젝트 진행하기도, 일하기도 바쁜데 이건 언제하나? 싶지만 시간 내서 개발 서적을 읽지 않으면 당연히 실력을 늘릴 수 없겠지? 하는 생각에 산지 두달이나 됐지만 이제 읽기 시작

왜 이런 글을 작성하나요? 사실, 정말 부끄럽게도 나는 그동안 누군가가 '왜 프로젝트에 React를 적용한 거에요?' 라고 물어보면 딱히 할 말이 없었다. 왜냐고? 배운게 React 뿐이었으니까.. React를 숙달하기도 바쁜 현실이었다. 심지어 그렇다고 지금 Reac

그 동안 미흡했던 동기/비동기의 개념에 대해 보충하기 위해서 검색을 하던 도중, 동기와 비동기, 블로킹과 논블로킹이 같이 작성되어 있던 글이 많았다. 작성자가 알기로는 사실 둘이 같은 개념인 줄 알았는데.. 명백히 다르다! (부끄럽다)동기와 비동기는 FE 개발을 하는

Hooks는 React에서 처음 도입되어, Vue나 Svelte와 같은 다른 프레임워크에 광범위하게 도입되었으며 심지어는 일반적인 함수형 JS에서도 응용되고 있습니다. 하지만 Hook의 함수 기반 설계를 이해하려면 먼저 Javascript 클로저에 대해 이해하고 있어야

프론트엔드 진영의 프레임워크, 라이브러리 등(React, Angular, Vue)을 공부하다 보면 단일 페이지 어플리케이션(Single Page Application) 이라는 용어가 자주 등장한다. 현재 필자가 공부하고 있는 React를 이용한 웹 애플리케이션도 SPA

프론트엔드 성능 최적화가 왜 필요할까? 아마 많은 사람들은 이미지, 혹은 데이터가 느리게 로딩되는 사이트를 싫어할 것이다. 성능 최적화의 중요성은 TOAST UI에서 작성한 '성능 최적화' 글의 일부를 보면 더 쉽게 이해할 수 있다. > Pinterest는 긴 로딩

📢 결과 11월 19일 오후 3시에 우아한 테크코스 1차 합격자가 발표된다고 했었다. > 👏 먼저, 결론만 말하면 코딩 테스트에 합격해, 우아한 프리코스를 진행할 수 있게 되었다! 사실, 코딩 테스트에 나온 7문제 중 변별력을 위해 나온 2문제를 (5번, 7

트리 탐색 문제의 기본이 되는 문제라고 한다. 문제의 요구사항은 아래 그림처럼 탐색한 노드의 value값의 합이 targetSum과 일치하는 배열을 담아서 return하라는 문제다. 이 문제는 먼저 트리 탐색에 대한 이해가 있어야 한다. 루트 노드부터 탐색을 시작하는

기본 DP 문제로 볼 수 있다. DP 말고 다른 방법 중에 greedy..? swap? two pointers? 아직 내가 정확하게 이해를 하지 못한 방법이 하나 더 있는데 (더 간단하다) 그 방법은 아직 이해가 덜 됐기 때문에 여기서는 작성하지 않았다.문제 요구사항을