본문 바로가기

기술스택

(18)
메모리의 구조 프로그램이 실행되기 위해서는 우선 프로그램이 메모리에 로드 되어야 한다.뿐만 아니라 프로그램에 선언된 변수들을 저장할 메모리도 필요하다. 따라서 컴퓨터에 설치된 OS(운영체제)는 프로그램의 실행을 위해 다양한 메모리를 제공하고 있으며,운영체제로부터 프로그램이 할당받는 메모리는 크게 네가지로 구분한다. 1) 코드 영역2) 데이터 영역3) 스택 영역4) 힙 영역    코드(Code) 영역코드(code) 영역은 실행할 프로그램의 코드가 저장되는 영역이다. 텍스트(code) 영역이라고도 부른다.CPU는 코드 영역에 저장된 명령어를 하나씩 가져가서 처리한다. 개발자가 작성하는 코드라고 생각하면 쉽다. 함수나 제어문, 상수 등이 이에 포함될 수 있다.   데이터(Data) 영역데이터 영역은 전역변수와 정적(stat..
[JavaScript] 배열에 사용하는 반복문과 배열 메소드 비교하기 배열에 적용하여 쓸 수 있는 반복문과 배열 메소드를 대략 살펴보면 for문, while문 그리고 map, forEach가 있다. 이게 전부는 아니지만 자주 쓰이므로 각각의 차이에 대해 정리할 필요가 있다고 생각한다. 1. 반복문 우선 어느 프로그래밍 언어든 처음 배울 때 나오는 핵심 내용, 바로 반복문이다. 큰 맥락으로 구분해보면 for문, while문이 있다. do...while 같은건 어차피 while이랑 모양이 비슷하니 for와 while 두개로 크게 나눈다고 가정한다. 예를 들어 1부터 10까지 담긴 배열 numArr이 있다고 하자. const numArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 반복문을 사용하여 이 배열 안에 있는 원소를 하나씩 출력하는 케이스를 만든다면 ..
[React.js] 이미지 / 파일 업로더 구현 이미지나 파일을 업로드해서 뷰로 보여주는 라이브러리가 존재하지만 라이브러리에 너무 의존하다보니 에러가 발생하면 에러를 극복하는데 시간을 허비하기 때문에 답답하기 마련이다. 이미지와 파일을 업로드했을 때 이미지는 뷰로, 파일은 리스트 형태로 보여주는 기능을 구현해보았다. 여기서 이미지는 클릭했을 때 파일 탐색기를 열어 파일을 불러와 64비트 인코딩을 통해 문자열로 나타내준다. 일반적인 파일 업로더는 파일 이름과 닫기버튼이 함께 보인다. https://github.com/htwenty-1/react-file-uploader
[React.js] React Router 기본, 중첩 Router 사용하기 1. Routing이란? 웹을 사용할 때 전통적인 링크 연결방식은 HTML에서 a 태그를 사용하여 href 속성에 연결할 링크를 넣어주는 방식이다. 이러한 방식은 웹사이트의 규모가 크지 않을 때는 사용하는데 크게 불편함이 없지만 로드되는 컨텐츠나 페이지의 용량자체가 크다면 불편함을 초래할 수 있다. 애초에 링크로 연결되는 방식은 각각의 HTML 파일을 로드하는 것이기 때문에 새로운 페이지로 이동할 때마다 화면 깜빡임이 지속될 것이며 해당 페이지 자체 또는 로드할 컨텐츠의 용량이 크다면 사용자 입장에서는 불만이 생길 수 밖에 없을 것이다. 위에서 구현한 예시는 간단한 예제이기 때문에 그러한 불편함을 느끼기 어려울 것이나, 페이스북이나 인스타그램처럼 퓨어 텍스트보다 압도적으로 높은 용량의 이미지/영상 컨텐..
[JavaScript] 웹소켓 사용하기 API를 통해 서버에서 받아온 어떤 정보를 화면에 뿌려주려고 할 때 fetch 메소드를 사용해서 데이터를 받아오거나, axios 모듈을 사용하는 경우가 많다. 서버가 RESTful API를 지원한다면 API KEY 등을 사용해서 정보를 받아올 수 있는데, 개인 서비스라면 모르겠지만 상용으로 개발된 것은 프론트단에서 API키를 공개하여 던져주게 된다면 보안결함 등 이슈가 충분히 발생할 수 있다. 때문에 어떤 곳에서는 웹소켓을 사용해서 API_KEY 등이 요구되는 개인적인 정보를 제외한, 공공정보를 개발자가 사용할 수 있도록 제공하고 있다. 웹소켓을 사용해본적이 한번도 없으며 이번 기회에 맛을 보고(?) 기억해둘 겸 정리하고자 한다. 1. 웹소켓이란? 웹소켓(WebSocket)은 하나의 TCP 접속에 전이중..
클래스, 객체, 인스턴스 1. 클래스- 설계도 개념- 연관되어있는 변수와 메소드의 집합- 설계도에 지나기 때문에 실제로 작동하지 않는 상태public class Person { private String name; private int age; private char gender; public void callName(String name) { System.out.println(name + "입니다"); } public void countAge(int age) { System.out.println(age + "살 입니다"); }}  2. 객체- 구현해야할 대상- 선언된 객체는 메모리에 할당되지 않은 상태- 위 클래스의 예시는 사람으로서 공통된 특성 등을..
[React Native] useEffect의 dependency array 사용 시 주의점 useEffect란? useEffect Hook은 클래스형 컴포넌트에서 쓰이던 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 형태로 최초 렌더링 시 무조건 실행할 작업, 컴포넌트가 업데이트 될 때 작업, 컴포넌트가 언마운트(파괴, 제거)되었을 때 작업을 실행하게 해준다. useEffect 사용 예시 useEffect는 앞서 언급한 것처럼 최초 렌더링시, 컴포넌트 업데이트시, 컴포넌트 언마운트시 실행되는데 실행되는 내용은 useEffect의 디폴트 파라미터인 콜백함수 내부에 들어가게 된다. 예를 들면 import React, { useState, useEffect } from "react"; export default function A..
[자료구조] 해시 테이블(Hash Table) 해시 테이블(Hash Table / Hash Map) 🔍 개념 해시 테이블은 대량의 정보를 저장하고 특정한 요소를 효율적으로 검색할 수 있는 데이터 구조이다. 다소 복잡하다. 해시 테이블의 구조는 테이블 내에 내부적으로 더 작은 sub-group인 "버킷"에 key-value 구조의 쌍을 저장해둔다. 키를 저장할 때 메모리의 공간을 덜 차지할 수 있도록 해시 함수를 통해 키값을 해시라는 특정한 숫자 값으로 변환해준다. 해시 테이블은 메모리 확장이 필요한 경우에만 메모리 크기를 늘리고, 가능하면 최소 크기를 유지한다. 검색 시 key를 사용해서 원하는 value를 가져올 수 있다. 이는 두개의 값이 하나의 쌍이기 때문에 가능한 것이다. 검색된 key는 사전에 정의된 해시함수를 통해 해시값을 반환받고 해당 ..