728x90 반응형 분류 전체보기231 인스타 login page 클론 Day2 (수정본) insta 클론 관련 wrap up 수업 듣고 쓰는 포스팅 🤗 html / css 👉 멘토님의 전체적인 구조 웹 접근성을 높이기 위한 시맨틱 태그를 강조하셨다. 무작정 를 쓰면 가독성면도 떨어진다고..! 가까운 예를 들어서 버튼 만들 때 를 주면 버튼 생성이 가능하다. 하지만 button 자체를 주어야 좀 더 시맨틱하다. 2022. 7. 30. replit 중간 시험 (js) 위코드 수료 2주차! 🫠 그 동안 html, css, js 기본 문법을 익히고 인스타 클론을 진행했는데 다음 주 react 들어가기 전 간단한 중간고사를 보았다 문제는 총 다섯 문제로, 이를 포스팅하며 다시 정리해보려한다 문제 1 👆내 정답 if 문을 써서 조건문 나머지 값으로 돌렸다. 사실 너무 오랜만에 써서 그런지... num % 0 해놓고 왜 안 되지? 하며 열 냄 😅 그리고 이 식을 간단하게 바꿔보고 싶어서 여러개 시도해봤다 1. if 문에 else문을 빼고 적어도 무방하다. return 꼭 적어줘야 실행된다 2. 삼항자로도 적어보았는데 true false 값에 return 주든 안 주든 실행이 안 되어 놀랐다. return이 아예 함수 전체를 감싸야 실행됐다. 🤔 사실 이 문제 틀렸다 계속 nu.. 2022. 7. 29. 인스타 login page 클론 Day1 이 페이지를 클론 하는 시간을 가졌다 ☺️ weegle 페이지를 한번 만들었던 터라 (weegle 만드는데 이틀 걸림) 나름 재밌게 만들었는데 그래도 꼬박 하루는 걸렸다 과제는 사진으로 주었지만 사실 인스타 클론이기 때문에 개발자도구를 이용해서 레이아웃은 쉽게 잡을 수 있었다 개발자 도구 -> dont show again 밑 이 아이콘을 누르고 페이지에 커서를 대면 적용한 코드가 나온다 하지만 저 코드를 다 가져다 쓸 순 없으니 (게다가 class 이름도 이상하다) 🥹 레이아웃과 가져올 수 있는 아이콘만 가져와 썼다 그리고 👇 구현한 페이지 css는 그럴싸하다 감동 받음... 🥺 과제 미션은 ID창과 PW창에 글자를 입력하면 로그인 버튼을 비활성->활성하는 것이였고 그게 맞게 js 코드를 짰다 👇 코드 .. 2022. 7. 28. http 란? How do we communicate? http 는 통신 규약을 말한다. hyper Text : 문서와 문서가 링크로 연결되어 있음 transfer : 문서를 보냄 protocal : 프로토콜(규약), 어떻게 html 파일을 주고 받을지에 대한 방식 how works? Request : client가 서버에 요청하는 것 Response : server 가 응답 한번 요청하면 한번 응답한다 http 특징 소통의 핵심은 요청과 응답이다. 인간의 소통방식이 컴퓨터끼리의 소통방식에도 적용되는 것. 말이 아닌 메세지의 형식으로 요청과 응답이 이루어진다. stateless와 stateful stateless (state + less) : 개별 통신은 모두 독립이며 과거의 http 통신의 상태를 보존하지 않는다. .. 2022. 7. 28. class -instance와 object의 차이- class 클래스는 객체지향 프로그래밍의 핵심이다. 프로그램을 객체로 구성하고 객체들 간에 서로상호 작용하도록 하는 방법이다. js는 객체지향 중심 언어는 아니지만 (prototype 타입 기반 객체 지향 언어이다) class, 객체, 객체 지향은 중요한 주제이다. class는 객체(object)를 찍어내는 틀을 의미하고 object는 말 그대로 사물을 뜻한다. 이때 객체는 특정 로직을 갖고 있는 행동(method(메서드, 객체 안의 함수))과 변경 가능한 상태(변수)를 가진다. 원하는 구조의 객체 틀을 짜놓고 비슷한 모양의 객체를 공장처럼 찍어낼 수 있다. (css 와의 class는 전혀 다른 개념!) instance와 object의 차이 class 는 object 를 찍는 틀이다. 그렇다면 insta.. 2022. 7. 24. js 용어 정리, forEach, object js 용어 정리 자료를 찾다보면 헷갈릴 수 있는 개념들! 특히 augument(인자)와 paramter(매개변수)는 잘 기억해두기 augument(인자)는 할당될 값 paramter(매개변수)는 함수 자체의 매개변수 forEach : 배열의 반복문, 배열에서만 사용 : 인자로 콜백함수를 받아옴, 배열 요소 각각 실행 arrow 함수 표현법 a.forEach((ele, index) => console.log(ele, index)) forEach vs map 함수 forEach 는 단순 루프를 돌면 끝나지만 map 은 루프를 돌며 원본 배열을 새로운 배열로 만듦 for (i=0; i>a.length; i++) 같이 긴 for문을 쓰지 않아도 새로운 배열을 만들 수 있다는 장점이 있다. 👇 개념 mapping.. 2022. 7. 24. arrow function es 란? ecma의 줄임말입니다. ECMA Script는 js를 표준화 시키려고 탄생했습니다. js의 문법이 보안이 필요하면서 버전별로 문법을 확장시키고 브라우저는 특정 버전의 기능별로 지원할 수 있도록 ES가 명세를 확정해왔습니다. ECMA Script는 JavaScript를 표준화시키고, 규격화하기 위해 만들어진 것! 현재는 ES10 버전 까지 나왔습니다. 주로 쓰이는 것은 ES6인데, 6은 버전 이름이고 ES 2015라고도 합니다. ES6에는 정말 편리한 함수들이 많이 생겼고 처음보는 문법들도 많이 생겼습니다.그 중에 arrow function은 전에 알고있던 function을 표현하는 방법과 완전히 달라졌습니다. arrow function //ES5 function getName() {} //E.. 2022. 7. 23. js Event관련 addEventListener 이벤트를 달 때 사용하는 함수 이름은 addEventListener 입니다. 특정 이벤트가 발생하면 인자로 받은 함수를 실행시켜줍니다. 요소.addEventListener(이벤트종류, function() { //이벤트가 일어났을 때 실행할 내용 }); 로그인 버튼 클릭 -> 로그인 api 호출 상품 사진 클릭 -> 상품 상세 화면으로 이동 자세히 보기 버튼 클릭 -> 팝업화면 출력 const thisIsButton = document.getElementsByClassName('login-btn')[0]; // login-btn 라는 클래스 이름이 있는 요소를 찾음(클래스 이름은 여러 요소에 중복해서 이름을 줄 수 있어서 // 배열로 반환, [0]을 붙임) thisIsButt.. 2022. 7. 23. object 1 👆요 표를 js 언어로 데이터 구현시 아래와 같이 데이터 저장이 필요하다 let plan1Name = "Basic"; let plan1Price = 3.99; let plan1Space = 100; let plan1Data = 1000; let plan1Pages = 10; let plan2Name = "Professional"; let plan2Price = 5.99; let plan2Space = 500; let plan2Data = 5000; let plan2Pages = 50; let plan3Name = "Ultimate"; let plan3Price = 9.99; let plan3Space = 2000; let plan3Data = 20000; let plan3Pages = 500; plan[.. 2022. 7. 22. 이전 1 ··· 22 23 24 25 26 다음 728x90 반응형
