프로젝트에서 유저와 프로젝트에 사용할 이미지를 저장하기 위한 이미지 서버를 팀 동료가 구축했다. [express] 라즈베리파이 이미지서버 사용 라즈베리파이를 활용해서 이미지서버를 올려보았다. 간단하게 이미지를 받으면 이를 파일로 저장하고, url로 해당 이미지를 띄워주는 간단한 기능을 하는 서버라 크게 어려울 것은 없다. 라이브 supersfel.tistory.com 이미지 서버에서 Post요청과 Delete요청으로 이미지 파일을 관리할 수 있게 구축했기에 이제는 FE에서 이미지 파일을 관리할 수 있는 API를 개발하면 된다. 파일 자체를 서버로 보내는것은 개발 공부를 하면서 처음 해보는 것이기에 조사를 해봤다. 이미지 파일을 자바스크립트 단에서 변형없이 비동기로 제출하려면 form-data 객체를 이용..
분류 전체보기
문제 설명 https://school.programmers.co.kr/learn/courses/30/lessons/17687 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 방법 진법을 정해주는 n, 구해야할 숫자의 수 t, 참가인원 m, 튜브(플레이어)의 순서 p를 받아 구성한다. 우선 준비된 빈 배열에 0부터 t*m까지의 숫자를 n진수로 변환해 넣어준다. t*m까지의 수까지 범위를 지정한 이유는 숫자가 10진수로 t개를 구해야 하기 때문이다. 즉, 최대 범위를 지정한 것이다. 구해진 배열 문자열로 바꾼뒤, for문을 이용해 답을 구해준다. 코..
문제 설명 https://school.programmers.co.kr/learn/courses/30/lessons/131127 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 방법 중복된 요소의 갯수를 측정하기 위해 Map객체를 이용해 10일 동안 할인하는 물품들의 갯수를 측정한다. 이때 측정된 할인 물품 갯수와 원하는 물품의 갯수를 대조해 모두 같다면 answer에 1을 더한다. 코드 const solution = (want, number, discount) => { let answer = 0; const check = (arr) => { le..
BOM (Browser Object Model) 브라우저에서 웹 페이지와 관련된 객체들을 조작하고 제어하는데 사용되는 객체모델. 주요 사용법 열려있는 창의 URL 얻어오기 브라우저의 정보를 받아올 수 있는 기능 도큐먼트 제어 대신 브라우저를 제어한다 주요 객체 window 객체 : 브라우저 창 객체. 브라우저의 창 크기 조작, 새창 열기, url 변경가능 location 객체 : 현제 페이지 url을 다루는 객체, 페이지의 url 변경 및 분석에 사용 screen 객체 : 사용자 환경의 디스플레이(해상도, 색상) 관련 정보 접근 navigator 객체 : 브라우저와 사용자의 시스템 정보에 접근 가능 (브라우저 정보, 버전, 플렛폼 등의 정보 확인) history 객체 : 브라우저 창의 페이지 이동 히스토..
문제 설명 https://school.programmers.co.kr/learn/courses/30/lessons/134240 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 방법 배열 food의 index 값이 음식의 칼로리고, 값은 그 음식의 갯수이다. 음식의 갯수는 무조건 짝수로되어 물의 기준으로 양 옆에 같은 수의 음식을 놓을 수 있어야 한다. 음식의 갯수가 홀수인 경우는 1개를 빼주어 짝수로 만들고 양 옆에 동일한 갯수로 위치시킨다. 또한 음식의 갯수가 1인 경우는 사용하지 않는다. 한쪽에 놓을 수 있는 food[i]의 갯수를 구한 다음..
브러우저의 랜더링 원리 브라우저가 화면에 나타나는 요소를 렌더링할 때, webkit이나 Gecko 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript를 렌더링할 때 CRP(Critical Rendering Path)라는 프로세스를 사용하며 아래의 단계들로 이루어진다. 토큰화된 HTML 문자열들을 이용해 DOM(Document Object Model) 트리를 구축 DOM은 Javascript를 이용해 실제 상호작용할 수 있는 HTML 엘리먼트로 이루어진 객체 HTML 파서의 특징 너그러운 속성 ▶ 최상단에 태그, 닫는 태그를 작성하지 않아도 정상적으로 렌더링된다. (HTML은 대부분의 프로그래밍 어너가 속한 촘스키의 문맥자유문법에 속하지 않기에 그렇다 한다) 파싱 과정..
