본문 바로가기

전체 글

[design] 애플, 구글 디자인 가이드 https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/ Human Interface Guidelines - Human Interface Guidelines - Design - Apple Developer developer.apple.com https://m2.material.io/design/introduction Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital ex.. 더보기
[design] UI/UX 앱디자인시 고려해야 할 가이드라인 https://brunch.co.kr/@chulhochoiucj0/8 모바일 UI·UX 디자인시 고려해야 할 가이드라인 1 애플 iOS HIG와 Material design 가이드를 중심으로 | 모바일 앱과 웹 디자인은 데스크톱 웹 디자인과는 많은 부분이 다릅니다. 이는 각 기기device의 특성과 사용 맥락의 차이에서 기인합니다. 우선 모 brunch.co.kr 너무 좋은 글 정독하기 ! 버튼 https://brunch.co.kr/@chulhochoiucj0/23 모바일 UI 디자인 기본 요소 - 버튼 가장 본질 적인 모바일 UI 컨트롤 | 버튼 Button은 사용자가 데이터를 전송하거나 기능을 실행하도록 하는 명령 컨트롤 imperative control이다. 에서 엘런 쿠퍼는 “컨트롤의 세계에서 가.. 더보기
[design] 어도비 Xd 엑스디 꿀팁 모음 (툴 설명, 단축키 등) https://blog.naver.com/nyk8765/222151788664 어도비 Xd 엑스디 꿀팁 모음 (툴 설명, 단축키 등) 'Xd (엑스디)'란 웹이나 모바일 앱의 UX, UI 디자인 툴로 개발자와의 협업, 프로토타입 제... blog.naver.com 더보기
[javascript] 문자열 뒤집기 배열은 reverse를 사용하여 쉽게 뒤집을 수 있지만 문자열에는 reverse가 적용이 안된다. 그래서 문자열을 배열로 바꿔준 뒤 reverse 사용 그리고 다시 문자열로 변환해줘야 함 my_string.split('').reverse().join(''); 요런 방법도 있네요 [...my_string].reverse().join(""); 더보기
[react] 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(UnControlled Component) 1. 제어 컴포넌트(Controlled Component) 입력 폼 엘리먼트(input, textarea, select)는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. state는 setState()에 의해 계속해서 업데이트되기 때문에 입력 폼 엘리먼트에 value에 state를 적용해주면 그 엘리먼트는 제어 컴포넌트가 된다. 제어 컴포넌트는 사용자에게 보여지는 화면과 저장된 데이터가 실시간으로 동기화된다. 실시간으로 값이 필요할때는 제어 컴포넌트를 사용하는 것이 좋다. import { useState } from 'react'; const App = () => { const [name, setName] = useState(''); const nameChangeHandler = e.. 더보기
[react] 절대 경로 사용해서 import 하는 방법 Importing a Component | Create React App This project setup supports ES6 modules thanks to webpack. create-react-app.dev 프로젝트 가장 상위 폴더에 jsconfig.json 파일을 생성한다. 생성된 jsconfig.json 파일 안에 아래 코드를 넣어주면 끝! { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } import Button from './Button'; 상대 경로로 import하던 것을 import Button from 'components/Button'; 이제 절대 경로로 import 가능하다. import Button from 'sr.. 더보기
[github] .gitignore 파일 사용방법 1. .gitignore 파일이란? 버전 관리가 필요하지 않은 파일이나 디렉토리는 무시하라고 git에게 알려줘야할 때 사용하는 파일 2. 버전 관리가 필요하지 않은 경우 프로젝트를 설치하고 나면 생성되는 node_modules 디렉토리에는 npm으로부터 내려 받은 라이브러리 코드가 저장되어 있다. 이 디렉토리의 용량이 너무 클 수 있기 때문에 .gitignore 파일에는 항상 node_modules가 포함되어 있다. 이처럼 버전 관리가 꼭 필요하지 않은 경우가 몇가지 존재한다. /vendor 또는 /node_modules 와 같은 종속성 디렉토리 로그, 잠금, 캐시 또는 임시 파일과 같은 런타임 파일 암호 또는 API 키와 같은 중요한 정보가 있는 파일 .class 또는 .o와 같은 컴파일된 코드 .DS.. 더보기
[react] github에서 API key값 숨기기(ex. firebase) 폴더구조 firebase.js API 정보가 들어 있는 파일 "" 안에 값은 입력되어 있다고 가정! import { initializeApp } from 'firebase/app'; const firebaseConfig = { apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "" }; const app = initializeApp(firebaseConfig); export default app; .env 리액트에서 환경변수를 사용하기 위해서는 반드시 REACT_APP_를 필수로 입력해주고 그 다음에 key 이름을 적어줘야한다. 그렇게 해야 인식이 가능하도록 설.. 더보기

티스토리툴바