티스토리

Nochi's Identity

검색하기

블로그 홈

Nochi's Identity

ainochi.tistory.com/m

Nochi는 러시아어로 '밤'이란 의미입니다. 🌙

구독자: 5

방명록 방문하기

주요 글 목록

유데미(Udemy) "NodeJS 완벽 가이드" 수강 글또 9기를 하던 중 좋은 기회로 유데미에서 2개의 강의를 들을 수 있는 쿠폰을 주셨습니다. 매번 프런트엔드의 틀에만 갇혀 있다는 생각이 들어 "NodeJS 완벽 가이드"를 수강하게 되었습니다. 저는 앞으로 개발자로 살아가기 위해서라면 언어 또는 프레임워크를 아는 것이 아니라 매커니즘을 이해해야 한다고 생각했기에 해당 강의에 궁금함이 많았습니다. 유튜브에서 조금 공부한 적이 있지만, 내용의 깊이가 상대적으로 얕거나 2차 강의를 팔기 위해 빌드업으로 낸 강의들이 대부분이었기에 동영상 강의에서 만족할 수 없었습니다. 그러나 유데미 강의를 듣게 되면서 생각이 바뀌었습니다. NodeJS 코드 작성하는 법만 알려주는 줄 알았는데 NodeJS가 컴퓨터에서 어떻게 동작하는지컴퓨터 구조까지 상세하게 알려주어서 감명 깊.. 공감수 0 댓글수 0 2024. 3. 31.
React-Native - The Basics 최근에 React-Native로 프로젝트를 하면서 공식문서를 제대로 읽어보지 못한 것이 아쉬워서 이번에 공식문서를 천천히 살펴보려합니다. Core Components and Native Components React Native는 React와 앱 플랫폼의 기본 기능을 사용하여 안드로이드 및 iOS 애플리케이션을 구축하기 위한 오픈 소스 프레임워크입니다. React Native를 사용하면 JavaScript를 사용하여 플랫폼의 API에 액세스할 뿐만 아니라 재사용 가능하고 중첩 가능한 코드 묶음인 React 컴포넌트를 사용하여 UI의 모양과 동작을 설명할 수 있습니다. Views and mobile development Android 및 iOS 개발에서 뷰는 UI의 기본 구성 요소로, 텍스트, 이미지를 표.. 공감수 0 댓글수 1 2024. 3. 17.
React State 관리: 10년간의 교훈 출처: https://www.youtube.com/watch?v=-IqIqJxC-wo Mistake : Separating related state Solution : Unify related state 코드를 분리할 때 가장 일반적으로 볼 수 있는 것 중 하나인 관심사를 분리하는 것부터 시작합니다. 해답은 매우 간단하며, 즉 관련된 상태에 대해 이야기 할 때 관심사가 같은 상태를 통합하는 것입니다. 여기서 개념은 속성이 서로 관련되어 서로 적용되는 상태에 대해 생각하는 것 입니다. function App() { const [address, setAddress] = useState(""); const [city, setCity] = useState(""); const [country, setCountry.. 공감수 1 댓글수 0 2024. 3. 3.
React-Native에 대해서 알아보자! 참고: Do it! 리액트 프로그래밍 요즘 리액트 네이티브에 빠져 있어서 리액트 네이티브로 앱을 만들어보고 있습니다. 모바일에서 보여지는 UI를 보면서 신기하기도 하고, 내가 표현할 수 있는 범위가 확장함에 따라서 재미가 많이 컸던 것 같습니다. 기본적으로 셋팅하면서 스트레스를 많이 받았지만 공기계도 꺼내보고 이것저것 코드를 치면서 핸드폰에서 나오는 결과물이 신기하여서 너무 좋았습니다. 그러나 앱을 만들고 싶어서 시작한거라 리액트 네이티브가 어떻게 동작하는지 알아보지 않고 사용하였습니다. 그러다보니 이게 어떻게 동작하는지 알아보고자 글을 정리하게 되었습니다. React Native 모바일 앱 개발에서 ‘네이티브’라는 단어는 ‘운영체제를 만들 때 사용하는 프로그래밍 언어와 똑같은 언어로 만든’이라는 의미입.. 공감수 1 댓글수 0 2024. 2. 17.
Next.js Project Structure Next.js 구조에 대해서 제대로 모르고 사용하다보니 쉽게 해결할 일도 어렵게 만드는 것을 가끔 겪는 것 같습니다. 오늘은 Next.js에서 제공해주는 프로젝트 구조에 대해서 간단하게 살펴볼 예정입니다. 공부하게 되면서 새롭게 알게 되는 것들을 적용할 수 있으니 한번 블로그를 적으면 알아보겠습니다. Top-level folder 최상위 폴더에는 app, pages, public, src가 있습니다. app app : App Router를 사용하기 위한 폴더입니다. Next.js에서 공유 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 React Server Components를 기반으로 구축된 새로운 매커니즘입니다. page : Page Router를 사용하기 위한 폴더입니다. 페이지 개.. 공감수 1 댓글수 1 2024. 2. 3.
2024년 상태 관리의 종결 : zustand 얼마 전, [모던 리액트 Deep Dive] 책을 읽고 회사에서 1월 사용하는 상태 관리 라이브러리를 zustand로 변경하였습니다. 왜 zustand를 선택하였고, 그 이야기를 해보려고 합니다. 여러분들은 redux, mobx, recoil, jotai, zustand, valtio 이들 중 어떤 것을 쓰시나요? 혹시 valtio를 쓰시는 분이 있다면 굉장히 힙하다는 생각이 드네요. 회사에서 zustand 를 쓰기 전인 2022~2023년 약 2년 동안 recoil 을 사용하였습니다. 2021년에 입사했을 땐 redux를 쓰고 있었구요. redux 로 짜여진 프로덕트에서 거의 대부분의 상태가 redux 와 결합되어 매우 거대한 스토어를 이루고 있었습니다. 그것을 사용하기 위해 action 또한 너무 거.. 공감수 3 댓글수 0 2024. 1. 19.
다사다난 해 - 2023년 회고 무엇부터 써내려가야 할지 모르겠다. “쓰다 보면 완성되겠지. 2023년 처음으로 기억을 되돌려서 시작할까? 어디서부터 시작할까..” # 서비스 종료 작년에 B2B 위주의 회사에서 데카킬이라는 서비스를 기획하였다. 트위치 플랫폼에서 제 3자가 실시간으로 퀴즈를 내고 문제를 맞히면 포인트를 받고, 그 포인트를 통해서 상품을 살 수 있는 그러한 플랫폼이었다. 데카킬을 만드는 중간에 팀에 합류되었다. 데카킬 팀에는 10년 차 이상의 수준급 디자이너, PM이 있었지만 나는 프론트엔드로서 React도 제대로 모르고 JS도 잘 몰랐기 때문에 신입이 만든 Vue.js를 이해하지도 못하였다. 나는 문제를 출제하는 페이지를 React로 만들었고 신입은 트위치 서드파티 플랫폼을 Vue.js로 만들었다. 와이리 통일성이 없너.. 공감수 9 댓글수 0 2023. 12. 31.
Virtualize List with react-window 글또 9기로써 첫 글이다. 저번 달부터 갑작스럽게 살고 있는 집이 경매로 넘어가버려서 시작부터 1회차를 패스하였는데, 이제 글을 제대로 써보려고 한다. 올해 5월 회사에서 LCK Korea에서 사용할 웹 사이트를 제작할 때의 일이다. 그 당시 제품의 필터 구조에서 (list)와 (list)가 있었다. 리그(예시: 2023 LCK Summer)를 선택하면 해당 리그의 모든 경기를 의 으로 보여주는 방식이었다. 한 리그를 onClick하면 에서 약 90개 정도의 을 보여주었다. 그때까진 웹에서 크게 부담이 없었고, 무사히 넘어갈 수 있다고 생각했다. 그러나 쉽게 넘어가는 날이 없었다. 고객사 측에서 연락이 왔다. “에 [전체]라는 list item을 추가하고 에는 지금까지 있었던 모든 게임을 보여주세요.” .. 공감수 4 댓글수 2 2023. 12. 17.
[AWS Summit] 스마트한 클라우드 스토리지 비용 관리 전략 : 클라우드를 효율적으로 쓰기 위한 방안 폭발적인 데이터의 증가와 도전 과제들 전 세계적으로 101 ZB(제타 바이트)의 데이터가 생성된다. 머신러닝의 데이터 활용으로 인한 데이터의 증가 추세이다. 과제: 다양한 유형의 데이터, 확장성의 한계, 높아지는 비용 위험: 데이터 보호와 연속성 보장이 복잡해짐에 따라 위험 증가 기회: 데이터의 수집 단계에서 가치 창출의 단계로 이동하며 혁신 주도 [워크로드를 위한 AWS 스토리지 서비스] 서비스: 데이터 보호, 데이터 스토리지, 데이터 활용, 데이터 이동 스토리지 비용 최적화 기술 스토리지는 오브젝트와 블록 스토리지가 있다. 오브젝트 스토리지: 비정형 형식(객체)으로 데이터를 저장하고 관리하는 기술. 스토리지 분석 스토리지 클래스 데이터 수명 주기 인텔리전트 티.. 공감수 1 댓글수 0 2023. 5. 9.
[AWS Summit] 서버리스, 이제는 데이터 분석에서 활용해요! (정리) 박진우 - AWS Agenda 모던 데이터 환경에서의 데이터 분석 및 도전 과제 왜 서버리스 데이터 분석인가 목적에 맞는 서버리스 분석 서비스 살펴보기 서버리스 선택 가이드 마무리 모던 데이터 환경에서의 데이터 분석 및 도전 과제 모던 앱은 엄청난 양의 데이터를 가지고 있다. 2023년에는 123ZB가 발생할 것으로 예상한다. 고객은 데이터로 다양한 가치를 만들길 원한다. ex) 데이터 레이크에 쌓고 분석된 데이터를 활용하여 인사이트, 추천 등에 활용한다. 데이터 레이크: 구조화되거나 반구조화되거나 구조화되지 않은 대량의 데이터를 저장, 처리, 보호하기 위한 중앙 집중식 저장소 AWS의 데이터분석 도전 과제 더 복잡해지는 데이터 환경 폭발적인 데이터 증가 새로운 데이터 소스 더욱더 다양한 포맷 다양해진 .. 공감수 0 댓글수 0 2023. 5. 9.
[JS] V8: 전체 컴파일러 V8 가비지 컬렉션을 공부하다가, 이게 맞나란 생각을 좀 많이 하면서 V8이 무엇인지 좀 자세히 알아보기 위해 A tour of V8: full compiler를 번역하여서 공부해보고자 한다. 번역하다가 이해하기 쉽게 가감한 면이 있지만 이해가 잘 되었으면 좋겠다. JavaScript 가상 머신에서 해석하다 JIT(Just-In-Time) 컴파일로 전환되면서 성능이 엄청나게 빠르게 증가했다. 이로 인해 JavaScript와 웹 앱의 유용성이 크게 증가했다. 그 결과, JavaScript는 이제 HTML5, 즉 웹 기술의 다음 세대를 이끄는 메인이 되었다. 네이티브 코드를 생성하고 실행하는 최초의 자바스크립트 엔진 중 하나인 V8 엔진은 구글 크롬, 안드로이드 브라우저, WebOS 및 Node.js와 같은.. 공감수 0 댓글수 1 2023. 4. 20.
[Js] V8 가비지 컬렉션 - 1/2 이전에는 자바스크립트의 가비지 컬렉션에 대해서 알아보았다. 이번에는 JavaScript의 많은 변화를 준 V8 엔진의 자바스크립트에 대해서 알아보고자 한다. 가비지 컬렉션은 긍정적인 측면 프로그래머가 메모리를 더 이상 직접 관리할 필요가 없어졌기 때문에 유지보수가 간편해졌다. 장기간 실행되는 대규모 어플리케이션의 경우 많은 종류의 오류, 메모리 누수를 줄여주어 성능을 향상시켜준다. 그러나 가비지 컬레션을 사용한다는 것은 메모리 관리 방식에 대한 제어권을 포기한다는 의미이다. JavaScript의 경우 메모리 관리 방법에 대한 모든 제어 권한을 포기한다. ECMAScript의 가비지 컬레션은 인터페이스를 노출하지 않는다. 그래서 웹 앱이 메모리 사용량을 측정하거나 기비지 컬렉션에 대한 단서를 제공해주지 않.. 공감수 0 댓글수 0 2023. 4. 12.
[Js RoadMap] 02. 가비지 컬렉션 자바스크립트는 눈에 보이지 않는 곳에서 메모리 관리를 수행한다. 원시값, 객체, 함수 등 우리가 만드는 모든 것은 메모리를 차지한다. 자바스크립트 엔진은 더는 쓸모 없는 것들을 어떻게 처리하는지 알아보자. 가비지 컬렉션 기준 자바스크립트는 도달 가능성(reachability)이라는 개념을 사용하여 메모리 관리를 수행한다. '도달 가능한(reachable)'값은 쉽게 말해 어떻게든 접근하거나 사용할 수 있는 값을 의미한다. 도달 가능한 값은 메모리에서 삭제되지 않는다. 태생부터 도달 가능하기 때문에, 명백한 이유 없이 삭제되지 않는 값 (root) 현재 함수의 지역 변수와 매개변수 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 전역 변수 기타 등등 이런 값을 루트(root)라고 부른다. 루트가.. 공감수 0 댓글수 0 2023. 4. 6.
[우아한 테크세미나] 테크 리더 3인이 말하는 "개발자 원칙" 정리 제어할 수 없는 것에 의존하지 않기 / 인프랩 이동욱 CTO "일정은 지키지만 버그가 많은 것 vs 일정은 못 지키지만 버그가 없는 것" 프로그래머에게 요구되는 것은 100점이 아닌 80~90점짜리 프로그램을 기한 내에 완성하는 일이다. - 나카지마 사토시 "프로덕트 엔지니어의 일은 고객이 원하는 기능을 고객이 원하는 시점에 전달하는 것"이 프로덕트 엔지니어로써의 해야할 일이다. 퀄리티 보다 일정이 중요한가? 아무리 급해도 항상 80~90점짜리 소프트웨어를 일정 내 개발하는 방법이 중요하다. "일정을 항상 잘 지키는 분들의 공통점" 가장 좋은 코드를 선택하는 방법은? "본인만의 기준과 원칙으로 빠르게 결정" "선택의 순간마다 고민 하는 사람"보다는 "원칙에 따라 빠르게 결정하고 중요한 것만 고민하는 사람.. 공감수 0 댓글수 0 2023. 3. 30.
[FE RoadMap] 00.Internet 좀 봐봐 " 프론트엔드 개발자 로드맵을 통해 공부해보고자 만들었다. " 인터넷은 어떻게 동작하는가? : 개발자로써 인터넷은 무엇이며 어떻게 동작하는지 확실히 이해하는 것이 중요하다. 인터넷 소개 인터넷을 배우기 전에 네트워크가 무엇인지 이해가 필요하다. | 네트워크 | : 서로 연결된 컴퓨터 또는 기타 장치 그룹 예를 들면, 나의 집에 네트워크가 있고 있을 수 있고, 옆집에도 비슷한 네트워크를 가지고 있을 수 있다. 모든 네트워크가 함께 연결되면서 인터넷을 형성한다. | 인터넷 | : 네트워크의 네트워크 인터넷은 1960년대 후반 미국 국방부에서 핵 공격을 견딜 수 있는 분산형 통신 네트워크를 만드는 수단으로 개발되었다. 수년에 걸쳐 전 세계를 아우르는 복잡하고 정교한 네트워크로 발전했다. 인터넷 작동 방식: 개.. 공감수 0 댓글수 0 2023. 3. 27.
[Js RoadMap] 01. JavaScript가 뭔데? JavaScript JavaScript는 인터프리터(소스코드를 바로 실행하는 환경), just-in-time 컴파일(실행하는 시점에 기계어로 번역) 프로그래밍 언어로 일급 함수(함수를 변수에 저장 가능)를 지원한다. 요즘은 Node.js, Apache CouchDB, Adobe Acrobat 처럼 비 브라우저 환경에서도 사용하며, JavaScript의 특징은 다음과 같다. 프로토타입 기반 : 객체 생성할 때, 클래스를 정의하지 않아도 생성이 가능 다중 패러다임 : 여러가지 방법론이 적용됨을 의미 단일 스레드 : 하나의 프로세스에서 오직 하나의 스레드로 동작 동적 언어 : 컴파일 시 자료형이 결정 객체지향형 : 객체라는 단위로 상호작용을 서술하는 방식 명령형 : 어떻게 해결할 것인가 선언형 :무엇을 해결할.. 공감수 0 댓글수 0 2023. 3. 27.
데이터 모델링 01.데이터 모델링의 개념 [1] 데이터베이스 생명주기 요구사항 수집 및 분석 -> 설계 -> 구현 -> 운영 -> 감시 및 개선 1) 요구사항 수집 및 분석 : 사용자들의 요구사항을 듣고 분석하여 데이터베이스 구축의 범위를 정하는 단계 // 사용자의 범위(고객, 운영자, 경영자 등)와 서비스 수준을 정하는 것. 2) 설계 : 분석된 요구사항을 기초로 주요 개념과 업무 프로세스 등을 식별하고(개념적 설계), 사용하는 DBMS의 종류에 맞게 변환(논리적 설계)한 후, 데이터베이스 스키마를 도출(물리적 설계) 3) 구현 : 설계 단계에서 생성한 스키마를 실제 DBMS에 적용하여 테이블 및 관련 객체(뷰, 인덱스 등)를 만든다. 또한 관련 소프트웨어에 설계한 데이터베이스를 적용하여 서비스를 제공할 수 있도록 .. 공감수 0 댓글수 0 2020. 7. 27.
004 - SQL 기초 01. SQL 개요 DBMS는 SQL 문을 해석하고 프로그램으로 변환하여 실행한 후 결과 출력. SQL(Structured Query Language)은 1970년대 후반 IBM이 SEQUEL(Structured English QUEry Language)이라는 이름으로 개발한 관계형 데이터베이스 표준 언어로 승인. SQL은 데이터 부속어(data sublanguage)라고 한다. - DB의 Data와 메타 데이터를 생성하고 처리하는 문법만 갖고 있기 때문. SQL은 DBMS에 직접 입력, 클라이언트/서버 응용 프로그램에 삽입하여 사용 가능. HTML 웹 페이지 문서에 삽입, 다른 개발 도구에서 직접 실행이 가능. 구분 SQL 일반 프로그래밍 언어 용도 데이터베이스에서 데이터를 추출하여 문제 해결 모든 문.. 공감수 1 댓글수 0 2020. 7. 15.
003 - 관계 데이터 모델 01. 관계 데이터 모델의 개념 [릴레이션] : 행과 열로 구성된 테이블 [1]관계(Relationship)는 두 가지 개념으로 볼 수 있다. 1) 릴레이션 내에서 생성되는 관계. 실제 데이터들의 집합 2) 릴레이션 간에 생성되는 관계. 릴레이션 간의 관계 [2] 스키마와 인스턴스로 이루어진다. 스키마(Schema) : 관계 데이터베이스의 릴레이션이 어떻게 구성되는지 어떤 정보를 담고 있는지에 대한 기본적인 구조를 정의. 스키마는 테이블의 첫 행인 헤더(Header)에 나타남. 각 데이터의 특징을 나타내는 속성, 자료 타입의 정보를 가짐 인스턴스(Instance) : 정의된 스키마에 따라 테이블에 실제로 저장되는 데이터의 집합을 의미. [3] 릴레이션 스키마 : 릴레이션에 어떤 정보가 담길지 정의. 속성.. 공감수 0 댓글수 0 2020. 7. 14.
002 - 요구분석과 시스템 설계 그리고 모델링 [정보시스템 구축 절차 요약] 정보시스템을 구축하기 위해서는 일반적으로 분석, 설계, 구현, 시험, 유지보수의 5가지 단계를 거친다. 여기서는 분석과 설계에 대해서 알아보자. *분석 - 시스템 분석 또는 요구사항 분석이라고 부른다. - 우리가 '무엇을(What)'할 것인지를 결정한다. - 분석 결과로 많은 문서를 작성해야한다. 설계 - 시스템 설계 또는 프로그램 설계라는 용어로 부른다. - 우리가 구축하고자 하는 시스템을 '어떻게(How)'할 것인지를 결정한다. [데이터베이스 모델링과 필수 용어] 분석과 설계 과정에서 가장 중요한 과정 중의 하나가 '데이터베이스 모델링'이다. 현실세계에서 사용되는 데이터를 Oracle에 어떻게 옮길지 결정하는 과정. ex) 인터넷 쇼핑몰에서는 사람(또는 회원)이 필요하다.. 공감수 1 댓글수 0 2020. 7. 7.
001 - Database란? [데이터베이스의 정의] 데이터베이스 : 데이터의 집합, 데이터의 저장공간 DBMS : 데이터베이스를 관리·운영하는 역할. [데이터베이스의 특징] 1) 데이터 무결성 : 오류가 있어서는 안 된다. //제약조건 필요 2) 데이터 독립성 : 데이터베이스의 크기, 저장소 변경 시 기존 작성된 응용 프로그램은 전혀 영향이 없어야 한다. 3) 보안 : DB 내부 데이터에 데이터를 소유한 사람이나 데이터의 접근이 허가된 사람만 접근 가능. 4) 데이터 중복의 최소화 : 동일 데이터가 여러 개 중복되어 저장되는 것을 방지 5) 응용프로그램 제작 및 수정이 쉬워짐 : 통일된 방식으로 응용프로그램을 작성 가능, 유지보수 또한 쉬움. 6) 데이터의 안정성 향상 : 백업·복원 기능을 이용함으로써, 데이터가 깨질 경우, 복원 .. 공감수 1 댓글수 0 2020. 7. 7.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.