건브로의 소소한 개발

안녕하세요 건브로입니다!! 오늘은 유용하게 사용하는 Array 내장 함수에 대해서 간단하게 알아보려고 합니다! 1. map 함수 const celebrities = ['헤이즈', '박보영', '송중기', '치즈', '조이']; //for문 사용해서 하나씩 출력하기 for(let i = 0; i< celebrities.length ; i++){ console.log(celebrities[i]+"는 제가 좋아하는 연예인입니다."); } //결과 //헤이즈는 제가 좋아하는 연예입니다. //박보영는 제가 좋아하는 연예입니다. //송중기는 제가 좋아하는 연예입니다. //치즈는 제가 좋아하는 연예입니다. //조이는 제가 좋아하는 연예입니다. //for문과 동일한 기능으로 사용하기 celebrities.map((ce..

안녕하세요! 건브로입니다. 오늘은 자주 사용하는 ES6 문법에 대해서 정리하려고 해요. ES6 문법은 가장 보편 하게 쓰이고 있는 자바스크립트 표준 문법입니다. ES6중에서 자주 사용하는 문법을 소개하겠습니다. 제가 정리하는 순서는 화살표 함수(arrow function), Class, let과 const 키워드 그리고 scope , Spread 연산자, Template String입니다. 1. 화살표 함수 //일반 함수 function have(name, object){ return name+"이(가)"+object+"를(을)가지고 있다"; } let info = have("건브로", "컴퓨터"); console.log(info); //결과 //"건브로이(가)컴퓨터를(을)가지고 있다" //화살표 함수 ..

안녕하세요. 건브로입니다. 오늘은 HTTP 통신에 대해서 한 번 다루어 보도록하겠습니다. 1. HTTP란 무엇인가? HTTP란 Hyper Text Transfer Protocol의 약자이다. 즉, HTML 문서를 전송하기 위한 프로토콜이다. 그리고 클라이언트와 서버의 약속이라고 봐도된다. 2. HTTP 메세지의 구조는 어떻게 될까? 먼저 HTTP 메세지 의 구조는 크게 두 가지로 나뉘어진다. 바로 그 두 가지가 헤더와 바디이다. 먼저 예시 코드를 보여주겠다. 로그인 form { display: flex; flex-direction: column; align-items: center; } form section{ display: flex; justify-content: center; } form secti..

안녕하세요 건브로입니다. 오늘은 Redux에 대해서 정리를 해보려고 합니다. 1. Redux란 무엇인가? Redux란 상태 관리를 쉽게 해주는 자바스크립트 기반 기술이다. 아마 react를 하면서 redux를 같이 배우는 사람들이 많은 걸로 알고 있다. 나도 이번에 react 공부하다가 redux를 알게 되었고 공부하게 되었다. 2. Redux 코드들 분석하기 Redux에는 여러 가지 함수들이 있다. 1) createStore() createStore()는 데이터를 넣을 수 있는 장소를 생성해주는 함수이다. 하지만 createStore의 인수로는 reducer 인수가 들어가야 한다. 2) reducer() reducer()는 data를 수정하는 함수이다. return 값으로는 state data를 전달할..

안녕하세요. 건브로입니다! 제가 react를 공부하면서 예전에 공부했던 비동기 처리방식을 까먹어서 이렇게 다시 정리합니다!😛 아 그리고 제가 정리하는 것은 자세한 정리가 아닌 표면적인 정리에요. 더 자세한 것은 차근 차근 업데이트 할게요! 1. callback callback은 비동기 처리를 위해서 사용해요! callback은 다른 객체에 일을 맡기고, 호출하기 전에는 다른 일을 해도 되는 것이죠! 제가 세탁기에 빨래를 넣고 돌리는 동안 제 할 일하고, 빨래가 다 돌려질 때 제가 세탁기에 가는 것을 예로 들어볼게요. 그러면 세탁기에 빨래를 넣고 돌린다는 것은 callback 함수가 되고, 제 할 일을 다하고 빨래가 다 돌려질 때가 callback 함수를 호출 한 것 입니다! 이번엔 코드로 예를 들어볼게요..