분홍분홍 코딩 프로젝트

input 으로 넘겨지는 value 값이 @input을 통해 잘 들어오고 있나 확인을 하고 싶었다. 전에 들었던 강의에선 watch를 이용해 해당 데이터가 바뀌면 이전 데이터와 변경된 데이터를 콘솔로 찍어주는 방식을 이용했었다. 검색해보니 computed와 method를 이용해서도 할 수 있다는걸 알았다. 뭐가 다른거지? 차이점이 궁금해서 정리해보기로 했다. 1. Watch 말 그대로 감시자 역할을 한다. 입력한 데이터의 변경을 감지하여 실행되는 특징이 있다. {{ fullName }} change-firstName change-lastName var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo ..

CORS에러를 해결하고 나니 뒤이어 403이라는 에러가 나왔다. 404, 405 이런건 봤어도 403? 인터넷에 검색을 열심히 해보니 URL이 잘못 된 경우에 일어나게 다반사 라고 한다. 그런데 난 분명 기술명세서에 나온 url을 그대로 복사하여 프록시 서버, 디코딩된 서비스키를 입력했는데, 모두 복사해온 텍스트들이라 오타가 났을 법하진 않다. https://www.howtogeek.com/357785/what-is-a-403-forbidden-error-and-how-can-i-fix-it/#autotoc_anchor_2 What Is a 403 Forbidden Error (and How Can I Fix It)? A 403 Forbidden Error occurs when a web server f..

이 질문을 이해하기 위해선 자바스크립트에서 비동기 처리에 사용되는 객체인 promise에 대해 먼저 정리를 하고 넘어갈 필요가 있다. 항상 공부를 시작 할 땐 '왜'를 생각해보는건 좋은 공부 방법인 것 같다. 여기선 비동기 처리에 기본이 되는 api들이 어떤 이유에서 쓰이는건지 대해서만 다룬다. 순서 Http api 와 REST api XMLhttpRequest Promise Axios Http api 와 REST api 비슷한 의미로 쓰인다. http api는 http를 이용해서 정해둔 스펙으로 데이터를 주고 받는 것. REST api 는 조금 업그레이드되서 제약조건이 추가된 것 이다. 그래서 더 넓은 의미로 쓰인다. REST를 인터넷에 쳐보면 각자 정의한 바가 다르다. 그 중에 가장 와닿았던건 "자원..

🧚🏻발단 부동산 매물의 정보를 조회, 검색 할 수 있는 프로젝트를 진행하던 중이었다. 부동산 관련 open Api 를 쓰려는 시도로만 5시간을 넘게 머리를 감싸고 있었는데, 끝내 잘 받아온 것 같았던 데이터는 온데간데 없고 무시무시한 'CORS' 에러를 만났다. 허리도 아프고.. 배도 고프고.. 새벽 3시고.. 에라. 그런데 언젠가 한번 본 아이 같은데, 잘 기억은 나지 않는다. 그때는 지레 겁먹고 넘어갔지만 이젠 나름 머리에 뭐 좀 들어갔다고! 당신의 로컬포트에서 해당 Url로의 접근이 CORS 정책에 의해 막혔음.요청 자원에 'Access-Control-Allow-Origin' 헤더가 존재하지 않는다. 그래요.. 차근차근 CORS가 뭔지부터 알아보자. 🧚🏻분석 교차 출처 리소스 공유(Cross-Ori..

v-model: 사용자의 입력을 받는 UI 요소들에 v-model이라는 속성을 사용하면 입력 값이 자동으로 뷰 데이터 속성에 연결시킨다. input, textarea, select 같은 애들을 쓸 떄 활용된다. 기능을 잘 보면 v-on 과 v-bind 의 기능이 합쳐졌다는걸 알 수 있다. 작은 기능이지만 이걸 보고 뷰를 선택하길 잘 했다는 생각이 들었다. 리액트 쓸 때 input의 value 값을 받아오려면 inputHandle이라는 함수를 만들어서 e.target.value로 value를 가져와 state에 연결하는 방식으로 했었는데 .. 좋네 :) HTML 입력 요소의 종류에 따라 v-model 속성이 각각 다음과 같이 구성된다 (1) input 태그에는 value / input (2) checkbo..

단방향 데이터 바인딩은 리액트의 대표적인 특성 중 하나이다. 리액트 썻을 때 그냥 희끄무리하게만 이해하고 있던 특성이 었는데, 뷰에 입문하니 이번엔 양방향 바인딩이란 말이 나온다. 말 나온 김에 정리!🤓 먼저 바인딩, 데이터 바인딩 이라는 말부터 정리해보자. 데이터 바인딩이란? 쉽게 말해 두 개의 데이터를 똑같게 만드는거다. 여기서 두 개의 데이터란 화면에 보이는 데이터랑 브라우저에 저장되있는 데이터 각각을 말한다. 예를 들면 MVC패턴에서 model, view를 묶어서 데이터를 같게 만드니까 이것을 데이터 바인딩이라고 할 수 있겠다

상황 : 아이템 리스트의 정렬상태를 처음 상태로 되돌려주는 Sort button 을 만들던 중 에러 발생 바뀐 데이터들을 처음 상태로 되돌려주기 위해선 처음의 상태를 보관하고 있는 변수가 필요했다. 그래서 변경 상태를 저장할 데이터변수 products와 그에 대한 shallow copy에 의해 만들어진 initialProducts 를 만들어 주었다. 올.. 제법.. 괜시리 뿌듯하다. 주의) 이후엔 sort를 실행시키는 함수 안엔 당연히 현재의 sort 상태에 initaialProducts를 바인딩시키는 코드를 입력하면 된다. 이제 되돌리기 버튼 click 하면 처음의 상태도 되돌려주겠지? 그럼 그렇지. 잘 바뀐다. 에러 발생 신나게 가격 높은 순 -> 되돌리기 -> 가격 높은 순 -> 되돌리기 왔다갔다 ..

자주 쓰이는 개발 용어들을 정리했다. 봐도봐도 이렇게 기억이 안 날 수가 있나? 여기에 박제라도 시켜놓으면 덜 까먹겠지. Contents Rendering MVVM Instance랑 Component의 차이 Encapsulation Responsive(반응형) Description - Rendering : 쉽게말해 html 파일에 데이터 뿌리기 - MVVM pattern: View-ViewModel-Model 로 이루어진 아키텍쳐 디자인. MVC에서 C(Control)이 VM(ViewModel)로 대체됬다. 실제로 Vue에서 MVVM패턴을 쓰고있지는 않지만 영감을 받았다고 한다. - Instance랑 Component의 차이 Instance Vue 앱의 진입점이 되어 간단한 템플릿 렌더링부터 데이터 바인..

fs.readFile 을 통해 database 파일에서 json데이터 뭉치를 가져오려고 하는데 계속 아래와 같은 에러가 떴다. undefiend 상태의 파일을 then으로 읽을 수 없다고 한다. (+경로 뒤에 콜백함수 없이 바로 then을 붙였더니 "콜백은 함수여야 한다"는 메시지도 떴다. ) 앞 뒤 코드를 몽땅 다시 쳐보고 수정도 해봐도 여전히 database에서 받아오는 데이터는 undefiend를 출력한다. console.log(fs.readFile(~)) 을 치면 잘만 나오던데..ㅜ 반전! 해결법은 매우 간단했다. 파일 관련 작업을 하는 모듈을 불러오는 API에서 promise를 반환하게 끔 해주는 promises 메소드를 추가해주니 에러가 아닌 promise를 반환했다. database의 데이터..

클라이언트 요청 처리 방법 중 하나인 get과 post에 대해서 정리해봤다. 마침 만들고 있는 카페 홈페이지에서 get,post 요청을 쓴다! 먼저 주소형태 요청인 GET 방식과 내부적으로 값을 전달하는 POST 방식 두가지 처리를 위주로 설명한다. 클라이언트 요청 GET 가. GET 요청 처리 주소값을 이용해 요청을 하는 방식입니다. 서버로 값을 전달하기 위해서 서버측 주소 끝에 ?(물음표)를 붙이고 key1=value & key2=value2 의 형태로 요청합니다 localhost:3000/?id=login // 예1 http://naver.com/Post.nhn?postId=12312312&cafeId=152342 // 예2 예2를 보면 브라우저를 통해 http://naver.com/Post.nh..