언젠간 진화하겠지!

데브매칭 과제 테스트 중 하나를 실험적으로 따라해봤다. api가 따로 없어서, 그냥 express로 서버 간단하게 만들어서 켜놓고 있었다...ㅋㅋㅋ 바닐라로 spa로 만드는걸 처음해보는데 정말..정말.....익숙하지못해서 그런가? https://codesandbox.io/s/recursing-kowalevski-ughmzd recursing-kowalevski-ughmzd - CodeSandbox recursing-kowalevski-ughmzd by sweesweett using parcel-bundler codesandbox.io 이걸하면서 알게 된 점! dataset을 통해 인덱스 값을 가져올수 있다는 점! 하지만 보여야 하고 접근 가능해야하는 내용은 데이터 속성에 저장하지 마세요. 접근 보조 기술..

팀 프로젝트 프론트2/ 백3 ⏰개발 기간 22.09.08 ~ 22.10.07(계획 포함) 22.09.19 ~22.10.07(실제 개발 기간) 사용한 라이브러리(프레임워크) TypeScript, React, styled-components, axios, react-router, Redux-toolkit, styled-reset 배포링크 https://cactus-villeage.com 이번은 정말 다양한 경험을 했다. 내가 생각해낸 아이디어가 선정이 되고, 피그마로 화면을 첨부터 구성했고, 선인장 캐릭터를 그리고, 타입스크립트 리덕스툴킷을 처음으로 사용해봤다.메인에 나오는 선인장 내가 그린 것..! 하하하 내가 맡은 부분 페이지 기준 로그인,메인페이지 페이지로 보면 참 적다ㅎㅎ 다만 메인페이지에서는 모든 ..

팀 프로젝트 프론트2/ 백3 ⏲️ 개발 기간 22.08.23 ~22.09.06(계획포함) 22.08.25 ~ 22.09.06 (실제 개발 기간) 사용한 라이브러리(프레임워크) React v18(create-react-app), styled-component, zustand, react-router, toast-ui, axios 이번 프리프로젝트에서는 stackoverflow 클론코딩을 하게 되었다. 전체를 클론코딩 하기 보다는, 우리가 구현할 수 있는 부분만 구현하기로 했고, 과감히 메인 화면은 구현하지 않도록 했다. 내가 맡은 부분 반응형 웹 구현 회원 가입, 로그아웃 질문 리스트 조회(2개 로그인을 했을 때/ 안했을 때), 글 검색 조회, 질문 상세 조회 - pagination/sort 구현 질문/ ..

배포 홈페이지 https://sweesweett.github.io/react-diary-app/ Colorful Diary sweesweett.github.io 원래는 강의를 들으면서 복습 겸 만든거였다. 쓰기 귀찮아져서 깃허브의 README.md를 조금 수정해서 만들면서 힘들었던부분, 그런부분들을 적어나가려한다! !아이디어! 색상으로 오늘의 기분을 표현하는 다이어리 - 기분 점수 혹은 오늘기분 맑음 이런것 보다 눈으로 나타나면서 예쁘게 보였으면 싶어서! 색상으로 표현하는 나의 기분 이런 느낌의 아이디어를 바탕으로 구현을 시작했다 !구현 기간! 22.06~08 - 지금 듣는 국비(오전 9시~오후6시)강의 정규시간을 제외하고 만들어서 꽤나 시간이 많이 걸렸다. 리액트를 처음 다루기도했고, 강의가 중간에 리..

https://sweesweett.github.io/jsprac/ JS PRAC 여기는 Js+Html+css를 연습하기 위한 공간입니다! 하나하나씩 추가할 예정이에요! 지금까지 연습한 것 중에 하나 시계보기 가위바위보! 이미지 슬라이더 이미지 슬라이더2 카드 스와이퍼 보러가기! sweesweett.github.io 마우스 클릭 이펙트는 딱 index.html에만 해뒀다. setProperty를 사용해 각각의 원이 랜덤한 위치에서 랜덤한 크기에 랜덤한 지속시간을 갖도록 설정했다. 처음에는 애니메이션을 어떻게 해야할 지 조금 이해가 되지않아서 left / top을 사용해 해당 마우스가 클릭하는 위치에 이벤트가 활성화 되도록 만들었다가 이후에 translate를 사용해 변경하였다. 애니메이션에 랜덤하게 del..

https://sweesweett.github.io/jsprac/card.html 왜 업로드 날짜가가 왜이리 벌어졌지요? 말해보세요!!😂 정말 조지게 힘들었습니다요... 남이 하는걸 따라하는 건 쉽다. 그냥 코드만 치면되니까! 근데!!!그걸!!내꺼로 흡수하려고하니 너무 힘이 들었다. 아직흡수가됐는지 잘 모르겠어가지구 슬라이더 부분을 손으로 잡아끌어서 움직이게 만들것이다..후후....나에겐 다 계획이있지..했음 하 맛있는코딩쓰엥님.... 쓰앵님을 따라 저는 꼭 멋있는 프론트엔드 개발자가 될랍니다. 이 유튭을 어떻게 알게됐냐면, 가위바위보에서 이기면 폭죽을 터트리는걸 만들기위해 참고한 하트버튼의 쥔장되시는 분의 코드펜을 찾아갔더니 떡하니 유툽링크가 있었다. 약간 이제는 어떤걸 해야할지, 어떻게 배워야할지 고..

https://sweesweett.github.io/jsprac/imgslider2.html 이전글에 낱장으로 다시 도전해보겠다고 괜한말을...해서....(아님) 다시 시도해보았다. 문제는 맨끝장에 도달하면 맨 앞장으로갈때 필름을 와랄라ㅏ로랄 돌리듯 돌아간다는점...? 가끔오류가 나면 빈 캐러셀이 날 맞이한다는점? 이유는 모르겠다 맨끝장에 도달할 때 자연스럽게 돌아가게 하는 방법을 찾아봤는데, 다들 맨 앞장과 맨 뒷장의 복사본을 맨앞과 맨앞에 붙여서 자연스럽게 만드는 것 같았당... 방법은 이렇다 div.visible을 저만한 크기(img와 같은크기)로 만들고 div.img__wrapper(img들을 감싸고있음)를 감싸게 한다. 그런다음 css로 overflow:hidden을 주게 하면, 딱 저영역만 보..

이전에는 연습한것들을 버튼에 링크를 달아서 했었는데, 모양새가 조금 그런것 같아서 드롭다운으로 바꿔보았다. 이전 연습들과 마찬가지로 처음 구현해보는거였는데, 다른사람들꺼를 봤을 땐 js없이 가능 한것 같던데, 코드를 아무리봐도 알수가 없었다. 그래서 setTimeOut과 transition을 이용해서 스르륵 나타내는 효과를 주었다 전체 js코드 const previewUl = document.querySelector('.preview__ul'); // '연습한 것 중에 하나' 부분 const pracList = document.querySelector('.prac__list'); //'찐 리스트' const toggle = document.querySelector('.toggle');// 옆에 삼각형 p..