분류 전체보기62

• 배열에 원소 추가: unshift, ...array, push 배열에 원소를 추가할 때 unshift를 쓰곤 한다. arr = [2, 3, 4] arr.unshift(1) arr.unshift(0) console.log(arr) // [0, 1, 2, 3, 4] 그러나 unshift는 다음과 같이 배열의 값을 직접 참조하여 원본 배열에 변형을 일으키는데, 불변성의 이슈에서나 성능 상의 이유에서나 좋지 못하다. arr = [2, 3, 4] // 0: 2, 1: 3, 2: 4 arr.unshift(1) // 0: 1, 1: 2, 2: 3, 3: 4 arr.unshift(0) // 0: 0, 1: 1, 2: 2, 3: 3, 4: 4 그러나 전개연산자를 이용하면 불변성, 성능 이슈를 모두 잡을 수 있다. arr = [2, 3, 4] new_arr = [0, 1, ...ar.. 자바스크립트 문법/문법 정리 뼈대 2022. 12. 17.

• js - react - node.js - react 끙끙 프론트에 영 재미가 안붙어서 초 슬로우 모드 학습이 지속됐다. 휴... 그냥 꾹참고 해야지 하면서도 머리에 하나도 남지 않는 .. 아 놔. 꾹 참고 코딩애플 리액트 강의를 두 번 실습했는데, 실습했을 때 뿐이였다. 이걸 굳이 싱글 페이지로 만들어서 굳이 렌더링 줄여야해? 장점이라 하면, 트래픽 적게, 약간의 속도 향상? 페이지가 살짝 자연스러워 보일 수 있다. 단점은 ... 검색 엔진에 유리하지 않다. 대형 사이트고, 비주얼이나 인터렉티브가 중요한 사이트라면 필요할 수도 있겠으나, 대부분의 중소 사이트에 필요한 것은 DB 쿼리를 잘 활용하거나, 다른 라이브러리를 활용해서 데이터 시각화 등에 더 신경을 쓰는 것이 좋지 않을까. 학습 시간, 실제 적용 개발 기간 등을 고려하면 기능적인 면에 더 투자하는 것이.. 자바스크립트 문법/문법 정리 뼈대 2022. 12. 16.

• 리액트 렌더링은 언제 언제? 열외! 나는 재렌더링에서 빼줘 ** useEffect 프롭스가 계속 바뀌더라도, 처음 한번만 실행하거나, 마지막에 실행. runs a function when the props change, or only at the start or end of the component's lifecycle. import { useState, useEffect } from "react"; useEffect(()=>console.log("API호출 함수(난 한번만)"), []); ** Memo : 프롭스가 변경되지 않았으면, 재렌더링을 막는다. const 메모Btn = memo(Btn); //Btn 에 memo 를 줌 Btn.propTypes = { border: PropTypes.number, 이럴 때 재렌더링 발생 1.. 자바스크립트 문법/문법 정리 뼈대 2022. 12. 16.

• 

  코딩애플 리액트 part1 (11/9~) 강의 목차# Part 1 : 블로그 제작 & 기초 문법React 배우기 전에 쓰는 이유부터 알아야리액트 React 설치와 개발환경 셋팅 (2022 ver)리액트에서 레이아웃 만들 때 쓰는 JSX 문법 3개중요한 데이터는 변수말고 state에 담습니다버튼에 기능개발을 해보자 & 리액트 state변경하는 법array, object state 변경하는 법Component : 많은 div들을 한 단어로 줄이고 싶으면리액트 환경에서 동적인 UI 만드는 법 (모달창만들기)map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때자식이 부모의 state 가져다쓰고 싶을 때는 propsprops를 응용한 상세페이지 만들기input 1 : 사용자가 입력한 글 다루기input 다루기 2 : 블로그 글발행 기능 만들기.. 리액트 2022. 11. 11.

• 

  1107- 노마드/ 리액트 시작. 이틀째 잠시 보류 리액트 강의 몇 개를 봤는데, 대부분 리액트에서는 이렇게 사용한다. 자바스크립트랑 이게 다르다인데, 노마드코더의 설명은 완전 다른 레벨이네. 게다가, 강의중에 짧게 정리, 복습을 반복해준다. 역시 본인의 이해가 깊어야 강의를 잘하는 것 같다. 중요성도 인정하지만 흠.... 다른 강의들 패턴이 바꼈는지, 입문 강의 인데, 오히려 처음 시작을 자바스크립트 문법과 비교하는 것으로 시작해서, 아무도 안쓴다면서 createReact 함수를 보여줘서... 끙. 에너지 아껴야 하는데... 그래서, 나중에 다시 보기로 했다. 처음에 머리 싸매지 않고, 가장 쉬운 맛보기 강의를 듣고자 한다. 쉬워야 집중해서 연습하고, 빨리 늘더라. 입문이 어려우면, 키보드 쳐볼 엄두도 안나고... 오히려 머리로 멍~~~하게 되더라. r.. 자바스크립트 문법/문법 정리 뼈대 2022. 11. 7.

• css 하이라이트 hover , z-index, transition css로 밑줄을 넣는 방법은 크게 두가지이다. 사람들은 희망보다는 절망에 더 익숙하다. 그래서 대개는 희망적인 메시지보다는 부정적인 메시지에 훨씬 쉽게 그리고 즉각적으로 반응한다. 1. box-shadow span class="highlight" 긴 글, 그리고 반응형이여서 글이 밑으로 떨어질 수 있는 경우에 적합한 방법이다. /* span 내 적용*/ .highlight{ display: inline; box-shadow: inset 0 -10px 0 #D9FCDB; /*-10px은 highlight의 두께*/ } 원하는 부분에 span으로 감싸 highlight 클래스 적용 :after 형식 제목글이나 짧은 문구에 highlight를 할때 유용하다. .highlight:after{ content:"".. html_css 2022. 11. 7.

• 

  스벅 예제: css 포지션, 애니메이션, JS 스크롤 이벤트 코딩 알려주는 누나. css 포지션, z-index css 애니메이션 js 스크롤 이벤트 html PICK YOUR FAVORITE css body { margin: 0; height: 2000px; /* position: fixed; */ } section { height: 800px; /* 아무것도 없으면, 백그라운드 이미지 표시 안됨 */ background: url("images/fav_prod_bg_new.jpg") fixed; } .photo { position: absolute; top: 100px; right: 100px; } /* h1 width 속성! */ h1 { font-size: 6em; width:258px; color:white; font-family: sans-serif; p.. html_css 2022. 11. 6.

• 

  js 예제: clock - todo_list_날씨받기 노마드 코더 자바스크립트 입문 강의에 찬사를 보낸다. 정말 이 강의는 구성이 천재적이다. 딥다이브 ES6 까지 완료 후, 처음부터 2회독을 시작할까? 고민이 있었다. Array ~ DOM ~ 등은, 비동기 setTime, 콜백, fetch, promise, async 등은 실용적인 쉬운 예제들로 학습하기로 계획을 바꿨는데, 휴 다행이였다. 특히, 간단한 예제를 하면서, html css 를 지금껏 기초도 모른채 사용했다는 생각에, 주요 css 도 들여다보며, 연습하는 계기가 됐다. 여러 예제 중, 이론적으로는 생활코딩의 비동기 강의가 좋았고, 노마드코더의 바닐라 자바스크립트 강의. 이런 강의가 무료라니. 헐. 영어에 자막이라는 부분이 거부감이 있었으나, 오히려 코드에 더 집중하는 결과? ^^ 유튜브 풀스택.. 자바스크립트 예제 2022. 11. 6.

• 

  vscode: html 자동 완성 수정 ! 누르면, 완성되는 html 이 불필요한게 많아서... 이렇게 되길 원함. html-ko 를 누르면 이렇게 나오면 좋겠다. 방법 기본설정->사용자 코드 조각(code snippet)->html 참고로 $1, $2, $3… 는 커서의 위치를 지정하는것으로 $1에 최초 커서가 위치하게 되며 Tab 을 누를 경우 $2 로 바로 이동하게 된다. { // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded.. 자바스크립트 문법 2022. 11. 6.

• DeepDive 학습 중 DeepDive 책이 일반적인 입문서와 다른 점이, 화살표 함수, 배열 등이 상당히 뒷 부분에 나온다는 점인데, 이론적으로는 옳은 구성이다. 저자의 의도는 충분히 이해가 가지만, 흠.... 이 책으로 시작하는 사람들은 아주 물리게 하는 주범이라는 ... 추상적인 관념은 죽어라 이해한 듯 한데, 실제 필요한 부분들이 너무 뒤에 나오니까. 이런 점에서 DOM 과 이벤트가 39, 40장 이라는거는.....ㅠㅠ 꾸역꾸역 27장 배열까지는 학습했고, 이제는 드디어 끊을 수 있는 분기점이 된 것 같아서 겨우 학습을 중단했다. DOM, EVENT 등은 보통 재밌고, 실용성 있는 예제들로 많이 구성되는데, 딥다이브 책을 보면 .... 무지무지....ㅠㅠ 그래서 끊었다. 아니, 끊을 수 있었다. 이후로는 여러가지 재미있.. 자바스크립트 문법/문법 정리 뼈대 2022. 11. 4.

• 

  환전(데이터 객체로 저장, foreach) https://www.youtube.com/watch?v=1BF_BwW0LPs&list=PLKvVQ9ZQzjVkcW5Q2dkij8r0exIxG4sr_&index=1 USD KRW USD VND 달러 = USD KRW USD VND 달러 style.css body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-image: url("https://media.istockphoto.com/vectors/currency-exchange-dollar-sign-and-circle-arrow-fast-loan-financial-vector-id1190840209?k.. 자바스크립트 예제 2022. 11. 2.

• 

  todo-list 연습 (javascript ) 데브리 // console.log(window); // const form = document.getElementById('todo-form'); // getElementByClassName('item') // getElementByTagName('li') // const form = document.querySelector("#todo-form") // console.log(form); // const items = document.querySelectorAll('.item'); // console.log(items); // items.forEach((item)=>console.log(item)); const todos = document.querySelector("#todo-list"); consol.. 자바스크립트 예제 2022. 11. 2.