본문 바로가기

분류 전체보기

(19)
[사내] 신규 시스템 개발이 끝난 후 회고 나는 지금 재직하고 있는 회사가 처음 시작할 때부터 몸담고 있는 멤버다.MVP 개발을 하기 위해 Flutter를 프론트엔드 프레임워크로, 백엔드는 Firebase에서 제공하는 다양한 솔루션을 사용했다.빠르게 개발해서 굴려보기 위한 목적으로 속도감 있게 개발할 수 있는 것으로 프레임워크 등을 선택해야 했기 때문에 Flutter를 사용했던 것으로 기억한다. 정말 웹을 위한 기술을 사용했다면 CSS처럼 손 많이 가는 것들이 많을텐데 Flutter는 Material이나 Cupertino에서 제공하는 기본적인 스타일 정도는 지원을 했으니까. Flutter는 좋은 프레임워크이다. 스마트폰이라는 하드웨어에서 제공하는 블루투스 같은 것을 직접 제어할 상황이 아니라면 말이다. 단순한 CRUD만 일어나는 환경에서는 Flu..
메모리의 구조 프로그램이 실행되기 위해서는 우선 프로그램이 메모리에 로드 되어야 한다.뿐만 아니라 프로그램에 선언된 변수들을 저장할 메모리도 필요하다. 따라서 컴퓨터에 설치된 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..