Dev82 사용자 관점의 UI 구성하기 💭 서론 인턴십 기간 동안 실제 프로젝트에 투입되진 못했지만 우리 부서가 개발 중인 서비스의 유사 서비스 업체의 랜딩페이지 클론 업무를 하게 되었다. 업무를 진행하며 어쨌든 내게 주어진 일이다보니 구현에 급급했는데, 팀장님께서 구현하는 것에만 급급해 하지 말고 레이아웃 목업부터 시작해 사용자 관점을 생각해보라고 피드백을 주셨다. 기억에 많이 남는 피드백이었어서 따로 기록해본다. 1. 어설픈 반응형 보단 스크롤 적용을 완전한 반응형 구현에 미숙했던지라 뷰의 사이즈에 따라 컨텐츠가 잘려 보이지 않는 순간들이 존재 했었는데, 반응형보다 우선시 되어야 할 것은 사용자가 보는 컨텐츠는 어느 순간에도 보이지 않으면 안 된다는 것이다. 따라서 어설픈 반응형을 구현하려다 컨텐츠 안 보임 이슈를 발생시키지 말고 min-.. 2023. 9. 5. HTML, CSS로 토글 버튼 만들기 🤩 완성본 먼저 보기 CSS 수업을 들으며 transition 속성을 가지고 여러 응용 실습을 해봤는데 그중 토글 버튼은 따로 기록하고자 한다! 프로젝트 할 때 팀원 언니가 토글버튼 만들었어서 나도 만들어 보고 싶었다 ㅎㅎ HTML과 CSS만으로 정적으로 만든 버튼이라 실제로 데이터를 내보내려면 자바스크립트가 들어가고 다소 복잡해지겠지만 궁금했던 버튼 구현 하나 해봤다는 것에 의의를.. 💪🏻 1. HTML 작성 on/off 아무런 스타일이 입혀지지 않은 화면은 위와 같이 체크박스와 라벨 태그 뿐이다. CSS로 모양을 잡아주는 것! 2. CSS 작성 /* 체크박스 */ #toggle-slider { display: none; } label { text-indent: -999em; cursor: pointe.. 2023. 6. 9. 솔리디티 string memory (데이터 저장 영역) 💭 서론 솔리디티를 찍먹 해보는 과정에서 string 자료형 옆엔 꼭 memory가 붙는단걸 알 수 있었다. 무슨 의미인지 수업 시간에도 간단히만 알려주셔서 그냥 "스트링은 메모리를 꼭 붙여야 하는군" 정도로 외워 쓰기만 했다. 틀린말은 아니지만 변수, 함수, 파라미터 등 데이터가 담기는 저장영역이 네 가지가 있단 걸 알게 되었고 붙이는 이유를 알기 위해 정리해보기로 했다. 위 코드는 단순 name이란 변수를 리턴해주는 컨트랙트이다. 솔리디티는 함수의 리턴값이 있을 때 함수 끝에 returns (자료형)을 정의해주어야 하는데 사진에서 보이듯 string은 memory를 붙여줘야 했다. 우선, 솔리디티에서는 string 자료형이 파라미터로 입력되거나, string 자료형을 함수 내에서 쓰려면 memory를.. 2023. 6. 1. 자바스크립트 File input 동적 추가, 삭제하기(이벤트 위임) 서론 💭 전에 진행했던 프로젝트에서 j쿼리를 이용해 작성한 코드를 자바스크립트로 바꾸는 과정을 진행하고 있는데 약간의 애를 먹었던 동적으로 input file 태그를 추가해주는 작업! 파일 추가 버튼을 누르면 input이 추가 되고 추가된 삭제 버튼을 누르면 해당 input이 삭제되는 기능이다. input 태그는 잘 늘어나는데 삭제가 뒤죽박죽으로 됨, 삭제는 되는데 파일 선택이 안 됨, 걍 삭제가 안 됨 등 다양했는데 어쨌는 해내었다 ㅎ JSP 일부 HTML 삽입 미리보기할 수 없는 소스 메인이미지는 이미지 한 장만 업로드 할 수 있도록 구현했기 때문에 상세이미지에만 기능을 적용했다. input 태그의 name 값으로 각각의 input을 구분하도록 했고 동적으로 input 태그가 추가될 곳은 div 태그.. 2023. 4. 29. 리액트 찍먹 3 - Component 컴포넌트 컴포넌트는 쉽게 말해 UI를 구성하는 UI 요소를 의미한다. 리액트 홈페이지의 공식 문서에 따르면 컴포넌트를 사용하면 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다고 설명한다. '재사용 가능'과 '개별적으로 살표 볼 수 있음'이 핵심이라고 볼 수 있을 것 같다. 컴포넌트는 간단히 이런식으로 사용할 수 있다. 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것이다. 함수 안에 UI를 제작하여 컴포넌트를 사용할 부분에 HTML 태그를 사용하는 것 처럼 을 써주면 되는 것! 이로써 HTML을 줄여 쓸 수 있는 것이다. 이렇게 함수로 작성한 컴포넌트를 함수 컴포넌트라고 호칭하고 ES6의 class를 사용하여 정의할 수도 있는데 클래스 컴포넌.. 2023. 4. 21. 리액트 찍먹 2 찍먹 과정인 만큼 리액트로 간단하게 블로그 UI를 구성 했다! 1. navbar 생성 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 차례대로 App.js와 App.css App.js의 필요없는 부분을 모두 삭제하고 네이게이션 bar만 간단히 생성했다. (정말 구색용 ㅎㅎ..) class 대신 className을 사용할 것! 자동완성 덕분에 헷갈릴 일은 없다. 반응형도 잘 적용 되었다! 2. 제목과 내용을 보여주는 List - state로 변수 만들기 HTML 삽입 미리보기할 수 없는 소스 state로 제목 데이터를 저장했다. App() 함수의 return 위에 작성해주면 된다. state를 사용하려면 js 파일 최상단에 꼭 import React, { useState } .. 2023. 4. 14. 이전 1 2 3 4 ··· 14 다음
