좋은 SW 개발자되기

2021. 09. 27 월요일 10주차(45~49일차)는 Hiring Assessment 주라서 TIL이 없다. 그래서 섹션2 회고를 해보고자 한다. 46일차 코플릿 테스트 47일차 과제형 테스트 진행. 결과는 통과. 섹션1과는 다르게 과정을 진행하면서 굉장히 빡빡하게 넘어왔던 것 같다. 내용이 어려워진 것도 있지만, 낯설었던 것이 너무 많아서 익숙해지는데 애를 많이 먹었다. 그럼 지금까지 내가 배워온것이 무엇이었는지 다시 돌아보자. 섹션2에서 내가 배운 것 ✔️ [JS/Node] 객체 지향 JavaScript, 비동기 [자료구조/알고리즘] 재귀, Stack, Queue, Graph, Tree [HTTP/네트워크] 클라이언트-서버 통신, API, CORS [React] 비동기, 컴포넌트 디자인, 상태관리..

2021. 09. 17 금요일 1. Today's Key Points!🔑 state Redux 2. 정리해보자!🧹 상태 관리 라이브러리를 사용하는 이유? React에서 최상위 컴포넌트에서 state를 관리하고, 하위 컴포넌트에서 사용하려면 props로 넘겨받아와서 사용해야 한다. 근데 state가 관리되는 컴포넌트와 state를 사용하려는 컴포넌트 사이에 10개의 컴포넌트가 존재한다고 가정하면 props로 10번 넘겨주고 받아야 사용을 할 수 있다. 이렇게 컴포넌트간의 연결이 복잡한 애플리케이션 일수록 props를 넘겨주고 받는것이 굉장히 번거로워질 수 있다. state를 한 저장공간에 담아놓고 필요할 때 마다 꺼내쓸 수 있도록 하면 props를 넘겨주고 넘겨주고 하는 번거로움이 사라질 수 있을 것이다...

2021. 09. 15 수요일 1. Today's Key Points!🔑 Autocomplete ClickToEdit 2. Sprint과제 복기!🧐 전날에이어 오늘은 Advanced를 복기해볼 것이다. 👉🏻Autocomplete 오토컴플릿 컴포넌트는 검색창에 input값을 입력하면 밑에 input 값과 유사한 추천 검색 옵션을 보여주는 자동 완성 기능이다. 이 부분에서는 상태를 관리해주는 적절한 로직을 잘 짜주는 것이 핵심이다. import { useState, useEffect } from 'react'; import styled from 'styled-components'; const deselectedOptions = [ 'rustic', 'antique', 'vinyl', 'vintage', 'r..

2021. 09. 14 화요일 1. Today's Key Points!🔑 React Custom Component Modal Toggle Tab Tag 2. Sprint과제 복기!🧐 👉🏻Modal Component Open Modal 버튼을 클릭하면 Opened!로 바뀌면서 모달창이 화면에 나타나야 한다. Modal UI 컴포넌트는 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌, 레이어를 까는 것을 말한다. 모달창을 구현하면서 CSS의 position과 stopPropagation에 대해 익힐 수 있었다. position에 대한 내용은 간단하게 CSS 카테고리에 정리를 할것이다. import { useState } from 'react'; import styled from 'styled-compo..

2021. 09. 13 월요일 1. Today's Key Points!🔑 컴포넌트 단위로 개발하기 CSS in JS useRef 2. 정리해보자!🧹 👉🏻컴포넌트 단위로 개발하기 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 통해서 각 페이지마다 같은 역할을 하는 것이 필요할 때 같은 UI 컴포넌트를 공유하면 편리하게 페이지를 구성할 수 있다. 그래서 디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하면 효율적으로 페이지를 구성할 수 있을 것이다. 이러한 개발 방법이 Component Driven Development(CDD)라고 한다. CDD가 트렌드로 자리잡게 되면서 이를 지원하는 도구 중 하나인 Component Explorer가 등장했는데 그 중 하나가 Story..

2021. 09. 10 금요일 1. Today's Key Points!🔑 CORS Routing Express middleware 2. 정리해보자!🧹 3일 동안 웹 서버 구축을 하는 기초단계를 학습해왔다. mini-node-server를 순수 node.js로 구현해보았고, express와 미들웨어를 사용해서 리팩토링도 해보았다. 👉🏻오늘은 CORS에 대해서 정리해보고자 한다. CORS가 무엇인가? Cross Origin Resource Sharing의 약자로, 시스템 수준에서 타 도메인 간 자원 호출을 승인하거나 차단하는 것을 결정하는 것이다. 예를들어, 나 너네 서버에 POST 요청해도 되니? 라는 요청을 먼저 보내고 해도 된다는 응답이 오면 그때 POST 요청을 보내는 것이다. 그럼 CORS가 왜 필..

2021. 09. 09 목요일 1. Today's key Points!🔑 Node.js Express Middleware 2. 정리해보자!🧹 Express.js는 Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기 있는 프레임워크이다. http 모듈로 작성한 서버와 다른 점은 미들웨어 추가가 편리하고, 자체 라우터를 제공한다. 라우팅이 무엇인가? 라우팅은 URI(또는 경로) 및 특정 HTTP 요청 방법(GET, POST 등)인 특정 끝점에 대한 클라이언트 요청에 애플리케이션이 응답하는 방식을 결정하는 것을 말한다. 즉, 메소드와 URL(/lower, /upper 등)로 분기점을 만드는 것이다. 각 라우트는 하나 이상의 핸들러 함수를 가질 수 있고, 이러한 함수는 라우트가 일..

2021. 09. 08 수요일 1. Today's Key points!🔑 mini node server 2. Sprint 복기!🧐 오늘은 개념정리보다는 바로 sprint과제를 복기해보는 것이 더 좋을 것 같다. 과제를 진행하기에 앞서 설치해야할 것이 하나 있다. 바로 nodemon이다. 터미널에 npm install -g nodemon 입력해서 설치를 한 뒤, package.json 파일을 열어 "scripts" 안에 "start": "nodemon servere/basic-server.js" 를 입력해준다. "scripts": { "start": "nodemon server/basic-server.js", "test": "echo no test", "submit": "echo you don\\'t ne..

2021. 09. 07 화요일 35일차와 36일차에 같은 내용을 공부했기 때문에 한번에 포스팅 한다. 1. Today's Key points!🔑 State 끌어올리기 Side Effect, Effect Hook 2. 정리해보자!🧹 React에서 데이터 흐름을 아는 것이 중요하다. 그럼 데이터의 흐름이 어떻게 되냐? 데이터는 아래로 흐른다. 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있다. 즉, 데이터를 전달하는 주체는 부모 컴포넌트가 된다. 그럼 이게 왜 중요한건가? 각 컴포넌트마다 state를 만들어서 관리하면 그만큼 비효율적인 것은 없을 것이다. 데이터가 어떻게 흐르는지를 이해하고 그것을 한곳에서만 관리한다면..