전체 글
-
[JS] '빌더 패턴' 대신 '옵션 객체 패턴'으로
2024.10.21이번 글에서는 빌더 패턴의 의의를 고찰하면서, 이의 대안인 옵션 객체 패턴 이용을 고려해볼 것이다.우선 빌더 패턴이란 무엇일까? 빌더 패턴 (리팩토링 구루, TTUMZZI님)복잡한 객체를 생성할 때, 생성자 함수에 여러 인자를 넣을 시의 난해함, 유지보수의 어려움을 보완한 생성 패턴.객체의 속성(property)을 선택적으로 설정하는 Builder 클래스가 필요하게 된다. 빌더 패턴의 특징을 코드 예시와 함께 확인해보자.const house = new House("My House", 4, 3, false, null, null); 위의 코드를 확인해보면, 정확히 무엇을 의미하는지도 불확실한 여러 인자들이 생성자에 있음을 확인할 수 있다.또 인자들 중에 선택적인 인자는 null로 넣고 있는 모습이다.위와 같.. -
[JS] Object, Map, WeakMap 적절히 쓰기
2024.10.18ObjectJS의 객체 형식으로, 키-값 쌍 형식의 데이터를 표현할 수 있다.JS에서 대부분의 내장 객체와 자료구조들은 Object의 인스턴스라고 할 수 있다. (심지어 Array마저도 내부적으론 Object를 상속받았다) Map마찬가지로 키-값 쌍의 데이터를 표현하며, ES6 표준으로 추가되었다. WeakMap키의 타입을 Object로만 설정 가능하고, 키를 순회하거나 검색할 수 없는 자료구조. ES6에 마찬가지로 추가되었다.Property를 컴파일 시점에 알 수 없는 경우JS의 Object는 '히든 클래스' 기법을 통해 동일한 Property 형태를 가진 Object들에 대한 접근을 최적화한다.(게으른 개발자님, Namu CHO님)이는 곧 Object가 키-값이 계속해서 바뀌는 상황에는 최적화되어 있.. -
6. ...활동으로 느낀 점
2024.10.12활동으로 느낀 점 학기 초부터 총 5호의 신문을 처음부터 직접 쓰고 붙여보았습니다.사실 글을 쓰는 목적은 '모두가 보고 이해하기 쉽게' 라기보단 '깊고 명확하게' 에 가까웠습니다. 사람들이 이해하기 편하게 하려고 하기보단 현업에 쓰이는 기술처럼 정말 개발자가 알고싶어하는 정보를 담은 글을 쓰고 싶었거든요. 제 역량을 쥐어짜보고 싶었습니다.글을 쓰면서 최대한 깔끔하고도 핵심적이도록 쓰려고도 노력을 했던거 같습니다. 인터넷에서 찾아보는 글로는 '완전히 사전적인 내용' 아니면 '그 기술에 대해서만 이해시켜주는 내용' 정도였는데, 좀 딱딱하게 쓰더라도 '현업에서 왜 쓰이는지', '무슨 영향을 미쳤는지', '만들어진 이유는 무엇인지' 등의 내용이 마치 위인전처럼 서술되어 있는것도 재밌겠다고 생각했습니다. 또 그런.. -
5. Spring(스프링)
2024.10.12 2종류프레임워크개발VMware(기업)주요 개발 언어Java, Kotlin발표일2003년 6월 Spring(스프링) (위키백과, 홈페이지) 은 Java(자바) 플랫폼 기반의 애플리케이션 프레임워크이다. 개발 당시 기존의 Java EE(Java Enterprise Edition, 현재 Jakarta EE) 플랫폼 계열의 프레임워크들이 기술 복잡도 상승으로 인해 성능 문제가 발생하자, 이러한 문제를 해결한 새로운 프레임워크가 요구되었고, 이러한 문제 상황을 '겨울'과 같은 시기로 비유해 이후의 '봄'의 시기를 의미하는 Spring으로 명칭하여 개발되었다. 견고한 웹 서비스를 위한 프레임워크 스프링에는 개발을 위한 다양한 디자인 패턴(Design Pattern), 아키텍쳐 및 프로그래밍 패러다임이 적용되어 개발.. -
4. Github(깃허브)
2024.10.12종류Git 플랫폼개발Github(기업)발표일2008년 2월 8일 Github(깃허브) (위키백과, 홈페이지) 는 개발자들이 자유롭게 코드를 공유할 수 있도록 하는 Git 플랫폼이다. 이런 성질 덕분에 오픈소스, 프리웨어 프로그램들의 소스코드 혹은 커뮤니티가 매우 광대한 크기로 존재하고 있으며, 다양한 기업들의 투자와 참여를 받고 있다. 어떤 코드든지 올릴 수 있다 Git 플랫폼으로서 깃허브의 핵심 기능인 Repository는 프로젝트의 소스코드를 어떠한 형태든 무료로 자유롭게 업로드 할 수 있게 한다.또한 누군가의 Repository에 다른 오픈소스 기여자들이 소스코드의 개선점을 요청할 수도 있는데 이를 Pull Reqest라고 한다. Repository의 관리자는 이런 요청을 선택적으로 받아서 자신의.. -
3. WASM(웹 어셈블리)
2024.10.12[오류 정정]WASM의 성능을 서술하는 부분에서 수치가 좀 부정확합니다.자세한 내용은 나중에 또다른 글로 써보겠습니다 [기타 아주 유용한 글][번역] 웹어셈블리에 주목하라 - Jisu Yuk[Wasm] WebAssembly 란 무엇인가? - Ringo 종류프로그래밍 언어 및 바이트코드개발W3C(재단), Intel(기업), Red Hat(기업), Fastly(기업), Mozilla(단체) 등발표일2017년 3월 WASM(즉 웹 어셈블리) (위키피디아, 홈페이지, MDN) 는 웹 브라우저에서 실행 가능한 바이트코드 웹 표준이다. 웹 어셈블리의 전체 이름인 WebAssembly는 'Web에서 실행 가능한 어셈블리 코드' 라는 의미를 가지고있으며, 최근의 웹에서의 기능이 다양화되는 추세에 따라, 기존의 웹에서 .. -
2. React(리액트)
2024.10.12 3종류라이브러리개발Meta(기업)주요 개발 언어Javascript, Typescript발표일2013년 5월 29일 React(즉 리액트)(위키피디아, 홈페이지) 는 기존의 페이스북이었던 Meta에서 개발한 프론트엔드 라이브러리이다. 최근 프론트엔드 웹 개발 분야에서 상당한 점유율을 보유하고 있어 '토스', '인스타그램', '넷플릭스' 등의 다양한 IT 대기업들도 이용하고 있다. 높은 유연성과 생산성근 웹 프론트엔드에서의 큰 유행 중 하나는 바로 'SPA(Single Page Application)(MDN, Toss 개발자센터)'이다. 기존의 웹 페이지와 달리 페이지간의 이동이나 상호작용에서 끊김 없이 마치 기기에 앱을 설치하는 듯이 부드럽게 전환된다. 이렇게 기기의 앱과 같은 성격의 웹 페이지를 웹 앱(위.. -
1. socket.io(소켓io)
2024.10.12 3[오류 정정]하단 예시로 나온 'snake.io' 게임의 이미지는 'slither.io'의 이미지였습니다... 종류라이브러리개발Automattic(개인) → Socket.io(단체)주요 개발 언어Javascript발표일2010년 Socket.io(이하 소켓io) (위키백과, 홈페이지) 는 소켓 통신을 기반으로 웹에서 실시간 양방향 통신 기능을 제공하는 라이브러리 이다. 기존의 웹에서의 HTTP 통신은 단방향, 단기 통신이기에 클라이언트와 서버간의 실시간 통신이 어려웠으나, 소켓 통신을 기반으로 한 소켓io를 이용하면 이를 쉽게 구현 할 수 있다. 웹에서의 실시간 통신소켓io에서는 기본적인 개념이 존재한다. 클라이언트는 서버와 연결되어 서비스를 제공받는 고객, 서버도 마찬가지로 클라이언트와 연결되어 서비.. -
_README.md
2024.10.12 1'일상생활 속 기술 탐구'는 신문 형식으로 쓴 글로, 학급에서 자유주제로 신문을 작성하는 활동에 참여하며 제가 쓴 글들입니다. 2024년 4월 8일부터 7월 1일까지 총 5호의 신문을 직접 작성하고 편집해 보았습니다.활동이 끝나고 남은 글들의 글감이 썩 나쁘지 않아 블로그에 올립니다. -
React + Express + Mysql로 웹사이트 만들기 파일 세팅 방법
2022.01.231. React 기본 설정react 앱을 제작하기 위해 우선 react 앱을 생성해준다.create-react-app 설치npm i -g create-react-app리액트 앱을 생성하려면 반드시 설치해야 한다. 리액트 앱 생성cd (설치할 폴더)npx create-react-app (앱 이름)cd 명령어를 통해 설치를 원하는 폴더로 이동한 다음 해당 명령어를 입력하면 자동적으로 폴더와 파일들이 생성된다.git init과 package 설정도 해준다. 2. Express 기본 설정백엔드 과정과 DB와 연결할 express를 세팅해준다.Express 설치npm i express 폴더 설정리액트 앱을 생성한 해당 폴더 안에 server 폴더를 만들고, 그 안에 server.js 파일을 만든다.3. Mysql..