꾸준히 공부하는 개발자

2주차 진행에서 기억에 남는것들은 state들을 관리하는 것인데 쉽게 extends에 기존에있던 StatelessWidget을 StateWidget인가로 바꿔주기만 하면됫다. 그리고 state는 react에서 사용하는 것들과 비슷하게 사용하면 됬다. 위에는 실습해서 만든 이미지로 Widget으로 UI를 만드는데에 많은 도움이 되었던 것 같다. 이번주까지도 거의 UI관련된 내용들을 학습한 것 같다.

중요한 단축키 command + K : ios 키보드 option+Esc : 타입추론? 가능 ctrl + shift + R : 리팩터 padding, row, 등등 다양한 기능의 플러터 위젯을 보여줌 실습 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: HomePage(), // 홈페이지 보..

클래스는 꼭 패키지에 담겨야한다고 한다. 지금까지 패키지를 안만들어 왔을수도 있다. 하지만 default package가 만들어져서 지금까지 작동했다고 한다. package는 왜 필요한가? package는 협업을 해서 코드를 합칠 때 class를 여러개 만들텐데 그 중 class명이 겹칠 때, package로 나누어져 있어 구분이 가능하다고 한다. serialVersionUID란? 객체 직렬화에 사용되는 고유 아이디라고합니다. 만약 선언을 안한다면 default값으로 들어가게 되지만 안전하게 선언해주는게 좋다고합니다. 1L은 JVM에서 자동적으로 직렬화를 하는데 UID를 설정해달라고 하는 의미입니다.

javascript 단골 질문인 var, let, const 의 개념을 알아보겠습니다. var는 es6전에 사용했던 개념으로 함수형 스코프 개념을 띄고있습니다. es6 이후에 함수형 스코프인 var의 단점을 보완하기 위해 블록 스코프인 let, const가 나왔습니다. 블록은 {} 이 중괄호를 뜻합니다. var let const 재선언 o x x 재할당 o o x 로 간단하게 표로 정리할 수 있습니다.

javascript에서 객체는 해시테이블이라는 자료구조이다. 그래서 javascript의 객체가 해시로 작용되었던 것이다. 해시 테이블이란? 이제 key를 인풋할 때 hash function이 메모리 주소를 부여해줘 buckets으로 바로 집어넣어 준다고 한다. key와 value 값이 주어져 const obj = {'key' : 'value'} 아래 obj의 속성은 key 속성값은 value이다 또한 javascript에서 객체의 속성값은 무엇이든 상관이 없다고 한다. 문자, 숫자, 객체 모든 것이 들어갈 수 있다고 한다. 또한 이렇게 시간복잡도 O(1) 이면 이거 쓰지 왜 다른거 쓰냐 하는 말이 있는데, 그 이유는 해시 충돌때문에 효율성이 떨어지기 때문이라고 한다. 이러한 해싱충돌을 다양한 방법으로 ..

오늘은 function 객체에 포함되어있는 내장 메소드들을 알아보겠습니다. 솔직히 개발하는데에 있어 몰라도 지장이 없는 것 들이라고 생각하는데요. 개념적인거니깐 알아보고 넘어가는 차원에서 공부해보았습니다. 그나마 사용한다면 bind를 이용해서 this를 바꿔 주는 일이라고 생각하는데요. 그것도 요즘에는 arrow function도 나오고해서 왠만해서 코드 짤때 사용하지 않는다고 생각됩니다. apply, call, bind를 어떤식으로 사용되었는지 실무에서 예시가 있다면, 알려주시면 감사할 것 같아요! 아래와 같이 apply 와 call은 별로 차이가 없습니다. 하지만 null 자리에는 this를 대신할 수 있습니다. apply, call 차이 call은 apply 와 별반 다르지 않습니다. 하지만 app..

SPA SPA가 나오게된 이유 1. SPA는 클라이언트 단에서 처리할게 많아져 효율적으로 서버에 json 데이터를 주고받아 처리하도록 하였습니다. 2. 화면이 하얀색으로 다시 리로드 되는 것을 한 화면에서 다 처리할 수 있도록 하여 나오게 되었습니다. CSR vs SSR CSR은 클라이언트 사이드 렌더링으로 SPA에서 보통 CSR방식을 많이 사용합니다. - 장점 : 클라이언트 단에서 json 파일을 주고받아 서버에서 다시 html, javascript, css를 render tree로 만들어서 주지 않아도 된다는 장점이 있습니다. - 단점 : 1. html, javascript, css 와 json파일을 모두 받아서 parsing해서 render tree로 만들어야 하기 때문에 첫 렌더링이 오래 걸린다는..

구직을 할 때 가끔 React 질문을 받을 때가 있다. 그 때마다 가상 DOM이 주는 이점에 대해 질문이 자주나왔던 것 같다. 그 부분에 대해 오늘 정리해보고자 한다. React의 장점은 컴포넌트로 사용할 수 있다. JSX 문법을 사용할 수 있다. 또 마지막으로 가상DOM 을 이용하여 직접 DOM을 건드리지 않아 가볍고 효율적으로 렌더링 할 수 있다. 라는 점인데 이 어떻게 가볍고 효율적인지는 대부분 잘 모를거라 생각한다. 그 부분에 대해 같이 알아보자. 일단은 dom이 어떻게 화면에 나타나게 되는지 과정을 알아야 한다. 1. html 을 파싱해서 DOM tree 를 그린다. 2. style sheets를 파싱해서 css 를 일단 그려내고 3. 둘을 합쳐 이제 렌더트리로 만든다. 4. 렌더트리를 화면에 ..