김종필 멘토님에게 멘토링 신청을 하고 나서, 궁금한 것을 가지고 서울에서 핫한 동네 용산으로 달려갔다. 가는 와중에도 내 머리에 담겨있는 고민은 과연 내가 남들보다 늦게 시작한 개발자의 삶은 어떻게 해야되는 건가 내가 생각한 것과 다른 게 사회이기 때문에, 항상 가는 길을 확인해야 되는 거 같다. 그렇게 도착해서 궁금했던 취업에 대한 질문과 공부의 방향을 잡기 위한 것이었다. 1. 프로젝트 진행시 프론트엔드와 백엔드의 연락을 주고받는 것에 있어서, 어떻게 진행해야 되는가 2. 취업을 위해서 준비를 해야 되는 것 (혹은 공부를 해야 되는 부분) 1번에 대한 답으로는 백엔드니깐 이렇게 해야된다 보다는 이런 것이 필요하다. 해줄 수 있는 것인지 물어보고 접하지 않은 것이나 미숙하다 하면 그 부분을 같이 찾아보..

predictable state container, 프론트 엔드 개발에서 가장 인기 있는 라이브러리 중 하나로 state를 관리하기 위한 패턴인 상태 컨테이너이며 클라이언트, 서버 및 기본 환경에서 일관되게 동작하고 테스트하기 쉬운 자바 스크립트로 앱을 빌드하는 데 도움이 되도록 설계되어 있습니다. Action, 이벤트로서 Store로 데이터 (API 호출 또는 양식 제출 등)를 보냅니다. 앱 어디에서나 작업을 호출 하는 것이 쉽고 Dispatch method를 사용합니다. Reducer, 현재 state를 가져와서 작업을 수행하고 새로운 state로 반환합니다. callback(reducer)을 허용하고 여러 형태의 값을 얻을 수 있는 array reduce method를 기반으로 작동합니다. 현재 s..

노마드 코더의 "ReactJS로 영화 웹 서비스 만들기" 를 하다보면 중간에 gh-pages가 나오게 되는데, 그것을 활용하는 방법에 대해서 기록하려고 합니다. 해당 작업은 Visual Studio Code, window환경에서 이용하였습니다. 우선 해당 리액트로 이루어진 프로젝트를 완성했다는 가정하에 1. Create a new repository github에서 새로운 레포지토리를 생성하고 url을 준비 2. install gh-pages VS Code에서 해당 작업한 폴더에서 Ctrl + ` 을 누르게 되면 터미널이 열리는데, npm i gh-pages --save-dev 입력하여 라이브러리 설치 3. publishing 프로젝트 내 package.json 에서 homepage 주소 설정, scri..

Animation 속성을 이용하여, 사라지는 효과를 가지고자 한다. FadeIn: 서서히 생기는 효과 .box { /* animation : 효과(@keyframes 이름) 동작시간 */ animation: fadein 3s; } @keyframes fadein { /* 효과를 동작시간 동안 0 ~ 1까지 */ from { opacity: 0; } to { opacity: 1; } } @keyframes를 이용하여 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정 from을 시작으로 to로 변화하는 과정을 만들 수 있다. FadeOut: 서서히 사라지는 효과 .box { /* animation : 효과(@keyframes 이름) 동작시간 */ animation: fadein 3s; } ..

Flex 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하며, flex-grow, flex-shrink, flex-basis의 단축 속성이다. 부모 div 안에 여러 div를 한 줄에 표현을 할 때 사용하였다. /* One value, unitless number: flex-grow */ flex: 2; /* One value, length or percentage: flex-basis */ flex: 10em; flex: 30%; /* Two values: flex-grow | flex-basis */ flex: 1 30px; /* Two values: flex-grow | flex-shrink */ flex: 2 2; /* Three value..

프로젝트를 하다보니 사용자의 편의성에 맞추기 위해서는 반응형 웹을 사용하는 것은 필연적이라 생각이 들었는데요. 그래서 모듈을 찾다보니 여러가지가 나오지만 그 중에서도 react-responsive와 react-device-detect를 비교를 하면 화면의 크기와 기기 종류로 판단하여 사용한다. react-responsive 아래와 같이 useMediaQuery를 사용하여 크기에 따라서 어떻게 반응할지 혹은 가로/세로모드에 따라서 어떻게 반응해야 되는지 Hooks을 통해서 변화를 줄 수 있다. import React from 'react'; import {useMediaQuery} from 'react-responsive'; export default function TestMap() { const isD..

나에게 최종 목표는 무엇이었을까? 목표가 되고있는 프론트의 역할을 하기 위해서는 무엇을 해야될까? 물음표를 던져왔고, 결국 취업도 그렇겠지만 내가 무언가를 해온 것을 보여주기 위해서는 무엇을 해야되는지 생각을 해왔다. 그 물음표에 대한 답으로는 나를 나타낼 수 있는 프로젝트의 완성(웹을 만들어서 나의 기록을 표현)이었다. 첫 번째 프로젝트는 어쩌다보니 흐지부지, 두 번째 프로젝트의 경우는 열심히 한다고 생각했지만, 기획에 대한 중요성을 다시금 느낀다. 실력이 높지 않으면 기획을 할 때, 필요한 부분과 큰 그림을 볼 줄 알아야 하는데 사용자가 어떤 부분에서 사용을 많이 할까? 부터 생각을 했어야 했다. 작업을 컴퓨터로 하다보니 자연스레 pc의 웹만 생각하다보니 거기에 초점이 자연스럽게 맞추어진 결과 반응형..

RTL 테스팅 라이브러리는 Behavior Driven Test(행위 주도 테스트) 방법론 (Implementation Driven Test(구현 주도 테스트)의 단점을 보완하기 위한 방법론)이 대두 되면서 주목받기 시작한 테스팅 라이브러리 어떻게 작동 되는지 대해서 초점을 두어 어떠한 태그와 어떠한 클래스가 사용되었는지 테스트를 하였던 것을 Behavior Driven Test에서는 어떤 이벤트를 발생시켰을 때, 그에 따라 화면에 변화가 어떻게 일어나는지를 테스트 한다. https://www.daleseo.com/react-testing-library/ React Testing Library 사용법 Engineering Blog by Dale Seo www.daleseo.com