전체 글 (21) 썸네일형 리스트형 2022.3.3rd 이번주엔 MVP발표를 위한 기능구현에 몰두했다. 크게 막히는 부분이 없어서 즐거웠다. 그리고 MVP발표, 시연를 마치고 멘토님의 피드백을 들었는데 그동안 칭찬 일색이던 우리 프로젝트에 처음으로 비판을 듣게 되어서 정신이 번쩍 들었다. 비판의 주된 내용은 세가지인데, 사용된 기술들이 최신이라 잘 쓰이는 기술들이 아니다. 따라서 구직을 희망하는 프론트엔드 개발자로서 회사에 뭘 보여줄 수 있을지 모르겠다. 프로젝트 폴더구조가 엉망이다. 뭔가를 했으면 깃헙에 티를 내라 로 크게 정리가 될 것 같다. 첫번째 같은 경우는,완전히 케바케라고 봐서.. 이제와서 어떻게 할 수 있는것도 아니고 프로젝트 완성도가 더 중요하기 때문에 우선 패스하기로 했다. 두번째, 프로젝트 폴더 구조나 네이밍 컨벤션등에 대한 피드백은 너무나.. 2022.3.2nd 지난 주에 연구한것들을 토대로 우리 어플리케이션에 WebRTC를 붙이는 작업을 했다. 통신에 있어 우리 어플리케이션의 구조는 오직 socket 통신만을 전담하는, node로 작성한 signalling server와 메인 기능을 수행하는 spring server, 이렇게 두개의 서버가 있고 react로 개발한 클라이언트가 두 서버가 송수신하는 정보를 양 쪽에 전달하는 교두보 역할을 맡게되는 구조이다. 클라이언트의 상태에 따라 socket에 알맞은 behavior를 가져야 했고, 또 거기에 맞춰 spring 서버에 정보를 보내주도록 개발했는데 굉장히 까다로웠다. 이번주 금요일까진 node의 response 시점이 명확하지 않았고, 그로인해 react의 동작 순서를 예측할 수가 없어서 많이 헤멨었다. spri.. 2022.2.4th ~ 3.1st 2월 마지막주 나는 사운드클라우드라는 서비스를 클론코딩을 하면서 많은것을 얻었다. 레퍼런스 사이트와 완전히 똑같은 모양을 만들면서 Styling과 HTML 태그 사용에 관해 많은 것들을 배울 수 있었다. 그리고 서버에서 다운받은 음원의 파형을 화면에 그려내고 컨트롤하는 기능과 앨범커버에서 색을 추출하여 배경에 그라디언트를 뿌려주는 기능을 위해 라이브러리 두 개를 채택하여 사용했다. wavesurfer.js Backward Play / Pause Forward Toggle Mute wavesurfer-js.org 음원을 다루는데에 사용한 WaveSurfer.js react-palette Extract prominent colors from an image. Latest version: 1.0.2, last.. 2022.2.3rd WIL 부트캠프, 그동안의 회고 언젠가부터 페이스를 잃었었다. 2개월간 하루도 쉬질 못하고 프로그래밍과 병행하여 큰 공연을 준비하느라 몸과 정신이 많이 피로했는데, 이것은 내가 앞으로 프로그래머로서 살아가는데에 있어 계속 안고 가야하는 딜레마이기 때문에 전부 내 책임이다. 내가 지혜롭게 관리를 했어야 하는데.. 그래도 나라는 사람은 빈 시간이 절실히 필요하다는걸 다시 한 번 깨닫게 됐으니 앞으론 일주일 중에 혼자 생각하고 정리 할 시간을 필사적으로 찾아봐야겠다. 일단 지금으로썬, 일요일에 피할 수 없는 스케쥴이 있다면 토요일에 일찍 공부를 마치고 쉬는게 훨씬 낫다는 생각이 든다. 눈 감은채로 달리다보면 바보같은 곳에 도착하기 마련이다. 이번주 일요일, 오늘은 드디어 나만의 시간이 생겼다. 이 기회로 내가 위치한.. 2022.2.2nd WIL Axios 이번 프로젝트에서 프론트엔드는 React 환경에 Axios라는 라이브러리를 사용하여 Spring 서버와 HTTP 통신을 하기로 하여 Axios에 대한 글을 써본다. Axios 특징 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 http api 사용 Promise(ES6) API 사용 요청과 응답 데이터의 변형 HTTP 요청 취소 HTTP 요청과 응답을 JSON 형태로 자동 변경 const api = axios.create({ baseURL: '', headers: { 'content-type': 'application/json;charset=UTF-8', accept: 'application/json,', }, }); api.defaults.headers.c.. 2022.2.1st WIL React의 LifeCycle LifeCycle이란 React에서 컴포넌트가 생성되고 수정되고 사라지는 여정을 말한다. React document에서의 LifeCycle 설명 https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ Class형 component의 함수인 componentDidMount 는 생성되고 난 후에 실행하는 함수이고, componentDidUpdate는 변경한 후, componentWillUnmount는 제거하기 바로 전에 실행되는 함수이다. 이러한 함수들을 LifeCycle API라고 하며 우리는 이걸 이용해 컴포넌트의 특정 상황에 맞게 행동을 지정해 줄 수 있다. Class형 VS Function형 Componenet, .. 2022.1.4th WIL 이번주엔 함수형 React component와 함수형 component에서 사용하는 useState, useEffect등의 Hook을 공부했고, React-Router로 url을 Component로 라우팅 하는 SPA 과제를 구현하였다. 그리고 숙련주차로 들어가 React에서 전역 상태관리를 가능캐하는 Redux와 서버리스 혹은 BAS(Back-end As Service)툴인 Firebase를 사용해 프로젝트를 만들고 있다. DOM 이란? JavaScript를 비롯한 다양한 프로그래밍 언어들이 동적으로 html document에 접근하고 제어 할 수 있게 도와주는 API, 표준 규약. 요소, 속성, 메소드, 이벤트가 객체의 형태를 띈다. JavaScript(외 다른 프로그래밍 언어)는 본인과 연결된 HT.. 전기 회로와 스위치의 기초 전기를 이해하기 위해 먼저 수도배관에 대해 생각해봅시다. 우리에게 조금이나마 더 친숙한 물에 전기를 빗대어 설명해 보겠습니다. 밑의 그림은 게이트 밸브를 보여줍니다. 하나의 파이프에 두개의 밸브를 사용해 AND 연산을 구현한 모습입니다. 이와같이 한 밸브의 출력(output) 다른 밸브에 입력(input)에 연결되는 것을 직렬연결(series connection)이라고 합니다. 하나의 파이프에 두 개의 입력과 출력을 가지는 것을 병렬 연결(parallel connection)이라고 하며 이는 OR 연산을 구현합니다. 전기의 이동 물이 파이프속을 이동하는 것과 비슷하게, 엄밀히 말하자면 전기는 전선속에서 에너지 반응을 전파시키는데, 이 전선 내부의 유동적인 전자로 가득 차있는 금속을 도체(conductor.. 이전 1 2 3 다음
