똑같은 삽질은 2번 하지 말자

개요 api를 통해 얻은 데이터의 시간들이 ISO 8601형식으로 오기 때문에 그걸 보기 쉬운 형태로 변환함에 있어서 필요한 지식들을 정리해 보았다. ISO 8601 란? 날짜와 시간을 표기함에 있어서 ISO에서 정한 국제 표준이다. https://ko.wikipedia.org/wiki/ISO_8601 ISO 8601 - 위키백과, 우리 모두의 백과사전 ISO 8601 Data elements and interchange formats - Information interchange - Representation of dates and times은 날짜와 시간과 관련된 데이터 교환을 다루는 국제 표준이다. 이 표준은 국제 표준화 기구(ISO)에 의해 공포되 ko.wikipedia.org 우리에게 필요한 부..

보호되어 있는 글입니다.

개요 이런 에러가 나서 디버깅 했던 과정을 기록 원인 nuxt-link에 to를 지정 안한게 원인이었다.. 해결과정 해결과정을 말하기 전에 나의 상황은 이러했다. 페이지 컴포넌트에서 asyncData를 이용해 배열데이터를 가져와서 그 배열데이터중 첫번째 요소를 자식 컴포넌트에 넘긴다. 넘겨받은 데이터는 객체이며 배열데이터가 들어있는 데이터이다. 처음에는 비동기통신을 통하여 데이터를 전달하기 때문에 제대로 default value를 설정 안해줘서 reference error의 한 종류라고 생각해서 asyncData를 사용시 default 값들을 어떻게 셋팅해왔는지 되짚어 보았지만 굳이 nested 부분들까지? default값을 셋팅한적은 없었다. (vuex store에서의 값들은 state를 선언할 때 밑..

Repository Pattren 이란? 비지니스 로직과 API로 데이터를 취득하는 부분을 분리 시키기 위한 디자인 패턴이다. 그리고 서버와의 통신(api request)을 하기위해 개발할 때 고민해야 할 사항들을 해결해 줄 수 있다. api 재사용? 매번 URL을 다시 적어야 하나? 엔드포인트가 바뀌었을 때는 어떻게 됩니까? 다른 프로젝트에서 API 호출 처리를 재사용하고 싶은 경우는 어떻게 됩니까? 코드를 리팩터하거나 Vux의 actions로 이동하는 경우는 어떻게 됩니까? 여러 개의 리소스가 있는데, 네 개의 다른 엔드포인트를 정의해야 합니까? 테스트를 mock의 엔드포인트를 어떻게 다룰 수 있습니까? 기존에 썼던 repository pattern에서 조금 더 수정해서 더 좋은 pratice가 나올..

개요 React JS 를 공부하면서 기본을 정리해두고자 작성 Styled Components CSS를 JS안에서 쓸 수 있는 라이브러리중 하나이다. (CSS in JS) React의 추구하는 방향인 컴포넌트 단위로 관리하는걸 스타일에도 적용할 수 있다는 점에서 높은 호환성을 띄고있다. 장점 하나의 컴포넌트이기 때문에 props로 여러가지 상태를 전달할 수 있는데 다양한 동적 스타일 적용을 쉽게 할 수 있다.(자유롭다) 기본 scss 작성법을 따르기 때문에 스타일 코드가 간결해 진다. scoped가 적용되므로 해당 컴포넌트가 선언된 곳에서만 스타일이 적용된다. (vue의 style 블럭의 scoped 같다.) 리액트 네이티브에서도 사용할 수 있다고 한다. 서버사이드 렌더링 지원 단점 러닝커브가 좀 있다. ..

개요 React JS 를 공부하면서 기본을 정리해두고자 작성 (key, 조건문의 다양한 활용, 동적 스타일 ) 1. 리액트의 key란? 이건 vue의 v-for의 key와 개념인데 어떤 리스트가 있고 그 리스트를 표현하고 있는 컴포넌트가 있다. 그 리스트는 반복적인 컴포넌트 명시 보다는 대부분 map이나 forEach를 이용해 코드를 작성할 것인데 만약에 리스트의 아이템 컴포넌트에 props key를 부여 안했다면 이하의 경고창을 볼 수 있다. 원인은 리스트에서 요소를 추가할 때 확실하게 알 수 있는데, 리액트는 하나의 요소가 추가되면 어디에 이 요소를 추가해야 하는지 찾아본다. 만약 keys가 없다면 일단 리스트의 제일 밑에 추가한다. 그 뒤에 해당 리스트와 연결되어 있는 데이터(배열)를 보고 데이터의..

보호되어 있는 글입니다.

개요 svg파일을 img태그의 src에 넣었는데 제대로 표시가 안되서 조사했던걸 적는다. 문제 이하의 logo_select.svg파일이 있다. ../assets/images/logo_select.svg 이걸 svg 테스트 사이트에서 테스트해보면 문제 없이 나왔다. https://codepen.io/drawcode/pen/zGwewg SVG Path Test ... codepen.io 그래서 img태그로 불러 들일려고 했는데

개요 React JS 를 공부하면서 기본을 정리해두고자 작성 (props, props.children, jsx의 변환, state, Stateful 컴포넌트와 Stateless 컴포넌트) 1. props 컴포넌트 내부의 Immutable Data JSX 내부에 { this.props.propsName } / 함수형 일때는 그냥 {props.propsName} 컴포넌트를 사용 할 때, 괄호 안에 propsName="value" this.props.children 은 기본적으로 갖고있는 props로서 여기에 있는 값이 들어간다 기본값 설정은 Component.defaultProps = {...} 타입은 Component.propTypes = {...} 클래스형 예제 class Codelab exten..

보호되어 있는 글입니다.