전체 글

express 서버에서 요청한 클라이언트의 IP주소 확인하기

서버에서는 클라이언트를 구별하기 위한 방법으로 ip주소를 확인할 수 있다. express에서는 이를 어떻게 확인할 수 있을지 알아보았다. const express = require("express"); const app = express(); const port = 8080; app.get("/", (req, res) => { res.send("Hello World!"); }); app.get("/ip", (req, res) => { const ip = req.headers["x-forwarded-for"] || req.ip; console.log("req.ip", ip); res.status(200).send({ ip, message: "Check Your Ip" }); }); app.listen(po..

HTML 시맨틱 태그 알아보기 (Semantics)

프로그래밍에서 Semantics는 코드 조각의 의미를 뜻한다. HTML에서의 시맨틱은 구조를 표현하는데 있어서 올바른 의미를 나타내는 시맨틱 태그를 사용하는데 있다. 예를 들어, div로 거의 모든 시맨틱 구조를 나타낼 수 있지만. 우리는 그렇게 하지 않는다. 😃 시맨틱 태그를 사용하면, 다음과 같은 장점들이 있다. - 적절한 시맨택 태그를 사용하는 것이 의미를 전달하는데 도움이 되고, 실제로 더 많은 정보를 가진다. 따라서 개발을 더 쉽게 할 수 있고 협업에도 도움이 된다. ex) div 태그로 버튼을 구현하는 것보다 button 태그로 버튼을 구현하는 것이 더 구조를 파악하기 쉽다. - 시맨틱 태그를 사용한 HTML의 파일 크기가 그렇지 않은 HTML보다 더 가볍고, 반응형으로 만들기가 쉽기 때문에 ..

브라우저 렌더링 과정과 DOM, CSSOM, layout, paint

브라우저가 웹사이트를 렌더링하는 과정을 정리한다. 브라우저가 웹 사이트를 렌더링하는 과정에서는 DOM과 CSSOM이 생성되는데 각각 다음과 같은 의미를 지닌다. DOM(Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 인터페이스이다. 🍻 DOM은 자바스크립트로 접근하여 수정될 수 있다. CSSOM(CSS Object Model)은 CSS 객체 모델로 자바스크립트가 CSS를 동적으로 조작할 수 있게 해준다. 🍎 HTML 대신 CSS가 대상인 DOM이라고 할 수있다. 이제 실제 브라우저가 렌더링되는 과정을 살펴보면 다음과 같다. 1. DOM / CSSOM 트리 DOM 트리가 만들어지기 위해서 일단 브라우저가 HTML의 바이트 코드를 가져와 지정된 인코딩 방법에 따라 문자로 ..

React Native 에서 Redux 디버깅하기 (redux-flipper)

Flipper는 meta에서 관리하는 React Native 디버깅 툴이다. Flipper는 다양한 플러그인을 제공하는데, 이를 통해서 redux 디버깅을 할 수 있다. 우선, Flipper를 설치한다. https://fbflipper.com/ Extensible mobile app debugger | Flipper Tools Mobile development Flipper aims to be your number one companion for mobile app development on iOS and Android. Therefore, we provide a bunch of useful tools including a log viewer, interactive layout inspector, and..

프로그래머스 코딩테스트 연습 - 연속된 부분 수열의 합 JavaScript

연속된 수열에서 부분 수열의 합이 원하는 값을 충족하는 경우가 있는지 확인하는 문제였다. 당연히 이중 for문을 사용하면 문제를 해결할 수 있지만, 정답은 아닐 것이라고 생각했다. 문제 조건에 합을 만족해도, 여러 경우의 수가 있다면 가장 짧은 부분수열을 구해야 했기에 큰 수부터 더해가는 접근법을 생각했다. function solution(sequence, k) { let start = sequence.length - 1; let end = sequence.length - 1; let sum = sequence[start]; while(start > 0) { if(sum === k) { break; } else if(sum > k) { sum -= sequence[end]; end--; } else { ..

React Navigation 중첩 라우팅 구현하기

React Navigation은 대표적인 React Native의 라우팅 라이브러리이다. 모바일 환경의 라우팅을 구현하다보면, 중첩으로 구성된 라우팅이 필요한 경우가 많다. 예를들어, 탭으로 구성된 앱이 있을 때 탭 내부에서 스택으로 라우팅이 필요한 경우가 있다. 많은 경우 탭 내부에서 상세 페이지가 필요한 경우가 있기에 이런 경우에는 탭 위에 스택이 쌓여있는 구조가 된다. 공식 문서를 참고하여 이를 구현하면 다음과 같다. import React from 'react'; import {View, Text} from 'react-native'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {createStack..

Process Scheduling이란?

메모리의 프로세스들 중에서 어떤 것에 먼저 CPU를 할당해야 하는가? CPU의 사용을 극대화하고, 시간 공유를 위해서 빠르게 프로세스를 CPU로 switch한다. 🥤 Process Scheduler 사용 가능한 프로세스 중에서 어떤 것을 CPU에서 실행할 것인지 선택한다. 메모리에 저장된 모든 프로세스는 하드디스크에 똑같은 원본이 있어야 한다. 🌱 프로세스들의 scheduling queues Job queue : 시스템의 모든 프로세스들 Ready queue : 메인 메모리에 존재하는 실행 대기중인 모든 프로세스들 🍃 메모리속에 CPU를 기다리는 프로세스들 Device queues : I/O장치를 기다리는 프로세스들 프로세스는 다양한 큐들 사이에서 옮겨다닌다. queue의 header는 PCB를 가리킨다..

유지보수하기 좋은 React 코드를 작성하는 방법에 대한 고찰

React는 사용하기 편한 라이브러리라고 생각한다. 단순한 웹 페이지를 만드는데 있어서 리액트는 배우기 쉽고, 또한 사용하기도 간단한편이라고 느낀다. 하지만, 실제 서비스되는 클라이언트 웹은 수십, 수백개의 상태와 수백, 수천개의 컴포넌트로 이루어지는 거대한 프로젝트일 것이다. 모든 개발자가 새로운 서비스를 구현하지는 않을 것이고, 내가 작성한 코드는 언젠가 다른 이에 의해서 유지 보수되어야 할 것이다. 때문에, 읽기 쉽고 수정하기 쉬운 코드를 작성하는 방법에 대해서 생각해보았고, 이를 기록으로 남기고자 하였다. 🍎 지극히 주관적인 생각으로 쓰인 글이므로, 틀린 내용이 많을 수도 있습니다. 따라서 댓글로 의견을 남겨주시면 감사하겠습니다. 추상화 (abstract) 올바른 표현인지는 모르지만, 추상화라고 ..