본문 바로가기

프론트엔드6

[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 만들기] #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.

티스토리툴바