728x90 반응형 전체 글240 웹, HTML/CSS 예상 면접 질문 정리 1. 브라우저 작동 원리 브라우저는 HTML 문서를 가져와 파싱 -> DOM(Document Object Model)을 생성 -> CSS 파일을 로드하여 스타일을 적용 -> JavaScript 코드 실행 -> DOM 조작 및 이벤트 처리 -> 렌더링 엔진을 통해 레이아웃, 페인팅 -> 화면에 컨텐츠가 표시 HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유 JavaScript 실행이 렌더링 프로세스를 차단하기 때문 브라우저는 JavaScript 실행이 완료될 때까지 렌더링을 중단하고, 실행 후 렌더링을 재개 2. CSR / SSR CSR (Client-Side Rendering) 브라우저에서 JavaScript를 이용해 동적으로 컨텐츠를 렌더링하는 방식 초기 로딩 시 서버에서 HTM.. 2023. 8. 21. 알고리즘 - 최빈값 구하기 최빈값 알고리즘에 대해 알아보자! Q. 최빈값 구하기 문제 설명 최빈값은 주어진 값 중에서 가장 자주 나오는 값을 의미합니다. 정수 배열 array가 매개변수로 주어질 때, 최빈값을 return 하도록 solution 함수를 완성해보세요. 최빈값이 여러 개면 -1을 return 합니다. 제한 사항 0 answer) { answer = freq[num]; mode = [num]; } else if (freq[num] === answer) mode.push(num); } if (mode.length >= 2) return -1; return mode[0]; } 2023. 8. 18. 조금 어려운 알고리즘 - 옹알이(1) 옹알이 알고리즘에 대해 알아보자! Q. 옹알이(1) 문제 설명 머쓱이는 태어난 지 6개월 된 조카를 돌보고 있습니다. 조카는 아직 "aya", "ye", "woo", "ma" 네 가지 발음을 최대 한 번씩 사용해 조합한(이어 붙인) 발음밖에 하지 못합니다. 문자열 배열 babbling이 매개변수로 주어질 때, 머쓱이의 조카가 발음할 수 있는 단어의 개수를 return하도록 solution 함수를 완성해주세요. 제한 사항 1 ≤ babbling의 길이 ≤ 100 1 ≤ babbling[i]의 길이 ≤ 15 babbling의 각 문자열에서 "aya", "ye", "woo", "ma"는 각각 최대 한 번씩만 등장합니다. 즉, 각 문자열의 가능한 모든 부분 문자열 중에서 "aya", "ye", "woo", "m.. 2023. 8. 18. 08.17 디지털 트윈 부트캠프(OT) 32일차 08.16은 면접을 보느라 학원을 갈 수 없었다..! 예정된 면접은 1개였는데, 면접 끝나고 좀 쉬니 다른 곳에서도 전화인터뷰 요청이 있었다..후후후후후 저녁 약속으로 나가려니 또 다른 곳에서 면접 일정 안내 전화가 왔다...어제가 첫 기업 면접이였는데, 그동안 연락 안 온 만큼 요번에 한 번에 다 오려나 보다..! 면접 질문들이 대개 비슷하니 나중에 정리해서 올려둬야겠다. WebGL WebGL, 브라우저 창 Resize에 반응 및 Resizing하기 반응형 WebGL 캔버스 window.addEventListner('resize', () => { camera.aspect = window.innerWidth / (window.innerHeight/2)// 1 camera.updateProjectionMa.. 2023. 8. 17. 프론트엔드의 성능 최적화 프론트엔드가 할 수 있는 성능 최적화에 대해 알아보자! 코드 번들링 및 압축 웹팩(Webpack) 같은 도구를 사용하여 자바스크립트 및 스타일 시트 코드를 번들링하고 압축 -> 파일 크기가 줄어들어 로딩 시간이 단축 코드 번들링과 압축은 웹 애플리케이션의 자바스크립트와 스타일시트 코드를 하나의 파일로 묶어주고, 필요한 경우 코드를 최소화하여 파일 크기를 줄이는 작업 ->초기 로딩 속도를 개선하고 대역폭을 절약 주로 웹팩(Webpack)이나 Parcel 같은 도구를 사용하여 코드 번들링 및 압축을 수행 코드 번들링 여러 개의 파일을 하나의 번들로 묶는 과정을 의미 이때, 여러 파일 간의 의존성 관계를 파악하고, 필요한 모듈만 포함하여 최종 번들 파일 생성 번들링을 통해 여러 파일의 로딩 시간을 줄이고 네트.. 2023. 8. 15. 성능 최적화 성능 최적화 소프트웨어나 웹 애플리케이션의 실행 속도, 응답 시간, 자원 사용 등을 개선 -> 사용자 경험을 향상 애플리케이션을 더 빠르게 실행하고 더 효율적으로 사용할 수 있도록 하는 것을 목표 로딩 시간 최소화 웹 페이지나 애플리케이션이 시작될 때, 필요한 리소스를 최소한의 시간으로 로딩하도록 최적화 -> 사용자들이 빠르게 페이지를 확인하고 상호작용할 수 있도록 응답 시간 최적화 사용자가 액션을 취하거나 요청을 보냈을 때, 애플리케이션이 빠르게 응답 -> 지연이 없거나 매끄러운 응답 자원 관리 및 최적화 메모리, CPU, 네트워크 등의 시스템 자원을 효율적으로 사용하도록 개선 불필요한 자원 사용을 줄이고 성능에 영향을 주는 병목 현상을 해결하여 애플리케이션의 안정성↑ 캐싱 및 데이터 최적화 자주 사용.. 2023. 8. 15. 사용자 경험 최적화 사용자 경험 최적화란 뭘까? 사용자 경험(User Experience, UX) 최적화 웹 애플리케이션이나 소프트웨어를 사용하는 사용자들이 더 편리하고 만족스러운 경험을 얻을 수 있도록 디자인하고 개선 애플리케이션을 사용하고 인터랙션하는 과정을 고려하여 설계 사용자 경험 최적화의 목표 사용자 편의성 사용자가 애플리케이션을 쉽게 사용할 수 있도록 합니다. 직관적인 디자인, 명확한 네비게이션, 짧은 로딩 시간 등을 통해 사용자의 작업을 간편하게 수행할 수 있도록 돕습니다. 유용성 사용자가 애플리케이션을 사용함으로써 실질적인 가치와 유용성을 느낄 수 있도록 합니다. 사용자의 요구와 목표를 파악하여 그에 부합하는 기능과 콘텐츠를 제공합니다. 만족도 사용자들이 애플리케이션을 사용함으로써 만족도를 느낄 수 있도록 합.. 2023. 8. 15. 기초 Linux 문법 linux에서 가장 기본적인 명령어에 대해 알아보자! Linux 시스템은 터미널(커맨드 라인)을 통해 명령어를 입력하여 다양한 작업을 수행할 수 있다. ls: 현재 디렉터리의 파일 및 디렉터리 목록 출력 ls ls -l # 자세한 정보와 함께 보기 ls -a # 숨겨진 파일까지 모두 보기 cd: 디렉터리 변경 cd /경로/디렉터리 # 절대 경로로 이동 cd 디렉터리명 # 상대 경로로 이동 cd .. # 상위 디렉터리로 이동 pwd: 현재 작업 중인 디렉터리의 경로를 표시 mkdir: 새 디렉터리를 생성 mkdir 디렉터리명 rm: 파일이나 디렉터리를 삭제 rm 파일명 rm -r 디렉터리명 # 디렉터리와 내부 내용까지 삭제 cp: 파일이나 디렉터리를 복사 cp 소스 대상 cp -r 디렉터리명 대상디렉터리 .. 2023. 8. 15. 08.14 디지털 트윈 부트캠프(OT) 30일차 WebGL Web Graphic Library 웹에서 그래픽을 표시하기 위한 도구 모음으로 캔버스 API에 WebGL 컨텐츠를 추가해 표현한다. 설치 과정 필요 없이 브라우저에서 기본 제공하는 표준 라이브러리 -> 기존 브라우저 사용성으로 사용자 인터랙션 제공 캔버스 API 웹에서 동적 컨텐츠를 표현하기 위한 도구 2D, WebGL 등 드로잉 컨텍스트 제공 Three.js WebGL의 복잡한 연산을 미리 계산된 함수로 제공해 사용자에게 보다 쉬운 3D 개발환경 제공 먼저, react 앱을 구성한 뒤, npm i three를 이용해 three.js 라이브러리를 다운로드 받아준다. 그 이후 react-router-dom을 이용해 페이지를 나누어 구성하자~~ Scene 그래픽스 영역 대상 객체, 3D 객체들을.. 2023. 8. 14. 이전 1 2 3 4 5 6 7 ··· 27 다음 728x90 반응형 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
