Web 개발 (14) 썸네일형 리스트형 [react] props와 게시글 작성 및 삭제(3주차) 모달창안에 첫 째 글제목을 넣어보자 function Modal(){ return( 글제목[0] 날짜 상세내용 ) } 에러가 발생한다 이유는? function 함수(){ let a = 10; } 모든 변수는 함수탈출 불가능 글제목이 function app안에 만들어서 그럼 >> props문법을 쓰면됨 사이트구조는 app은 부모컴포넌트 modal을 자식컴포넌트라고 한다. 부모컴포넌트에서 자식컴포넌트로는 state를 전송이 가능하다. 전송할 때 필요한 문법이 props이다. props 문법 사용하는 법 (부모 => 자식 state 전송하는법) 1. 2. props 파라미터 등록후 props.작명 사용 { modal == true ? : null } function Modal(props){ return( pro.. [react] 리액트 컴포넌트 및 map 함수(2주차) https://zzuzzu-99.tistory.com/54 코딩애플님의 강의를 참고하였습니다. 문제시 댓글 달아주시면 비공개 처리하겠습니다. 1 . state 함수를 이용하여 버튼을 눌렀을 때 남자 셔츠 추천을 --> 여자 코트 추천으로 바꾸기 { 글제목[0] = '여자코트 추천' 글제목변경(글제목); }}>글수정 이 코드의 경우 array/object 다룰 때 원본을 훼손시키는 경우이기 때문에 좋은 코드는 아니다. { let copy = [...글제목]; copy[0] = '여자 코트추천; 글제목변경(copy); }}>글수정 state변경 함수 특징 기존 state와 신규 state가 같을 경우 변경을 해주지 않는다. * [array/object 특징] array/object 담은 변수엔 화살표만 저장.. [react] 시작 및 기초문법 (1주차) 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. https://codingapple.com/course/react-basic/ 코딩애플님 강의 참고해서 공부했습니다. 만약 저작권 문제가 된다면 비공개처리 할테니 쪽지나 댓글 부탁드립니다. 첫번째로 nodejs 설치하기 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 1 . 설치 후 프로젝트 작성 할 폴더 하나 만들기 2. shift + 우클릭 후 powershell 열기 3. npx create-recat-app 앱이름 4. 터미널에 npm start 쓰기 nod.. [장고 django] 1. 앱 작성하기 https://docs.djangoproject.com/ko/4.0/intro/tutorial01/ 첫 번째 장고 앱 작성하기, part 1 | Django 문서 | Django Django The web framework for perfectionists with deadlines. Overview Download Documentation News Community Code Issues About ♥ Donate docs.djangoproject.com 공식문서와 인프런 이진석 강사님의 강의를 참고 하여 공부하였습니다. https://www.inflearn.com/course/%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EC%9E%A5%EA%B3%A0-%EC%9B%B9%EC%84%9C%EB%B9.. [HTML/CSS] 미니홈피 만들기 html/css 배운것을 토대로 간단한 미니홈피를 만들어보았다. https://zzuzzu0205.github.io/mini-homepage/home.html 2021 MINI HOMEPAGE TODAY 100 / TOTAL 24142 안녕하세요 코딩공부를 하고 있는 미래의 개발자입니다. 코딩을 공부하고 있지만 너무 어렵네요 ㅠㅠ 코딩중인 개발자 ＼(^0^)/ 파도타기 코뮤니티로 가기 인스타 가기 블로그 zzuzzu0205.github.io 처음 만들어본거라 소스코드가 매우 난잡하다 소스코드를 좀 더 가시적으로 표현하는 연습이 필요할 것 같다는 생각이 들었다. 위 홈피에 썻던 코드들은 깃허브에 따로 올려두었다. https://github.com/zzuzzu0205/mini-homepage GitHub -.. [HTML/CSS] 구글 클론 코딩 html과 css 공부 한 것을 기반으로 구글 웹페이지를 똑같이 따라해볼 것이다. #html 코드 Google 🔍 유튜브 네이버 블로그 코뮤니티 인스타그램 백준 #css 코드 .body{ background-color: white; } .title{ position: relative; top : 150px; font-size: 100px; text-align: center; font-family: 'Edu VIC WA NT Beginner' , cursive; } span:nth-child(1),span:nth-child(4){ color: blue; } span:nth-child(2),span:nth-child(6){ color: red; } span:nth-child(3){ color: yellow;.. [HTML/CSS] 8. Flex Flex flex는 레이아웃을 만들 수 있는 다양한 방법 중 가장 쉬운 방법이다. '남는 공간을 어떻게 차지할 것인지'라고 이해하면 된다. (공간의 배치) flexbox는 flex container와 flex item으로 구성된다. container는 item 들을 감싸는 역할이고 item은 각각의 요소이다. .container{ display:flex; } flex 레이아웃을 적용하기 위해선 컨테이너에 display: flex; 속성을 가장 먼저 설정해 줘야한다. 컨테이너에 display: flex;을 설정해야 아잉템에 다양한 flex 속성들을 이용할 수 있다. 배치 방향 설정하기 .container { flex-direction: row; flex-direction: column; flex-direc.. [HTML/CSS] 7. 도형만들기 css코드 div{ border-width: 10px; border-style: dashed; border-color: blue; width: 100px; height: 100px; } 출력결과 border를 이용하여 테두리를 만들 수 있다. border-width : 선 굵기 border-style : 선 모양 solid (실선) dotted (점선) dashed (대쉬선) double (이중실선) border-color : 선 색깔 css코드 div{ border: 10px double darkgreen; width : 100px; height: 100px; } 출력결과 css코드 div{ border-top : 10px solid deeppink; border-left : 10px dashed bl.. 이전 1 2 다음 목록 더보기
