Menu

CSS 변수 1. CSS 변수 선언 방법 : 2개의 -를 앞에 붙인 속성의 이름과 함께 선언 element { --main-bg-color: brown; } - 선택자는 사용자 속성을 사용할 수있는 범위를 뜻한다. * root(html) : 최상위 요소를 선택하는 가상 선택자 * 명시도 : 해당 요소에 가장 연관된 속성을 찾는 수단 (스타일 우선순위) 👉 !important >> inline style >> id >> class >> tag(요소) - 유효범위 안에서만 속성을 오버라이딩 할 수 있다. CSS @supports 1. @supports : css 기능을 브라우저가 지원하는지 따라 다른 스타일 선언을 할 수 있는 방법 (기능 쿼리) @supports (기능) and (기능) and (기능) {..

처음으로 써보는 회고글 ! ! 지금까지 공부한거 요약정리만 해보다가... 처음으로 기회가 생겨 회고글을 작성😎 나는 예전글에서 작성하다시피 개발자로 취업을 하기엔 너무너무나도 부족한 상태여서😥 4학년 1학기를 마치고 휴학을 결정했다 휴학 전에 교수님과의 상담으로 부트캠프/국비교육을 하며 공부를 하라 조언을 듣게되었고.. 어떻게 운이 좋게도 제일 수강하고 싶었던 프로그래머스 데브코스에 합격하게 됐다 ! (데브코스가 궁금하신 분들은 아래 링크를 참고해 주세용) [3기] K-Digital Training: 빅데이터 플랫폼 프론트엔드 엔지니어링 | 프로그래머스 스쿨 (programmers.co.kr) [3기] K-Digital Training: 빅데이터 플랫폼 프론트엔드 엔지니어링 🚀프론트엔드 데브코스 모집 마..

history API 1. history API : 브라우저의 세션 기록을 조작할 수 있는 메소드를 담고 있는 객체 브라우저에서 페이지 로딩 시, 세션 히스토리를 가짐 세션 히스토리는 페이지 이동할 때마다 쌓인다. pushState, replaceState 의 함수로 화면 이동 없이 현재 url를 업데이트 할 수 있음 👉 이러한 특성으로 싱글 페이지 애플리케이션(SPA) 가 가능해진다. hashbang url 형식에서 벗어날 수있다. ( / => HomePage, /detail => DetailPage) 일반 url형식을 따르기 때문에 쿼리스트링도 자유롭게 붙일 수 있다. * hashbang이란 ? : 말그대로 해시(#)와 뱅(!)이 합쳐진 단어로 단일 페이지 애플리케이션(SPA)를 구현하기 위해서 사용..

Module 1. import - export 키워드로 내보내진 변수, 함수 등등을 불러올 수 있는 키워드 import name from "module-name"; // module-name 내 export default로 내보내진 것을 가져옴 import * as allname form "module-name"; // allname 이름으로 지정하여 export 된 것을 가져옴 export const NAME = 'EUNA' export const AGE = '24' // 함수 export export default function 함수이름 () { } import { loadItem } from "module-name" // 모듈내 export된 것 중 특정 값만 가져옴 import loadItem ..

컴포넌트 방식으로 생각하기(w. To do list) 1. To-do 리스트를 추상화 하기 - UI를 선언적으로 표현하기 위해 TO-DO 리스트를 Header, TodoFrom, TodoList, App의 4가지로 추상화 👉 컴포넌트의 재사용 가능, 기능 추가시 간편 1) TodoList 컴포넌트 만들기 ◼ 명령형 코드 방식 function TodoList(params) { const $todoList = document.createElement('div'); const $target = params.$target; $target.appendChild($todoList); this.state = params.initialState; this.render = () => { ..

명령형 프로그래밍과 선언적인 프로그래밍 방식의 이해 1. 명령형 : 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것 2. 선언형 : 프로그램이 어떤 방법으로 해야하는 지가 아닌 무엇이 같은 지를 설명하는 경우 👉 HTML, SQL 명령형 프로그래밍과 선언적인 프로그래밍 방식: 예시 1-1 1. double() 함수 만들기 1) 명령형 방식 function double(arr) { let result = []; for(let i=0; i number*2) } .- 코드가 간결하며, 유지보수하기 쉽다. 명령형 프로그래밍과 선언적인 프로그래밍 방식: 예시 1-2, 2 💡 만약 배열에 숫자가 아닌 것들이 들어온다면 ? 1) 명령형 function double(arr) { let result = []; for(le..

사전 문제 1 function Dog(name, age) { this.name = name; this.age = age; } const dog = Dog('happy', 3); console.log(dog.name); 위 코드는 오류가 발생하는데, 그이유는 Dog 함수는 반환 값이 없기에 dog엔 undefiend 값이 들어가게 되고, undefined.name을 찾을 수 없기에 오류가 발생한다. 또한 추가로 함수안에 있는 this는 window를 가르키기에 window.name을 찍으면 happy 가 나온다 ✅ 왜 this가 window를 가르킬까 ? - 그 이유는 함수를 new를 통해 생성하지 않았기 때문이다. - new를 사용하지 않고 함수를 선언할 시 함수 내부의 this는 window를 가르킨다..

코딩테스트 연습 - 여행경로 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 📚 난이도 : Level 3 💡 풀이 과정 : 굉장히 시행착오가 많았던 문제... 일단 코드를 좀 더 간단하게 작성하기 위해서는 주어진 tickets배열을 객체 형태로 변환해주는 것이 편하다. (아래와 같은 형태) const graph = {}; for(const [a,b] of tickets){ if(graph[a] === undefined) { graph[a] = []; } graph[a].push(b); } 왜냐하면 배..

자료구조&알고리즘 - 코딩 테스트 준비 방법 1. 알고리즘을 잘 공부하는 법 1) 문제 풀 때 중요한 것 항상 여러가지 풀이법이 있음을 기억 항상 예외가 있을 수 있음 내 답이 베스트인지 의심 시행착오는 기록 ! 다른 사람의 코드를 많이 보자 너무 쉽게 포기하진 말고, 너무 오래 끌지도 말자 2. 코딩 테스트 준비 방법 1) 나의 성향 파악 미리 생각하고 의사 코드를 작성해야 잘 풀리는 사람 일단 코드를 작성하면서 풀어야 잘 풀리는 사람 ( 나 ) 2) 메모하기 : 코드에 주석을 달거나, 노트에 메모하면서 풀자 3) 디버깅 하면서 풀기 3. 좋은 코드를 만드는 방법 1) 간결하고 가독성 좋은 코드 변수, 함수 이름 잘 정하기 중복 코드 제거 함수형 프로그래밍(고차 함수 이용하기) 2) 가지치기 3) 자바..