본문 바로가기

전체 글51

[Vue vs. React 비교] (2) 반복, 조건부렌더링은 어떻게 다를까 1탄 : https://imagineu.tistory.com/70 [Vue vs. React 비교] (1) template 생김새, router 지난번 작은 웹페이지를 vue로 만드는 프로젝트를 포스팅(https://imagineu.tistory.com/60)했었는데, 그때 만들었던 Vue코드를 그대로 React코드로 바꿔보았습니다. 물론 같은 기능을 구현하더라도 여러가 imagineu.tistory.com 반복 결론부터 말하자면, Vue에서의 반복문은 v-for을, React에서의 반복문은 Array.map을 이용합니다. 그럼 제가 만들었던 사이트의 글목록 부분을 보면서 어떻게 생겼나 함께 살펴보겠습니다. Vue Vue는 컴포넌트 안의 속성으로 v-for과 key를 사용해주었습니다. list가 데이터를.. 2022. 3. 9.
[Vue vs. React 비교] (1) template 생김새, router 지난번 작은 웹페이지를 vue로 만드는 프로젝트를 포스팅(https://imagineu.tistory.com/60)했었는데, 그때 만들었던 Vue코드를 그대로 React코드로 바꿔보았습니다. 물론 같은 기능을 구현하더라도 여러가지 방법이 있기때문에, 언제나 저의 방법이 정답은 아니라는 점 미리 알아두셨으면 좋겠습니다. 둘 다 자바스크립트 기반 프레임워크라서 그렇게 큰 차이가 없었지만, Vue가 더 익숙한 제 입장에서는 그래도 Vue보다 React가 좀 더 오랜 시간이 걸렸던 것 같습니다 ㅠㅜ 그리고 빠른진행을 위해 UI프레임워크로 Vue는 vuetify를, React는 materialUI를 사용했고, 사용한 컴포넌트의 이름이나 디테일한 디자인같은 부분은 조금씩 다르겠지만 좀 더 쉽게 비교하기 위해 최대한.. 2022. 3. 8.
[Vue] options api로 웹사이트 만들기 - 9. 게시글 상세보기(2) ( + 파라미터 넘겨서 동적 라우팅) 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 저번글에서 라우터를 연결해봤는데요! 이번글에서는 게시물 .. 2022. 3. 3.
[Vue] options api로 웹사이트 만들기 - 8. 게시글 상세보기(1) (+ router 연결) Router를 이용해서 게시글을 눌렀을 때 상세보기 창으로 라우팅해보겠습니다. 라우팅은 URL에 따라 보여줄 컴포넌트를 연결해놓고 , 해당 URL로 이동했을 때 연결된 컴포넌트를 보여주는 방법입니다. Vue Router의 기본적인 태그는 다음과 같습니다 : : 이동할 URL 변경 태그 : URL에 따라 연결된 component를 보여주는 부분 그럼 이제부터 vue-router를 사용해서 게시글 상세보기 창으로 이동하는 부분을 만들어보겠습니다! 1. vue-router 설치하기 우선 vue-router를 설치해줘야 하는데요, 그냥 npm install vue-router를 해보니, 저는 이런 에러 로그가 뜹니다! ERESOLVE unable to resolve dependency tree ~ 어쩌구 ~ F.. 2022. 3. 3.
[토이프로젝트] 0. React + Spring 토이프로젝트를 시작하면서 회사를 다니면서 내가 사용하고 싶은 언어나 프레임워크, 내가 원하는 툴, 내가 관심있어하고 좋아하는 도메인, 내가 만들고싶은 기능을 개발할 수 있다면 정말 좋겠지만, 그렇지 않은 것이 현실이다. 그래서 그런 갈증을 해소하려고 개인 프로젝트를 진행을 했었는데, 나 혼자 기획, 디자인, 프론트엔드, 백엔드, DB까지 만들려고 하니, 낯선 방법을 시도해보기보단 친숙해서 빠르게 진행할 수 있는 방법만을 선택했었다. 그리고 내 머릿속에서 모든 것이 다 진행되기때문에 문서화가 제대로 되지 않아 나중에는 방향성을 잃기도 하고, 프로젝트의 마무리를 제대로 맺지 못했던 경우도 있었다. 그런 문제들을 경험하면서, 토이 프로젝트를 다른사람들과 함께 진행하면 책임감도 더 생기고 좋을 것 같았다. 그리고 무엇보다 좀 더 관심이.. 2022. 2. 26.
[Vue] options api로 웹사이트 만들기 - 7. 사용자별/ 태그별 게시물 조회하기 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 저번 글에서 메인의 왼쪽 섹션에 유저리스트까지 axios.. 2022. 2. 24.
[Vue] options api로 웹사이트 만들기 - 6. axios 다중요청해서 동시에 리스트 뿌려주기 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 저번 글에서는 v-if를 통해 조건부렌더링을 해봤는데요... 2022. 2. 24.
[Vue] options api로 웹사이트 만들기 - 5. v-if로 조건부 렌더링 (v-show 와 v-if의 차이) 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 저번 글에서 글 하나하나를 컴포넌트화 시켜봤었는데요. 이.. 2022. 2. 24.
[Vue] options api로 웹사이트 만들기 - 4. 컴포넌트화해서 props로 데이터보내기 ( + 가상DOM ) 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 이번 글에서는 반복되는 부분을 컴포넌트화 시키고, pro.. 2022. 2. 23.
[Vue] options api로 웹사이트 만들기 - 3. v-for로 리스트 뿌려주기 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 저번시간에 데이터를 받아와 브라우저에 뿌려주는 것까지 봤.. 2022. 2. 23.
[Vue] options api로 웹사이트 만들기 - 2. axios로 API 요청하기 ( + axios 전역사용) 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 1. axios 설치하기 axios는 간단하게, 서버와 .. 2022. 2. 20.
[Vue] options api로 웹사이트 만들기 - 1. 초기세팅 ( + 환경변수 설정 ) 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 1. vue 프로젝트 생성하기 우선 초기세팅을 해줘야 합.. 2022. 2. 20.
[React] class방식 vs. function 방식 컴포넌트 코드량 비교 클래스 컴포넌트와 함수형 컴포넌트의 코드를 비교해보면서 함수형 컴포넌트의 소중함(?)에 대해서 알아보도록 하자.. 위와 같이 + 버튼을 누르면 숫자가 1씩 증가하고, -버튼을 누르면 숫자가 1씩 감소되는 아주 간단한 기능을 만들어보면서 class형 컴포넌트와, 함수형 컴포넌트의 코드 양을 비교해보자. 클래스(class) export default class App extends React.Component { state = { num: 1 }; render() { const num = this.state; return ( {num} + - ); } incre = () => { this.setState((state) => { return { num: state.num + 1 }; }); }; decre =.. 2022. 1. 29.
[Typescript] Any, Void, Null, Undefined 정리 any 이렇게 일반 javascript처럼 작성해주면 Parameter 'arg' implicitly has an 'any' type.(7006) 위와 같은 에러메시지가 뜬다. 그리고 다음과 같이 : any 라는 타입을 명시해주면 에러메세지가 사라진다. any 타입은, 말그대로 모든 타입을 받을 수 있다고 명시해줌으로써 "타입체크를 비활성화" 해주는 역할을 하는데, 그래서 타입스크립트를 사용하는 한 any 타입으로 명시해주는 것은 좋은 방법이 아니라고 할 수 있다. void 그리고 function 안에서 return을 선언해주지 않거나, 그저 return; 만 적어준다면 return 타입으로는 :void가 뜰 것이다. 프로그래밍을 하다보면 void라는 단어가 익숙할텐데, 아무 값도 return 해주지 않.. 2022. 1. 26.
CSS sprite - 한번의 통신으로 여러개의 이미지를 한번에 불러와서 웹성능 개선하기 지금 바로 네이버 메인화면에서 F12를 눌러 개발자도구를 들어가봅니다. 개발자 도구에서 Network 탭을 들어가면, 네이버 메인화면을 띄우면서 이루어진 네트워크 전송들이 찍혀있는것을 볼 수 있는데요. 그 중 이미지 파일(.png) 하나를 눌러보면 다음과 같이 메인화면에서 사용된 이미지들을 하나의 png파일로 모아서 하나의 이미지로 만들어놓은 것을 볼 수 있습니다. 이런 방법을 CSS 스프라이트(sprite)라고 하는데, 여러개의 이미지를 하나의 이미지 파일로 결합해 필요한 이미지가 위치하는 픽셀 좌표 정보를 사용하는 방법입니다. 주로 위에서 처럼 아이콘이나 버튼 등 작은 이미지를 사용할 때 많이 사용합니다. 왜 이런 방법을 사용할까? 결론부터 말하자면 웹사이트 성능을 개선하기 위해 http 요청 수를 .. 2021. 12. 21.