UX·UI - FrontEnd Dev. Story

데이터 4

[리팩토링] 아카이빙 페이지 유지보수 중 데이터 DRY 이슈 정리

어느날 운영하는 홈페이지에 매달 판매 이력정보를 업데이트하는 아카이빙 페이지를 제작했다. 이 페이지는 어떤 기준의 데이터로 분기처리가 되는 방식인데.. 매월 그 달에 맞는 데이터를 불러와서 페이지에 담기도록 작업을 진행하게 되었다. 퍼블 작업 후에 다른 회사 프론트로 앞단 영역을 넘겼는데 나중에 데이터를 확인해보니 매달 달라지는 데이터를 복잡하게 만들어서 업데이트 할때마다 번거로움의 이슈가 발생... 이건 유지보수적으로 개노답이라는걸 파악하게 됨... [노답 데이터 리스트] 아니 매달 변경되는 정보를 넣어야 하는데 이렇게 복잡하게 적용한다는게 말도 안된다고 생각했다. 2-3달은 그렇다 치지만.. 이 페이지가 1년 운영할지 10년 운영할지 모르는데 그때마다 저렇게 하나씩 삼항연산자로 늘어간다니... 이건 ..

포스트맨 사용해서 post 보내는 방법 How to send POST request API in Postman.

포스트맨으로 GET으로 데이터 불러오는건 많이 해봤는데 POST 보내는건 안해봐서 매번 헷갈려서 정리한 포스팅. POST 사용하여 데이터 넘겨보기 1. POST로 설정 2. 하위 탭에서 'Body' 클릭 3. 그 하위 라디오버튼 리스트에서 'raw' 선택 4. 그럼 아래에 데이터 적을 수 있는 영역에 입력 5. 'send' 눌러서 데이터 보내기 ※ 데이터 넘길때 필수로 들어가야하는 key 값인지 체크해보기 GET에서 데이터 들어갔는지 확인해보기!

프론트엔드 2024.02.15

[HTML] form 태그 사용하는 다양한 방법 / 개념잡기

폼[form]은 웹 페이지의 정보를 다른 페이지로 전송하는 역할을 한다. 단순히 텍스트 내용만 보여주는 페이지말고 서로 데이터를 주고 받으며 움직이는 웹 페이지일 경우 반드시 들어가는 태그 요소이다. ex. 아이디와 비밀번호는 태그가 자신의 내부에 있는 정보를 넘기는 것 1. 폼(form) 속성 종류 알아보기 action : 폼 내부에 데이터를 보내는 목적지 url을 지정한다. actocomplete : HTML5에 추가되었으며 양식의 자동완성을 지정한다. enctype : 넘기는 content 타입을 지정하는데 주로 파일을 넘길 때 많이 사용. entype="multipart/form-data"로 지정해서 사용한다. method : 폼을 서버로 전송하는 http 방식을 지정. POST와 GET이 있다...

[용어정리] 사용자 입력처리하기 / 비동기적 / 동기적 처리란?

동기적 (Synchronous ) 일반적으로 프로그래밍에서 코드의 실행은 작성된 코드의 위에서 부터 아래로 진행된다. 이처럼 코드가 위에서부터 아래로 내려가면서 하나가 끝나면 다음 코드가 실행되는 방식을 동기적 처리라고한다. 비동기적 (ASynchronous ) - 이벤트가 언제 일어날지 프로그래머가 전혀 알 수 없는 이벤트를 말한다. 즉, 연속적으로 발생하는 이벤트를 담은 후 완료되는 순서대로 일을 처리하는 실행 순서가 확실하지 않는 것. 사용자의 마우스 클릭도 비동기적 이벤트의 일종이다. 사용자의 마음에 들어가지 않는 한 언제 클릭할지 알 수 없기때문이다. 비동기적 처리가 필요한 이유는? 원하는 데이터를 서버로부터 받아오는 방식의 어플리케이션을 만들었다고 가정해보자. 서버로부터 데이터를 받아서 해당 ..

반응형