본문 바로가기

TiL14

[2주 Project] 5일차 TIL 본격적으로 React를 이용한 프로젝트를 시작하게 되었다. 초기에 구성하였던 각 pages를 구성하기로 하였다. 내가 맡았던 Home 페이지, Mypage 를 구성하고 component로 Menu 를 구성하였다. 로그인/ 회원가입 버튼을 만들고 나서 페이지가 아닌 Modal로 구성하기로 하여 Metarial-ui를 사용하기로 정하였다. 백엔드에서 API 주소가 잘 맞는지 Postman을 통해 post요청이 잘 받는지 확인하고 회원가입 페이지에 입력창을 완성하였다. 회원가입 시 fetch로 api 주소를 받아와 post요청을 보내준 후 실제 데이터가 백엔드에 들어왔는지 확인하였다. 백엔드 담당 팀원들이 데이터가 들어왔다는 것을 확인 해주고 로그인 페이지에서 역시 회원가입과 마찬가지의 과정을 걸쳐 작동되도록.. 2020. 7. 4.
[2주 Project] 1일차 TIL 기본 교육이 끝나고 2주 프로젝트가 시작되었다. 아이디어에 맞춰 4명의 인원이 팀으로 선정되었고, 팀원들이 모여서 어떻게 구성할지 아이디어를 짜기 시작했다. 팀이름, 팀명 , 프로젝트 명을 정하는 것을 우선으로 하였다. 그리고 초기 컨셉에 대한 아이디어를 듣고, 구체화 하기 시작하였다. 그리고 이 것을 어떻게 구현할지에 대해 의견을 나누었다. 프로젝트는 부동산 P2P 경매 웹이라는 아이디어에서 출발하였다. 경매로 나온 부동산에 대해 소액 투자를 통해 높은 이익률을 만들어 유저들을 참여시킨다는 계획이었다. 그렇다면 어떤 부분들이 웹으로 구현하는 데 필요한 가에 대해 서로 아이디어를 내는 시간을 가졌다. 홈 화면 구현 로그인 페이지 구현 회원가입 페이지 구현 My page 구현 부동산 정보 페이지 구현 자유.. 2020. 6. 29.
IM 26일차 초보개발자 TIL 3번째 테스트를 보는 날이었다. 이전 까지 배웠던 React나 express, Redux에 대한 개념의 이해가 많이 부족하였다. Personal Portfolio를 만드는 것에 있어서도 많이 부족하였다. 정확히 말하면 제대로 구현되지 못하였다. 부족한 부분이 많다보니 테스트를 볼때도 어려움을 많이 느꼈다. 테스트가 끝나고 다시한번 개념들을 하나하나 찾아가며 공부를 하였고, 이전 과제들을 살펴보며 이해하려고 노력하였다. 클라이언트에서 사용되는 react router에 대한 이해 서버의 URL을 접근할 때 클라이언트에 접근하는 방법 Build를 통해 서버에 넘겨주는 방법 middleware의 이해 리듀서와 액션 등등 아직 이해하지 못한 부분들이 너무 많다는 것을 느끼게 되었다. solo day기간 동안 이 .. 2020. 6. 4.
IM15일차 초보개발자 TIL(fetch) 클라이언트에 관련된 과제를 진행하였다. fetch를 이용하여 data를 받아와 client에 구현될 수 있도록 하는 작업이었다. fetch API 는 리소스 취득을 위한 인터페이스이다. ES6의 사용이 많아짐에 따라 fetch API의 사용도 증가하는 추세이다. fetch(URL) .then(res => res.json()) .catch(err => console.log(err)) fetch함수를 이용하여 URL을 받아고 .then을 이용해 callback함수를 실행한다. .catch를 사용하여 에러가 발생하였을때 핸들링 해주면 된다. 다만 fetch함수 만으로 data를 바로 사용할 수 없다. res에는 body가 담겨져 나오는데 이거 자체는 스트림이고 완전히 data를 가져오는 것이 아니다. 그렇기 .. 2020. 5. 20.
IM8일차 TIL ( Time complexity) 오늘은 그래프와 트리, 이진탐색트리 과제를 마무리 짓고 시간복잡도(time complexity)에 관해 공부하는 시간이었다. 시간 복잡도란 문제를 해결하는 데 걸리는 시간과 입력의 함수관계를 말한다. 시간복잡도는 기본적으로 Big-o 표기법을 사용한다. O(n) , O(log n), O(n^2), O(C^n), O(n!) 등으로 나타낼 수 있다. 시간 복잡도는 기본적인 연산을 수행하는데에 어떤 고정된 시간이 걸릴 때, 알고리즘에 의해서 수행되는 기본 연산의 개수를 세어 예측할 수 있다. 위의 사진과 같이 O(1)이나 O(log n) 처럼 평평하게 나오는 곡선을 그리는 경우 문제 증가에 따라 걸리는 시간이 낮다고 할 수 있다. 반대로 O(n!)과 같이 위로 올라가는 곡선을 그리는 경우 문제가 조금만 증가 .. 2020. 5. 7.
IM 7일차 TIL ( graph, tree & Binary Search Tree) Graph 그래프는 정점(Vertex)와 각 정점을 연결하는 변(Edge)로 나누어 진다. 변은 해당 정점들을 연결하여 자료를 탐색할 수 있게 만들어 준다. 변에는 방향성이 있는 변이 있고, 방향성이 없는 변이 있다. 방향성이 있는 변을 가지는 그래프를 유향 그래프라고 하며, 정점에서 해당 변의 방향만을 따라서 연결된 정점으로 이동 가능하다. 방향성이 없는 변을 가지는 그래프는 무방향 그래프라고 하며, 연결된 정점들 끼리 왕래할 수 있다. 각 정점들을 서로 연결하여 순환할 수 있는 것이 가장 큰 특징이다. 그래프의 구조는 SNS에서 가장 많이 사용되며, 통신망이나 친구관계등을 모델링할 수 있다. Tree 트리구조는 그래프의 자료구조에 속하지만 그래프와는 다른 특징을 가진다. 그래프는 순환 구조를 가질 수.. 2020. 5. 7.
IM 6일차 초보개발자 TIL(Linked list & Hash table) DATA 구조에서 linked list 와 hash table에 대해서 배우는 날이었다, stack과 queue에 비해서는 조금 더 복잡한 형태의 DATA구조 였다. Linked list linked list(연결 리스트)는 각 노드(Node)가 데이터와 포인터를 가지고 한 줄로 연결되어 있는 방식으로 데이터를 저장하는 DATA구조이다. 데이터를 담고 있는 노드들이 연결되어 있는데, 노드의 포인터가 다음이나 이전의 노드와의 연결을 담당하게 된다. 위 그림과 같이 노드는 자기자신을 가리키는 원소와 다음 노드를 가리키는 포인터로 구성되어 있다. 연속되는 노드들은 포인터로 연결되어 있으며, 마지막 항목은 Null을 가리킨다. 또한, 프로그램이 수행하는 동안 크기가 커지거나 작아질 수 있으며, 메모리 공간을 낭.. 2020. 5. 5.
IM5일차 TIL (Stack & Queue) 오늘은 데이터 구조에 대해서 배우는 시간이었다. 이번 시간에 배운 것은 stack 과 queue 였다. stack은 LIFO: last in, first out 의 개념으로 정보가 위로 차곡차곡 쌓이며 쌓은 이후 가장 위에 쌓였던 정보가 우선적으로 나오는 형태이다. 접시를 쌓는 거나, 하노이의 탑의 구조를 생각하면 이해하기 쉽다. stack method가 존재 하며 해당 메소드는 다음과 같다. pop — Pulls (removes) the element out of the stack. The location is specified by the pointer push — Pushes (inserts) the element in the stack. The location is specified by the .. 2020. 5. 1.
IM 3일차 초보개발자 TIL (Linting & Testing) 3일차 Pair programming 을 진행하면서 고딩과정에서 Liting 과 testing 과정이 필요하다. 우선 testing은 작성한 코드가 의도대로 작동하는지, 또는 결함이나 문제가 없는지 확인하는 과정이다. 이번 과정에서 testing을 위해 jest를 사용하는 방법을 배웠다. npm을 사용하는 경우 터미널에서 npm install --save-dev jest 입력하여 설치할 수 있다. 해당 폴더에서 package.json 파일에 { "scripts": { "test": "jest" } } 라고 적혀 있으면 설치가 완료되었다는 의미이다. 해당 js파일을 확인하고 test.js파일에 작성된 코딩 작성 요구사항을 확인한다. js파일을 수정하고 해당 레포지토리와 관련된 testing을 진행하기 위해.. 2020. 4. 29.