전체 글
-
20.08.11:: TILStudy/TIL 2020. 8. 11. 14:12
오늘의 한 일 superfluid 장바구니 애니메이션, 마이페이지 UI 구현 새롭게 배운 것 [], {} 빈 배열, 빈 객체의 Boolean 값은 true이다! 😵 2차 프로젝트를 하면서 아래와 비슷한 조건문을 작성하였다. const arr = []; arr ? "ture" : "false"; 내 생각으로는 arr가 false가 나와야하는데, 자꾸 true가 나오는 것이었다. 알고보니, 빈 배열, 빈 객체는 boolean 값이 true였다. true라는 것을 지금까지 몰랐다니... boolean 값이 false인 경우는 아래와 같다. 알고 있었지만 다시 한번 상기해보자. var bNoParam = new Boolean(); var bZero = new Boolean(0); var bNull = new B..
-
20.08.10::TILStudy/TIL 2020. 8. 10. 14:38
오늘의 한 일 superfluid 장바구니 기능 구현 보완해야할 부분 함수 호출과 함수 자체를 적는 코드에 대해 조금 헷갈리고 있는 것 같다. 함수선언 function square(number) { return number * number; } # 함수호출 square(1); # 함수실행 console.log(() => square(2)); // function console.log(square(2)); // 4 console.log(square); // function:square 콘솔에 "() => {}" 이런 형태로 작성한다면 콘솔 결과에는 "함수" 자체가 출력된다. 함수에 인자값을 넣어 결과를 호출하고 싶다면 "함수명(인자)"를 입력해야한다. 만약, 함수명만 입력한다면 "함수: 함수명" 과 같은 ..
-
20.08.07:: TILStudy/TIL 2020. 8. 7. 16:21
오늘의 한 일 superfluid 메인페이지 (react-scroll-rotate/ react-slick) 새롭게 배운 것 오늘 처음으로 hook을 이용해서 react-slick을 사용해보았다. 사용하면서 useState를 처음 이용해보니 신기했다. 그러나.. 신기함은 잠시.. arrow가 왜 안보이지...? 한참을 헤매고 보니 "background-size: contain;" 을 해야했다... ㅎㅎㅎ size를 개별로 또 지정해주어야 하는구나..!! 메인페이지에 스크롤에 따라 rotate 움직여야 하는 사진과 박스가 있었다. 동료와 한참을 검색해 보니 react-scroll-rotate라는 라이브러리가 있었다. 이걸 이용해보니 아주 부드럽게 스크롤에 따라 rotate를 해주었다. :) "throttle..
-
20.08.06:: TILStudy/TIL 2020. 8. 6. 11:52
오늘의 한 일 superfluid 메인페이지 (Parallax 활용) 새롭게 배운 것 white-space: normal; 연속 공백을 하나로 합침. 개행 문자도 다른 공백 문자와 동일하게 처리해준다. 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꾼다. white-space: nowrap; nowrap연속 공백을 하나로 합침. 줄 바꿈은 요소에서만 일어난다. (Mdn 출처) -> infinite text 를 만드느라고.. 애를 먹었다. text가 움직이게 하는건 animation으로 할 수 있겠는데, 이 text가 infinite로 움직이게 하는 것은 어떻게 해야할까? 계속 애를 먹던 중에 white-space를 발견했다. 그리고 이 것이 'key'가 되었다. "white-space: nowrap;"..
-
20.08.04:: TILStudy/TIL 2020. 8. 4. 19:45
오늘의 한 일 get superFuild 홈페이지 메인! UI 새롭게 배운 것 marquee tag 자동재생 정책 변경사항으로 인해 크롬에서는 자동재생이 되려면 무음인경우나 유저 인터렉션 이벤트 발생 시 이다. (그래서 나는 무음으로 속성을 변경함! video tag에 muted를 추가함) 위코드 getSuperFluid!! 2차 프로젝트. 내가 낸 아이디어가 당첨되었다. 흐흐 uiux가 아주 화려한 화장품 웹사이트. 웹사이트 어워드에서 상 받은 곳이다. 화장품 회사의 철학도, 사진 스타일도, 한땀한땀 장인정신이 깃든 웹사이트도 멋지다. 그러나 이걸 내가 하게 될 줄은 몰랐다. ㅎㅎ 사실은 좀 두려웠다. "과연 내가 할 수 있을까??" 우리 팀은 5명의 "여성"들로 뭉친 팀이다. 한글버전 팀명은 '환불원..
-
1차 프로젝트:: 회고 체크목록 및 다짐개발일기 2020. 8. 2. 23:33
☑️ 공통 목표 Scrum - 스크럼 진행 방식에 대해서 이해했고 Trello 와 같은 tool 을 활용하여 스크럼 방식 아래 프로젝트 진행할 수 있다 Standup Meeting - 매일 아침 미팅을 통해 어제 한 일, 오늘 할 일, blocker 세 가지를 공유하며 팀원들과 미팅을 진행할 수 있다. Communication - 팀원들과 소통이 필요한 경우 올바른 방법을 통해 의견을 주고 받으며 조율할 수 있다. Git - 기본적인 Flow에 따라 Git을 사용할 수 있으며, brach를 생성하고 올바른 이름과 내용을 commit message를 작성할 수 있다. [세모] 문제 해결 능력 - 모르는 과제를 마주하는 경우 Google 검색, stackoverflow 등을 활용하여 문제를 해결할 수 있다...
-
1차 프로젝트 회고:: converse 클론 프로젝트개발일기 2020. 8. 2. 22:57
1차 프로젝트:: converse 클론 후기 1. 프로젝트 소개 1) 주제👆🏻 전세계적으로 사랑받는 스포츠웨어 패션 브랜드 컨버스(Converse) 웹사이트 클로닝 👟 React.js와 Git, Trello로 협업하여 이루어진 두 번째 팀 프로젝트 (협업👨👩👧👦으로는 첫 번째 프로젝트) 2) 개발인원 (프론트 3명, 백엔드 1명) 프론트 3명 (김신영, 김효식, 이병수) 백엔드 1명 (손수정) 3) 개발기간 2020.07.20(월) ~ 2020.07.31(금) 약 2주 / 총 12일 2. 사용된 기술 1) 프론트엔드 👩🏻💻 JavaScript (ES6) React.JS (첫 프로젝트로 리엑트 생명주기를 더 직관적으로 인식하기 위해 Class형 컴포넌트 사용) React-Router React-Sl..
-
20.07.28:: TILStudy/TIL 2020. 7. 28. 19:16
오늘의 한 일 컨버스 홈페이지 제품 리스트 성별, 타입, 사이즈, 컬러 별 필터기능 구현 새롭게 배운 것 각 태그마다 사용할 수 있는 attribute 속성이 다르다. 예를 들어, Input은 value, name으로 데이터를 전해줄 수 있는데 button 태그는 id로만 전달이 가능하다. 고로 태그의 attribute를 사용할 때에는 구글링을 먼저 해보자:) 보완해야할 부분 button은 className도 안먹더라... 정말 순수히 id만 되는 것인가...? ㅜㅜ 검색해봐도 잘 모르겠다... 알아보자. 위코드 프로젝트 2주차이다. 체력이 점점 고갈되는 게 느껴진다...ㅎㅎㅎ 다들 예민한 모습도 보여진다. 내가 이걸 할 수 있다고..? 생각했었는데 멘토님들께서 힌트를 하나씩 던저주신거 물어다가 구글링 ..