말은 쉽지, 코드를 보여줘!

https://webruden.tistory.com/262 [SEO] target="_blank" 좀 더 알고 사용하자 (noopener, noreferrer, nofollow 차이점에 대해서) 웹사이트를 개발할 때 종종 외부링크로 보내기 위한 마크업을 할 때가 있습니다. 그때 사용하는 속성이 target="_blank"인데, 이 속성을 사용할 때 같이 사용해야되는 속성이 있습니다. noopener, norefer webruden.tistory.com

https://meetup.toast.com/posts/213 Object Mapping 어디까지 해봤니? : NHN Cloud Meetup 이 글에서는 Object Mapping 라이브러리인 MapStruct에 대해 소개합니다. NHN Forward 2019에서 발표한 내용에 대해 조금 더 자세히 설명합니다. meetup.toast.com 사실 ObjectMapper 에서도 convertValue() 라는 메소드로 객체 매핑을 지원한다. 또한 이보다 객체매핑에 특화된 ModelMapper나 Orika 같은 라이브러리도 있다. 그런데 ObjectMapper, ModelMapper, Orika의 가장 큰 단점은 runtime 시점에 reflection을 통해 맵핑을 하기 떄문에 맵핑 객체의 사이즈가 커질수..

가로로 슬라이딩 되는 화면을 만들고 싶을 때 사용하면 된다. 자동으로 슬라이딩되게 하거나 수동으로 슬라이딩 되게 만들 수 있다. 구현 방법은 아래와 같다. 자동 슬라이드 말고 수동으로 슬라이드 하고 싶다면 autoplay 옵션 자체를 주지 않으면 된다. Slide 1 Slide 2 Slide 3 위 코드를 .html 파일로 만들어서 브라우저로 실행하면 Slide1, Slide2, Slide3 이 2초에 한번씩 자동으로 슬라이드 되는 것을 확인할 수 있다. 한가지 주의할 점은 new Swiper('.swiper-container' ... 와 같이 실제 슬라이드 설정할 때 타겟에 해당하는 .swiper-container 가 반드시 display:block 상태여야 한다. 난 이것 때문에 반나절을 허비함.. ..

웹뷰개발을 하다보면 특정 OS 혹은 디바이스에서만 오류가 발생하는 경우가 있다. 이렇게 되면 보통 해당 OS/디바이스 에 맡는 테스트 기기를 찾아야 한다. 그런데 맥북을 사용하고 확인하려는 OS가 iOS일 경우 테스트기기 없이 맥북에서 자체적으로 시뮬레이터를 띄워서 간단하게 디버깅이 가능하다. 원하는 OS버전과 디바이스를 선택해서 확인할 수 있고 사파리 개발자도구와도 연동되어서 굉장히 편리하다. 우선 App Store 에서 Xcode 설치한다. 그리고 Spotlight 창의 띄워서 Simulrator 를 검색해서 실행시킨다. 그럼 아래와 같은 시뮬레이터가 띄워진다. 그리고 일반적으로 iOS 개발팀에 시뮬레이터용 빌드 파일인 *.ipa 파일을 요청해서 받은다음 그 파일을 위 시뮬레이터로 드래그 하면 해당 ..

관련 코드는 아래를 참고 하도록 한다. github.com/mypiece/react-example mypiece/react-example CRA 리액트+리덕스+리덕스사가 예제. Contribute to mypiece/react-example development by creating an account on GitHub. github.com 먼저 리덕스를 왜 사용하는지 생각해보자. 리덕스 사가는 미들웨어의 한 종류이다. 참고로 미들웨어는 아래와 같은 의미를 가지고 있다. 운영 체제와 응용 소프트웨어의 중간에서 조정과 중개의 역할을 수행하는 소프트웨어 이를 토대로 리덕스 사가를 재해석해보면 리액트와 리덕스 사이에서 무언가 추가적인 작업을 해주는 것으로 이해하면 된다. 즉, 리덕스에 의해 상태가 변경되기 전..

관련 코드는 아래를 참고 하도록 한다. github.com/mypiece/react-example mypiece/react-example CRA 리액트+리덕스+리덕스사가 예제. Contribute to mypiece/react-example development by creating an account on GitHub. github.com 리덕스의 개념 자체는 아래와 같이 그리 어렵지 않다. 상태 저장을 위한 스토어가 있고 컴포넌트에서는 여기에 있는 특정 상태를 구독한다. 초기상태와 이를 변경하는 액션타입을 미리 정의해놓고 이를 토대로 액션을 만들어줄 액션생성함수도 미리 만들어놓고 사용한다. 상태를 변경하기 위해 디스패치를 통해 액션 발생되면 리듀서에서는 이를 감지해서 상태를 업데이트 한다. 다만 이를..

우선 크롬 웹 스토어 로 접속해서 React Developer Tools, Redux DevTools 를 브라우저에 설치한다. 설치를 완료하고 크롬 개발자모드(F12)를 확인하면 Redux, Components, Profiler 탭이 추가된 것을 볼 수 있다. 리액트는 단적으로 보면 결국 렌더링을 효율적으로 해주는 라이브러리이다. 이에 대부분의 전역적인 설정은 최초 렌더링을 시작하는 src/index.js 에서 해주면 된다. 이 중 크롬 개발자 도구와의 연동 설정을 하면 어플리케이션에서 사용되는 리덕스의 상태와 컴포넌트 렌더링 등의 주요정보를 디버깅 할 수 있다. 이를 위한 설정이 src/index.js 파일의 아래 내용이다. createStore를 통해 리덕스 상태를 보관할 스토어를 만드는데 compo..

객체리터럴 선언시 만약에 key 이름으로 선언된 값이 존재하다면 value 를 생략해도 자동으로 매칭시켜준다. let name = "이름"; let languages = "언어"; let value = "벨류"; const extracted = { name, languages, value } //이 코드는 다음 코드와 같다. const extracted = { name: "이름", languages: "언어", value: "벨류" }

const {done, children, onToggle, onRemove} = this.props; //이는 아래와 같다. const done = this.props.done; const children = this.props.children; const onToggle = this.props.onToggle; const onRemove = this.props.onRemove; //아래와 같이 하면 키값을 변환해서 가져올 수 있다. const {done: convertName} = this.props; console.log(convertName); // == this.props.done

객체는 뭐고 객체는 뭐고 인스턴스는 뭔가? 그리고 클래스는 또 뭘까? 흔히들 클래스를 객체화한다거나 클래스를 인스턴스화 한다는 표현을 사용한다. 클래스는 말그대로 프로그래밍상 정의되어 있는 데이터와 메소드의 집합을 의미한다. 해당 코드 자체가 클래스가 된다. 이것을 사용하기 위해서는 객체화 또는 인스턴스화 작업이 필요하다. 자바도 그렇고 자바스크립트도 그렇고 new 지시어를 통한 작업이 바로 그것이다. 여기에서 객체란 인스턴스화를 위해 리턴된 값을 의미하고 인스턴스란 이를 통해 생성된 결과물을 의미한다. 아래 코드를 보자. function Test(){ this.name = '인스턴스'; return { name: '객체', getInstance: () => { console.log(this.name);..