일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- Porject
- prj
- json
- webpack
- await
- setTimeout()
- mysql
- eport
- callback
- JS #프로젝트
- database
- 참고블로그
- sql
- execCommand
- Import
- js
- addEventListener
- db
- ajax
- async
- https://m.blog.naver.com/tt2t2am1118/221010125300
- 게임
- 동기
- https://youtube.com/playlist?list=PLuHgQVnccGMA5836CvWfieEQy0T0ov6Jh&si=FTaYv8m21EhO-A2K
- promise
- slow and steady
- Project
- 혼프
- 비동기
- object
- Today
- Total
목록분류 전체보기 (308)
C-log
스택과 큐는 리스트에서 조금 더 발전한 형태의 자료구조이다. 스택과 큐의 구조는 비슷하지만 처리 방식은 다르다. 스택 후입선출(LIFO) 가장 마지막에 사입된 데이터가 가장 먼저 나오는 구조 스택의 위치는 top이라는 개념이 있다. 재귀 함수 알고리즘 원리와 일맥상통하다. 스택에 사용되는 코드 위치 top : 스택에서 가장 위에 있는 데이터를 가리는 영역이다. s.append(data) : top의 새로운 데이터를 삽입 s.pop() : top위치에 현재 데이터를 삭제하고 확인하는 연산 s[-1] : top위치에 현재 있는 데이터를 단순 확인하는 연산 스택을 이용한 알고리즘 우선 탐색 백트래킹 종류의 코딩 테스트에 효과적이므로 반드시 알아두어야 한다. 백트래킹 종류의 코딩 테스트에 효과적이므로 반드시 ..
이번 포스팅에서는 router에서 url Paramerts를 전달하는 것에 관해서 포스팅 해볼 것이다. 우선 코드를 살펴보자. SubApp.js ... return ( ( //movie 컴포넌트를 사용 ))} ... Movie.js ... {title} ... movie/:id로 router를 설정하고 해당 id는 Movie.js에서 props로 id값을 받게 설정을 한다. 해당 id값을 받아오는 곳은 Home.js로 부터 받아온다. 이를 통해서 movie API로 연결된 해당 영화의 고유 id값을 Movie.js의 Link를 통해서 Detail 컴포넌트로 전달한다. 그렇게 전달받은 id값은 Detail 내부 컴포넌트에서 다시 fetch를 통해서 정보를 추출한다. Detail 내부 컴포넌트는 아래와 같다..
이번 포스팅에서는 react-router-dom을 사용해서 우리가 만들어 놓은 컴포넌트들을 페이지간 이동이 가능하게 만들 것이다. 우선 react-router-dom을 설치하면 된다. 코드는 아래와 같다. import { BrowserRouter, Routes, Route } from "react-router-dom" import Home from "./routes/Home"; import Detail from "./routes/Detail"; export default function SubApp() { return ( ) } 강의에서는 switch문을 사용할 것이다. switch문은 react ver5까지 지원을 해주고 이후 ver6부터는 Routes를 사용해야한다. Route에 컴포넌트를 열결하는 ..
*해당 포스팅은 CSS Diner 게임을 통해 다양한 선택자들을 연습하는 게임이다. 강의에서도 해당 게임을 해설해주니 한번 풀어보길 권장한다. 13번 문제가 잘 풀리지 않았는다. 코드는 아래와 같다. 문제는 과 을 삭제 해야한다. 문제는 '+'를 사용해서 형제관계(Sibling)를 선택하는 것인데 이것은 인접한 선택자를 선택해서 문제를 해결하면되는 것이다. 즉, 우리가 선택해야하는 선택자들은 모드 plate를 사이에 두고 있다. 따라서 plate+apple이라고 작성하면 해당 apple들이 모두 사라진다.
*해당 포스팅은 CSS Diner 게임을 통해 다양한 선택자들을 연습하는 게임이다. 강의에서도 해당 게임을 해설해주니 한번 풀어보길 권장한다. 7번 문제가 잘 풀리지 않았는다. 코드는 아래와 같다. 해당 코드에서 bento 태그 안에 있는 orange를 선택해야 한다. 그러기 위해서 class table인 div로 진입하고 bento태그로 진입 후 class small인 orange에 진입을 해야한다. 자세히 보면 class small을 가지고 있는 것은 orange뿐만 아니라 apple도 가지고 있다. 그래서 모든 orange를 선택하고 그 중 .small을 지적해주면 된다. 즉, oragne.small 이렇게 말이다.
이번 포스팅에서는 font-size의 기본적인 단위 px과 em/rem을 알아볼 것이다. px와 em/rem은 절대적이냐 상대적이냐 로 나뉜다. px은 화면에 표시되는 가장 작은 단위이며 상대적인 크기를 가지고 있어 웹 브라우저가 확대가 되어도 크기가 고정된다. 따라서 화면의 크기 변동에 영향을 받지 않기 위해선 px를 사용한다. em은 부모 요소의 글꼴 크기에 따라 상대적으로 크기가 조절되는 것이다. 즉, 부모 자식관계에서 상호적이라는 것을 알 수 있다.예로 들면 부모의 요소의 글꼴 크기가 16px이고 자식 요소에 2em이 되적용이 된다면 자식 요소의 크기는 32px가되는 것이다. rem은 글꼴 크기 기준으로 상대적인 크기를 나타낸다. em과 달리 상속된 부모에게 영향을 받지 않으며 항상 루트의 요소의..
이번 시간에는 가상클래스 선택자(pseudo class selector)를 포스팅 해볼 것이다. 가상 클래스 선잭자는 특정 상태나 특징을 가진 요소를 선택하기 위해 사용되는 CSS 선택자이다. 이러한 클래스는 요소의 상태나 특징에 따라 동적으로 스타일을 적용하는 데 사용된다. 가상 클래스 선택자는 콜론(:)으로 시작하며, 해당 요소의 상태나 특징을 정의하는데 사용된다. 대표적인 예시로는 hover와 같은 것들이 있다. 우선 html태그를 살펴보면 아래와 같다. DOCTYPE html> Document 방문함 방문안함 이것들을 먼저 클릭 했을 때 반응을하는 강상클래스는 아래와 같다. a:active { color: green; } 그리고 우리가 가장 많이 사용되는 hover기능은 아래와 같다. a:hove..
이번 포스팅에선 html의 부모 자식 선택자를 css로 선택하는 방법을 배워 볼 것이다. 여러 방법들이 있고 어떻게 어떤 태그에 접근하냐에 따라 선태자를 선택하는 방식이 달라진다. 우선 html 코드는 아래와 같다. DOCTYPE html> Document HTML CSS JavaScript HTML CSS selector declaration JavaScript 우선 우리는 ul태그의 글자들을 모두 빨간색으로 선택하고 싶다. 그렇다면 stye.css에 아래와 같이 코드를 작성하면 된다. ul li { color: red; } 이렇게 하면 ul의 li코드들이 모두 붉은 색이 될 것이다. 이번엔 ol태그의 li들과 구별 짓기위해서 파란색으로 ol태그에 영역을 구분 짓는 선을 만들고 싶다면 아래와 같이 하면..