개발자_승딱 개발자_승딱

state 변경이 있을 때 - react 에서 유동적인 데이터를 저장하기 위해서 state 라는 것을 이용한다. 이때 state 값을 바꿔주기 위해서는 state 를 직접 조작해서는 안되고 setState() 메서드를 이용해 주어야한다. 왜냐하면 리액트는 state 의 변경이 감지되면 리렌더링을 해주는 데 메서드를 사용하지 않고 직접 바꿔주게 되면 리액트가 state 의 변경을 감지하지 못하게 된다. 새로운 props이 들어올 때 - 전달받은 props 값이 업데이트 됬다면 리 렌더링 된다. 부모 컴포넌트가 렌더링 될 때 - 새로운 prop 이 들어오지 않더라고 부모컴포넌트가 리렌더링 된다면 자식컴포넌트 역시 리렌더링이 된다. shouldComponentUpdate에서 true가 반환될 때 - 각각의 컴..

웹페이지를 연습할겸 만들어 보고 있는데 아무래도 데이터 관계들을 자주 바꾸게 되지 않을 까 싶어 좀더 편리하게 구성할수 있는 nosql 방식으로 해보고 싶어서 찾아보게 되었다. 일단 연결부터 해보자 1. 몽고디비 들어가서 로그인을 한다. 2. 우측상단에 new Project 버튼을 눌러 프로젝트 를 생성을 해준다. 이후에 프로젝트 이름 설정해주면 된다. 3. test 로 만들어서 해당 프로젝트 내부이다. 돋보이는 build cluster 를 누르자 4. 무료인 shared cluster 로 만들고 cloud provider 와 region 을 설정해주고 create 한다. 5. 좌측 배너에 database access 에 들어가서 설정을 해준다 password 방식으로 해보고 아이디와 비밀번호를 적어놓고..

브라우저의 dom 조작시 workflow 1. html 확인 > 브라우저가 dom-tree 생성 >> 파싱한다고 표현 2. css 각 element 의 style 요소를 domtree 에 결합 >> render-tree 생성 3. reflow(layout) & painting (reflow : 스크린 좌표값으로 각 노드의 위치가 주어진다) 노드가 하나만 바뀌어도 전체가 위와 같은 과정을 거쳐 다시 실행 되는 것이 비효율 적인 부분이다. 그렇다면 virtual dom 은 어떠한 방식으로 이러한 문제를 개선하는가? virtaul dom 은 dom 의 가벼운 복사본이다. (가벼운 복사본이라는 말은 동일한 속성을 갖지만 화면에있는 내용을 직접 변경할 수있는 실제 능력이 부족함을 의미한다.) 데이터가 업데이트 되..

문제를 풀때 재귀로 생각하는게 아직 힘이든다 특히 재귀가 전부가 아니라 전체문제에서 일부분일 경우 이후 과정을 생각하는것은 어려운 일이다. 조합 과 순열은 대표적으로 재귀로 푸는 경우가 많은데 숙지를 위해서 적어두자 문제를 풀다보면 여러가지 속성이 있고 조합했을 때 결과가 어떠한 조건에 해당되는 경우를 확인하고 요구에 맞게 리턴을 해야하는 경우들이 있다. 이런경우 (조합) + (조건 탐색)의 형태로 문제를 풀게되는데 조건 탐색같은 경우는 문제마다 다 달라질수 있지만 조합하는 경우는 어떤 문제든 공통이 되는부분이라서 빠르게 풀고 가줘야 하는 부분이다. 여기서 조합이 아닌 순열이라는 개념이 있는데 (조합)+(순서까지 중요) => 순열 이라고 판단하면 된다. 예를 들자면 [1,10,2,20,3,30] =>[1..

노드 js 공부하면서 미들웨어라는 걸 배웠었지 그 때 당시에 그냥 말그대로 미들웨어 중간에 뭐해주는 역할을 정해줄수 있다 라는 내용 이었는데 사실 딱히 써본적이 없어서 기억속 어딘가에 있었던 개념이었다. 유튜브보다가 코드보니까 훨씬 이해가 잘되서 적어본다. 위사진의 맨 아래 라우터를 보면 경로(/infor) , auth , userCtrl.getUser 가 순차적으로 인자로 들어온 것을 확인 할수 있다. 여기서 userCtrl 는 mvc 모델에서 controller 를 의미하고 위에 파일을 불러온 것을 확인 하면 짐작할수있다. 위에 4개는 가운데 auth 미들웨어가 없는 상황인데 어떻한 점이 다른지 살펴보자~ 일단 위에꺼 중에서 로그인에 사용되는 userCtrl.login 함수를 살펴보자 login: a..

try { ... 코드를 실행 ... } catch(e) { ... 에러 핸들링 ... } finally { ... 항상 실행 ... } 본래 코드를 실행중 에러가 나면 스크립트는 중단 된다 그러나 try catch 문을 사용할 경우 에러에 의해 스크립트가 중단되는 것을 막을수 있고 경우에 따라 적합한 행동을 취할수 있다. 사용법은 위와 같이 간단하다. 일반적인 상황에서 try 안의 코드가 실행이 되고 try 블락 안에서 에러가 나지 않는 경우 finally 블락의 코드가 실행된 이후에 다음 코드가 진행이 된다. 만약에 try 문 안에서 에러가 발생했다면 try 문 안에서 코드는 중단되고 catch 문 안의 코드가 실행이된다. 그리고 catch 문의 코드 가 종료시 finally block 으로 넘어가 ..

더이상 사용되지 않는 메모리 를 지워 주는것 메모리 : 어떤값을 0과1 로바뀌어서 저장을 하는데 그때 의 그값과 그값을 저장한 위치 저수준언어에서는 코드를 통해서 쓰지 않는 변수나 함수 객체 등을 지워줌 그러나 고수준언어 (managed language 에서는 가비지 컬렉터가 그역할을 대신함) 그렇다면 가비지 컬렉터는 어떠한 기준으로 필요없는 메모리를 구분할수 있을까? 1. 레퍼런스 카운팅 :참조하고 있는곳이 있느지 카운트를 하고 없으면 제거 > 순환 참조시 문제가 있음 2.mark and sweep : 루트를 기준으로 참조값의 사용여부를 mark 하고 mark 되지 않는값을 지운다 > 순환참조시에도 루트에서 닿지 않는경우라면 제거됨 가비지 컬렉터에는 GC Root라는 것이 있다. GC Root들은 힙 ..

브라우저 환경에서 제공되는 자바스크립트는 단일 스레드 방식으로 작동한다. 하지만 실제로 웹브라우저 환경을 이용하다보면 많은 task가 동시에 이루어지는거와 같이 보인다. 그러한 자바스크립트의 동시성을 지원해주는 것이 이벤트루프이다. 자바스크립트는 하나의 콜스택을 사용하여 작업을 처리한다. 비동기적인작업(ajax요청,이벤트,timer) 은 자바스크립트가 동작하는 환경인 브라우저(web api)에서 담당한다. 태스크 큐(이벤트큐) : 비동기 코드가 실행되기 이전에 보관되는 장소 이벤트 루프 : 이벤트 큐와 콜스택을 확인하고 콜스택이 비었을때 이벤트큐의 태스크가 이벤트 루프에 의해 콜스택으로 이동한다. ex.> 클릭 이벤트 가 발생시 태스크큐로 이동 > 콜스택비면 태스크큐에서 콜스택으로 타이머 시간종료시 ti..