본문 바로가기

source-code

(23)
한 권으로 읽는 컴퓨터 구조와 프로그래밍 목차 이 책은 개념적으로 세 부분으로 나뉜다. 첫 번째 부분은 컴퓨터 하드웨어를 탐구한다. 하드웨어가 무엇이고 하드웨어를 어떻게 만드는지 살펴본다. 두 번째 부분은 하드웨어에서 소프트웨어가 어떻게 작동하는지 살펴본다. 마지막 부분은 프로그래밍 기술, 즉 다른 살마들과 협력해 더 나은 프로그램을 만드는 방법에 관한 것이다. 하부 기술 지식. 더 나은 프로그래머가 되기 위해서는 컴퓨터를 잘 이해하고, 프로그램의 동작을 이해해야만 한다. 고수준 도구만 알고 있을 때의 가장 큰 문제점은... 잘못된 질문을 던지기 쉽다는 점. 백번 공감. 컴퓨터 설계와 프로그래밍 1. 사용자 : 컴퓨터 시스템을 사용하는 대부분의 사람들. 2. 애플리케이션 프로그래머 : 웹, 앱, 플레이어 등의 프로그램을 작성하는 사람들. 다른 ..
코드스피츠 85 거침없는 자바스크립트 - 1회차 https://www.youtube.com/watch?v=0NsJsBdYVHI&list=PLBNdLLaRx_rImvbuZnfO-Ecv9OpuCNoCl 1. 현대 JS pipeline 일반적인 현대 JS 개발 흐름 : code작성 → transpiler → packaging → CI → depoly => 실제 작성된 코드와 제공되는 서비스 간의 차이가 아주아주 커짐! ==> 서비스 단의 코드 수정이 어려워졌다는 단점이 있지만, 언어 및 브라우저 실행 등은 transpiler나 packaging에만 맡기고 code에 집중할 수 있는 환경이 조성되기도 한 것! 2. ECMAScript 표준 JS는 C# 이후 가장 빠르게 업데이트가 이뤄지는 언어(매년 상반기 신규 버전 출시 - 버전과 연도가 1차이) 대부분 현..
SRP! 결국은 유지보수를 위함이더라..! 단일 책임 원칙을 따른다고 해서 무조건 유지보수가 편해지지는 않겠지만, 유지보수 하기 좋은 컴포넌트들은 대부분 하나의 기능만 수행한다. 컴포넌트가 커지면 커질수록, 로직이 길어지면 길어질수록, 해당 컴포넌트가 수행해야 하는 역할이 무엇인지 상기해봐야 한다. 그리고 오늘 찾은 약간의 팁! 코드를 작성 전, 해당 컴포넌트가 수행해야 할 작업을 작성해 두면 SRP 원칙을 조금 더 쉽게 지킬 수 있었다! 지난 주말부터 보던 FE에서의 TDD 영상에서 착안했다. 아직 테스트 코드 도입은 무리지만, 코드 작성을 위한 → 테스트 코드 작성을 위한 → 해당 테스트의 역할 명시를 위한 → 해당 컴포넌트의 역할 명시 라는 flow 중 첫 번째를 수행한 느낌이랄까!
소소한 디버깅 사항 정리 2 1. emotion JS Type Error emotion JS에서는 css props를 사용한 스타일링을 권장한다. https://emotion.sh/docs/css-prop Emotion – The css Prop The primary way to style elements with emotion is the css prop. It provides a concise and flexible API to style your components. There are 2 ways to get started with the css prop. Both methods result in the same compiled code. After adding the preset or se emotion.sh css prop..
테스팅 트로피 Kent C. Dodds의 테스팅 트로피 Static 테스트 (정적 테스트) 코드를 실행시키지 않은 테스트. 오타, 타입 에러, 참조 에러와 같이 개발자의 실수로 인해 발생하는 에러를 잡을 수 있음. ESLint, Typescript Unit 테스트 (단위 테스트) 기능의 개별적인 단위를 테스트하는 것. 작은 단위(ex 특정 기능 단위, 컴포넌트)를 떼어내, 분리된 환경에서 테스팅 → 예상한 값이 나옴을 확인. 의존성이 있는 모듈의 경우 Mocking해 테스트 진행. 작성 비용 ↓ 실행 속도 ↑ Intergration 테스트 (통합 테스트) 애플리케이션의 여러 부분을 통합한, high level 테스트. 주로 unit test보다 큰 범위의 테스트 의미. 큰 규모의 기능 또는 하나의 페이지가 제대로 동작..
React 프로젝트에서 TS 사용하기 React 컴포넌트 TS로 작성하기 import React from 'react'; type GreetingsProps = { name: string; mark: string; }; function Greetings({ name = "", mark = "" }: GreetingsProps) { return ( Hello, {name} {mark} ); } // Greetings.defaultProps = { //mark: '!' //}; export default Greetings; 함수형 컴포넌트에서 props의 type을 지정하는 여러 방법들이 있지만... 위 예시가 가장 직관적으로 여겨진다. 부모 컴포넌트에서 넘겨받은 parameter 구조 분해 할당. 해당 값들에서 기본 매개 변수 설정(굳이 함수..
말하고자 하는 내용을 명확히 전달한다. 협업을 하다 보면 많은 말을 하게 된다. 일방적으로 자신이 설명하는 순간도, 상호 간 대화를 주고받을 때도, 서로를 설득해야 할 때도 있다. 그 과정에서 머릿속 생각을 입 밖으로 표현할 때... (즉, 말을 할 때) 지금 자신의 말이, 스스로가 들어도 이상할 때가 있다. 그리고 이상하다고 느끼는 대부분의 이유는, 자신이 무슨 얘기를 하는지 모를 때 발생한다. 이는 분명 입 밖으로 어떤 단어들이 내뱉어지고 있는데, 그 단어들이 지닌 의도, 목적이 스스로도 명확하지 않다는 의미이다. 그러므로 협업 과정에서 말을 할 때는 항상 말하고자 하는 내용을 명확히 전달할 수 있도록 노력한다. 노력의 방안으로는 1. 단어를 내뱉기 전, 전체적인 말의 의도를 설정한다. 2. 각 단어들의 의도를 적절하게 전달할 수 있도록 ..
Node.js 교과서 - 노드 시작하기 https://thebook.io/080229/ch01/ Node.js 교과서 개정 2판: 1장 노드 시작하기 더북(TheBook): (주)도서출판 길벗에서 제공하는 IT 도서 열람 서비스입니다. thebook.io 1. 핵심 개념 이해하기 Node.jsⓇ는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임입니다. 이 때 노드는 서버만 실행할 수 있는 것이 아님! (자바스크립트 프로그램을 실행하는 런타임으로서도 가능) 서버 vs 런타임 서버 네트워크를 통해 클라이언트(브라우저, 데스트톱 프로그램, 모바일 앱 ...)에 정보나 서비스를 제공하는 컴퓨터 또는 프로그램. 노드는 자바스크립트 프로그램이 서버로서 기능하기 위한 도구를 제공하므로, 서버 역할을 수행할 수 있다. 다른 ..