전체 글53 [항해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. [JavaScript] 함수 표현식 VS 함수 선언식 이번에는 자바스크립트에서 함수를 선언하는 방법을 알아보겠습니다! :) 함수 선언식 일반적으로 작성하는 함수 방법입니다. function 함수명() { //함수 로직 } function funcDeclarations() { return 'function declaration'; } // 함수 호출 funcDeclarations(); 함수 표현식 함수를 변수에 저장하여 활용하는 방식입니다. var 함수명 = function () { //함수 로직 } var funcExpression = function () { return 'function epression' } // 함수 호출 funcExpression(); 함수 선언식 VS 함수 표현식 둘의 가장 큰 차이점은 호이스팅에 있습니다. 먼저 호이스팅은 선언한.. 2022. 1. 25. [CS] 논리 게이트 이 글은 '한 권으로 읽는 컴퓨터 구조와 프로그래밍' 을 정리하여 작성한 글입니다. 논리 게이트 불리언 대수를 물리적 장치에 구현한 것으로, 하나 이상의 논리적 입력값에 대해 논리 연산을 수행하여 하나의 논리적 출력값을 얻는 전자회로 게이트를 사용하면 배관공이 기성 제품의 배관들을 이용하여 복잡한 수도 시스템을 만드는 것처럼 복잡한 회로를 쉽게 만들 수 있습니다. 이전에 배운 것들과 마찬가지로 AND 게이트 출력은 A와 B가 참인 경우에만 Y에 참이 출력됩니다. 위의 인버터(NOT) 기호에서 동그라미가 없는 기호는 버퍼(buffer) 라고 하고, 출력을 전달하기만 합니다. 반면, 인버터 기호는 입력에 대한 보수(complement)를 출력합니다. (ex, 0 --> 1 / 1 --> 0) 논리 게이트에서.. 2022. 1. 25. 이전 1 2 3 4 5 6 다음
