개발일지, 개인 또는 단체 포트폴리오 등
MDN 문서 바로가기 자바스크립트에서 배열의 reduce 기능은 배열을 순회하면서 누산기(accumulator)에 값을 계속 쌓아놓고 최종적으로 누산기의 값을 반환하는 reducer의 기능을 수행합니다. reducer의 사전적 의미와 매칭이 잘 안되는데 어떤 물질에서 원액(누산기의 값)만 추출한다는 의미로 생각하면 될 것 같습니다. 누산기의 값은 줄어들지 않으며 리턴식은 누산기에 합산됩니다. 그리고 마지막까지 순회한 후 최종적으로 누산기의 값만을 더보기…
출처 바로가기 자바스크립트에서 마이크를 사용하려면 먼저 사용자로부터 마이크 사용 권한을 획득해야 합니다. 여기서 사용자가 허용 버튼을 눌러야 이후 녹음 작업이 진행이 됩니다. 이 부분은 navigator.mediaDevices.getUserMedia(constraints).then(…)을 사용합니다. if (navigator.mediaDevices) { const constraints = { audio: true } navigator.mediaDevices.getUserMedia(constraints) .then(stream => { …………….. }) .catch(err => { console.log(‘The following error occurred: ‘ 더보기…
국제화(Internationalization)는 홈페이지의 내용을 다국어로 지원하는 것을 뜻합니다. 백엔드 측에서 하는 방법이 있고 프론트엔드 측에서 하는 방법이 있는데 백엔드에 대한 국제화 작업은 스프링 부트, Thymeleaf 기준으로 한 다음 글을 참조해주세요. Spring Boot: 국제화(Internationalization) 제이쿼리에서도 국제화 지원을 위한 기능이 있고 이러한 라이브러리(i18n)도 있는데 처음에는 라이브러리 없이 진행해보도록 하겠습니다. 먼저 자바스크립트에서 브라우저의 언어를 알아내는 더보기…
IT 기술면접(일반) 예상문제: CS 일반, 개발 상식, 네트워크 개발 이론 요약 깃허브 OOP의 특징 추상화 – 각 객체들의 공통된 특성을 뽑아내는 것을 의미합니다. 캡슐화 – 데이터를 은닉하고 데이터의 기능을 노출시키지 않는 의미입니다. 상속성 – 하나의 클래스가 가진 특징(데이터, 함수)을 그대로 다른클래스에 물려줄 수 있는 특성입니다. 다형성 – (상위 클래스로부터) 더보기…
JSONP(JavaScript Object Notation Padding)이란? 웹 브라우저에서 CORS 문제를 회피하기 위해 <script> 태그를 이용한 꼼수를 사용하여 JSON을 가져오기 위한 방법입니다. 참고: CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. CORS의 예시로 https://domain-a.com의 더보기…
IT 기술면접(일반) 예상문제: 웹개발 프론트엔드 개발 이론 요약 깃허브 프론트엔드 면접 문제은행 리스트 웹에서의 SPA (Single Page Application) 단일 페이지로 구성된 웹 어플리케이션을 뜻하는 단어입니다. 서버사이드 렌더링을 배제하고, 필요한 데이터만 JSON 등의 형태로 받아 동적으로 렌더링합니다. 기존 웹 환경에 비해 SPA가 부각되는 이유? 기존 어플리케이션은 화면이동 시에 화면 이동에 더보기…
출처 바로가기 const prefersDark = window.matchMedia && window.matchMedia(‘(prefers-color-scheme: Dark)’).matches true 이면 다크모드이며, false 이면 라이트모드 혹은 “운영체제에서 명시된 정보가 없음” 입니다. (라이트모드 감지는 위의 코드에서'(prefers-color-scheme: Dark)'를'(prefers-color-scheme: Light)'로 치환) 참고로 CSS 미디어쿼리를 사용하면 다음과 같습니다. @media (prefers-color-scheme: dark) { /* 다크 모드에 사용 할 CSS를 입력하세요. */ } 예제: 더보기…
서로 다른 n개의 원소에서 r개를 중복없이 골라 순서에 상관있게 나열하는 것을 n개에서 r개를 택하는 순열이라고 하고, 여기서 중복을 허용하면 그것을 중복 수열이라고 합니다. 재귀함수를 이용해서 다음과 같이 나타낼 수 있습니다. 스택플로 출처 바로가기 중복 순열 (Permutation of Repetition) 중복순열의 구현이 약간 더 쉽습니다. const cases = [“A”, “B”, “C”] 더보기…
프로그래머스 사이트에서 문제 풀기 코드 function solution(msg) { var answer = []; // 사전 작성 const dict = {} for(let i = 1; i <= 26; i++) { dict[String.fromCharCode(i + 64)] = i } let maxIdx = 26 let idx = 0 let msgLen = msg.length while(idx < msgLen) { 더보기…
자바에서, 예를 들어 지도인 map이 있고, 여기에서 "옷"이 사람인 경우 그 사람 주변(상하좌우, 동서남북)에 무엇이 있는지 탐색하는 예제입니다. dx, dy 배열을 설정하고 (예제에서는 dir라는 이름의 2차원 int 배열로 했습니다.) 맵을 2중 for문을 돌면서 사람("옷")을 만나면 그 안에서 또 4번 반복하는 for문을 실행해 주변에 무엇이 있는지 확인합니다. dx(dir[0]), dy(dir[1])의 값에 따라 탐색 더보기…