본문 바로가기

전체 글

return 써보기 console.log는 그림의 떡. 꺼내 먹으려면 return이 필요하다. 1. 2. console.log 안쓰고 콘솔창에서 바로 확인가능. 더보기
계산해보기 ( feat. Javascript ) 더하기 / 빼기 / 나누기 / 곱하기 ---------------------------------------------------------------------------------------------------------------------------------------------------------------- console.log 를 밖으로 빼서 쓴느 방법 const keisanki = { tasizan: function ( a , b){ alert(a + b); }, hikizan: function (a , b){ alert(a - b); }, }; console.log(keisanki.tasizan(2,3)); console.log(keisanki.hikizan(10,2)); 더보기
2. Booleans true / false / null [ false ] = false 는 "값이 존재" 한다! [ null ] = null은 값이 아무것도 없다! ** 비워있다기 보다는 아무것도 없는 상태로 채워진거. ex:) const amIFat = null; console.log(amIFat); -> null *** null은 변수안에 어떤 것이 없다는 것을 확실히 하기 위해 쓰는거 자바스크립트에게 여기에는 값이 '없다'라는 것을 알려줄 때 쓴다. " 비워있어요 " 를 의도적으로 표시. 더보기
다시 배우는 자바스크립트 기초 선언은 const , let 이 있다. 두가지의 차이점 [ const ] = constant(상수) * const는 값이 바뀔수 없다는것. -> 절대로 이 값은 안바꿀거임! 하면 const [ let ] = let 은 새로운 것을 생성할 때 사용하는 것. (재선언 가능) -> 뭔가 나중에 바뀔 수 도 있겠는데... 하면 let 코드를 전체적으로 봤을 때 let 이라는 코드가 있으면 변수가 언젠가 업데이트 될 수 있겠구나. 를 알수있음! * 기본적으로는 const 를 사용하고 만약 variable(변수)을 업데이트 하고 싶다면 let 를 사용 결론: **** 항상 const / 가끔 let ! var 는 절대사용금지!!!!!! *** 더보기
Styled Components / Css-in-JS Css-in-JS 란 ? [ 자바스크립트로 CSS 코드를 작성하는 방식 ] 1 ) vs code 터미널에 yarn add styled-compornents 입력 2 ) js 파일에 styled-components import 해주기 * styled.뒤에( div 부분 )은 html 요소가 오면 된다. 1 ) StBox안에 p 태그를 추가 👇 2 ) const 로 p 태그에 css 속성을 만들어준다. 3 ) 태그로 깜쌌던 부분을 로 바꿔준다. 👇 결과 ) StP에 CSS 준 부분이 제대로 반영됨. 하드코딩 했던 것들을 map 함수를 사용해서 바꿔보자. function App() { return( 빨간 박스 파란 박스 초록 박스 ); } 👇 // props : 부모 컴포넌트 -> 자식 컴포넌트 // Box .. 더보기
map / filter 연습 2 1 ) 하드코딩 import React from "react"; import "./App.css"; const App = () => { const users = [ { id: 1, age: 30, name: "송중기" }, { id: 2, age: 24, name: "송강" }, { id: 3, age: 21, name: "김유정" }, { id: 4, age: 29, name: "구교환" }, ]; return ( {users[0].age} - {users[0].name} {users[1].age} - {users[1].name} {users[2].age} - {users[2].name} {users[3].age} - {users[3].name} ); }; export default App; 👇 위에 .. 더보기
map / filter 함수 - map const testArr = [1, 2, 3]; testArr.map(function(item){ return item *2 // 여기서 item은 testArr에 할당 된 [1,2,3] 을 말함. }); // [2, 4, 6] 출력 map => 원래 데이터를 가공하여 출력하는 방법 - map 실습 const App = () => { const testArr = ['감자', '고구마', '오이', '가지', '옥수수']; return ( { testArr.map(function(item){ // 감자,고구마,오이,가지,옥수수 5개 다 리턴 return {item} }) } ); }; 출력결과 : - filter 조건을 만족하는 친구만 filtering을 걸어서 return을 함. testArr.. 더보기
React - state state를 쓰는 목적 = UI 를 바꾸기 위해서. React 안에서 변경되야되는 것은 반드시 state로 선언한다 ! 과일:input 에 입력한 값들이 event.target.value 에 들어온다. ( 개발자도구 콘솔에서 확인 할 수 있음) 👇 import { useState } from "react"; import "./App.css"; function App() { const [fruit, setFruit] = useState(''); return ( 과일 : {fruit} ); } export default App; 👇 더보기