본문 바로가기

전체 글127

[노개북 스터디] 2일차_2023/02/18 [오늘의 과제] ✅ 에피소드 1~5 까지 읽기 ✅ TIL 작성하기 📝 오늘의 TIL 📝 ✔️ 책에서 기억하고 싶은 내용들 정리 에피소드 1 : 개발자에 대한 오해 5가지! - 직업은 무엇보다 자신의 흥미, 적성과 잘 맞아야한다. - 개발은 재능의 세계가 아니라 근면성실 끈기의 세계이다. - 좋은 개발자는 암기력이 아니라 개발과정을 잘 이해할 수 있어야한다. 에피소드 2 : 어떤 언어부터 공부해야할까? - 언어를 고르기 전에 프로그래밍으로 무엇을 하고 싶은지가 먼저다. - C언어: 제한된 상황에서 최대성능을 내기 위해 만들어짐. 보통 가전제품에 들어가는 프로그램을 프로그래밍할때 사용. - 자바: 시스템 유지보수, 안드로이드 웹개발에 자주 사용되며 주로 정부, 은행, 기업에서 자주 사용. 오래된 언어인 만큼.. 2023. 2. 20.
[노개북 스터디] 1일차 이제는 정말 IT 지식을 제대로 공부하고 싶어졌다. 지난 10월, 인생 첫 코딩 부트캠프를 수료한 후, 새로운 국비지원프로그램을 수강하기 시작하여 현재 진행중이다. 첫 코딩 부트캠프, IT 관련 지식과 프로그래밍 언어를 습득하고 두번의 프로젝트진행 + 기업협업까지 단 3개월이었다. 프로젝트와 기업협업기간을 제외하면 IT관련 지식을 공부하는 시간은 1개월도 되지 않았을것이다. 전공자들이 몇년간 배우고 습득한 지식을 3~4주만에 끝냈다보니 당연히 이해의 깊이가 얕을 수 밖에.. 덕분에 프로젝트 기간에도 굉장히 고생을 많이했다. '백엔드에서 데이터를 JSON으로 준다는데 JSON이 뭐였더라...' 'API콜만 잘 날리면 된다는데 API콜..? API...?뭘날려? 어떻게 날려..?' 'HTTP 특징때문에 lo.. 2023. 2. 17.
[배열] 유용한 메서드 모음 forEach() for loop의 역할 -배열을 반환하지 않음 -첫번째 인자: 콜백함수 -두번째 인자: index 값 (옵션) let names = ['안녕','하세','요오','서율','입니다'] names.forEach((item)=>console.log(item)) 조건을 확인 후, boolean 값을 리턴 하는 메소드들 some() filter함수와 비슷하다 filter함수는 조건이 true인 요소들을 모두 반환하지만 some함수는 조건이 true 인 요소의 유무를 boolean 값으로 반환 let names = ['안녕','하세','요오','서율','입니다'] let newarr = names.some((item)=>item.startsWith('안')) console.log(newarr) /.. 2022. 8. 13.
HTTP_ Status Code Response Status Code 💡실제 프로젝트를 진행할 때 가장 많이 보게 될 응답의 상태 코드 들입니다. Status Code의 숫자에 각각 의미가 내포되어 있습니다. 이 Status Code 만 보아도 응답이 제대로 됐는지 안 됐는지를 파악할 수 있습니다. 1. Success 1-1. 200: OK 가장 자주 보게되는 Status Code 문제없이 요청에 대한 처리가 백엔드 서버에서 이루어지고 나서 오는 응답코드입니다. 1-2. 201: Created 무언가가 잘 생성되었을 때에(Successfully Created) 오는 Status Code 대게 POST 메소드의 요청에 따라 백엔드 서버에 데이터가 잘 생성 또는 수정 되었을 때에 보내는 코드입니다. 1-3. 204: No Content 요.. 2022. 7. 28.
(스타벅스)Section 1_ 순차적으로 요소보이기 // btn 속성 포인트 HTML **순차적으로 보여주고 싶은 요소에 같은 클라스이름 설정 CSS ** btn--abc를 사용해서 btn이 들어가는 요소 스타일 바꿔주기 참고 2022.06.04 - [CSS] - Button_ 여러 버튼 속성지정 ** 요소를 순차적으로 나타내기위해 opacity:0을 이용하여 처음로딩되면 화면에 요소가 나타나지 않게 설정 JS ** document.querySelectorAll('')을 사용하여 나타날요소들 모두 찾기 **forEach(function(요소,indec){}) 를 사용하여 요소의 수만큼 반복해서 함수 실행 **gsap.to(요소,지속시간,옵션)을 사용하여 애니메이션추가 ** delay 속성을 사용하여 순서대로 요소들이 나타나게함. 결과 페이지가 로딩되면 이미지가 순차적으로.. 2022. 6. 4.
Button_ 여러 버튼 속성지정 * btn--abc 속성을 이용해 버튼의 성질을 나타내는 클라스를 만들어 각각의 요소에 지정해 줄 수 있다. 1. html에 btn 클래스를 지정 HI 2. CSS에 모든 버튼에 공통으로 들어갈 .btn 속성을 넣어준다. 예) .btn{ width: 130px; border: 2px solid #333; padding:10px; border-radius: 4px; color: #333; cursor: pointer; box-sizing: border-box; font-size: 16px; font-weight: 700; text-align: center; } 3. btn--abc 로 각각의 속성을 지정 예) .btn:hover{ background-color:#333; color:white } // 버튼.. 2022. 6. 4.
(스타벅스)헤더_ Side Badge 추가 // 스크롤 에니메이션 포인트 HTML **position:fixed 를 이용하여 화면이 바뀌어도 해당 요소 고정. > Position 이 relative 일 때 블록요소는 너비를 최대한으로 늘리려 하지만 absolute나 fixed일 때는 최소한으로 가지려 하기때문에 요소의 너비가 화면 전체를 차지하도록 하려면 width:100%를 추가해주어야함 CSS ** overflow:hidden으로 곡률이 적용된 div밖으로 이미지가 넘치지 않게 해줌 JS ** lodash 라이브러리를 사용해서 addEventLister로 뱃지에 scroll 함수 적용 > _.throttle : 페이지에 콘텐츠가 많은경우 페이지가 무거워지기 때문에스크롤을 할 때마다 함수가 실행된다면 화면에 렉이 걸릴수 있다 이를 방지하기 위해 지정시간동안 요청을 무.. 2022. 6. 4.
JS 라이브러리_lodash, gsap, swiper lodash- 데이터 구조변환 라이브러리 https://cdnjs.com/libraries/lodash.js throttle : 동일 이벤트가 반복적으로 시행되는 경우 이벤트의 실제 반복 주기와 상관없이 임의로 설정한 일정 시간 간격(밀리세컨드)으로 콜백 함수의 실행을 보장합니다. _.throttle(함수, 시간) 시간은 ms로 지정 ex) 0.3초 =300 사용법: 사이트에서 빈태그모양의 아이콘 ()을 클릭하여 script를 복사 .html파일의 head부분에 붙여넣음 html페이지에 연결한 js파일에서 라이브러리를 활용하기 때문에 기존js 파일 scropt태그 윗줄에 붙여넣어야함 gsap- 에니메이션 라이브러리 https://cdnjs.com/libraries/gsap gsap.from / gsap... 2022. 6. 4.
class 속성의 작명법_ BEM BEM (Block Element Modifier) ▶요소__일부분 (a__b) underscore(lodash)로 요소의 일부분이라는것을 나타내줌 ex) ↓ ▶요소--상태 (a--b) hyphen(dash)로 요소의 상태를 나타냄 ex) ↓ 2022. 6. 3.