전체 글
-
[instagram 클론코딩] input 창에 엔터치거나 "게시"누르면 댓글 추가 구현하기프론트엔드 개발자가 될거야./js 2022. 6. 29. 08:47
엔터치거나 "게시"누르면 댓글 추가 짠~~ 나만의 인스타그램을 만들었다. 레이아웃에 대해서도 할 말이 많지만 일단 이 게시물에는 JS로 구현한 사항에 대한 것만 작성해보려고 한다. 구현해야 할 사항은 댓글 input 창에 엔터치거나 "게시" 누르면 댓글 추가되도록 createElement로 요소 생성해서, input에 입력한 값이 추가 되어야합니다. 나의 코드 const input = document.querySelector('.input__comment'); const submit = document.querySelector('.input__submit'); const parentComment = document.querySelector('.contents__comments'); function isE..
-
[Replit Javascript] 어려웠던 문제 총정리프론트엔드 개발자가 될거야./js 2022. 6. 26. 22:18
10. 논리연산자 - rockPaperScissors 함수 index.js에 있는 가위 바위 보 게임 함수를 아래 조건에 맞게 구현해주세요. rockPaperScissors 함수를 구현해서 가위 바위 보 게임을 구현해주세요. 가능하면 || 와 && 연산자 둘다 사용해주세요. player1과 player2 중 이긴 사람이 누군지 리턴해주세요. 예를 들어, player1이 이겼으면 "player1" 이 리턴 되고 그 반대의 경우라면 "player2"가 리턴이 되어야 합니다. 만일 비기는 경우에는 무조건 "player1"이 리턴 되어야 합니다. player1 과 player2 의 값은 다음 셋 중 하나 입니다. "가위" "바위" "보" 예를 들어, player1은 "가위" 이고 player2는 "보" 이면 "..
-
개발자 도구 ApplicationCS지식 2022. 6. 24. 22:07
Application 패널의 기능은? 브라우저 저장소의 기능을 담당한다. 현재 로딩된 웹 페이지에서 사용된 리소스(이미지, DB, 로컬 및 세션 스토리지, 쿠키, 애플리케이션 캐시 등)를 열람할 수 있는 패널이다. 스토리지, DB 및 캐시 검사 및 관리, 쿠키 검사 및 삭제, 리소스 검사를 수행한다. 개발자 도구에서 >> 를 누르면 Application이 보인다. Local Storage, Session Storage, Cookie 차이점은? 공통 사항 : 브라우저의 저장소. 값의 성격에 따라 다르게 사용이 된다. key - value 페어 객체 형태로 데이터가 저장된다. Web Storage는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다. Web Stora..
-
[TIL] Today I Learned : 배열의 반복문 - .forEach() / .map() 차이프론트엔드 개발자가 될거야./js 2022. 6. 24. 21:46
for문처럼 array의 반복문으로 사용되는 map, forEach 메서드를 공부해보았다. 둘 다 정말 많이 쓰이는 메서드라는데... 무슨 차이가 있을까?? 일단 공통점은 두 메서드 모두 원본 배열을 건들지 않는 것이다. 원본 배열을 가지고 어떤 짓을 해도 원본 배열은 원래의 값을 그대로 가지고 있다. ✍🏻✍🏻✍🏻 그리고 arrow function은 map메서드와 forEach메서드와 같이 자주 쓰이니 arrow function에 대한 이해를 확실히 해야한다. * 참고 arrow function을 가장 많이 사용할 때는 callback 함수로 사용할 때이다. callback 함수란, 인자로 전달되는 함수라고 생각하면 된다. Array.map() 아래는 map 메서드에 대한 설명이다. https://www..
-
[TIL] Today I Learned : 개념공부 - string <-> number 변환 / 날짜 객체프론트엔드 개발자가 될거야./js 2022. 6. 23. 18:02
String Number 변환 자바스크립트는 데이터 타입을 신경쓰지 않는다. 이것은 편할 수는 있지만 자칫하면 오류가 날 수 있다. 주의! +는 둘 중 하나가 문자면 둘 다 문자! -의 경우, 오로지 숫자에만 사용 되는 연산 console.log('200'+'10'); //20010 console.log('200'-'10'); //190 console.log(200+'11'); //20011 console.log('200'+11); //20011 console.log('200'-'안녕'); //NaN 날짜 객체 var rightNow = new Date(); console.log(rightNow); // 2022-06-23T00:45:06.562Z 2022-06-23T00:45:06.562Z 이것은 사람..
-
[TIL] Today I Learned : Srting - sliceCityFromAddress함수프론트엔드 개발자가 될거야./js 2022. 6. 23. 17:37
String 함수 알아보기 알아서 대소문자를 바꿔주는 함수 String.toUpperCase(); 이름에서 보면 알 수 있듯이 대문자로 바꿔준다. String.toLowerCase(); 또한 이름에서 보몀 알 수 있듯이 소문자로 바꿔준다. let lastName = 'Yeri Kim'; let upperLastName = lastName.toUpperCase(); let lowerLastName = lastName.toLowerCase(); console.log(lastName); // Yeri Kim console.log(upperLastName); // YERI KIM console.log(lowerLastName); // yeri kim 문자 길이 배열의 길이는 length 라는 속성으로 알 수 있..
-
[TIL] Today I Learned : 배열 요소 추가, 제거 - divideArrayInHalf 함수프론트엔드 개발자가 될거야./js 2022. 6. 23. 16:02
배열 요소 추가하기 - index로 접근,push(), unshift() 1. index로 접근 let cities = [ ]; 일 때 cities[0] = "서울"; // ["서울"] cities[1] = "대전"; // ["서울", "대전"] cities[2] = "대구"; // ["서울", "대전", "대구"] 이렇게 요소를 추가해 줄 수 있다. 2. 메서드로 접근 push는 배열의 마지막 부분, 즉 꼬리에 요소들을 추가하고, unshift는 배열의 맨 앞부분, 즉 머리 부분에 요소를 추가한다. let cities = [ ]; 일 때 cities.push("경주", "전주"); // ["경주", "전주"] cities.unshift("인천"); // [ "인천", "경주", "전주"] 배열 요소 제..
-
[TIL] Today I Learned : 수학표현식, 논리연산자, 가위 바위 보 게임 함수 만들기(rockPaperScissors 함수)프론트엔드 개발자가 될거야./js 2022. 6. 23. 15:25
공부하다가 헷갈리는 개념들이 있어서 정리해보려고 한다. 간단하지만 헷갈리는...... 컴퓨터 언어에서 사용되는 수학 표현식 let num = 1; num++; console.log(num); // 2 num++는 풀어서 쓰면 num = num + 1; 이다. let num = 1; let newNum = num++; console.log(num); // 2 console.log(newNum); // 1 잠시 여기서 의문! num도 2고 newNum도 2 일 줄 알았는데..... 왜 저런 답이 나왔을까? let newNum = num++;을 풀어서 써보면 let newNum = num = num + 1 이다. newNum = num ---> newNum = 1 이고 그 다음에 num + 1 을 해주어서 n..