Study
-
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차 프로젝트를 시작했..
-
코드기록:: map 메소드 활용한 feedStudy/React 2020. 7. 19. 19:59
이전까지 나는 블로그를 작성할 때, 나의 코드기록 보다는 다른 사람의 멋진 코드기록들을 가져와 언어를 배우고 기록했다. 그러나 위코드 1달째 수강 중, 멘토님께서 나의 코드를 refactoring하고 기록하며 공부하는 것이 제일 큰 공부가 된다고 말씀하셨고 오늘 처음으로 이를 실천해본다. 사실 나는 웹 개발 초초초 입문자로써, 나의 코드가 화려하거나 문제해결에 탁월한 것은 아니다. 매우 일반적이고 기초적인 방법이며 혹은 나는 최선을 다했지만 다른 방법에 비해 비 효율적 일 수도 있다. 그러나 입문자로서 지금 이 시점에서의 최선의 코드를 기록하며 후에 실력이 더 향상되었을 때, 스스로 더 멋진 코드로 리팩토링 할 수 있도록 기록을 남겨본다. (인스타그램 클론 메인 화면) 메인 화면 중, feed부분을 구현..
-
React RouterStudy/React 2020. 7. 19. 16:48
리엑트를 배우기 위해 codecademe 튜토리얼도 해보고, 리엑트 강의 보면서 코드도 따라쳐보며 나는 리엑트를 좀? 안다고 생각했다. 그런데 바닐라 자바스크립트로 만들었던 인스타그램 클론 코드를 리엑트로 옮기는 과정에서 나의 생각은 완전히 바뀌었다.. 일단, 리엑트의 SPA 개념을 알고는 있었지만 머리에 잘 그려지지 않았던게 문제였다. 이전에도 직접 리엑트 페이지를 만들어보았지만, 그저 기능이 실행되는거에 만족했지, 내 코드를 돌아보며 이해하려는 회고가 없었다. 그래서 아무도 도와주지 않고, 아무것도 없는 0 상태에서 바닐라 자바스크립트를 리엑트로 옮기려니 막막했던 것이다. 자, 그럼 이번에는 나의 스스로 자립한 첫 리엑트 코드로 SPA, Router 개념을 살펴보도록 해보자. 위 코드는 우리가 리엑트..
-
hook을 사용하는 이유Study/React 2020. 7. 16. 14:42
Hook의 특징 선택적 사용 : 기존의 코드를 다시 작성할 필요없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있다. 그러나 만약 당장 Hook이 필요 없다면, Hook을 사용할 필요는 없다. 100% 이전 버전과의 호환성 : Hook은 호환성을 깨뜨리는 변화가 없다. 현재 사용가능 : 현재 배포하는 v16,8.0에서 사용할 수 있다. Hook은 알고 있는 React 컨셉을 대체하지 않는다. 대신에 Hook은 props, state, context, refs, 그리고 lifecycle과 같은 리엑트 개념에 좀 더 직관적인 API를 제공한다. 또한 Hook은 이 개념들을 엮기 위해 새로운 강력한 방법을 제공한다. 왜 Hook이 나왔는가? Hook은 5년 동안 우리가 리엑트에서 수만 개의 컴포넌트를 유지..