본문 바로가기

분류 전체보기

 (341)
개행 '\n'을 포함하여 하나의 긴 문자열 랜더링하기 같은 컴포넌트에 텍스트만 바꿔서 재사용하여 페이지 하나를 만들고 있었는데 props로 텍스트를 넘겨줄 때 긴 문자열을 하나의 변수로 넘겨주어 렌더링 하면 \n을 표시했음에도 불구하고 브라우저상에서는 개행이 포함되지 않는 문제가 있었습니다. 단순히 여러 변수로 나누어 전달하는 방법도 있지만 이는 나중에 컴포넌트 재사용 측면에서 매우 비효율적일거라 생각해서 구글링을 했습니다. 놀랍게도 아주 여러 실험을 통해 답을 찾아낸 분이 계신 덕분에 쉽게 해결할 수 있었습니다. 참고한 블로그 링크 입니다. Lab | React, 장문의 Text의 개행이 가능할까? 리액트에서 렌더를 하면 br 태그는 속성이 먹히지 않는다. 어떻게 줄바꿈을 해야할까?? 연구해보자 velog.io 개행 '\n'을 포함하여 하나의 긴 문자열 ..
Javascript) Promise 알아보기 프론트엔더 인턴을 하면서 사용자가 업로드한 파일을 서버로 보내고, 서버에 저장된 데이터를 가져와 프론트엔드에 랜더링해야 했습니다. 처음 해보는 일이라 구글링 열심히 하고, 많이 해매면서 겨우 해냈는데 이때 처음 접했던 Promise라는 개념에 대해 이번 글에서 설명하겠습니다. 제대로 사용해보기 전에 공부 차원에서 기록하는 글이기 때문에 Reference들을 많이 참고 하였습니다. Promise 란? Promise의 개념 자바스크립트는 대부분이 비동기 패턴으로 이루어집니다. 어떤 작업을 요청하면서 콜백 함수를 등록하면, 해당 작업 완료 결과를 나중에 콜백 함수를 통해 알려주는 방식이죠. 프로미스는 이러한 자바크스립트의 비동기 처리에 사용되는 객체입니다. 쉽게 말해, 지금은 요청한 것이 없으니 이상이 있으면..
윈도우에 도커 데스크탑 (Docker Desktop) 설치하기 도커를 본격적으로 사용하거나 공부한 적이 없어서 체계적인 글은 아닙니다. 프론트엔더로 인턴을 하면서 백엔드 개발자 분께 완성된 백엔드 서버를 로컬로 전달받는 과정에서 도커를 처음 사욯보았습니다. '다양한 모듈의 버전 충돌 문제를 해결하고 배포 과정을 효율적으로 만들어주는 컨테이너' 라는 아아아주 기본적인 개념만 알고 있었기 때문에 빠르게 일처리를 할 수 없었습니다. 급하게라고 도커 데스크탑을 윈도우에 설치하고, 도커 이미지를 받아 사용해보았습니다. 지금 담당하게 된 프로젝트를 진행하면서 도커 이미지를 받아 로컬에 백엔드 서버를 띄우는 작업을 계속 해야할 것 같아 그 과정을 까먹지 않으려 기록해 둡니다. 그래서 틀린 내용이 있을 수 있고, 각 과정에 대한 자세한 설명은 부족할 수도 있습니다. 설치 환경 운..
SFS : Random Write Considered Harmful in Solid State Drives SFS : Random Write Considered Harmful in Solid State Drives Preview SSD access 플래시 메모리 기반의 solid state driver (SSDs): HDD보다 성능, 전력 소비 측면에서의 기술적 개선 sequential access: 이전의 I/O operation의 마지막 logical block address(LBA) 다음의 LBA부터 SSD 접근 random access: FTL에 의해서 동적으로 블록 맵핑 NAND Flash Memory 플래시 메모리의 일종으로 SSD에 사용된다. NAND Flash Memory의 종류 SLC (single-level cell): cell 당 1-byte 기록, 속도가 가장 빠르고 수명이 가장 길며, ..
2. 운영체제의 개념, 주요 기능, 구조 운영체제의 개념과 시스템 구조 이번 글부터 본격적으로 운영체제 공부를 시작해봅시다! 이번 글에서는 운영체제의 개념, 주요 기능, 그리고 컴퓨터 시스템의 구조에 대해 설명하겠습니다. 운영체제의 개념 Wikipedia 위키에서는 운영체제를 다음과 같이 정의합니다. 컴퓨터 하드웨어와 소프트웨어 자원을 관리하고, 컴퓨터 프로그램 (어플리케이션)을 위한 일반적인 서비스를 제공하기 위한 시스템 소프트웨어로 간단하게는 프로그램(어플리케이션)과 컴퓨터 하드웨어 사이에서 매개체 역할을 하는 소프트웨 즉, 운영체제는 호스트로서 하드웨어 자원들을 관리하며 게스트인 어플리케이션이 하드웨어의 세부사항을 모르고도 이를 사용할 수 있도록 서비스를 제공하는 것입니다. 운영체제 시장 (2019.03 기준) 많은 사람들에게 익숙한 UI..
React-router 페이지 이동시 페이지 최상단으로 자동 스크롤 하는 방법 React-router 페이지 이동시 페이지 최상단으로 자동 스크롤 하는 방법 React은 기본적으로 상태(state)를 유지하는 매커니즘을 취하고 있습니다. 그래서 React-router를 이용하여 다른 페이지로 이동을 하였음에도 불구하고, 브라우저의 스크롤 위치가 페이지 최상단으로 초기화되지 않고, 이전의 스크롤 상태를 유지하는 문제가 나타나게 됩니다. 이러한 문제를 해결하기 위한 방법은 다음과 같습니다. 다음과 같은 컴포넌트를 하나 만들어줍니다. /* ScrollToTop.js */ import { Component } from "react"; import { withRouter } from 'react-router'; class ScrollToTop extends Component{ compone..
FormData 값(keys, values) console에서 확인하는 방법 FormData란? FormData는 웹에서 파일, 텍스트가 아닌 복합적인 데이터를 전송하기 위해 사용하는 객체 유형입니다. 이 객체는 XMLHttpRequest를 사용하여 전송할 수 있도록 key-value 쌍들의 집합을 컴파일 해줍니다. 하지만 이런 FormData는 일반적인 변수와 달리 아래와 같은 코드로 console에서 그 값을 확인할 수 없습니다. const formData = new FormData(); console.log(formData); FormData 값(keys, values) console에서 확인하기 위한 소스코드 /* FormData 선언 */ const formData = new FormData(); /* key 확인하기 */ for (let key of formData.k..
[프로그래머스 코딩 테스트 연습] 해시 3. 위장 해시 3. 위장 문제 설명 스파이들은 매일 다른 옷을 조합하여 입어 자신을 위장합니다. 예를 들어 스파이가 가진 옷이 아래와 같고 오늘 스파이가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야 합니다. 종류 이름 얼굴 동그란 안경, 검정 선글라스 상의 파란색 티셔츠 하의 청바지 겉옷 긴 코트 스파이가 가진 의상들이 담긴 2차원 배열 clothes가 주어질 때 서로 다른 옷의 조합의 수를 return 하도록 solution 함수를 작성해주세요. 제한사항 clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있습니다. 스파이가 가진 의상의 수는 1개 이상 30개 이하입니다. 같은 이름을 가진 의상은 존재하지 않습..

티스토리툴바