본문 바로가기

scss4

[React/js/scss] MBTI 테스트 만들기 코드 리뷰 (나와 잘 맞는 IT 직군/유명인 테스트) MBTI 테스트 만들기 코드 리뷰 (나와 잘 맞는 IT 직군/유명인 테스트)react / scss / javascript (JS) 📖 요약'울청스타'는 다양한 학과를 체험하고 진로를 탐색할 수 있는 특별한 행사입니다. 가온누리 학술 동아리에서 IT 분야에 대한 흥미를 불러일으키고자 '컴퓨터야 놀자!'라는 주제로 부스를 운영했습니다.MBTI를 통해 나와 찰떡궁합인 IT 직군과 유명인을 찾아볼 수 있는 체험으로 준비했습니다.배포 링크 : https://ji-ny.github.io/mbti_test_ulsan/ 울청스타 IT직업 & 유명인 MBTI 테스트울청스타 IT직업 & 유명인 MBTI 테스트 해보기! 나의 유형은?ji-ny.github.io ※ 참고 : 이미지 파일 출처는 나무위키, 뉴스 등 구글에 나.. 2024. 7. 17.
[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 만들기] #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.

티스토리툴바