728x90 반응형 Study/ft_transcendence15 [React] 22.07.11 회고록 후회 바쁘다는 핑계로 리액트로 프로젝트를 하면서 시행착오와 배운 것들을 정리하지 않았다. 프로젝트를 목표한 시간 내에 끝내야 한다는 압박감에 블로그에 정리하는 것은 사치다 라고 자기위로를 하며 하루하루를 보냈다. 프로젝트를 시작하고 매일매일 검색하고 들이받아보면서 지금까지 왔는데 그것들을 다 정리해놓았다면 나중에 조금이라도 도움이 되지 않았을까 하는 후회를 뒤로하고 오늘부터라도 오늘의 시행착오 및 배운 것들을 나열하면서 기록해두자는 생각을 하게 되었다. 그래 오늘부터라도 시작하자. 이미지 업로드 리액트로 이미지를 업로드하는 여러 글들을 찾아보았다. function PopUpProfile(): JSX.Element { const [preview, setPreview] = useState(DefltImg);.. 2022. 7. 11. [CSS] CSS 조금 더 깊게 맛보기 (노마드 코더) Transition 어떤 상태에서 다른 상태로의 변화를 애니메이션으로 만드는 방법 transition 속성은 state가 없는 엘리먼트에 추가해서 사용해야 한다. HTML 삽입 미리보기할 수 없는 소스 위의 go home에 마우스를 올려보면 상태 변화가 애니메이션처럼 나타나는 데 transition 속성을 이용하여 만든 것이다. Go home 아까 위에서 말한 transition은 state가 없는 곳에서 작성해야 한다는 말을 위의 코드를 보면 이해가 될 것이다. transition으로 바꿀수 있는 것은 원래의 엘리먼트와 :hover state가 있는 엘리먼트 두 곳에 모두 존재하는 속성들(여기서는 border-radius, color, bg-color)이다. 주석한 부분이 transition을 사용하는.. 2022. 6. 17. [CSS] CSS 맛보기 (노마드코더) 이번에도 마찬가지로 인터넷 강의를 들으면서 쭈루루루룩 기록만 하는 식입니다. CSS CSS(Cascading Style Sheets)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일언어이다. HTML과 XHTML에 주로 쓰이며 XML에서도 사용할 수 있다. HTML과 같은 마크업 언어가 몸체를 담당한다면 CSS는 옷과 악세사리처럼 꾸미는 역할을 담당한다. 먼저 어떻게 하면 CSS를 HTML 페이지에 추가할 수 있는지 이해를 해야한다. 첫 번째 방법은 같은 HTML 파일에 HTML 코드와 CSS 코드를 같이 작성하는 것이다. 두 번째 방법은 대부분의 사람들이 추천하는 방법으로 CSS와 HTML 코드를 따로 분리해서 놓는 것이다. html 블럭을 사용하면 tistory css까지 건드려버려서 올릴 수가.. 2022. 6. 14. [Html] html 맛보기(노마드 코더) 이 글은 팀과제를 진행하면서 개인적으로 두서없이 학습한 정보를 기록한 것이기 때문에 정리글이 아니라 보기 불편할 수 있습니다. Html이란? html(Hyper Text Markup Language)은 웹페이지를 위한 마크업 언어이다. 강의에 따르면 html은 웹 브라우저에게 이게 무엇인지 알려주는 것이 목적이라고 한다. 이건 제목, 이건 이미지, 이건 링크 라고 태그를 사용하여 웹브라우저에게 전달한다. 태그는 기본적으로 여는 태그와 함께 닫는 태그가 따라온다. 태그 사이에는 content가 존재한다. kimchi 이건 그냥 html의 간단한 문법을 보여주는 예제이다. food 태그는 실제로 아무런 동작을 하지 않는다. 태그를 작성할 때 올바른 text와 올바른 위치에 그에 맞는 태그를 사용하면 브라우저.. 2022. 6. 7. [UI / UX] UI 와 UX 란? UI 란? UI는 사용자 인터페이스, 유저 인터페이스 (User Interface)이다. 사용자와 컴퓨터 프로그램 사이에서 의사소통을 할 수 있도록 만들어진 물리적, 가상적 매개체이다. 사용자 인터페이스는 사람들이 컴퓨터와 상호 작용하는 시스템인 것이다. 사용자 인터페이스는 크게 다음과 같은 수단을 사용한다. 1. 입력 : 사용자가 시스템을 조작할 수 있게 한다. 2. 출력 : 시스템이 사용자가 이용한 것에 대한 결과를 표시한다. 3. 삭제 : 시스템이 사용자가 잘못한 것을 삭제한다. 좋은 사용자 인터페이스는 심리학과 생리학에 기반하여, 사용자가 필요한 요소를 쉽게 찾고 사용하며 그 요소로부터 의도한 결과를 쉽게 얻어낼 수 있어야 한다. UX 란? UX는 사용자 경험(User Experience)이다. .. 2022. 6. 6. [Transcendence] 시작 42seoul의 마지막 과제 ft_transcendence 앞으로 짧으면 2달 길면 3달동안 React를 이용하여 Front-end 작업을 하게 되었습니다. 진행하면서 React에 대해 공부한 것들과 시행착오들을 블로그에 정리해볼 예정입니다. 2022. 6. 2. 이전 1 2 다음 728x90 반응형
