본문 바로가기

programming

 (124)
[JS] List of Json 객체로 이루어진 리스트에서 최솟값/최댓값 또는 해당 객체의 index 찾기 흔하게 많이 사용되는 간단한 알고리즘(?)을 정리하려한다 다음과 같이 객체로 이루어진 리스트가 있다 const transactionList = [ { id: 1, transactionId: 99, sellDate: "20220801", price: 300, }, { id: 2, transactionId: 99, sellDate: "20220701", price: -200, }, { id: 3, transactionId: 99, sellDate: "20221001", price: 400, }, { id: 4, transactionId: 99, sellDate: "20221101", price: -100, }, ]; [Case1] 여기서 sellDate 가 가장 빠른 날짜를 찾고 싶다 1. 리스트 안의 Ob..
OOP(Object Oriented Programing) 객체지향 프로그래밍 질문 받았던 내용 중에 머릿 속에서 구름처럼 어렴풋이 알았던 것이 드러나서 구름을 걷어내 보고싶었다. 1. 객체 (Object) 객체는 대상, 오브젝트, 한 덩이(?), 하나의 개념 예를 들어 사람을 하나의 객체라고 할 수 있고, 자동차를 하나의 객체라고 할 수 있다. 프로그래밍 적으로는 커스텀한 ValidException 을 하나의 객체라 할 수 있고, 한가지 로직을 수행하는 SomethindService 도 하나의 객체라고 할 수 있다. 2. 클래스 (Class) 객체들이 공통적으로 갖는 속성들을 모아서 정의 내린 것을 클래스 라고 한다. 흔히 말하는 객체는 붕어빵, 클래스는 붕어빵 틀 좀더 코드에 가깝게 예시를 들면 class SomethingService 내부에 어쩌구 서비스를 구성하는 요소들을 ..
[Nuxt] Vue 페이지나 컴포넌트에서 분리된 공통 함수 사용하기 제목을 어떻게 지어야할 지 고민이었다. 물론 방법을 찾는 과정에서도 검색어를 뭐라고 해야할지도 고민이었다. 일단 하고싶은건, 로컬 변수를 쓰는 페이지나 컴포넌트 내부에 공통으로 자주 쓰이는 함수를 common 화 하는 것이었다. 이전에는 흔하게 functions/common.js 이런식으로 자주 사용되는 함수들을 죄다 모아놓던가 했었다. 함수 별로 각각 사용되는 매개변수들을 일일히 정의하고 넘겨주는 것은 덤이요,,, 최종적으로 선택해서 사용한 방법 Mixins) redirect to 👉 https://tacit.tistory.com/166 [Nuxt] (mixins 사용법) vue 페이지나 컴포넌트에서 분리된 공통 함수에서 this 사용하기 [Nuxt] Vue 페이지나 컴포넌트에서 분리된 공통 함수 사용..
An invalid form control with name='' is not focusable. input 에 required를 주고는 조건(v-if) 에 따라서 display none이 되도록 설정되어있음 required로 되어 있는데… div에서 display:none으로 보이지 않도록 했으니깐… submit를 누르면 에러표시를 할 수가 없어서 그런거다. 공존할 수 없는 몇가지가 있다 readonly & requried 불가
REST API 메서드 예시 (GET/POST/PUT/PATCH) 1. GET -> 파라미터로 받아온 id로 해당되는 Cat 객체 찾기 router.get('/cats/:id', (req, res) => { try { const params = req.params; const cats = Cat.find((cat)=> { return cat.id === params.id }) res.status(200).send({ success : true, data: { cats } }) }catch(error) { res.status(400).send({ success: false, error : error.message }) } }) 2. POST -> 신규 객체 추가 router.post('/cats', (req, res) => { try { const data = req.b..
[Express] Post로 JSON 데이터 보내기 (미들웨어 설정) express 설치 후 post로 JSON 객체를 보내려는데, undefined 가 뜬다 post 라우터 app.post('/cats', (req: express.Request, res: express.Response) => { try { const data = req.body console.log(data) res.status(200).send({ success: true, data : {} }) } catch(error){ res.status(400).send({ success: false, error: error.message }) } }) 포스트맨에서 테스트한 내용 백엔드 라우터에서 콘솔로그로 받은 req.body -> undefined 이는 아주 간단하게 해결된다 express가 json 데이터..
Restfull 웹 API 디자인(1) 잘 디자인 된 웹 API 라면 1. 플랫폼 독립성 : 내부에서 어떤 방식으로 구현되는지와 관계없이 API를 호출할 수 있어야 한다. 표준 프로토콜을 사용 2. 서비스 진화 : API가 수정되어도(진화) 기존의 어플리케이션은 수정 없이 계속 작동할 수 있어야 한다. 기본 디자인 원칙 1. 리소스 중심 디자인, 클라이언트에서 접근할 수 있는 모든 종류의 개체, 데이터, 서비스가 리소스에 포함된다. https://tacit.com/orders 2. 리소스마다 해당 리소스를 고유하게 식별하는 URI인 식별자가 있다. https://tecit.com/orders/5 3. HTTP 요청은 독립적, 상태를 저장하지 않는다. 4. 표준 HTTP 동사 수행 : GET, POST, PUT, PATCH 5. 리소스 URI는..
[Vue] 하위 input 컴포넌트에 상위 data 연결 (emit & v-model) [TODO] - page/test.vue test 페이지 안에서 form 데이터들(name, phone, email 등등) 을 변수로 관리하고, 그 데이터들을 모아서 백엔드로 전달 input 태그 가 특정 컴포넌트로 쌓여서 template에 바로 쓰이지 않고, 하위 컴포넌트 안에 들어가야함 [SOLUTION#1] - emit으로 하위 컴포넌트 데이터(e.target.value) 를 상위 컴포넌트(page/test.vue) 로 전달 # 상위 컴포넌트 (pages/test.vue) # 하위 컴포넌트 (components/SearchInput.vue) search [SOLUTION#2] - v-model 사용 # 상위 컴포넌트 (pages/test.vue) # 하위 컴포넌트 (components/SearchI..
[Vue] textarea 조건부 랜더링시 focus 이동 안되는 케이스 해결 -> $ref.focus() & nextTick() 메소드 [TODO] 입력 Form 에서 사용자가 Yes / No 중 Yes 라고 답하면 상세 내역을 적기 위한 textarea 를 보여주어야 한다 [WHAT I DONE] - "YES" 버튼을 클릭시 setAnswerY 메소드를 실행하여 this.answer_y = true 로 세팅 - this.answer_y 값이 true 이면 - textarea 요소가 보이고 focus 도 자동으로 이동 [첫번째 시도] setAnswerY() { this.answer_n = false this.answer_y = true // 마우스 커서 이동 this.setFocus('inputText') }, setFocus(item) { this.$refs[item].focus() }, ✔️ 결과 answer_y=true 로 바꾸는..
Node-Sequelize-Mysql (4) Model 생성 & migrations 파일 생성 1. migrations 파일 & model 생성 sequelize model:generate --name Member --attributes name:string, password:string DBMS에 적용하기 위한 migrations 파일이 만들어지고, ORM에서 객체로 사용할 memer.js 파일이 만들어진다 2. 생성된 migrations 파일에 필요한 컬럼 추가 "use strict"; module.exports = { async up(queryInterface, Sequelize) { await queryInterface.createTable( "members", { id: { allowNull: false, autoIncrement: true, primaryKey: true, type: S..

티스토리툴바