전체 글

제목 : 브라우저의 동작 과정과 기능들이 주제로 포스팅, 및 공부를 하는 이유웹 사이트를 제작한다는 의미는, 현재 그 의미가 많이 다르다고 생각한다.정적인 HTML 만을 보여주던 웹 사이트 라는 의미가 무색하게,현재는 애니메이션 CSS, 웹 3D 렌더링, 웹 사이트 Code Editor, 실시간 채팅 및 그래프 표시 등등,웹의 다양성은 상상을 초월한다.단순히 웹 사이트를 개발한다는 것은, HTML 파일과 CSS 스타일링, 반응형 JS 를 제작한다는 것 뿐 만이 아니라,위의 파일들을 이용하여 클라이언트에게 화면을 보여주는 브라우저의 역할 또한 알아야 한다는 의미이다.나는 이전에 React 를 공부 할 때, 전역 변수 지정과 로컬, 세션 Storage 및 Cookie 를 공부 할 때매우 난감했다. 이러한 정..

제목 : 웹 서버는 무엇이고, local, production 차이는 무엇일까?웹 서버에 대한 내용을 다루는 이유우리는 어플리케이션을 배포 할 때, 항상 Server 를 사용한다.이는 보통 알려진 프론트엔드, 백엔드, 할 것 없이, 모든 영역에서 사용한다.개발을 위해 테스팅을 할 때도, 배포를 할 때도, 마이크로서비스 또한 서버를 사용한다.나의 의문점은 웹 페이지를 서빙 해 주는 웹 서버 자체에 있었다.개발 도구의 편의성이 너무 높아, 내가 어떤 웹 서버를 사용하느냐는 신경 쓸 틈도 없이,웹 페이지의 결과를 브라우저에서 너무 잘 보여주고 있었다.웹 페이지를 load 하기 위해 가장 먼저 제공하는 파일은 보통 index.html 이므로,그냥 나의 컴퓨터 자체가 index.html 에서 원하는JavaScri..

제목 : React 를 다시 공부하기 전 스스로에 대한 고찰 및 비판이 글을 작성하게 된 계기웹 사이트를 제작하기 위해서 어떤 도구를 사용하는가? 스스로에게 질문 해 보았다.현재 (25-05-10) 기준으로, 간단한 웹 사이트를 만들기 위해 사용하는 템플릿은 React 일 것이다.Vibe Coding (바이브 코딩) 이라는 패러다임이 현재 유형하는 상황인데,이는 코드를 건드리지 않고, 단순히 AI 와 글 혹은 언어로 상호작용 함으로서 특정 어플리케이션을 만들어 가는 것을 의미한다.물론, 뒤따라올 기술 부채는 전혀 생각하지 않고 만드는 것이니, 오래 갈 수 있는 프로그램을 작성하는 것은 거의 불가능하다 생각한다.기술 부채란, 어떠한 프로그램을 작성하기 위해 이미 존재하는 편리한 프로그램들을 아무 생각 없이..

제목 : TypeORM CLI 와 데이터베이스 마이그레이션TypeORM 은 어디서 마주치게 될까?혹시 이 글을 읽고 있는 독자가 TypeORM 에 대해서 모를 수 있기 때문에 특징을 설명하자면,데코레이터를 사용한다. - (Java 에 익숙한 분들은 "애너테이션" 으로 인식하면 됩니다.)예시 : @UseInerceptor(...)데코레이터로 정의된 클래스 속성을 이용하여 데이터베이스에 "자동으로" 스키마를 생성한다.TypeORM 에서 제공하는 추상 메서드 (EX - findOne) 를 통해 각 데이터베이스의 메서드 사용 차이가 없다. (거의)find,findOne,save 등등...TypeORM 을 사용할 때, reflect-data 라이브러리는 필수이다.엔티티 등록을 위해 직접 등록하지 않고, @Ent..

제목 : PostgreSQL 데이터베이스는 무엇일까?나는 이전에 파일을 이용하는 데이터베이스 SQLite 를 다룬 적이 있다.SQLite 데이터베이스는 무엇일까?파일 시스템을 이용하는 데이터베이스는 SQLite 뿐만 아니라, H2 라는 데이터베이스도 존재한다.H2 는 Java 계열에서 사용하는 데이터베이스이며, JDBC 와 연동이 아주 잘 되어 있다.SQLite 는 안드로이드 시스템에서도 사용되는 파일 데이터베이스이며,Node 계열에서 TypeORM 라이브러리를 사용 할 때, 연동이 잘 되는 데이터베이스이다.각각의 언어나 프레임워크에서 사용되는 편리한 파일 데이터베이스는 다를 수 있는데,이는 프레임워크나 특정 언어에서 테이블 엔티티를 각자 작성했을 때,자동으로 마이그레이션 해 주는 파일 데이터베이스가 다..

제목 : .http 파일과 httpyacVSCode, IntelliJ 와 같은 IDE 에서는 .http 확장자를 가진 요청 파일을 지원한다.이 때, 위의 에디터들은 .http 파일에 대한 구문과, 하이라이팅을 지원한다.뿐만 아니라, 내부의 내장된 Request Agent 가 쿠키와 세션을 유지하여 테스팅이 편리하다.하지만, 다른 에디터를 사용 할 경우, .http 파일의 실행을 지원하는 플러그인이 없다.따라서, 로컬 머신에 httpyac 이라는 프로그램을 설치 할 수 있다.먼저, httpyac 을 이용하기 위해서, 내부에 ### 을 통해 하나의 요청에 대한 주석을 작성해야 한다.httpyac 은 뭐지?이는 에디터에서 http 플러그인을 사용하는 대신, Homebrew 와 같은 패키지 매니저를 통해직접 명..

제목 : Jest 와 유닛 테스트프로그래머가 되어가는 과정은 항상 험난하다.단순히 코드의 기능을 구현하고, 품질을 유지하는데에 이어,직접 구현한 코드가 대부분의 상황에서 동작하는지 검증해야 한다.특히, 특정 비즈니스 로직을 작성하는 데 있어 요청된 결과물의 일관성은 매우 중요한 일이다.프로그래머스 부트캠프에서 백엔드로서 팀 프로젝트를 진행하며 가장 크게 느낀 것 중 하나는,코드의 재사용화가 진행됨에 따라 코드는 점점 복잡해지는데, 내가 방금 생성한 비즈니스 로직 함수 하나가정말로 의도대로 동작하고 있는지 모를 수도 있다는 것이었다.따라서, 웹 서버 (프론트엔드) 팀의 Next.js 도입 과정에서EndPoint 의 데이터가 의도대로 들어오지 않았는데, 이 때 어떤 서버에서 에러가 났는지 모르므로협력하는 양..

제목 : 삽입 정렬 (Insertion Sort) - with Java기초적인 정렬 중, $ O(N^2) $ 를 가진 방법이다.바로 직전에 선택 정렬 (Selection Sort) 에 대해서 주제를 다뤘는데,선택 정렬과 삽입 정렬은, 현재 인덱스 이전이 완벽하게 정렬 되어 있는가? 로 나뉜다고 생각한다.선택 정렬의 경우, 현재 인덱스 이전이 완벽하게 정렬되어 있다.삽입 정렬의 경우, 현재 인덱스 이전 요소들에 한하여, 해당 영역은 정렬되어 있다.하지만, 결과적으로 봤을 때 완벽하게 정렬되어 있지 않다.또 다른 관점에서 둘을 비교해 보자.Selection Sort 의 경우, i 번째 요소에 넣기 위한 "결과론적으로 완벽한" 요소를 찾는다.Insertion Sort 의 경우, i 번째 요소는 1 번째 부터,..

제목 : 선택 정렬 (Selection sort) 에 대하여 - With Java가장 기초적인 정렬 중 하나이다.시간 복잡도는 $ O(N^2) $ 이다.나는 선택 정렬을 설명하기 위해 이러한 상황을 예시로 들고 싶다.상황 : 선생님이 걷어온 쪽지 시험을 학생의 고유 번호대로 상승하도록 정렬 해 달라고 부탁하셨다.그렇다면, 약 40장 정도가 존재한다고 가정한다면 나는 어떻게 정렬해야 할까?믈론 사람마다 종이를 순서대로 나열하는 데 있어 다른 방식이 있을 수도 있다.하지만, 1 번부터 찾고 왼쪽에 둔다. 그 다음 2 번을 찾아 1 번의 밑에 둔다.그리고 또 3 번을 찾고 2번의 밑에 둔다. 그리고 4번도...이러한 방식으로 1 번부터 40 번 까지 정렬 할 수 있다.이 방식이 바로 선택 정렬(Selectio..

제목 : 비밀번호는 왜 해싱할까? - With Node.js웹 어플리케이션 서버(BE) 를 만들 때, 단순한 엔드포인트 제작에 대한 것을 배우고 나서 회원가입 처리를 배운다.데이터베이스에 Plain Text 로 비밀번호를 저장한다면, 보안상 굉장히 위험하므로,Encryption 과정을 거친 후, 데이터베이스에 저장한다.이 때, Encryption 과정은 양방향이 아닌, 단방향 해싱이라고 배운다.따라서, 관리자조차 원래의 비밀번호를 알지 못하기 때문에, 유저는 직접 비밀번호를 바꾸어야 한다.위의 과정을 듣고 나서 대부분의 사이트들이 왜 비밀번호를 찾을 때, 원래의 비밀번호를 알려주지 않고새로운 비밀번호로 지정하게 하는지 이해되었다.그러나, 위의 과정만 필요하다면 이 포스팅은 시작하지는 않았을 것이다.푸는 ..