전체 글178 강의들을 모두 끝냈다! https://brunch.co.kr/@pletalk/61 일의 성과를 높여주는 회고 방법 3 일을 마치고 되돌아보는 습관의 반복은 성공의 지름길 | 애자일에 대한 관심이 높아지면서 팀이나 부서수준에서 진행하는 회고(Retrospective)에 대한 관심도 함께 높아지는 것 같습니다. 함께 일을 brunch.co.kr 첫 회고 쓸 때 도움이 많이 된 게시글!! 1. 초기목표 : HTML/CSS/JavaScript/React 기본기 탄탄하게 잡기 2. 실제 일어난 일 : 제대로 된 웹페이지 구성하나 하는데 세월아 네월아..진짜 한나절이 걸린다. 각 과목들의 강의들을 다른 선생님들것으로 2개 이상씩 들었는데도 막상 실습을하면 계속 막히고, 강의를 볼 때마다 여전히 새로운 내용들이 튀어나온다. 3. 계획과 실.. 2023. 1. 17. [CSS]background 태그로 배경넣기 background image : 경로 설정 background-size : 사이즈 설정 (기본 설정으로는 이미지가 크기보다 작을시 repeat /반복 됨) cover : 이미지 짤려도 되지만 박스에 다 적용 contain : 이미지 짤리면 안되니까 남는공간은 여백으로 남겨두고 적용 background-repeat : 기본값인 repeat을 n -repeat으로 재설정 background-position : 배경위치 조정 background-attachment: 스크롤시 배경 위치 조정 가능 filter: 이미지에 보정 입힘 (단, 내부에 글자 있으면 모두 포함되어 보정됨) 구성 속성은 아래와 같다!! background-attachment background-clip background-color ba.. 2023. 1. 16. [HTML]부트스트랩+그리드 부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크!! https://getbootstrap.kr/ Bootstrap 강력하고 확장 가능하며 기능이 풍부한 프론트엔드 툴킷. Sass로 빌드 및 커스터마이징하고, 사전 빌드된 그리드 시스템 및 구성 요소를 활용하고, 강력한 JavaScript 플러그인으로 프로젝트에 생기 getbootstrap.kr https://getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects.. 2023. 1. 15. [HTML]의미론적 태그 HTML 5부터 제공되는 태그 시맨틱 요소는 브라우저와 개발자 모두에게 그 의미를 명확하게 설명. 비의미적 요소 의 예 : 및 - 내용에 대해 아무 것도 알려주지 않는 반면 의미론적 요소 의 예 : , 및 - 내용을 명확하게 정의. 일반 div들과 구별이 됨. 수많은 div들 중에서도 nav, main, footer로 구별을 하기가 쉽다!! TagDescription Defines independent, self-contained content Defines content aside from the page content Defines additional details that the user can view or hide Defines a caption for a element Specifies sel.. 2023. 1. 14. [CSS]flexbox flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공 문서의 영역 중에서 flexbox가 놓여있는 영역을 flex 컨테이너라고 부름 flex 컨테이너를 생성하려면 영역 내의 컨테이너 요소의 display 값을 flex 혹은 inline-flex로 지정 이 값이 지정된 컨테이너의 일차 자식(direct children) 요소가 flex 항목이 됨 flex 항목들은 각 항목 별 내부 요소의 크기로 주축을 따라 정렬 -출처 MDN- 화면사이즈에 대해서 유동적인 flexbox (flexible 생각하면 쉽군) children1 children1 children1 부모태그안에 있는 자식태그들한테 적용!!! (display : f.. 2023. 1. 13. [JavaScript] parent, parents의 차이 parent() Method parents() Method It only traverses one level up in the DOM of the selected element. It traverses all levels up in the DOM of the selected element until the root i.e HTML tag. It returns only an element that is the direct parent. It returns all elements that are ancestors to the selected element 간단히 정리하면 parent 메소드는 한 단계의 상위 요소를 반환하고 (부모요소) parents 메소드는 모~든 상위 요소를 반환한다. (모든 조상요소) .. 2023. 1. 13. [CSS]position,z-index position CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정 // 출처 : MDN position 지정을 해야 좌표변경이 가능! position 배우기 전에 짚고 넘어가자!! relative : 위치하고 있는 자리를 기준에서 이동 absolute : 부모의 절댓값을 기준으로 이동 (화면의 절댓값으로 생각하면 됨. ) static : 웹브라우저의 기본값 (default 값) 당연히 top,bottom,left,right 값 조절 X fixed : 스크롤바를 움직여도 절대적으로 고정됨 -> 광고배너에 흔히 쓰임 sticky : 다른 요소는 이.. 2023. 1. 13. [React]이벤트 다루기,onClick 값 변경 onClick 이벤트 값 설정 리액트에서 onClick을 적용하려면!! (클릭하면 실행될 내용 설정) onClick = {클릭될때 실행할 함수} onClick = { () => {실행할 내용}} /*괄호안에 표현식을 바로 사용할 수 없기 때문에 콜백함수 혹은 Arrow function를 만들어 사용*/ 클릭시마다 1 증가시키기 이때 역시 useState를 사용하는데 데이터가 아닌 대체할 데이터!! 를 사용해야한다. 위와 같은이유로 useState 함수에 기본값이 [데이터, 데이터변경 값]으로 구성되어있음 값 변경시 꼭!!!!! 변경 값을 사용하자!!! 또한 state 변경함수로 변경해야 재렌더링이 잘 일어남 수정된 [데이터]를 만든다 -> newArray 기존 state 값을 복사 -> 나쁜예 (값 공유.. 2023. 1. 12. [React]태그에class 적용, 변수 대신 useState 태그에 class를 적용하고 싶으면 취업 대작전 class 는이미 javascript에 이미 존재하는 예약어이기 때문에 className을 사용한다. 데이터 바인딩 쉽게하는 법 (데이터를 HTML에 연결) {변수명, 함수 등}사용 {posts} {function()} src, id, href 등의 속성에도 사용 가능 데이터바인딩하는 다른 방법!! s t a t e (리액트 문법임) import React, {useState} from 'react'; 위와 같이 데이터는 1.변수에 넣거나 2.state에 넣으면 된다. 리액트의 내장함수를 사용. const [count, setCount] = useState(0); let [글제목, 글제목변경] = useState('뒤집어지게 맛있는 고깃집 추천'); 이런식.. 2023. 1. 12. [React]리액트 프로젝트 생성 Web-app 을 만들 때 가장 유용하게 만들 수 있는 라이브러리 1.모바일앱으로 발행이 쉬움 2.앱처럼 뛰어난 UX 3.비즈니스적 강점 하지만 문법이 어려우니 커피를 꼭 마시고 총명한 상태로 공부하자!! 설치방법 1.Node.js 검색 후 최신버전 설치 2. VScode 설치 3. 폴더 만들기 4. VScode 에디터에서 작업폴더 open 5.터미널로 리액트 프로젝트 생성 단계 ㄱㄱ 아래처럼 입력해도 되고 위에 처럼 입력해도된다 상관없음~ (5.ㅊㅓ럼 안해도 되고 VS실행을 한 후, 작업할 디렉토리에서 터미널창에 바로 npx create-react-app blog 쳐도된다. 여기서 blog는 프로젝트 이름이 blog일때임.) 6.npx create-react-app blog 을 터미널에 입력 npx는 .. 2023. 1. 12. [CSS] 샾'#'과 마침표'.' 의 차이, 아이디와 클래스 CSS에서 # id : 선택자로 지정할 때 사용 . class : 값을 선택자로 지정할 때 사용 클래스와 id의 기능은 동일하지만 적용할 수 있는 범위가 다름 id class # 샾 . 마침표 #id_name{속성명: 속성값; 속성명:속성값;} .class_name{속성명:속성값;} 동일한 값 사용 불가 동일한 값 사용 가능 한 아이디당 한 페이지만 사용 가능 한 요소에 두 개 이상 사용 가능 (띄어쓰기로 구분) 한가지만 적용하고 싶을 때 유용 여러가지 스타일링을 한꺼번에 적용할 때 유용 /* CSS */ #identified { background-color: skyblue; } 특별한 ID를 가진 요소에요! 이건 그냥 div에요. 위의 예제는id /* CSS */ .red { color: #f33; .. 2023. 1. 4. [CSS] HTML에 적용하기 + 우선순위 CSS(Cascading Stylesheets – 종속형 스타일시트) 를 HTML에 적용하는 방법 Inline style 인라인 스타일 시트: html 태그 속성에 입력 스타일 적용 태그 즉시 확인 가능 한번에 하나의 태그에만 적용 가능 전체 코드 가독성 나쁨 관심사 분리 불가능 예를 들어서 p태그에 적용하면 그 다음에 생성되는 p태그에는 모두 같은 CSS가 적용되는 것을 주의!! 따라서 어떤 태그에 공통적인 스타일을 주고 싶을 때 주로 사용한다. 안녕하세요. Hello. body { display: contents; } Internal style 내부 스타일 시트 : External style 외부 스타일 시트 : CSS 파일 만들어 불러오기 전체 코드 가독성 향상 유지보수 용이 태그와 CSS 연결 필.. 2023. 1. 4. [CSS] 공책처럼 줄 바탕 넣기 - linear-gradient() https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient linear-gradient() - CSS: Cascading Style Sheets | MDN The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the data type, which is a special kind of . developer.mozilla.org linear-gradient(90deg, transparent 7.. 2023. 1. 3. [HTML]실습하기 좋은 웹사이트 https://replit.com/~ Log In Run code live in your browser. Write and run code in 50+ languages online with Replit, a powerful IDE, compiler, & interpreter. replit.com 브라우저에 적용되는 것을 편리하게 볼 수 있다!! https://flatuicolors.com/palette/defo Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨 280 handpicked colors ready for COPY & PASTE flatuicolors.com 원하는 색상을 클릭해서 가져올 수 있다! https://fontawesome.com/icons.. 2023. 1. 2. [HTML]태그 : 웹서버와 웹브라우저 사이에 주고받는 정보를 정의하는데 사용됨. 문서 자체의 특성을 나타냄 : 상단 tab에 title 지정함 이 부분이 tab에 나타남 : 필요한 스타일이나 아이콘 등 외부 문서를 html문서에 연결시킴 이 부분을 수정해야할 경우는 거의 없다. : 영역을 나누는데 쓰임 div 태그와 달리 줄바꿈없이 영역만 나누는 span태그를 기억합시다 : 영역을 나누는데 쓰임 안녕하세요 로또 당첨 되게 해주세요 : 문단을 나누는데 쓰임 (div태그와 차이점은 p 이 친구의 공간이 좀 더 많이 생김) 문단1 : 글자를 기울여서 표시하는 태그로, italic의 약자 기울여서 표시 할 내용 예제처럼 외부에서 소스를 가져올 때 이 태그가 쓰임. 이 태그를 사용할 시 태그안에 CDN (content deli.. 2023. 1. 2. [JavaScript/자바스크립트]클로저 간단히 말하면 클로저(closure)는 자신이 생성될 때의 렉시컬 환경(Lexical environment)을 기억하는 함수다. 안 간단히 말하면 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다. 이러한 중첩 함수를 클로저(closure)라고 부른다. MDN에 따르면 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 렉시컬 환경이란?????????? 코드가 어디서 실행되며 주변에 어떤 코드가 있는지, 식별자-변수 매핑을 포함하는 데이터 구조. 키와 값을 갖는 객체 형태의 스코프(전역, 함수, 블록 스코프)를 생성하여 식별자를 키로 등록하고 식별자에 바인딩 된 값을 관리. 즉, 스코프를 구분하여 식별자를 등록하고 관리하는.. 2023. 1. 2. [JavaScript/자바스크립트]프로토타입 JavaScript는 흔히 '프로토타입 기반 언어(prototype-based language)' 라 불린다. 왜냐???? Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용하며, 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간이다. 프로토타입을 상속받은 하위(자식) 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티 처럼 자유롭게 사용할 수 있다. 모든 객체는 하나의 프로토타입을 갖는다. 모든 객체는 프로토타입의 계층구조인 프로토타입 체인에 묶여있다. 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있다. 구분 소유 값 사용 주체 사용 목적 __proto__접근자 프로퍼티 모든객체 프로토타입의 참조 모든.. 2023. 1. 2. [JavaScript/자바스크립트]this 키워드 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 self-referencing variable다. 암묵적으로 생성되며 코드 어디서든 참조 할 수 있다. 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. 지역변수 처럼 사용할 수 있다. this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. //바인딩 : 식별자와 값을 연결하는 과정을 의미한다. 예를 들어, 변수 선언은 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩하는 것이다. //this 바인딩 : this(키워드로 분류되지만 식별자 역할을 한다.)와 this가 가리킬 객체를 바인딩하는 것이다. 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할.. 2023. 1. 2. [JavaScript/자바스크립트]엄격모드 엄격 모드 strict mode strict 모드는 자바스크립트 언어의 문법을 좀더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. strict모드를 적용하려면 전역의 선두 또는 함수 몸체의 선두에 'use strict;'를 추가한다. 전역의 선두에 추가하면 스크립트 전체에 strict mode가 적용된다. 'use strict'; function foo(){ x = 10; } foo(); 함수 몸체의 선두에 추가하면 해당 함수와 중첩 함수에 strict mode가 적용된다. function foo() { 'use strict'; x = 10; } foo(); 코드 선두에 'use strict';를 위치시키.. 2023. 1. 1. [JavaScript/자바스크립트]함수와 객체 함수란? 내가 고등학교때 가장 무서워하던 단어. 그리고 일련의 과정을 문(statement)로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한것. 함수 내부로 입력을 전달 받는 변수를 매개변수(parameter), 입력을 인수(argument), 출력을 반환값(return value)이라 한다. 함수는 값이며, 여러 개 존재할 수 있으므로 특정 함수를 구별하기 위해 식별자는 함수 이름을 사용할 수 있다. /* 따라서 식별자 네이밍 규칙을 준수해야한다. 중복 불가 공백 사용 불가 대소문자 구분 숫자로 시작할 수 없음 특수문자는 _(Under Score), $(Dollar Sign)만 사용 가능 예약어(키워드) 사용 불가 길이 제한 없음 */ 함수는 함수 정의(function definition)을.. 2023. 1. 1. [JavaScript/자바스크립트]스코프, 렉시컬환경, 실행 컨텍스트 스코프(scope) 매개변수를 참조할 수 있는 유효범위.즉, 스코프는 식별자가 유효한 범위. 렉시컬 환경의 환경 레코드. 매개변수의 스코프가 함수 몸체 내부로 한정되기때문에 함수와 밀접한 관련이 있다. 블럭 외부에서는 블럭 내부의 변수를 참조할 수 없다. 변수의 스코프는 좁을수록 좋다. (전역 변수를 반드시 사용할 이유를 찾지 못한다면 지역 변수를 사용해야 한다. 자바스크립트 엔진은 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조해야 할것인지를 결정하는데, 이를 식별자 결정(identifier resolution)이라 한다. 따라서 스코프를 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다. 변수는 코드의 가장 바깥 영역뿐 아니라 코드 블록이나 함수 몸체 내에서도선언할 수 있다.. 2023. 1. 1. [JavaScript/자바스크립트]null 병합 연산자 ?? 단축평가와 옵셔널체이닝을 모두 거치니 이 null 병합 연산자는 정말 순한 양처럼 보이는 심플한 녀석이다. ES11에서 도입된 null 병합 (nullish coalescing)연산자 ?? 는 좌항의 피연산자가 null 또는 undefined인 경우 우항를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어가는 옵셔널체이닝 연산자랑 헷갈리지 않기!! null 병합 (nullish coalescing)연산자 가 도입되기 이전에는 논리 연산자 ||를 사용한 단축 평가를 통해 변수에 기본값을 설정했다. 변수가 null또는 undefined인지 확인하는것에 유용한 옵셔널 체이.. 2022. 12. 30. [JavaScript/자바스크립트]옵셔널 체이닝 연산자 ?. ES11에서 도입된 옵셔널 체이닝 (optional chaining)연산자 ?. 는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. (프로퍼티 참조란 변수를 통해 변수값을 참조하듯이 객체의 프로퍼티에 접근해프로퍼티 값을 참조하는 것을 말한다.) 옵셔널 체이닝 연산자 ?. 가 도입되기 이전에는 논리 연산자 &&를 사용한 단축 평가를 통해 변수가 null 또는 undefined인지 확인했다. var elem =null; // elem이 null또는 undefined이면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. var value = elem?.value; //elem && elem.. 2022. 12. 30. [JavaScript/자바스크립트]단축 평가 논리곱(&&) 연산자와 논리합(||) 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다. 이를 단축 평가(short-circuit evaluation)라 한다. 단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다. 단축 평가 표현식 평과결과 true || anything true false || anything anything true && anything anything false && anything false //논리합 연산자 console.log('Cat' || 'Dog'); // => Cat console.log(false || 'Dog'); // => Dog console.log('Cat' || false);.. 2022. 12. 26. [JavaScript/자바스크립트]타입변환 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환(explicit coercion)또는 타입 캐스팅(type casting)이라 한다. 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되는 것은 암묵적 타입변환(implicit coercion)또는 타입 강제 변환(type coercion)이라 한다. 암묵적 타입 변환이 되면 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다. 암묵적 타입 변환!!!!!! + 연산자를 이용해서 문자열 타입으로 변환 수행 이외에도 불리언타입 null 타입 undefined 타입 symbol타입 객체타입 모두 문자열 타입으로 암묵적 타입 변환이 수행된다. ***Symbol타입은 문자열 변환이 불가능하여 TypeError가 뜬다. - * /산술 연산자를.. 2022. 12. 26. [JavaScript/자바스크립트]반복문 조건식의 평가 결과가 참인 경우 코드 블럭을 실행한다. 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행한다. for 문 조건식이 거짓일 때 까지 반복된다. for (변수 선언문 또는 할당문; 조건식; 증감식){ 조건식이 참인 경우 반복 실행될 문; } for ( var i = 0; i < 2; i++){ console.log(i); } 응용 // 트리만들기 for (var i =1; i 2022. 12. 25. [JavaScript/자바스크립트]조건문 if...else, switch 조건문은 주어진 조건식의 평가 결과에 따라 블록의 실행을 결정한다. if..else 조건식은 불리언 값으로 평가될 수 있는 표현식이다. if ...else 문 if (조건식){ //조건식이 참이면 이 코드 블록이 실행된다. } else { //조건식이 거짓이면 이 코드 블록이 실행된다. } if (조건식){ //조건식이 참이면 이 코드 블록이 실행된다. } else if (조건식2) { //조건식이 거짓이면 이 코드 블록이 실행된다. } else { //조건식 1과 조건식2가 모두 거짓이면 이 코드 블록이 실행된다. } 응용 let num = 3 ; let kind; if (num > 0){ kind = '양수'; } else { kind = '음수'; } console.log(kind); let num.. 2022. 12. 24. [JavaScript/자바스크립트]NaN, 일치비교연산자, Object.is NaN은 Not a Number으로 숫자가 아닌 값을 의미한다. NaN은 자신과 일치하지 않는 유일한 값이다. 따라서 숫자가 NaN인지 조사하려면 빌트인 함수 Number.isNaN을 사용한다. (왜 숫자라고 했냐면 NaN의 타입은 숫자이기 때문에 // typeof NaN ->출력값은 number 출력값으로 숫자가 나왔을때, 이것이 NaN인지 확인하려면 Number.isNaN을 사용해야한다는 의미. 일치 비교 연산자로 비교하면 false의 값이 나온다. 자신과 일치하지 않는 유일한 값이기 때문에) Number.isNaN(NaN); //true Number.isNaN(10); //false Number.isNaN(1 + undefined); //true 일치 비교(===)연산자는 좌항과 우항의 피연산자가 .. 2022. 12. 23. [JavaScript/자바스크립트]삼항 조건 연산자 조건식의 평가결과에 따라 반환할 값을 결정한다. 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값 var score = 50; var result = score >= 60 ? 'pass' : 'false'; console.log(result); //출력값 false if..else문 처럼 사용할수 있다. 하지만 수행할 문이 하나가 아니라 여러개라면 if...else문의 가독성이 더 좋다. if...else문은 표현식이 아닌 문이기때문에 값처럼 사용할 수 없는 반면에, 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다. 따라서 삼항 조건 연산자 표현식은 값처럼 다른 표현식의 일부가 될 수 있어서 매우 유용하다. 2022. 12. 23. [JavaScript/자바스크립트] 리터럴과 타입 리터럴이란 사람이 이해할 수 있는 문자 또는 미리 약속된 기호로 표기한 코드. 리터럴은 값으로 평가된다. 따라서 리터럴도 표현식. ** 값으로 평가될 수 있는문은 모두 표현식** 리터럴의 종류는 아래와 같음..엄청 많네 정수 리터럴 부동소수점 리터럴 2진수 리터럴 8진수 리터럴 16진수 리터럴 문자열 리터럴 불리언 리터럴 null 리터럴 undefined 리터럴 객체 리터럴 배열 리터럴 함수 리터럴 정규 표현식 리터럴 템플릿 리터럴(ES6) ES6부터 새로 도입된 문자열 표기법 템플릿 리터럴 작은따옴표(' ') 혹은 큰따옴표(" ")같은 일반적인 따옴표 대신 백틱(` `) 을 사용해서 표현한다. ex) 'Template literal` 원시 타입 : 객체가 아니면서 메서드도 가지지 않는 데이터타입 숫자타.. 2022. 12. 23. 이전 1 2 3 4 5 6 다음
