FrontEnd 썸네일형 리스트형 VS CODE(IDE) 설치 및 설정 방법 바로 두 번째 포스팅 하겠습니다! VS CODE 설치 및 설정하는 방법들에 대해 정리했으니 참고해주세요~ https://bobo1201.notion.site/1-718b973faea041a08c709ad557640514?pvs=4 1. 코드(웹) 편집기 환경 설정 | Built with Notion 🖥️ 크롬 브라우저 설치 bobo1201.notion.site 대부분 설치만 하면되니 간단할거에요. 많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~ 더보기 VS CODE 자동 정렬 단축키 안되는 경우 안녕하세요 제가 너무 오래 쉬었어요,,ㅎㅎ 오늘부터 학습한 내용들을 다시 티스토리에 정리해서 올리려고 합니다! 첫 번째 포스팅은 VS CODE 자동 정렬 단축키가 되지 않는 경우!! 아래의 노션 블로그에 정리해두었으니 확인해주세요~~ https://bobo1201.notion.site/0-5f932eb45075423984993c6251a53216?pvs=4 0. 자동 정렬 단축키 안되는 경우 해결 방법 | Built with Notion ❓ VS CODE에서 자동 정렬 단축키가 안되는 경우 어떻게 해결할까요? bobo1201.notion.site 다시 열심히 블로그 작성할테니 많이 참고해주시고, 잘못된 내용들은 언제든지 댓글로 남겨주세요~~~ 더보기 [java script] Vue.js ToDo List 만들기 1. ToDo List란? ▷ 할 일을 리스트한 어플리케이션입니다. ◎ 세부 기능 ▷ "체크박스 + 할일"을 나열하여 표시하는 기능 ▷ 체크하면 취소선을 긋는 기능 ▷ "할일"을 추가하는 기능 ▷ 취소선이 그어진 항목을 삭제하는 기능 ▷ ToDo의 총 건수나 처리완료 건수를 표시하는 기능 ToDo리스트 {{todo.text}} 처리완료삭제 {{ remaining }} / {{ todos.length }}건 처리 아래와 같이 값을 넣고 엔터키를 누르면 값이 추가되고 체크한 것은 버튼을 누르면 삭제됩니다. ◎ 추가 세부기능 ▷ 완료일도 같이 입력하여 화면에 나타날 수 있도록 만듭니다. ▷ 완료일 연장을 누르면 기존 입력한 완료일에서 1씩 증가되도록 합니다. ▷ sort를 이용해 할일 또는 완료일 기준으로 오.. 더보기 [UI/UX] Adobe XD를 이용한 실습 및 단축키 사용법 Adobe XD를 사용하여 실습을 해보았습니다! ◎ 아트보드 복사, 붙여넣기 ▷ control + C, control + V ▷ alt키 + 마우스 (도중에 마우스를 떼면 안됩니다!) ◎ 도형 그리기 ▷ 화면 왼쪽의 도형 아이콘을 눌러서 사용하면 됩니다. ▷ 직선, 정사각형, 정삼각형 등을 만드려면 shift키를 같이 누르면 됩니다. 왼쪽 인터페이스 도형 아이콘 아이콘을 이용한 그림 그리기 여기서 펜을 이용해서 그릴때 곡선을 그리려면 클릭한 상태를 유지해 옆으로 마우스를 드래그하면 형성됩니다! 이렇게 반복하면 구름 형상을 그릴 수 있습니다. ▷ 오른쪽 인터페이스의 자물쇠 버튼을 누르면 비율이 고정되고 해제하면 비율 고정 없이 도형의 크기가 변경됩니다! ▷ 내부의 점을 이용하면 모서리를 둥글게 만들 수 있.. 더보기 [UI/UX] 기본 프로세스는? NO STEP 1 STEP 2 STEP 3 STEP 4 1 목표수립 키파인딩 & 인사이트 무드보드 IA설계 2 관련 UX분석 와이어프레임 설계 3 이슈제기 런처아이콘 & 런치스크린 4 리서치 프로토타이핑 1. STEP 1 : 발견단계 ◎ 목표수립 : 현재 당면한 문제, 서비스 구조적 취약점 검토, 비즈니스인 해결책 가설 수립 예시) 배경) 골프레저 대중화 및 많은 경쟁사 등장 젊은층도 골프레저에 관심을 갖기 시작 문제) 일부 연령층 사용, 이용 고객 수 낮음 구조적취약점) 홈페이지가 단순화되어 있고 정보가 부족함 목표:해결책 가설수립) 다양한 연령대가 선호할 수 있도록 홈페이지 디자인을 개선하고, 고객이 필요로하는 컨텐츠를 보강하면 많은 고객층을 확보할 수있을 것입니다. ◎ 관련 UX 분석 1. 시각디자.. 더보기 [UI/UX] UI/UX Design이란? 1. UX(User Experience) : 사용자 경험 ▷ 사용자가 어떤 제품이나 서비스와 상호작용하는 과정에서 얻는 총체적인 경험입니다. ▷ 사용자 경험 디자인 : 익숙함을 전제로 디자인 하는 것 ▷ 예시) 과거의 네이트온과 유사한 카카오톡 ▷ 사용성이 좋다 : UX가 좋음 ▷ 사용성이 나쁘다 : UX에 문제가 있음 ◎ UX 디자인 원리(3가지) (1) 일관성의 원리 ▷ 상단 네비게이션바,신세계 백화점 홈페이지, 이마트, 스타벅스 로고의 위치, SSG 닷컴 (2) 행동유도성의 원리 ▷ 사람이 자연스럽게 행동할 수 있게 하는 시각적인 요소 (3) 정보설계(정보위계) ▷ 페이지 구성을 위한 카테고리 정리 ◎ 원리를 알아야하는 이유? ▷ 디자인에 도움이 됩니다. ▷ 논리력을 키울 수 있습니다. 2. UI(.. 더보기 [java script] Vue.js JSON 데이터 다루기 1. JSON : JavaScript Object Notation ▷ 외부의 데이터를 읽어서 표시하는 방식입니다. ◎ JSON을 읽어 들이는 예제(Vue 사용 x) JSON을 읽어 들이는 예제（JavaScript）- console 출력 if문 안에 있는 내용을 보면 1. 파일을 읽어들이면 FileReader 오브젝트를 만들어서 파일을 처리 2. onload 이벤트로 읽어 들인 후 처리 3. e.target.result에 읽어 들인 데이터가 있는지 전체 데이터 출력 4. JSON.parse 메서드로 JSON 데이터로 변경 5. json 데이터 [0]에 있는 title 출력 6. json 데이터 [0]에 있는 body 출력 ◎ JSON을 읽어 들이는 예제(Vue 사용) JSON을 읽어들이는 예제（Vue.js.. 더보기 [java script] Vue.js 컴포넌트 1. 컴포넌트란? ▷ 부품으로 정리할 때 component를 사용합니다. ◎ 컴포넌트를 만들어 표시하는 예제 컴포넌트를 만들어서 표시하는 예제 (1) HTML부 → 준비된 컴포넌트가 표시됩니다. (2) script부 위와 같은 방법으로 사용하면 됩니다. 결과는 아래와 같은 방법으로 출력됩니다. ◎ 컴포넌트의 data를 function으로 만들기(각각 다른 카운팅 하는 컴포넌트) 예제 각각 다른 카운팅을 하는 컴포넌트 예제 2. props 옵션 : HTML의 태그에서 값을 받아 전달하는 것입니다. // script 부분 : 카멜 케이스 props: { myName: String } // HTML 부분 : 케밥 케이스 위의 형식과 같은 방식으로 연결을 해줘야 컴포넌트가 실행됩니다. my-name과 같은 형식.. 더보기 이전 1 2 3 4 5 다음
