코딩도 합니다/Dev (3) 썸네일형 리스트형 [개발 Dev] JSON 서버 구축하기 / 로컬에서 API JSON 서버 구축하기 / 로컬 서버 만들기 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 프론트엔드 개발자가 로컬에서 JSON 서버를 구축하는 방법에 대해 다뤄보겠습니다. 보통은 백엔드 개발자가 만들어 놓은 api를 프론트엔드 개발자가 전달받아 사용하는데요. 저는 개인적으로 실무작업할 때, 백엔드 개발자분이 작업해줄 때까지 기다리질 못합니다. 마감일은 정해져있고, 일은 많고..^^ 또, 이 방법은 혼자 스터디하시는 분들에게도 정말 좋을 것 같습니다. 어렵지 않으니 차분히 따라해 주세요! 로컬 API JSON 서버 구축하는 방법 1. VSCODE에서 새 창(New WIndow)를 열어주세요. 2. 바탕화면에서 새로운 폴더를 하나 생성해 주세요. (꼭 바탕화면이 아니어도 좋습니다.) 3. VSCODE에서 새로 만든.. [개발 Dev] 모바일에서 로컬 열기 / 모바일에서 localhost 접속하기 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 모바일에서 로컬 여는 방법을 다루려고 합니다. vscode로 웹개발할 때 저희는 로컬을 열어서 확인하죠? html은 'Go Live' 혹은 'Open with Live Server'로 로컬을 열고, npm이나 yarn은 터미널에 npm start이나 yarn start 명령어를 입력하여 로컬을 엽니다. (명령어는 지정하는 내용에 따라 달라질 수 있습니다.) 웹개발할 때 사용자의 편의를 위해서 '반응형'을 꼭 진행하는데요. 🖐🏻 여기서 잠깐, 반응형이 뭘까요? PC > 태블릿 > 모바일 화면에서 브라우저 내용이 깨지지 않고 보일 수 있도록 브라우저 사이즈별로 스타일 및 기능을 따로따로 잡아주는걸 반응형이라고 합니다. 반응형 .. [개발 Dev] [] 사용법 / 대괄호 선택자 / 비표준속성 활용하기 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 대괄호선택자[] 사용 방법에 대해 다뤄볼게요! 할 일 : 담당자 : 상태 : 뚝딱 공부중 뚝딱 개발중 [status] { padding : 5px; } [status="개발중"] { background-color: yellow; } [속성이름] : 대괄호를 이용하면 대괄호 안에 있는 속성 이름을 가진 태그들을 선택할 수 있습니다. [속성이름="값'] : 속성이름에 해당 값을 가진 태그들을 선택할 수 있습니다. 1 선택자로 활용 const fields = document.querySelectorAll('[field]'); 2 값을 표시할 태그를 구분할 때 활용 비표준 속성은 객체 형태의 데이터가 있을 때, 각 프로퍼티 값들이..