분류 전체보기
-
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차 프로젝트를 시작했..
-
Instagram 클론 프로젝트 후기개발일기 2020. 7. 19. 21:51
Instagram 클론 프로젝트 후기 1. 프로젝트 소개 전세계적으로 사용되는 소셜 미디어 플랫폼 중 심플하고 재사용 가능한 컴포넌트 UI로 구현된 인스타그램 Web App 클론 1) 목적 git을 통한 협업으로 실무환경 경험 Http 통신을 통한 JavaScript 비동기 처리 이해 SPA(Single Page Application) 구축 경험 React 컴포넌트 Life Cycle 이해 2) 개발 기간 개발 기간 : 2020/07/06 - 2020/07/17 3) 구성원 프론트 5명 (각자 동일한 페이지 구현) 2. 기술 스택 및 구현 기능 1) 기술 스택 React, React-Router, Fetch API, Sass, React-icons, Faker 2) 협업 툴 Git, Slack, Noti..
-
코드기록:: map 메소드 활용한 feedStudy/React 2020. 7. 19. 19:59
이전까지 나는 블로그를 작성할 때, 나의 코드기록 보다는 다른 사람의 멋진 코드기록들을 가져와 언어를 배우고 기록했다. 그러나 위코드 1달째 수강 중, 멘토님께서 나의 코드를 refactoring하고 기록하며 공부하는 것이 제일 큰 공부가 된다고 말씀하셨고 오늘 처음으로 이를 실천해본다. 사실 나는 웹 개발 초초초 입문자로써, 나의 코드가 화려하거나 문제해결에 탁월한 것은 아니다. 매우 일반적이고 기초적인 방법이며 혹은 나는 최선을 다했지만 다른 방법에 비해 비 효율적 일 수도 있다. 그러나 입문자로서 지금 이 시점에서의 최선의 코드를 기록하며 후에 실력이 더 향상되었을 때, 스스로 더 멋진 코드로 리팩토링 할 수 있도록 기록을 남겨본다. (인스타그램 클론 메인 화면) 메인 화면 중, feed부분을 구현..
-
React RouterStudy/React 2020. 7. 19. 16:48
리엑트를 배우기 위해 codecademe 튜토리얼도 해보고, 리엑트 강의 보면서 코드도 따라쳐보며 나는 리엑트를 좀? 안다고 생각했다. 그런데 바닐라 자바스크립트로 만들었던 인스타그램 클론 코드를 리엑트로 옮기는 과정에서 나의 생각은 완전히 바뀌었다.. 일단, 리엑트의 SPA 개념을 알고는 있었지만 머리에 잘 그려지지 않았던게 문제였다. 이전에도 직접 리엑트 페이지를 만들어보았지만, 그저 기능이 실행되는거에 만족했지, 내 코드를 돌아보며 이해하려는 회고가 없었다. 그래서 아무도 도와주지 않고, 아무것도 없는 0 상태에서 바닐라 자바스크립트를 리엑트로 옮기려니 막막했던 것이다. 자, 그럼 이번에는 나의 스스로 자립한 첫 리엑트 코드로 SPA, Router 개념을 살펴보도록 해보자. 위 코드는 우리가 리엑트..
-
JavaScript:: 그래프의 최대 넓이 값 구하기알고리즘 2020. 7. 17. 13:18
[JavaScript] 그래프의 최대 넓이 값 구하기 문제 '인자'인 height는 숫자로 이루어진 배열입니다. 그래프로 생각한다면 y축의 값이고, 높이 값을 갖고 있습니다. 아래의 그래프라면 height 배열은 [1, 8, 6, 2, 5, 4, 8, 3, 7] 입니다. 저 그래프에 물을 담는다고 생각하고, 물을 담을 수 있는 가장 넓은 면적의 값을 반환해주세요. 가정 : 배열의 길이는 2이상입니다. 해결 과정 우리가 해결해야 할 문제는 아래와 같다. 각 배열의 요소를 돌아가며 다른 배열의 요소의 값과 함께 넓이를 구한다. 넓이를 구할 때 두 수를 비교하는데, 최소값을 통해 높이 값을 구한다. 두 요소의 인덱스 값을 비교해 가로값을 구한다. 모든 경우의 수로 담긴 넓이의 값을 비교하여 큰 ..
-
왜? 개발자가 되려하는가개발일기 2020. 7. 16. 20:23
왜 개발자가 되려고 하는가? 더 나은 것을 위한 고민 유치원에서 교사로 일하며 아이의 문제행동을 관찰하며 원인을 파악하고 변화를 위해 노력하는 것이 좋았고, 세네갈에서는 각 SDGs 항목에 도달하지 못하는 문제의 원인을 분석하고 지속 가능한 문제 해결을 위해 고민하고 행동을 취하는 것이 좋았다. 그리고 현재는 내가 적은 코드로 사람들의 소통을 장을 만들기도 하고, 전염병 확산을 줄이기도 하며, 허비하는 시간을 줄이거나 노동을 단축시킬 수 있게 하는, 무심코 지나갈 수 있던 불편함과 문제사항을 보다 더 다양한 가능성과 폭발적인 잠재력으로 해결할 수 있는 이 개발자 직군이 나는 좋다. 내가 아직도 잊지 못하는 고등학교 1학년 수업시간이 있다. 바로 세계의 다양한 사회문제를 다루며 조별로 발표하던 '사회'시간..
-
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년 동안 우리가 리엑트에서 수만 개의 컴포넌트를 유지..