듀의 자료저장소

실무에서 에러가 났을 때 대응하는 법 위에 code들만 해도, 깃허브 서버는 api 서버다. 인프런 이미지처럼, 실시간으로 바뀌는 image들은 모두 cdn 서버에서 가져온 것이다. ** cdn 서버란? 회사 들어가면 server가 여러개다. 이미지를 서빙하는 서버도 따로 있는데 cdn(콘텐츠 전송 네트워크) 서버를 이용한다. 이미지 서버가 다운됐다면? cdn문제로 홈페이지가 깨지거나 다운되는 일이 종종 있다. cdn 서버가 다운되어도, 사이트의 페이지는 그대로 나와야 한다. 이미지 서버가 뻗으면? 서버에서 전송되는 이미지만 안 나온다. 미리 설정해둔 default 이미지는 나온다. throw에서 에러가 나면 바로 catch로 가게 된다. ( 서버에서 에러 표시 ) 실제 사이트에서는 이미지를 대체이미지로..

IT 공부/프론트엔드(Front-end) 2021. 12. 14. 16:20

Promise.all([ new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1 new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2 new Promise(resolve => setTimeout(() => resolve(3), 1000)) // 3 ]).then(alert); // 프라미스 전체가 처리되면 1, 2, 3이 반환됩니다. 각 프라미스는 배열을 구성하는 요소가 됩니다. Promise.all 여러가지 promise를 한꺼번에 실행시켜준다. 하나라도 거부되면 에러가 나면서 전체를 거절한다. (모 아니면 도인 상황일 때 유용하다.) ex) 여러 개의 url에 동시에 reques..

IT 공부/프론트엔드(Front-end) 2021. 12. 13. 08:54

// 모던자바스크립트 // 정리 전 loadScript('1.js', function(error, script) { if (error) { handleError(error); } else { // ... loadScript('2.js', function(error, script) { if (error) { handleError(error); } else { // ... loadScript('3.js', function(error, script) { if (error) { handleError(error); } else { // 모든 스크립트가 로딩된 후, 실행 흐름이 이어집니다. (*) } }); } }) } }); 콜백지옥(callback hell)이란, 콜백함수를 이용해서 비동기처리를 해주다가 코드 ..

IT 공부/프론트엔드(Front-end) 2021. 12. 12. 11:55

셀렉트박스 커스텀(select box custom) 실습을 해보았다. 코드 리뷰하면서 분석해본다음에 스스로 다시 한번 써볼 예정이다. 완성본은 일단 아래와 같이 생겼다. See the Pen Untitled by 듀 (@jgvoseid-the-styleful) on CodePen. h2 { margin: 30px; } .cont-select { width: 200px; } 피그마 수치대로, article 전부에 width: 200px 값을 주었다. 버튼 넓이 자체는 반응형으로 늘어나지 않아도 되니까 고정값인 px을 준다. 셀렉트박스 커스텀(select box custom)할 때, 디자이너 분이 피그마 수치를 준다는 가정 하에 진행했다. .btn-select { width: 100%; /* 위에 부여한 2..

IT 공부/프로젝트(project, 부트캠프 및 협업) 2021. 11. 30. 08:44

수업중에 select box 예제 코드를 분석하다가 box-sizing을 왜 쓰는지 이야기가 나와서 따로 적는다. padding을 쓸 때 왜 box-sizing: border-box를 써주는 걸까? 바로 이 부분! 피그마 수치를 볼 때마다 항상 따라오는 부분이다. 왜 padding을 쓸 때 box-sizing: border-box 효과를 주는 것일까? h2 { margin: 30px; } .cont-select { ★ position: relative; width: 200px; } .btn-select { width: 100%; padding: 13px 30px 13px 14px; font-size: 12px; line-height: 14px; background-color: #fff; border: 1..

IT 공부/프론트엔드(Front-end) 2021. 11. 29. 09:28

FE 개발자도, 기본적인 BE(node, AWS, linux)는 다룰 줄 알아야 한대서 오늘은 실무에서 자주 쓰는 리눅스 명령어를 정리해보려고 한다. 1. pwd: 현재 디렉토리 위치 확인하기 (print working directory) directory = folder 개념 2. mkdir + 폴더명 : 디렉토리(=폴더) 생성하기 # mkdir -p a/{b,c} mkdir -p 중간 경로에 있는 디렉토리까지 자동생성! # mkdir a b 디렉토리 a, b 2개 생성! rmdir leehojun # 파일있는 폴더 지울 때에는 rm -r leehojun/ # -r는 recursive 재귀적으로 파일 지움 mkdir one/two/three # error mkdir -p one/two/three/fou..

IT 공부/백엔드(Back-end) 2021. 11. 29. 07:29

AWS보다 훨씬 쉬운 구름 IDE로, git에 올린 개인 프로젝트 서버연결을 할 수 있다. apt-get에서 nginx를 활용하여, 정적 페이지를 배포하는 방법이다. 먼저 용어 정리부터 시작! Ubuntu - Debian 계열 Linux에서 나온 OS(운영체제) - dpkg packaging systme: Debian계열이 사용하는 시스템 packaging system - 패키지 관리 시스템: 소프트웨어를 설치하고 관리까지 진행 - source code 없이 프로그램을 build - deb package vs rpm package Linux에서 크게 Debain 계열과 Redhat 계열이 있음. apt (Advanced Package Tool) 일종의 명령어 라인 도구 - packaging system과..

IT 공부/백엔드(Back-end) 2021. 11. 29. 05:26

contetns 길이가 길어졌을때, css에서 말줄임 ('...')을 통해 생략할 수 있습니다. text-overflow: ellipsis; 속성을 쓰면 편하게 처리할 수 있습니다. javascript를 쓰지 않고도 충분히 css만으로도 처리가 가능합니다. 주로 '게시판'의 텍스트 제한이 넘어갔을 때 사용하는 것 같습니다. oseid-the-styleful) on CodePen. 말줄임('...') css 속성 text-overflow: ellipsis;) 1줄 라인일때 1. ellipsis는 block 일때만 적용 2. overflow: hidden; width를 10% 주었으므로, 이 넓이 이상 넘어가면 자동으로 텍스트가 생략됩니다. 3. text-overflow: ellipsis; width 10%..

IT 공부/프론트엔드(Front-end) 2021. 11. 27. 14:54