분류 전체보기
-
Promise 객체Js 2023. 5. 9. 23:03
Promise 객체는 JavaScript에서 비동기적으로 실행되는 작업을 처리하기 위한 객체입니다. Promise 객체는 비동기적으로 처리될 작업을 프로미스 생성자 함수의 인자로 전달하여 생성됩니다. Promise 객체는 대기 상태, 이행 상태, 거부 상태 세 가지 상태를 가지며, 대기 상태에서 이행 상태 또는 거부 상태로 전환됩니다. 이때 이행 상태와 거부 상태는 각각 resolve와 reject 함수를 호출하여 전환할 수 있습니다. Promise 객체는 then()과 catch() 메서드를 제공합니다. then() 메서드는 Promise 객체가 이행 상태일 때 호출되며, 콜백 함수를 인자로 받습니다. catch() 메서드는 Promise 객체가 거부 상태일 때 호출되며, 콜백 함수를 인자로 받습니다...
-
JavaScript를 공부하면서 느낀점카테고리 없음 2023. 4. 26. 18:02
JavaScript를 공부하면서 느낀점 퍼블리셔 업무를 보며 다루지도 못 하는 js를 다뤄야 하는 경우가 무조건 있었는데 그때마다 가슴이 답답하고 풀리지 않는 코드가 생기면 마음부터 힘들어지는 이슈가 있어서 js를 꼭 배우고 싶었는데 역시나 너무 어렵고 심오한 언어였으며,, 과제는 끝냈지만 공부가 더 더 많이 필요한 언어인 것 같다 2. JavaScript 공부하면서 어려웠던 개념과 이유 모든 개념이 어렵지 않았나 싶다,, 전역 스코프부터 햇갈리기 시작하고 더 나아가 http,API등 네트워크 통신을 해야하는 모든 튤을 이해하기 어려웠다 ,, ㅜ 자바스크립트의 실행 원리는 이제 좀 머리에 들어오지만 아직도 다양한 선택자와 (?) 그걸 응용해서 이벤트를 만들어 내는 건 많은 공부가 필요할 것 같다 3. 제..
-
flex와 grid의 차이Js 2023. 3. 30. 20:50
flex와 grid는 모두 CSS 레이아웃 모듈입니다. 그러나 두 가지 레이아웃 모듈은 서로 다른 방식으로 작동하며 서로 다른 목적을 가지고 있습니다. Flexbox Flexbox는 1차원 레이아웃 모듈입니다. 즉, 요소를 수평 또는 수직 축으로 정렬할 수 있습니다. Flexbox는 요소를 부모 요소 내에서 유연하게 배치하기 위해 사용됩니다. Flexbox는 각 요소의 크기를 고려하지 않고, 컨테이너를 기준으로 요소의 배치를 결정합니다. 요소를 수평 또는 수직 축으로 정렬해야 할 때 요소가 동일한 크기여야 하거나, 부모 요소의 크기에 맞추어 크기를 조절해야 할 때 요소가 유동적인 크기를 가져야 할 때 요소들의 순서를 변경해야 할 때 작은 화면에서 레이아웃이 변경되어야 할 때 예를 들어, 네비게이션 바, ..
-
제로베이스 2개월차카테고리 없음 2023. 3. 29. 16:41
2개월 차 좋았던 점 2개월 차 좋았던 점,,,, 없음 ㅎ ㅎ ㅎ,,, 1개월차에 수정한 학습 계획표대로 공부하고 있는가?(계획대로 안되었다면 이유는?) 1개월 차 수정한 학습 계획표 = 핑계 만들지 말기, 아침에 일어나 공부하고 나머지 시간 운동하기 js + 코테지옥 시작,,,,, 괜히 어렵고 이해가 안 간다는 핑계로 들어야 할 것도 안 듣고 자꾸 이상한 길로 빠지는 것 같았다 그래도 팀원들과 꾸준한 데일리 스크럼 + 북스 터디 , 알고리즘 스터디 덕분에 아예 공부를 안 하는 건 아니지만 첫 달에 비하면 내 생각과 마음이 너무 헤이해 진 게 느껴진다,, 늘어나는 핑계(?)와 아침은 무슨 점심에 겨우 일어나 저녁 늦게까지 앉아만 있는다,, 공부는 도대체 언제 할래 ㅜ 계획대로 안된 이유는 급 높아진 학습..
-
반응형 작업시에 미디어쿼리를 최소화로 잡는 법Zero base 2023. 3. 29. 16:24
반응형 웹사이트를 제작할 때, 미디어쿼리는 반드시 필요한 요소입니다. 다음은 미디어쿼리를 최소화하는 몇 가지 방법입니다. 1. Mobile-first 디자인: 모바일 화면을 먼저 디자인하고, 이후 데스크탑 화면을 디자인합니다. 이 방법을 사용하면 미디어쿼리를 최소화할 수 있습니다. 모바일 화면을 기준으로 디자인하면, 데스크탑에서는 추가적인 미디어쿼리가 필요하지 않을 수 있습니다. 2. 상속을 활용한 레이아웃: 상위 요소에서 레이아웃을 정의하면, 하위 요소에서는 해당 레이아웃을 상속받습니다. 이 방법을 사용하면 불필요한 미디어쿼리를 작성할 필요가 없습니다. 3. 유연한 그리드 시스템: 유연한 그리드 시스템을 사용하면, 화면 크기에 따라 그리드 시스템이 자동으로 조정됩니다. 이 방법을 사용하면 미디어쿼리를 ..
-
animation 최적화 기법Zero base 2023. 3. 22. 17:35
CSS transform 속성 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다. 변형 가능한 요소만 transform할 수 있습니다. CSS 박스 모델이 레이아웃을 결정하는 모든 요소 중 비대체 인라인 박스, 표 열 박스, 표 열 그룹 박스를 제외한 요소에만 적용할 수 있습니다. /* 키워드 값 */ transform: none; /* 함수 값 */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); t..
-
HTML/CSS 미션 회고(좋았던 점, 아쉬웠던 점)Zero base 2023. 3. 17. 16:10
좋았던 점 좋았던 점은 정말 많았다 사실 html,css과제 걱정 1도 안하고 편하게 마음 먹고 있었는데 이게 웬걸,,,ㅎㅎㅎ 시멘틱태그부터 접근성 등등 신경써야 할 게 정말 많았고 그걸 과제 5개에 꽉꽉 담아주신 게 눈에 보였다 ! 2년정도 퍼블을 하면서 처음 알게 된 코드들도 많이 사용 하였고, 시각장애인분들을 위한 접근성 까지 구현 해 내는 세심한 과제에 실력이 오히려 더 좋아졌다 ! 사실 웹은 만드는게 끝이 아닌 잘, 비장애인 장애인 까지 모두 다 잘 사용할 수 있도록 하는 게 정답이기 때문에 이번 과제는 그런 부분에 있어 적합했던 과제였던 것 같다 아쉬웠던 점 아쉬웠던 점은 과연 한달? 도 안돼서 정말 정말 제로베이스인 분들이 이 과제를 해결 해 낼 수 있을까? 6개월 안에 모든 걸 끝내야 해서..
-
웹 폰트와 로컬 폰트Zero base 2023. 3. 13. 18:08
웹 폰트란 웹이 발전함에 따라 사용자가 웹에서 정보를 얻는 과정의 경험(UX)을 개선하려는 노력이 행해지고 있다. 그런 노력 중 하나인 웹 폰트는 로컬의 폰트 설치 상황에 상관없이 웹에서 항상 원하는 타이포그래피를 사용할 수 있게 하는 기술이다 기본 사용법 웹 폰트는 다음과 같이 CSS의 @font-face 규칙을 사용해 적용한다. @font-face 규칙에는 다음과 같은 두 가지 세부 속성을 설정한다. font-family: 사용할 웹 폰트의 이름을 지정한다. 이 이름은 폰트 파일의 이름과 일치하지 않아도 상관없다. 하지만 비슷하게 설정하는 것이 유지 보수에 좋다. src: 폰트 파일의 경로와 폰트의 형식을 지정한다. url에 폰트 파일의 경로를 설정하고, format에 폰트 파일의 형식을 설정한다. ..