Study/TIL
-
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명의 "여성"들로 뭉친 팀이다. 한글버전 팀명은 '환불원..
-
20.07.28:: TILStudy/TIL 2020. 7. 28. 19:16
오늘의 한 일 컨버스 홈페이지 제품 리스트 성별, 타입, 사이즈, 컬러 별 필터기능 구현 새롭게 배운 것 각 태그마다 사용할 수 있는 attribute 속성이 다르다. 예를 들어, Input은 value, name으로 데이터를 전해줄 수 있는데 button 태그는 id로만 전달이 가능하다. 고로 태그의 attribute를 사용할 때에는 구글링을 먼저 해보자:) 보완해야할 부분 button은 className도 안먹더라... 정말 순수히 id만 되는 것인가...? ㅜㅜ 검색해봐도 잘 모르겠다... 알아보자. 위코드 프로젝트 2주차이다. 체력이 점점 고갈되는 게 느껴진다...ㅎㅎㅎ 다들 예민한 모습도 보여진다. 내가 이걸 할 수 있다고..? 생각했었는데 멘토님들께서 힌트를 하나씩 던저주신거 물어다가 구글링 ..
-
20.07.24:: TILStudy/TIL 2020. 7. 24. 11:50
오늘의 한 일 컨버스 홈페이지 클론 프로젝트 -> (제품 리스트 fetch함수 이용하려 백엔드와 연동 후 랜더링 완료!) -> (가격 순으로 sort 완료!) 새롭게 배운 것 {this.state.itemDatas && (} -> 좌항이 true 일 때 우항이 실행됨. state 끌어올리기!!! (연어가 헤엄치듯이 두 컴포넌트의 가장 단거리 맞접히는 컴포넌트에서 state를 통해 서로 데이터를 주고 받을 수 있다!!) 참조 : https://ko.reactjs.org/docs/lifting-state-up.html State 끌어올리기 – React A JavaScript library for building user interfaces ko.reactjs.org 깃은 대소문자를 구분하지 못한다. 그래서..
-
20.07.22:: TILStudy/TIL 2020. 7. 22. 22:57
오늘의 한 일 컨버스 홈페이지 클론 프로젝트 (로그인 페이지 - Refactoring 완료 / 제품 리스트 페이지 - 헤더, 사이드바 구현 완료, 상품 박스 컨포넌트 구현 중) 새롭게 배운 것 JSX에서는 모든 태그가 self-closing이 가능하다. div를 겹쳐주어야 할때는 'absolute'!! 계산된 속성명!! 계산된 속성명을 사용하면 코드길이를 확~ 줄일 수 있다. [리엑트] tab을 눌럿을때, 전체 페이지 렌더가 아니라 원하는 부분만 렌더시키는 방법. 보완해야할 부분 css에서 호버시 이미지 변동되는 transition 을 주었을 때 왜.. flutter가 생길까..? -> 지금은 너무 밤이 늦어 내일 아침 다시 고민해 볼 계획이다. 위코드 이번주 월요일. 즉 3일전, 1차 프로젝트를 시작했..
-
20.07.13:: TILStudy/TIL 2020. 7. 14. 12:00
오늘의 한 일 react로 인스타그램 구현 중 Feed 컴포넌트를 map메소드를 호출하여 구현함. Feed 컴포넌트에서 댓글기능을 따로 컴포넌트화해서 가져옴. 알고리즘 새롭게 배운 것 map 메소드 활용을 처음으로 적용해봄. component를 잘 활용하면 각 피드에 대한 함수적용이 쉽다. (예. 각 피드에서 댓글 기능구현) 위 코드 라이프 '경주마 처럼 달리기 보다는 내가 짠 함수를 다시 돌아보며 가자' 위코드에서 알고리즘 풀기, 과제 구현하기, 새로운 리엑트 기술들 배우기.. 이 모든것들을 따라가려하고, 옆 동료들과 발맞추어 가려다 보니 경주마처럼 달리고 있는 내 모습을 발견하게 된다. 내가 짠 함수를 정말 내 것으로 다시 만들기 위해서는 다시 돌아보고 복기하는 습관이 필요한 것 같다. 매일매일 TI..
-
20.07.06:: TILStudy/TIL 2020. 7. 7. 11:25
오늘의 한 일 자료구조에 대해 공부 자료구조[배열] 공부 react 공식문서 [이벤트 핸들링] 공부 새롭게 배운 것 자료구조는 데이터에 편리하게 접근하고 조작하기 위해 데이터를 저장하거나 조직하는 방법으로써 각 자료구조의 본질과 콘셉트를 이해하고 상황에 맞는 적절한 자료구조를 선택하는 것이 중요하다. 자료구조 중 '배열'의 가장 큰 특징은 순차적으로 데이터를 저장한다는 점이다. 그래서 배열은 주로 순서가 상관 없더라도 서로 연결된 데이터들을 저장할때 일반적으로 사용된다. 배열의 단점은 데이터를 중간에 추가하거나 삭제해야할 경우, 배열을 전부 이동시켜야 하기 때문에 다른 자료구조에 비해 메모리를 많이 차지한다는 점이다. 고로, 데이터 변경이나 이동이 많을 경우에는 적절치않다. 위 코드 라이프 html, c..