공부혜옹

공부하면서 적은 날것의 필기 업로드 오랜만에 복기하니까 더 이해가 잘돼서 뿌듯!

1. 이름 정의 Arrow function 이름 정의 불가능 변수에 할당해서 사용 호이스팅이 일어나지 않는다 function 이름 정의 가능 변수에 할당없이 정의만으로 사용가능 변수 할당 없는 기명 함수 정의시 호이스팅이 일어난다 function의 호이스팅 //type 1 console.log(AnonymoustFunc()); // error const AnonymoustFunc = function(){ return 1; } //type 2 console.log(NamedFuncExpression()); // error const NamedFuncExpression = function NamedFunc(){ return 1; } //type 3 console.log(NamedFunc()); // 1 fu..

종종 공식문서를 읽다보면 parameter와 argument를 구분하지않고 그냥 읽는경우가 있는것 같다. 엄연히 둘은 구분되는 개념이다 parameter 함수 내부의 인자로, 함수 호출시 들어온 argument의 값이 이 parameter라는 변수에 담기게 된다 argument 함수를 호출할때 전달하는 실제 값이다 변수가 아닌 실제 값!! // parameter1은 매개변수로 argument의 값이 이 변수에 담겨 함수내에서 사용된다 const func = (parameter1) => { console.log("parameter1은 파라미터 변수"); } func(2); // 2는 함수에 전달되는 실제 값으로 argument이다

Each child in an array should have a unique “key” prop. react 개발을 하다보면 한번씩 해당 경고를 마주한적이 있을것이다. 왜 배열을 사용할때 혹은 그 외에 상황에서 항상 key를 넣지 않았다고 경고 하는걸까? key의 역할이 뭘까? key를 넣지 않으면? virtualDOM과 DOM 비교과정에서 노드의 자식을 재귀적으로 처리할때 비효율적으로 처리된다 어떤말인지 모르겠다면 하단 포스팅의 Diffing Algorithm부분을 간단히 읽어보면 이해가 갈것이다 [React] React에서 DOM 렌더링 하는 방법 간단한 예시로 list에서 요소를 맨 마지막이 아닌 맨 앞에 삽입할 경우 새로운 요소를 삽입하고 끝!이 아닌 새로운 요소의 종속트리는 그대로 유지하되 다..

요약 실제로 DOM을 변경하지 않고 Virtual DOM을 사용한다 Virtual DOM에서 변경사항을 반영하고 실제 DOM과 비교하여 바뀐 부분을 모아 DOM에 전달하여 단 한번의 리렌더링만 일어나도록 한다 (Batch Upadate) 이러한 프로세스를 Reconciliation이라고 한다 💡 DOM이란? DOM은 document object model의 약자로 HTML, XML과 같은 문서구조를 프로그래밍 언어로 연결해주는 api이다. 트리구조로 표현된다 렌더링 과정 업데이트한 전체 UI를 Virtual DOM에 적용한다 실제 DOM과 생성된 Virtual DOM을 Diffing Algorithm을 이용해 비교한다 ReactDOM.render()가 React element를 container DOM에..

React 사용하면서 setState를 실행하고 값이 잘 바뀌었는지 확인하기위해 바로 밑줄에 console.log(state) 해본 경험이 있을것이다. 이때 console.log는 새로 입력해준값이 아닌 이전의 값을 출력한다. 대체 왜일까? const [state, setState] = useState(0); const incrementState = () => { setState(state + 1); setState(state + 1); setState(state + 1); setState(state + 1); console.log(state); } //예상 출력 // 4 // --- //실제 출력 // 0 결론부터 말하자면 setState는 비동기로 동작하기 때문이다 setState가 비동기로 동작하는..

자바스크립트는 싱글 스레드 자바스크립트는 함수를 실행할때마다 callStack이라는 곳에 함수를 push 한다. 그리고 실행할때마다 pop을 하여 함수를 하나씩 꺼내는데 이러한 방식때문에 stack에 함수가 남아있으면 어떠한 추가 작업도 할 수 없고, 브라우저 리렌더링도 불가능하다 프론트엔드의 관점에서 한가지를 실행할때마다 브라우저가 리렌더링 되지않고 멈춰있는것은 상당히 상상하고싶지않은 상황이다. 비동기 콜백함수 브라우저나 노드의 함수들은 거의 비동기 함수라고 한다. 보통의 함수들은 stack에서 가장 위부터 순차적으로 실행된다고 앞서 이야기 했지만 비동기 함수들은 어떻게 처리되는걸까? 다음은 내가 참고한 자료인 JSConfEu에서 소개된 예시 코드이다. 해당 코드를 기반으로 그림으로 비동기 함수 처리 ..

애자일을 도입하게된 배경 우선 외주를 기반으로 시작했기때문에 프로젝트 기간이 매우 짧고 촉박하여 주먹구구식과 폭포수가 난무하는 환경이었다. 회사가 생긴지 1년도 안된 스타트업이었기 때문에 작업방식은 물론이고 팀간의 소통 또한 제대로 체계가 잡혀있지 않았다. 어쩌면 팀내에서도 공유가 안된 작업들이 굉장히 많았다. 1. 아트팀 작업물을 받아 작업해야하는데 담당자가 누군지, 어디까지 진행되었는지도 잘 모르는 상황 2. 이미 구현된 부분도 기획의 변동으로 재작업이 잦은 상황(변동이 잦으나 공유가 잘 안됨) 이러한 상황을 겪은뒤 팀내~팀간의 소통과 작업 현황이 실시간으로 공유되어야한다는 필요성이 느껴졌고, 잦은 기획의 변동이 있기 때문에 기능 구현을 작은 사이클로 가져가야한다는 생각을 하게 되었다. 따라서 개발팀..