본문 바로가기

분류 전체보기72

TIL_210222 (Redux + 반성..ㅠ) 📝 오늘 한 일 / 배운 것 🖋 Redux를 통한 상태관리 기존에는 React로만 프로젝트를 진행했을 때, 상태를 전달하고 관리하기 매우 복잡했다. 이러한 복잡함을 해결해주기 위해 나온 Redux! React에서는 UI요소 표현에 집중하고, Redux에서는 상태를 관리함으로써 기능별로 집중할 수 있게 되었다. 처음엔 이해가 하나도 되지 않았던 리덕스의 개념들이 주어진 스프린트 과제를 해결하면서 조금은? 이해가 된 듯하다. 🖋 포트폴리오 제작 포트폴리오를 미리 제작해보기 시작했다. 아직 진행한 프로젝트는 하나도 없지만..! 후에 포트폴리오를 제작함에 있어 수월한 진행을 위해서 또한, 현재 많이 부족하다고 느끼는 html, css에 대한 보강을 위해 시작했다. 들어갈 내용들을 찾아보니 현재 나의 기술, 언어.. 2021. 2. 22.
TIL_210217 📝 오늘 한 일 / 배운 것 🖋 React를 이용한 유튜브 클론코딩 오늘은 비디오 플레이어 애플리케이션을 간단하게 리액트로 구현해보는 스프린트가 있었다. 그런데 생각외로 너무 일찍 끝나서 페어분과 함께 직접 유튜브 클론코딩을 해보기로 했다. 기본적으로 유튜브 API를 이용해 검색을 가능하게 하는 것과, 플레이리스트, 동영상 플레이어를 위한 컴포넌트를 제작했었다. 그 외에 추가 하고 싶은 기능들을 페어분과 얘기해 기능뿐만이 아닌 직접 유튜브 처럼 댓글, 구독, 좋아요 등을 추가해보기로 했다. 처음엔 리액트가 어려웠지만 조금이나마 익숙해졌는지 원하는 기능을 직접 만들 수 있었지만 CSS는 많이 모자르다는 생각이 들었다.. 이 중에 댓글에 있는 좋아요를 눌렀을 때, state를 어디서 관리할지에 대해 생각해보.. 2021. 2. 18.
첫 React Twittler (+ 개념 정리) 코드스테이츠 과정 중 몇 번이나 만들었던 Twittler를 이번에는 그 유명한 React로 만들어보는 시간이다!!! 공식 사이트에서 몇 번이나 봐도 직접 적용하기가 너무 어렵다... 그래서 과정마다 기록을 남겨 헷갈리는 개념들을 정리해보고자 한다. (기능 구현에만 신경을 써서 CSS는 건드리지도 않았다..ㅎ) React 준비 1. 기존 폴더에 react 설치 npx create-react-app . 2. 실행 npm start Component 폴더 및 파일 생성 만들기 전, 중요한 개념이 있는데 바로 props와 state다. props vs. state 공통점 리액트에서 컴포넌트가 데이터를 다룰 때 사용하는 개념 차이점 props 읽기 전용(값 변경❌) like 함수 인자 부모 컴포넌트가 자식 컴포넌.. 2021. 2. 12.
TIL_210208 📝 오늘 한 일 / 배운 것 🖋 chatterBox 서버 구현 기존에 있던 클라이언트는 코드스테이츠에 제공해준 서버와 HTTP 통신을 통해 데이터를 얻었다. 하지만 오늘은 직접 Node.js와 내장 모듈 http를 이용해 서버를 만들어, 이 서버와 클라이언트를 연결하는 작업을 했다. 또한 fs 모듈을 이용해 데이터를 서버에 저장하고 가져오는 작업도 할 수 있었다. 즉 나만의 서버가 생긴 것! 한참은 멀었지만 차차 개발자가 되가는 느낌이 들어 너무 좋다. chatterBox 만들기 🙏 기억할 것 🖋 http 통신 클라이언트의 요청이 있으면 항상 서버는 응답해줘야 한다. 🖋 node.js fs 모듈 정의 및 사용법 2021. 2. 9.
ChatterBox 만들기 ✅ 설명 클라이언트(chatterBox)에서 채팅 입력칸에 이름과 내용을 적어 제출(POST 요청)을 하면, 서버는 그에 대한 응답(저장)을 한다. 그리고 클라이언트는 다시 서버에게 GET요청을 보내 이를 바탕으로 JS에서 DOM을 구현한다. ✍ 배운 것 지금까지 배운 지식들과 새로 배운 HTTP 개념과 node.js를 이용하여 chatterBox를 만들어 봤다. 이전까진 단순히 JS로 HTML을 조작하는 것만 구현했었다면, 이번에는 직접 서버와 클라이언트를 구현하고 서버에서 데이터를 가져와 클라이언트는 이 데이터를 바탕으로 JS로 HTML을 조작하는 것이었다. 프로젝트를 통해 HTTP 통신 방법과, 이를 위한 node.js 사용법을 조금이나마 이해하고 사용할 수 있었다. 1. HTTP HTTP는 인터넷.. 2021. 2. 8.
TIL_210207 📝 오늘 한 일 / 배운 것 🖋 chatterbox client 기능 추가 및 디자인 변경 시간이 없어 미뤘던 chatterbox client 기존에는 기본적인 것들 1. (GET)서버에서 데이터를 가져오는 것 2. (POST) 댓글을 남기면 서버에 저장 및 채팅 렌더링 기능만 있었는데 오늘 추가적으로 1. 사용자가 원하는 폰트 설정 2. 채팅 방에 따른 필터링 + 현재 채팅방 표시 3. 미미한 디자인 개선(css가 너무 어렵다..ㅠㅠ) 등.. 를 추가했다. 이를 통해 알게 된 점(특히 css)이 많았던 것 같다. 이쁘게 꾸미고 싶다!!! UI/UX 측면에서 너무 많이 부족함을 느낀다. 코드스테이츠에서 제공하는 강의외에 정말 css 뿐만아니라 디자인적으로도 스스로 파고드는 습관을 들여야할 것같다. 🖋 c.. 2021. 2. 8.
TIL_210205 📝 오늘 한 일 / 배운 것 🖋 node.js를 이용한 서버 생성 node.js에는 기본적으로 내장되어 있는 모듈이 존재한다. 그 중에 하나인 http 모듈을 통해 서버를 생성할 수 있다. HTTP 트랜잭션 해부 를 참고하며 처음엔 이해가 되지 않았지만 과정을 하나하나 따라가며 생각을 해보니 이해를 할 수 있었다. 클라이언트가 요청하는 메서드에 따른 응답 헤드, 본문을 직접 구현해보니 두루뭉술했던 http 통신에 대해 조금이나마 더욱 이해가 된 것 같다. 🖋 HTTP 정리 봐도봐도 이해가 가지 않던 HTTP 메시지, 상태코드 등을 주먹구구식으로 이해해보려다가 머리 속만 더 혼잡해지는 것 같았다. 그래서 흩어져있던 용어와 개념을 차근차근 정리를 하며 복습을 하니 드디어 이해가 가는 듯했다! 블로깅을 하면서.. 2021. 2. 6.
TIL_210203 📝 오늘 한 일 / 배운 것 🖋 클라이언트, 서버, api 이해 🖋 HTTP 🖋 fetch 🙏 기억할 것 🖋 서버의 api 문서를 fetch를 통해 사용하기 🖋 Postman 사용법 2021. 2. 4.
TIL_210202 📝 오늘 한 일 / 배운 것 🖋 Promise 복습 어제 전반적으로 비동기 처리 방식에 대해 공부했었다면, 오늘은 애매했던 개념들을 바로 잡는 시간을 가졌다. 🙏 기억할 것 🖋 Promise.then() 반환 값 then의 반환값은 프로미스지만 내부에서 임의로 return 값을 주면(예를 들면 return 'apple'을 할 시 다음 then에 문자열이 전해지는 것인 줄 알았었다.) 그 값을 바탕으로 다음 then에서 이어서 사용함을 기억하자. 프로미스 반환이 맞고 값을 사용! 🖋 Promise.all Promise.all을 사용하면 전부 병렬적으로 작업이 진행되고 이 바로 뒤에 .then()을 사용하면 전부 then을 이어간다. all이 아닌 일반적으로 여러개의 데이터를 불러오고 이를 비동기 처리하고 .. 2021. 2. 3.
자바스크립트 비동기 처리 방식 ✅ 비동기(Asynchronous) 란? 비동기는 하나의 요청 처리가 완료되기 전에 다음 요청을 처리하는 방식이다. 즉 순서에 상관없이 동시에 여러개의 작업을 할 수 있기 때문에 효율적이다. 왜 처리를 해야하는가? 우선 자바스크립트는 싱글스레드 방식이라 동기적으로밖에 진행할 수 없는데, 기본적으로 자바스크립트는 웹브라우저나 node.js 엔진에서 실행이 된다. 이때 엔진에는 자바스크립트를 돌리는 하나의 스레드가 존재하는데, 엔진 뿐 아니라 비동기 처리모델인 web api라는 것이 함께 동작해서 setTimeout 같은 시간이 소요되는 일을 처리한다. web api들이 자바스크립트 엔진 스레드와는 따로 비동기 처리를 해주면서 콜백함수를 가지고 이벤트 루프에 들어가 처리되는 대로 콜백함수를 자바스크립트 엔진.. 2021. 2. 2.
TIL_210201 📝 오늘 한 일 / 배운 것 🖋 비동기 처리 방식 기본적으로 자바스크립트는 동기적으로 작동하지만, web api를 이용하면 비동기적으로 작동할 수 있다. 이때 비동기는 기존의 것들이 실행되기 전에 다른 것들도 실행시킬 수 있기에 당연히 효율적이지만 문제점이 발생할 수 있다. 이를 해결하기 위한 callback, promise를 통해 비동기 처리 방식에 대한 공부를 할 수 있었다. 🙏 기억할 것 🖋 Promise 🖋 async, await 🖋 자바스크립트 작동 원리 2021. 2. 2.
Tree (트리) & Binary Tree (이진 트리) ✅ Tree (트리)란? Tree는 노드(node)들을 선(edge)으로 연결한 계층형 자료구조다. Graph 용어 노드(Node) : 트리의 구성요소에 해당하는 요소 A, B, C, D, E, F, G, H ,I, J 선(Edge) : 노드와 노드를 연결하는 선 루트 노드(Root Node) : 트리 구조에서 최상위에 존재하는 노드 A 리프 노드(Leaf Node) : 밑으로 또 다른 노드가 연결되어 있지 않은 노드 F, G, H, I, J 부모 노드(Parent Node) : 연결된 노드 사이의 상위 노드 D, H, I 중 D 자식 노드(Child Node) : 연결된 노드 사이의 하위 노드 D, H, I 중 H, I 형제 노드(Sibling) : 같은 부모를 가지면서 같은 depth에 있는 노드들 .. 2021. 1. 24.

티스토리툴바