Youngble_개발스토리

숙련주차인 4주차를 거치면서 우리가 배우는 함수형 컴포넌트로 사용하는것에 대해서 어느정도 익숙해진것같다. 그안에서 기존에 배웠던 클래스방식의 라이프사이클이 어떻게 이루워지는지 알게되었고 왜 클래스방식보단 함수형태로 쓰는지 알게되었다. 클래스로 쓸때는 자바스크립트의 지식도 많이 요구되어서 this 바인딩이나, 클로져, state의 흐름등도 알아야하고 제약이 많이있었다. 하지만 함수형 컴포넌트를 쓰면서 이러한 클래스의 기능등을 리액트 훅을 써서 간단하고 짧지만 모든 기능을 할수있게 해주는게 편하다고 생각했다. 요번주차때 가장 집중하고 또 이해하는데 시간을 많이 투자한건 역시 redux의 구조와 어떤 흐름으로 이루어지는지, 그리고 Redux의 휘발성 데이터를 유지하기위해 파이어베이스 스토어를 사용할때 어떻게 ..

주특기과정동안 리액트의 컴포넌트의 특성을 배우기위해 클래스형 컴포넌트와 함수형 컴포넌트 를 배웠다. 부랴부랴 배우면서 어느정도 큰틀을 알게되었지만 useEffect의 정확한 구조와 왜 쓰는지에 대해서는 어렴풋이 알기만했다. 요번주차에서 이 useEffect 이 무엇이고 어떤 구조고 어떻게해서 쓰게되는지 정리하고 싶었다. useEffect함수의 기본 구조는 아래와 같다. React.useEffect(()=> { Didmount 부분과 DidUpdate 부분 return () ⇒ willunmount 할부분 }, [두번째인자부분]) useEffect을 설명하기전에 기본 라이프사이클 구조를 보자면 위와 같이 이루워지는데 useEffect을 사용하는 함수형 컴포넌트는 클래스컴포넌트와 다르게 하나하나 compon..

then 함수 자바스크립트에서 함수는 동기함수, 비동기 함수로 나뉜다. 우리가 작성한 코드들은 위에서 아래로 순차적으로 코드가 실행되고 하나의 코드가 종료되지 않는다면 다음 코드로 넘어가지 않는다. 이것이 동기함수이다. API를 호출할 때, 사용하는 fetch 함수는 대표적인 비동기함수이다. 그렇기 때문에 API호출하는 과정이 끝나지 않더라도 자동적으로 다음 코드로 넘어간다. 하지만 API로부터 받아온 정보를 사용할 필요가 있는 경우에 .then함수를 쓰는 것이다. 비동기처리 $.get() 을 이용하여 해당 URL에서 /product/1에 대한 정보를 서버에 요청하는 것이다. 서버에서 받아온 데이터는 response 에 담기고 function 인자에 넘겨주었다. 그 인자값을 tableData에 넣어주고 ..

프로젝트 진행중에 추가하기 기능을 써서 단어를 추가하면 이상하게 순서가 랜덤하게 위치하게 되었다. 알아보니 파이어베이스 스토어에는 랜덤한 id 값을 각 콜렉션 문서마다 넣어 주게 되는데 0-9,a-zA-Z 이런 순서로 차례로 정렬이 된다. 하지만 새로 추가한다고 1번부터 시작하는것도 a부터 시작하는것도 아니고 랜덤하게 주어지기때문에 로드액션함수 미들웨어 부분에서 파이어스토어에서 가져온 콜렉션을 forEach 를 사용하여 그 스토어에 담긴 순서대로 data()값을 새 리스트에 만들어 주기때문에 추가할때마다 단어가 앞이나 맨뒤에 뜨지 않게 되는것이였다. 이리저리 찾아보다가 멘토님들이 알려준 타임스탬프, 임의의 값을 주어서 그것을 sort 하는 방식, 파이어베이스의 orderBy 등등 이있었는데 아직 생소한 ..

요번주차 과제를 완성하고 추가기능중 수정하기 기능을 완성했다. 수정하기아이콘을 누르면 기존 카드에 있던 정보들을 그대로 가져와 차례대로 input 안에 미리 넣어놓고, 화면에 보여주게 해야하는데 처음에 접근할때 useParams 를 이용하여 URL 뒤에 오는 인덱스값이나 id 값을 넣어주고 그 값을 파이어스토 어에서 있는걸 가져올까 생각을 했는데 그렇게하면 쓸때없는 for 문을 돌려야하고 이게 파일이 많아지면 비효율적인 코딩이 될거같아서 그만두고, 어떻게 해야 가져올수있을까 생각하다 답이안나와 다른분에게 조언을 얻고나서 아 이걸 진작 생각못했네 라고 생각했다. input 속성 defaultVaule 값에 미리 useselector 를 선언과 초기화하여 기존에 리덕스에 있는 정보들을 변수 bucket_li..

오늘은 리액트 기초에서 마지막5강을 다 들었다. 배운내용은 그전에 배운 리덕스로 값을 저장하고 기능을 했던 버킷리스트를 새로고침했을때 캐쉬값이 다 날라가서 초기화 되기때문에 이를 막기위해서 인터넷에서 db 데이터베이스와 같은 역할도 하고 서버역할도 해주는 마치 백엔드 서비스를 해주는 firestore를 쓰는법을 배웠다. 헷갈렸던부분은 이제막 리덕스의 구조를 파악하고 어떤 흐름과 로직으로 이동하고 인자나 파라미터들이 움직일수있는가를 습득하고있었는데 그걸다시 firestore와 연결을 해야해서 이해를 하면서 들었지만 커져버린 코드들로인해서 그저 1m 앞만 볼수있고 그줄을 잡고 따라 가는 기분이였다. 당장 앞에는 이해하지만 내 뒤와 앞이 보이지 않는 느낌이였다. 그전주차때도 마찬가지였기에 어서 5강을 듣고 다..

리덕스 기본 구조 리덕스는 상태관리 라이브러리 이다. 리덕스를 잘라보면 스토어와 리듀서로 나눠져있다. 스토어는 전역데이터가 있는곳을 스토어라고 부른다. 리듀서는 데이터를 수정하는 공간이다. 원하는 연산이나 결과물을 계산하고 데이터가 실제로 변하는곳 구독한다는건 store 에서 data 를 받아올려고 연결하는것을 구독한다라고 한다. 즉 리덕스 store를 component에 연결되었다 라고 할수있다. 액션한다는건 어떤 데이터에대해서 어떤 행동을 store 에 요청한다 라고한다(더하기,빼기, 나누기, 등등). 이때 액션을 디스패치 한다 라고한다 dispatch :deal with (a task, problem, or opponent) quickly and efficiently. 어떤 문제나 작업을 빠르고 효..

for문과 if문등 ` `백틱안에서 쓸수없지만 삼항연산자, &&,|| 등은 쓸수있다. 또한 ${}를 사용하여 그안에 화살표함수를 만들어줄수도있다. 그리고 해당 변수태그안에 p라는 자식요소가 있다면 위의 styled 안 ``에서 그냥 css 쓰듯이 p{color : blue} 같은 형식으로 써주면된다. Export 와 import 관계, {} 중괄호 있고 없고의 차이 export 할때 {c} 와같이 중괄호를 주고 하면 import 할때도 그렇게 가져오고 default 로 줄경우 {} 가 필요없다. 단 default 는 한개의 js 파일에서 한개만 가질수있다. 자바스크립트 변수쓸땐 중괄호{}안에 넣어준다. styled components 문법중하나가 `` 안에 & 를 쓰면 나자신이라고 나타내는것이다 따라서 ..

먼저 요번주를 배우고 끝날때쯤 주특기와 별개로 코딩하는것이 재미있고 만드는 성취감 남을위해 어떤 편리함이 있을까 생각하는 프론트엔드 적인 마인드 이외에도 어느 분야의 회사를 가고싶은가에 대해서 생각해보았다. 막연히 코딩이 좋고 프론트엔드의 적성이 좋은것이 시작의 이유이면서도 어느 분야에서건 상관없는지, 어느 분야에 따라 내가 성장하고 즐길수 있을지를 생각해보았다. 회사분위기, 근무환경도 당연히 중요하고 사수가 있고 없고 내가 가서 얼만큼 성장하고 한 일원이 될수있는지가 중요하다고 당연히 생각하면서도 내가 과연 어떤 분야에서건 저것만 있으면 만족할까? 라고 생각했다. 분야를 생각하면 몇가지 있었다. 하나는 게임분야 하나는 교육분야 였다. 게임은 그전부터 일해보고싶었다. 웹개발자를 생각하기전에 유니티를 잠깐..

JSX 형식에서 return 에 요소와 태그속성 등이 들어가는데 이때 if 문이나 for 문등 들어갈수없다. 이럴때는 내장함수 map, filter 등을 써서 대신하는데 이때 if 문을 쓸때 삼항연산자를 사용하는 경우가 많다. 그런데 삼항연산자 말고도 꼭 써봐야겠다 생각한것이 && 연산자 || 연산자 였다. 단순히 and 와 or 기능도 있지만 자바스크립트 특성상 왼쪽이나 오른쪽값을 출력한다. && 먼저보면 true && true 일경우 오른쪽 true 을 출력하고 true && false 일경우 오른쪽 false 출력, false && true 일경우 왼쪽 false 출력, false && false 일경우 왼쪽 false 출력한다. 단순히 && 를 통해 둘다 참인지를 비교하는것도 있지만 어디까지 검사..