전체 글64 [항해99] 6주차 회고 한 주에 대한 정리 이번 주차는 처음으로 프론트엔드와 백엔드가 같이 프로젝트를 진행했습니다. 간단히 소감을 말하자면 너무나 어려웠고 진이 빠지는 듯한 주차였습니다. 처음으로 항해기간이 쉽지 않구나 라고 생각했었습니다. 먼저, 가장 어려웠던 부분은 소통을 하는 부분이었습니다. 프론트 엔드는 백엔드가 사용하는 용어나 어떻게 서버작업이 되는지 알지 못했고, 백엔드는 프론트엔드가 어떤 특성을 가지고 있는지 알지 못해 서로 필요한 부분을 설명하기에 어려운 부분이 많았습니다. 코드를 작성하는 부분도 생각보다 오류가 많았습니다. 서버랑 연결하기 위해서 axios를 사용해 요청하고 응답을 받았는데 이 과정에서 알 수 없는 오류들이 많이 나와 생각했던 것보다 많은 부분에서 오류를 겪었습니다. 그래도, 이번 주차를 진행하.. 2022. 2. 20. [CS] 계층적인 데이터 구조 이 글은 '한 권으로 읽는 컴퓨터 구조와 프로그래밍' 을 정리하여 작성한 글입니다. 계층적인 데이터 구조 앞에서는 선형적인 데이터 구조를 봤습니다. 이 선형적 구조는 데이터를 가져오는데 문제가 있습니다. 예를 들어, 연결 리스트의 저장된 데이터를 가져오려면, 리스트를 순회해야만 합니다. 리스트 길이가 n이라면 최대 n번 노드를 순회해야 한다는 것입니다. 앞에서 연결 리스트의 노드를 연결하기 위해서 포인터를 사용했습니다. 이 포인터 수에는 제한이 없기 때문에, 메모리 공간이 허용하는 한 원하는데로 데이터를 조작할 수 있습니다. 2진 트리 간단한 계층적 데이터 구조로 2진 트리가 있는데, '2진' 이라는 말은 2진수가 아니라 최대 2개의 다른 노드와 연결될 수 있기 때문에 붙은 말입니다. 아래 그림에서 트리.. 2022. 2. 15. [항해99] 5주차 회고 한 주에 대한 정리 항해의 5주차는 앞서 배운 리액트와 상태 관리를 파이어스토어와 함께 사용하여 간단한 인스타그램 서비스와 비슷한 것을 만들었습니다. 프로젝트를 진행하다 보니 작은 프로젝트에도 어려가지 신경을 써야하는 것들이 많다는 것을 느꼈습니다. 어느 컴포넌트에서 서버의 데이터를 받아올 것인지, props를 전달할 것인지 등 간단해 보였던 것들이 생각보다 많은 오류를 일으켰습니다. 프로젝트가 끝난지금은 조금 익숙해 졌지만 이후 다른 프로젝트를 진행하면서 더 익숙해져야 겠다고 생각했습니다. 다음주에는 클라우드 서비스가 아닌 실제 백엔드 분들과 같이 프로젝트를 진행하게 됩니다. 아래에서는 서버와 통신하기 위해 사용하는 axios를 간단히 알아보겠습니다. axios Axios는 node.js와 브라우저를 .. 2022. 2. 13. [CS] 아날로그 처리 방법 이 글은 '한 권으로 읽는 컴퓨터 구조와 프로그래밍' 을 정리하여 작성한 글입니다. 아날로그 처리 방법 실제 소리나 빛 같이 아날로그는 연속적이지만, 컴퓨터에는 연속적인 대상을 저장할 방법이 없습니다. 그래서 데이터의 샘플을 취해야 합니다. 샘플링 샘플을 취한하는 말은 시간이나 공간상 일정한 간격으로 값을 읽어야 한다는 뜻입니다. 저장한 데이터를 다시 영상이나 빛으로 보여주기 위해서는 샘플링 데이터로부터 아날로그 신호를 다시 만들어야 합니다. 샘플링은 새로운 것이 아닙니다. 무성 영화 시절에도 영화 화면은 1초당 16프레임을 샘플링해 만들었습니다. 아래에서는 컴퓨터가 아날로그 신호를 만들거나, 아날로그 신호를 분석하는 방법을 알아보겠습니다. 디지털을 아날로그로 변환 디지털 숫자를 사용해 아날로그 전압을 .. 2022. 2. 9. [항해99] 4주차 회고 한 주에 대한 정리 4주차는 React의 숙련 주차였습니다. 4주차에 집중적으로 배운 것은 리덕스를 통한 전역 상태관리 였습니다. 리액트가 부모 컴포넌트에서 자식 컴포넌트로 props를 전달해 줌에 따라 깊이가 깊어 지면 필요없이 전달해야하는 문제가 있습니다. 이를 해결하기 위해 배운 것이 상태관리였고, 리액트에서 가장 많이 사용하는 리덕스를 이용했습니다. 또한, firebase를 사용해 서버리스 서비스를 경험해 보았습니다. 아래에서는 리액트가 클래스 컴포넌트가 아닌 함수형 컴포넌트를 사용하는 것을 권장함에 따라 라이프 사이클 메서드를 비교하고 hooks에 대해 간단히 알아보겠습니다. 라이프 사이클 먼저, 라이프 사이클은 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 말합니다. 라이프.. 2022. 2. 6. [CS] 메모리 계층과 성능 이 글은 '한 권으로 읽는 컴퓨터 구조와 프로그래밍' 을 정리하여 작성한 글입니다. 메모리 계층과 성능 과거에는 CPU와 메모리의 작업 속도가 같았지만, 시간이 지남에 따라 CPU는 속도가 빨라졌고, 메모리는 그렇게까지 빨라지지 못해 CPU 보다 속도가 뒤쳐지기 시작했습니다. 이로인해, CPU가 느린 메모리를 기다리느라 아무 일도 하지 않는 경우가 생겼습니다. 메모리 계층 메모리를 필요에 따라 여러가지 종류로 나누어 둠을 의미합니다. 이 때 필요한 대부분의 경우 CPU가 메모리에 더 빨리 접근하기 위함 입니다. 레지스터와 캐시는 CPU 내부에 존재합니다. CPU가 아주 빠르게 접근할 수 있습니다. 주 메모리는 CPU 외부에 존재합니다. 레지스터와 캐시보다 더 느리게 접근 할 수 밖에 없습니다. 대용량 저.. 2022. 2. 3. [React] 라이프 사이클 이번에는 리액트 컴포넌트의 라이프 사이클에 대해 알아보겠습니다! 라이프 사이클 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 라이프 사이클이라고 합니다. 위의 이미지는 리액트의 라이프 사이클을 보여주는 그림입니다. 각각 어떤 역할을 하는지 알아보겠습니다. 라이프 사이클 유형 라이프 사이클을 크게 3가지 유형으로 나눌 수 있습니다. 이는 생성될 때(Mount), 업데이트 할 때(Update), 제거할 때(Unmount) 입니다. Mount 먼저, 마운트(Mount)에 대해서 설명하겠습니다. 마운트는 DOM이 생성되고 웹 브라우저에 나타나는 것을 의미합니다. Update 업데이트(Update)는 4가지 상황에 의해 발생합니다. props가 변경될 때 (New props) state가 변경.. 2022. 1. 31. [React] 리액트란? 이번에는 자바스크립트 라이브러리 중 하나인 리액트에 대해 알아보겠습니다! 리액트 먼저, 리액트(React, React.js, ReactJS)는 자바스크립트 라이브러리 중 하나로 사용자 인터페이스를 만들기 위해 사용됩니다. 또한, 리액트는 SPA(Single Page Application)의 UI를 생성하는데 집중한 라이브러리 입니다. 리액트의 특징 그렇다면 리액트는 왜 사용할까요? 리액트의 특징을 알아보며 생각해봅시다! 1. Component 기반 라이브러리 컴포넌트(Component)는 독립적인 단위의 소프트웨어 모듈을 말합니다. 리액트는 독립된 컴포넌트들을 조립하여 화면을 보여줍니다. 리액트는 헤더, 메인 콘텐츠, 네비게이션, 메뉴, 버튼 등 여러 컴포넌트들로 쪼개져 구성할 수 있기 때문에 전체적인 .. 2022. 1. 31. [항해99] 3주차 회고 한 주에 대한 정리 3주차는 드디어 자신이 정한 주특기를 배우는 주차였습니다. 제가 선택한 주특기는 리액트였습니다. 3주차에 집중적으로 배운 것은 리액트의 기초와 라이프 사이클, 라우팅이였습니다. 리액트에서 리액트 요소가 화면에 그려지고 사라는진데 까지의 사이클 SPA에서 라우팅 등 어떻게 리액트가 그려지고 작동하는지를 배울 수 있었습니다. 아래에서는 라이프 사이클을 이해하기 위해 필요한 DOM과 프로젝트를 만들 때 서버에 대한 고민을 줄여줄 수 있는 서버리스에 대해 알아보겠습니다. DOM 먼저 DOM은 Documnet Object Model로 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스를 의미합니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각 요소에 접근하는 방법을 제공합니다.. 2022. 1. 30. 이전 1 2 3 4 5 6 7 8 다음
