본문 바로가기

react9

[React/JS MBTI 만들기] #05. MBTI 이미지 삽입 및 UI, 컨텐츠 수정 (scss, li 태그 커스텀, ::before, ::after, git 배포) [React/JS MBTI 만들기] #05. MBTI 이미지 삽입 및 UI, 컨텐츠 수정 (scss, li 태그 커스텀, ::before, ::after) 1. 기간 24.04.01 ~ 24.04.07 : 개발 24.03.29 ~ 20.04.01 : TypeScript 문법 공부 2. 목차 MBTI 컨텐츠 수정 잘 맞는 & 잘 맞지 않는 MBTI 이름으로 보이게 수정 및 li태그 커스텀 MBTI에 맞는 그림 삽입 폰트 수정 및 적용 깃허브에 배포하기 향후 계획 3. 결과물 - 깃허브 배포 사이트 : React App (ji-ny.github.io) - 결과물 동영상 01. MBTI 컨텐츠 수정 1) 원래 MBTI contents 객체 {mbti:"ISTP", name: [''], contents:['벼락.. 2024. 4. 11.
[React/JS MBTI 만들기] #4. 공유하기, 애니메이션 및 퍼블리싱 (Web Share API / @keyframes / animation / scss) [React MBTI 만들기] (JavaScript/scss) #04. 공유하기, 애니메이션 구현 및 퍼블리싱 Web Share API / @keyframes / animation / css3 / scss 목차. 00. Intro 01. 변경된 디자인 퍼블리싱 02. 공유하기 구현 03. 애니메이션 구현 04. 전체 코드 05. 마무리 00. Intro 오늘의 최종 결과물 동영상이다. 이번에는 저번에 Figma로 디자인한 것을 퍼블리싱했고, 그 과정에서 공유하기 기능을 넣었으며 , 마지막 페이지도 새로 짜서 넣었고, 애니메이션도 넣었다. - 기간 : 2024.03.21 ~ 2024.03.24 - 주요 기술: Web Share API / @keyframes / animation / css3 / scss /.. 2024. 3. 25.
[React MBTI 만들기] #03. 결과페이지 제작 / Figma 디자인 / 테스트 컨셉 변경 [React MBTI 만들기] (scss/JavaScript/git) #03. 결과페이지 제작 / Figma 디자인 / 테스트 컨셉 변경 목차.00. Intro 01. 결과페이지 완성. 02. MBTI Figma 디자인 및 컨셉변경 03. 마무리 04. 최종 코드 및 깃허브 00. Intro 이번에는, React MBTI 테스트의 결과페이지 제작을 마무리하고, 배포도 다시 진행했으며 그 후 테스트 컨셉을 변경해서 스토리를 짠 다음 이를 토대로 Figma 디자인을 진행했다. 디자인하는데 재미있어서 디자인을 몇 시간 동안 한 것 같다. React MBTI 개발이 생각보다 금방 끝날 줄 알았는데, 학업과 병행하며 내가 만들고자 하는 컨셉으로 변경하려니 꽤나 시간이 소요되는 것 같다.사용 기술 : React, .. 2024. 3. 19.
[React MBTI 만들기] #02. 시작/테스트/결과 페이지 만들기 | Objects are not valid as a React child 오류 해결 | (scss/JavaScript) [React MBTI 만들기] (scss/JavaScript/git) #02. 시작/테스트/결과 페이지 만들기 Objects are not valid as a React child 오류 해결 1편에 이어서 이번에는 MBTI 시작페이지와 테스트페이지를 만들었다. 마지막 결과 페이지도 살짝 있다. 00. 사용 기술 - React / scss / JavaScript- git / github 01. 결과 사진 02. 중간 오류 (해결) 중간에 이런 오류가 발생했었다. Objects are not valid as a React child (found: object with keys {mbti, contents}). If you meant to render a collection of children, use an.. 2024. 3. 11.

티스토리툴바