지식을 남기고 쌓는 곳

callback 함수는 비동기 함수이다. 비동기 함수에 대해서 잘 모른다면 아래의 게시물부터 보고오자 자바스크립트 비동기[클릭] 콜백함수는 쉽게 말하자면 일을 다른 객체에게 시키고, 그 일이 끝날 때까지 기다리는 것이 아니라 그 객체가 나를 다시 부를 때까지 다른 할 일을 하고 있는 것이고, 정확히 말하자면 제어권을 객체에게 넘겨주는 것이다. 사용자가 계속 실행하기 귀찮으니 실행제어권을 객체에게 넘겨주는 것이다. 이 콜백함수는 비동기 처리를 하기 위한 패턴 중 하나이다. setInterval(() => { console.log('1초마다 실행될 겁니다.'); }, 1000); 콜백함수의 예시는 setInterval이 있다. setTimeout이 지정한 시간이 지나면 지정한 함수가 1회 실행된다면 setI..

GD프로젝트 리액트 수업이 끝나고 알고보면 알기쉬운 알고리즘 이라는 알고리즘 수업이 이번 주차부터 시작되었다. 그럼 1주차에 배운 내용과 소수 찾기 알고리즘에 대해 설명하겠다. 1. 새롭게 배운 내용 1. 시간복잡도 더보기 시간 복잡도는 입력값에 따라 문제를 해결하는데 걸리는 시간과의 상관관계를 말합니다. 똑같은 알고리즘에 입력값이 몇 배로 늘어남에 따라 문제를 해결하는 데 걸리는 시간은 몇 배만큼 늘어나는지 보는 것이다. 우리는 똑같은 입력값이라도 당연히 더 빠른 시간 안에 입력을 처리하는 알고리즘을 선호한다. 즉 걸리는 시간이 줄어들수록 시간 복잡도는 작아지며, 시간 복잡도가 작은 알고리즘이 좋은 알고리즘이다. 시간 복잡도에 대해서 설명하기 위해 똑같은 목적을 가진 두 개의 알고리즘을 살펴보겠다. 두..

GD프로젝트 리액트 심화반 마지막 주 차가 시작되었다. 새롭게 배운 내용과 마지막 결과물 그리고 느낀 점을 서술하겠다. 목차 1. 새롭게 배운 내용(SEO, 웹 성능 지표) 2. 마지막 결과물 및 추가 기능 3. 느낀 점 1. 새롭게 배운 내용 1. SEO 더보기 SEO(Search Engin Optimization : 검색엔진 최적화)는 네이버나 구글 검색 엔진에 뭔가를 검색했을 때, 내가 만든 사이트가 검색 결과에 더 잘 나타나도록 하기 위한 작업이다. 검색 엔진은 우리가 입력한 검색어를 가지고 그 검색어와 일치하는 웹사이트를 찾게 된다. 웹사이트를 찾는 방식은 웹사이트의 html 파일이나 메타 태그들을 한 번 훑어보는 방식이다. 그래서 웹 개발자들은 내용물에 특정한 인덱스를 만들어서 검색 엔진이 내..

GD프로젝트 리액트 심화반 4주 차가 시작되었다. 이번에도 새롭게 배운 내용과 결과물들을 설명해보겠다. 목차 1. 새롭게 배운 내용(Badge, RealTimeBase) 2. 4주 차 과제 및 느낀 점 1. 새롭게 배운 내용 1. Badge 더보기 Badge는 PC 뷰에 비해 모바일 뷰같이 매우 작은 화면 공간을 효율적으로 사용하고 간편성 또한 추구하기 위해 단축화시킨 모양이라고 생각하시면 된다. (몰론 PC 뷰에서도 많이 쓰이기도 한다.) 위 사진은 페이스북 애플리케이션에서 사용하는 Badge이다. 왼쪽에서부터 타임라인, 내 홈피(?), 단체, 알림, 메뉴 기능인데 이걸 일일이 PC 뷰의 메뉴들처럼 이름으로 나열했으면 공간도 부족하고 이쁘지도 않았을 것이다. 그래서 많은 모바일 어플리케이션에선 Badg..

자바스크립트는 동기적인 언어이다. 동기적인 것이 무엇이냐 하면은 동기 (Synchronous: 동시에 일어나는) 말 그대로 동시에 일어나는 뜻인데 프로그래밍적인 개념으로 말하자면 요청과 그에 대한 결과가 동시에 일어나는 것이다. function add(a,b){ return a + b; } let a = 3; let b = 6; let c = add(a,b);// add함수의 호출(요청)과 결괏값을 반환(결과)전까지 다음코드로 진행되지 않는다. console.log(c); 이러한 특성때문에 대부분의 프로그래밍 언어는 절차지향처럼 코드가 위에서 아래로 작동한다. 아래에 있는 코드는 위에 있는 코드보다 먼저 실행될 수 없다. 여기서 비동기라는 것은 무엇이냐하면 동기가 아닌 것들이다. 비동기(Asynchron..

Redux는 전역 상태 관리를 편히 사용할 수 있게 해주는 라이브러리입니다. 목차 1. React에서 Redux를 사용하는 이유 2. Redux 구조 3. Redux 사용법 1. React에서 Redux를 사용하는 이유 더보기 에서 컴포넌트 내에서의 데이터는 state로 해결된다. 그럼 컴포넌트 간에서는? props가 있다. 그렇지만 되게 제약사항이 많다. props는 양방향이 아닌 일방향이다. 부모가 자식에게 props를 줄 수 있지만 부모에게 받은 props를 수정할 수 없을뿐더러 애초에 부모에게 데이터를 줄 수 있는 수단이 없다. 게다가 만약 컴포넌트 관계가 A->B->C->D와 같고 A의 데이터를 D에게 전달하려면 B와 C를 거쳐야 하고 또한 데이터 변화가 없는 B와 C도 필요 없는 리랜더링 일어..

GD프로젝트 리액트 심화반 3주 차가 시작되었다. 이번에도 새롭게 배운 내용과 결과물들을 설명해보겠다. 목차 1. 새롭게 배운 내용(immer, redux-action, Debounce, Throttle, useCallback) 2. 3주 차 과제 3. 배운 내용 프로젝트에 적용 1. 새롭게 배운 내용 1 -1 immer, redux-actions 더보기 사실 2주 차에 배웠던 것들인데 그때는 배운 내용들이 정리가 안되어서 3주 차에 쓰고 있다.. 3주 차에는 redux를 더욱 쉽고 이용하기 간편한 모듈들에 대해 배웠다. redux-logger : 웹상에서 redux의 action이 일어날 때마다 콘솔에서 action 내역을 이쁘게 보여주는 모듈 이런 식으로 action이 일어날 때마다 action 이전..

GD프로젝트 리액트 심화반 2주 차가 시작되었다. 이번에도 새롭게 배운 내용과 결과물들을 설명해보겠다. 목차 1. 새롭게 배운 내용(비동기, callback, Promise, OAuth, 웹 저장소) 2. 2주 차 과제 3. 배운 내용 프로젝트에 적용 1. 새롭게 배운 내용 1 - 1 비동기 더보기 Promise를 언급하기 전에 동기와 비동기부터 설명하겠다. 자바스크립트는 동기적인 언어이다. 동기적인 것이 무엇이냐 하면은 동기 (Synchronous: 동시에 일어나는) 말 그대로 동시에 일어나는 뜻인데 프로그래밍적인 개념으로 말하자면 요청과 그에 대한 결과가 동시에 일어나는 것이다. function add(a,b){ return a + b; } let a = 3; let b = 6; let c = add..

라우팅이란 페이지를 나눠주는 것이다. 우리가 React로 작업을 할 때 create-react-app을 이용하든 웹팩을 이용하든 html 파일은 index.html 하나뿐이라는 것을 알 것이다. 이렇게 어플리케이션 안에 html 파일이 하나밖에 존재하지 않는 경우 우리는 이것을 SPA(Single Page Application)이라 부른다. 이렇게 html파일이 하나가 있으면 좋은 점은 사용성이다. 페이지를 이동하거나 웹사이트 내에 정보가 달라지게 되면 리다이렉트(새로고침)가 일어나게 되는데 만약에 페이지가 여러개이면 html 파일이 수시로 교체가 되고 서버에서 주는 데이터도 바뀌다 보니까 상태 유지도 어렵고 바뀌지 않은 부분까지 새로 불러오게 되니 비효율적입니다. (ex : facebook에서 좋아요 ..

자바스크립트의 함수도 다른 언어와 달리 신기한 특징을 갖는다. 자바스크립트 함수는 값(value)이 될 수 있다. const printFn = function(){ console.log('fn'); } printFn; // ƒ (){ // console.log('fn'); // } printFn(); // fn 그래서 이렇게 변수에 저장할 수 있으며, 변수에 () 을 붙이면 함수가 실행되고 변수만 적으면 함수 내용을 문자형으로 출력한다. 함수를 정의하는 데에는 함수선언문과 함수 표현식이 있다. // 함수 선언문 function printFn(){ console.log('fn'); } // 함수 표현식(anonymouns funciton) const printFn = function(){ console.l..