분류 전체보기
-
TIL 2021.7.21 : 자바스크립트 데이터의 불변성 유지(feat. 가변성)항해99 1기 수료후 TIL 2021. 7. 21. 09:30
자바스크립트 데이터의 불변성 개념을 처음 접하면 알쏭달쏭하지 않던가요? 그리고 리액트에서 왜 불변성 유지를 해줘야 리렌더링이 되는지 이해를 하셨나요? 이제 이해해봅시다. 자바스크립트 데이터의 불변성 아래 데이터들의 코드를 보자. 기본형 데이터인 숫자형 데이터는 데이터를 바꾸면 참조하는 데이터 영역의 주소가 바뀌면서(= 변수 영역의 값이 바뀌면서) a와 b는 서로 다른 데이터가 된다. 그러나 참조형 데이터인 객체의 경우, 내부 프로퍼티를 바꿔도 객체 프로퍼티의 변수 영역이 참조하는 데이터 영역의 주소만 바뀌지 변수영역이 참조하는 데이터 영역의 주소는 바뀌지 않기 때문에 서로 obj1과 obj2는 같은 데이터로 간주 된다. 이것이 바로 참조형 데이터는 가변값이라는 개념으로, 참조형 데이터는 내부 프로퍼티를 ..
-
TIL 2021.7.16 : MVVM(모델-뷰-뷰모델)항해99 1기 수료후 TIL 2021. 7. 16. 01:51
SPA를 만들기 위한 프레임워크인 vue가 사용하는 패턴인 MVVM MVVM 모델(패턴) 구성요소 1. View : 보이는 것 = UI. UI를 다룬다. 2. Model : 사용하는 데이터를 다룬다. 3. View Model : View만을 위한 모델. View가 사용하는 메서드와 속성들을 갖고 View에 상태 변화를 알린다. 그리고 view가 사용할 데이터를 바인딩해준다. 작동순서 Action -> View에서 View Model로 Action 전달 -> View Model에서 Model로 데이터 변경 요청 -> Model의 응답이 View Model로 전달 -> View Model에서 데이터를 바인딩해서 View에 전달 MVC vs MVVM 차이점 참고문헌 VUE의 MVVM 패턴 이해 [Android..
-
TIL 2021.7.15 : 정적 웹 vs 동적 웹항해99 1기 수료후 TIL 2021. 7. 14. 03:21
정적 웹 (Static Web) 1. 서버에 저장된 파일(html, css, javascript)들이 그대로 전달되어 보여지는 웹페이지 2. 서버는 사용자의 요청(request)에 맞는, 서버 자신이 저장하는 웹페이지를 클라이언트로 보낸다. 3. 클라이언트는 서버에 저장된 데이터가 변경되지 않으면 계속 같은 페이지를 보게 된다. 단, 이 설명은 완벽히 맞는 말은 아니다. 아래 짤의 설명처럼 정적웹의 경우에도 클라이언트의 브라우저가 받아온 자바스크립트의 코드를 '요리해서' 일부 부분이 매번 다르게 보여질 수 있다(이건 뒤에서 설명할 클라이언트 사이드 렌더링과 일맥상통하는 내용이다). 즉, 정적 웹의 정의는 '언제나 같은 화면이 보인다가 아니라, 이미 만들어져 서버가 저장하고 있는 리소스(html, css,..
-
프로토타입 체인(feat. __proto__ 무한 꼬리물기)코어 자바스크립트(정재남 지음) 스터디 모임 공부 2021. 7. 11. 20:49
** 본 페이지는 자바스크립트 스터디에서 공부하는 코어자바스크립트 책의 일부 내용을 정리했습니다 스코프 체인에 이어 나오는 또 다른 프로토타입 체인. 자바스크립트는 줄줄이 비엔나 소시지 같이 딸려 나오는게 많은 친구인가보다. 프로토타입 체인을 이해하면 자바스크립트가 클래스를 구현하는 방식도 이해할 수 있다고 하니 잘 배워보자! 1. 메서드 오버라이드 프로토타입 체인을 배우기에 앞서, '같은 이름'으로 인해 생길 수 있는 문제가 있는지 알아보자. 호출한 메서드나 속성이 인스턴스에 있는지 먼저 살피고 있으면 그걸 쓰고 없으면 생성자 함수의 prototype에 있는 메서드나 프로퍼티를 자기것처럼 쓰는 것인데, 근데 인스턴스와 생성자 함수의 prototype에 같은 이름의 메서드나 프로퍼티가 있다면? proto..
-
프로그래머스 알고리즘 문제 - 영어끝말잇기(python)알고리즘 문제 풀이 연습 2021. 7. 9. 02:30
🔍 문제보러가기 코딩테스트 연습 - 영어 끝말잇기 3 ["tank", "kick", "know", "wheel", "land", "dream", "mother", "robot", "tank"] [3,3] 5 ["hello", "observe", "effect", "take", "either", "recognize", "encourage", "ensure", "establish", "hang", "gather", "refer", "reference", "estimate", "executive"] [0,0] programmers.co.kr 참여자의 수(n)과 끝말잇기 단어들이 이어지는 순서대로 정렬된 배열(=words)이 입력값으로 주어지면, 첫 탈락자의 번호와 탈락한 차례를 넣은 배열을 구하라는 문제다. ..
-
TIL 2021.7.8 : 프레임워크와 라이브러리의 차이는?항해99 1기 수료후 TIL 2021. 7. 8. 20:21
SPA를 만드는 프론트엔드 엔지니어라면 기본 상식으로 리액트는 UI 라이브러리, Vue랑 Angular는 프레임워크이자 템플릿언어라는걸 압니다. 근데 이거 라이브러리랑 프레임워크가 어떻게 다른지 구별 가능한가요? 구별해봅시다. 1. 라이브러리 응용프로그램 개발을 위해 필요한 기능들을 모아 놓은 소프트웨어 공통으로 사용될 수 있는 특정한 기능들을 모듈화 한 것 프로그래머가 개발하는데 필요한 것들을 모아둔 것. 1. 특정기능들을 미리 만들어 두고 여러 소프트웨어에서 import해서 쓸 수 있게 한 것들의 모음. 2. 자신이 직접 라이브러리를 만들 수도 있고, 남들이 만든 라이브러리를 가져다가 쓸 수도 있다. 3. 필요한 곳에 쓰기 위해서 '미리' 만들어 놓은 기능들의 집합 4. 작은 기능들을 함수 단위로 만..
-
자바스크립트 비동기의 원리와 비동기 제어 사례코어 자바스크립트(정재남 지음) 스터디 모임 공부 2021. 7. 7. 01:28
**본 페이지는 책 코어 자바스크립트(정재남 지음)에 나오지는 않지만, 그 책의 내용을 이해하기 위해 필요한 개념인 비동기를 설명합니다. 자바스크립트에서 초심자들을 가장 애먹이는 개념인 비동기, 왜 이해해야 할까? 비동기는 자바스크립트로 웹서비스를 만든다면 반드시 이해해야 하는 개념이다. 특히 클라이언트(프론트)가 서버로부터 데이터를 받아오는 작업은 자바스크립트 전체로 보면 비동기 작업인데, 이를 이해하고 코드를 짜야 서버로부터 받아온 데이터가 화면에 문제없이 표출된다. 그런데 비동기를 모르고 서버에서 데이터를 받아오는 코드를 짠다면, 이해할 수 없고 해결하기에도 견적이 나오지 않는 에러가 나올 위험이 크다(내가 부트캠프에서 프로젝트 하면서 몸소 겪음). 그리고 SPA를 만들 수 있는 라이브러리인 Rea..
-
프로그래머스 알고리즘 문제 - 2 x n 타일링(python)알고리즘 문제 풀이 연습 2021. 6. 27. 22:42
🔍문제보러가기 코딩테스트 연습 - 2 x n 타일링 가로 길이가 2이고 세로의 길이가 1인 직사각형모양의 타일이 있습니다. 이 직사각형 타일을 이용하여 세로의 길이가 2이고 가로의 길이가 n인 바닥을 가득 채우려고 합니다. 타일을 채울 때는 programmers.co.kr 풀이방법 1. 수학 문제 풀이의 3원칙은 '무시, 변화, 관계'를 찾는 것. (천재들의 생각법이자 수학으로 생각하는 방법은 '무시, 변화, 관계'라고 알려주는 깨봉수학 창업자님의 유튜브 보기) 2. 먼저 곁가지를 다 쳐내는 '무시'를 해보면, 높이는 2로 고정되어 있으니 중요하지 않고 가로의 길이만 주목하면 됨을 알 수 있다. 3. 그 다음으로 '관계'에 주목해보자. 직사각형을 왼쪽부터 오른쪽으로 채워가면, 마지막의 길이 2는 2가지 ..