Ella 프론트엔드일지

✅position:sticky 아래 예제를 살펴보자. 이미지가 3개가 세로로 나란히 있는데, 모든 이미지를 뷰포트에서 200px 위치에서 고정시키고 싶다면, position:sticky를 써보자 스크롤이 없을땐 3장의 이미지들이 나란히 보인다. (화면 비율을 30%까지 줄여서 억지로 스크롤을 없앴다) 스크롤을 다 내렸더니 3장의 이미지가 합쳐지고 뷰포트 기준으로 위에서 200px만큼 떨어진 위치에서 고정이 되있는 걸 볼수가 있다. 바로 position:sticky 속성 때문이다. //html //css .container{ margin:200px 0; height:2000px; text-align:center; background:yellow; } .card-box{ position:sticky; top..

✅배경설명 실제 서버도 아니고 mock(가짜) 서버를 왜 만들어야할까??!? 백엔드는 개발되는데 보통 6개월이 걸리지만, 프론트는 개발하는데 2개월 정도 걸린다. 그렇다면, 백엔드단이 개발할때까지 기다릴것인가??!? 그럴순 없지!! 바로 mock 서버로 만들어서 테스트를 해봐야한다. mock 서버를 어떻게 만들것인가?? ✅바로 json-server로 짧은 시간에 mock서버를 구축해보자~~! json-server 는 아주 짧은 시간에 REST API를 구축해주는 라이브러리이다. 우선 먼저 설치해보자. 1️⃣터미널 창을 열어서 아래와 같은 내용을 입력한다(윈도우 기준) mkdir jsonserver //jsonserver 폴더 생성 cd jsonserver //jsonserver 디렉토리로 이동하기 npm..

➡️정 모르겠으면 그냥 console.log()로 확인하면서 규칙을 파악하자 ✅배열안의 갯수만큼 반복하고 싶을 때는 어떻게 해야할까? - length 로 해서 반복시킬 수 있다. 하지만 다음의 forEach 문도 한번 봐보자. ✅array.forEach - array 안의 개수만큼 반복한다는 뜻 아래 예제를 살펴보면, 바지사이즈 array 변수에 4개의 데이터가 들어있다. 데이터 갯수만큼 반복하고 싶으면 forEach 를 쓰면 된다. forEach 문에는 콜백함수가 반드시 들어가야한다.(콜백함수 : 함수 이름이 없는 함수) let 바지사이즈 = [28,30,32,34] 바지사이즈.forEach(function(){ console.log('안뇽') }) 아래와 같이 콘솔창에 '안뇽' 이 4번 실행된 것을 ..

출처 : 코딩애플 JavaScript 입문과 웹 UI 개발 [함수의 return 문법 & 소수점 다루기] ✅return 은 반환한다는 뜻이다. 반환이 뭔데...? - 예시를 살펴보면 return 뒤에 123 을 썼다. 함수() 를 실행하고 123을 고대로 반환하고 싶으면 return을 쓰면 된다. function 함수(){ return 123 } 함수() //123 - 변수에 한번 담아서 봐보자 변수에 함수를 담아서 console 창에 변수를 뽑아보았다. 123이 고대로 반환되는 것을 볼수있다. ✅return 은 함수 종료 기능도 있다. - return문 뒤에 쓰는건 반환이 되지않는다. return 앞에 써야한다. 아래 예제에서 보이다 시피 '변수 실행시켜주삼' 은 반환되지 않았다. - return 문 ..

출처 : 코딩애플 JavaScript 입문과 웹 UI개발 1) 3,6,9 게임 해보자~ 3의 배수에서 박수를 치면 되는게임을 만들어보자. 어떤식이냐면, 3의 배수일 경우 console.log('박수') 가 나오고, 아닐경우에는 console.log('통과') 를 만들어보자. function 삼육구게임(){} 먼저, 문제를 풀기전에 한글로 틀을 짜야한다!! 초보일때는 한글 함수명과 한글 변수명을 쓰는게 좋다! function 삼육구게임(입력된 숫자){ if(입력된 숫자가 3의 배수라면){ console.log('박수'); }else{ 그게 아니라면 console.log('통과'); }} 위에 코드블럭처럼 한글로 먼저 구조를 그려본다. ~한 경우, ~ 면 이니까 if문이 들어가야한다. if(true)가 나올..

출처 : https://www.youtube.com/watch?v=5kRgzyGRPrU&t=357s ✅함수 선언식 - function 키워드로 단독으로 함수를 선언한 것 function sum(num1,num2){ return num1+num2; } ✅함수 표현식 - 변수에 함수를 할당한 것 const sum = function sum(num1,num2){ return num1+num2;} ✅화살표 함수(arrow function) 화살표함수는 sum 과 같은 식별자가 없어서 호출할 수가 없다. 화살표 함수를 호출하기 위해서는 함수 표현식 방법처럼 변수에다가 화살표 함수를 할당해줘야한다. 그래야, 화살표함수가 할당되어져있는 sum이라는 변수를 이용해서 올바르게 화살표함수를 호출할수있게된다. const s..