본문 바로가기

매일 해내는 개발102

[React] 리액트의 생명주기 https://react.vlpt.us/basic/25-lifecycle.html 25. LifeCycle Method · GitBook 25. LifeCycle Method LifeCycle Method 는 한국어로 "생명주기 메서드" 라고 부릅니다. 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 입니다. react.vlpt.us strict mode https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode 2022. 12. 8.
[React] 리액트로 todo리스트 만들기 컴포넌트: Todo, Button 추가기능: 가로스크롤 id를 Date.now()로 지정해 id 겹침현상 제거 완료된 모습 App.js import React, { useState } from 'react'; import './App.css'; import Todo from './components/Todo'; import CustomBtn from './components/CustomBtn'; function App() { const [todo, setTodo] = useState([ { id: Date.now(), title: 'todotest', contents: '리액트기초를 공부해봅시다.', }, { id: Date.now() + 1, title: 'todotest222', contents: '.. 2022. 12. 7.
[React] 리액트 기초 todo리스트 만들기 컴포넌트 분리X, 정리 안된 버전 import React, { useState } from 'react'; import './App.css'; function Todo(props) { return ( {props.title} {props.contents} props.handleDelete(props)}>삭제하기 props.handleDone(props.todo)}>완료하기 ); } function DoneTodo(props) { return ( {props.title} {props.contents} props.handleDelete(props)}>삭제하기 props.handleDoneCancel(props.doneTodo)}> 취소 ); } function App() { const [todo, setTo.. 2022. 12. 6.
[React] 리액트 기초 개념 컴포넌트/JSX/Props/State 리액트를 공부하는 첫 날이다! 기대된다. 1. 컴포넌트란? 재사용할수 있는 조립 블록. 화면에 나타나는 UI 요소라고 생각하면 이해하기 쉽다. 단순히 UI 역할 뿐만 아니라 부모로부터 받은 속성(props)이나 자신의 상태(state)에 따라 표현이 달라지고 다양한 기능을 수행한다. 리액트는 데이터와 UI 요소의 집합체라고 할 수 있는 컴포넌트를 이용하여 화면을 구성하게 된다. 2. JSX 객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능으로 리액트 프로젝트에서 사용된다. JSX는 가독성이 높고 작성하기도 쉬우며 XML과 유사하다는 점에서 중첩된 구조를 잘 나타낼 수 있다는 장점이 있다. *JSX에서 여러개의 요소를 표현할 경우 반드시 하나의 부모로 감싸야한다. 위와 같이 작.. 2022. 12. 5.
[WIL] 5주차 회고록 이번 한 주... 그 동안 쏟아놓은걸 보상받은 듯한 한 주였다. 금요일엔 공모전에서 상도 받고 사람들 앞에서 성과발표도 했고 태영이 부모님께서 소고기도 사주셨다. 돌아온 후엔 주말엔 미친듯이 잠만잤다. 시상식 날은 정신없었다. 8시에 가자마자 리허설하고 윤희언니한테 가서 머리 드라이 받고 이후에 바로 시상 리허설하고 점심먹고 시상하고 VIP들 앞에서 1분 스피치하고 인터뷰하고 또 인터뷰하고 성과발표하고... 오전 8시부터 6시까지 시간이 후루룩 하고 지나갔다. 그래도 좋은 성과를 얻어서 정말 다행이다. ICT멘토링 엑스포 개최…디지털 인재 육성 성과 공유 - 정보통신신문 [정보통신신문=서유덕기자] 첨단 정보통신기술(ICT) 산업을 이끌 유망 인재들의 산학협력 우수 성과를 공유하는 ‘2022 ICT멘토링 .. 2022. 12. 5.
[Develog] 2022년 11월 30일 오늘의 회고 오늘은 공부를 거의하지 못했다. 새로운 팀원들과 소개를 나누고 나니 체력이 다 빠져서 오전에 쉬기만하다가 공모전 대상들을 위한 스피치 교육을 들으러 한시에 출발했다. 난 대상 3팀 모두 불러서 발성법 같은 교육을 할 줄 알았는데 가보니 나 혼자뿐이었다. 알고보니 내 자료로 내가 발표하는 걸 들어보시면서 교정해주는 스피치 교육이었당... 완전 발표 준비 하나도 안하고 가서 너무 당황스러웠고... 대본 숙지도 안돼서 엉망이었다. 피드백을 받은 내용은 일반인 대상으로 하는 거면 내용을 좀 바꿔야 할 것 같고, 말 끝 흐리지 말고 아랫배 힘주기, 내가 이거 만든 사람이니까 당당하고 자신있게 전문가처럼 이야기하라고 하셨다. 금요일에 몇 명 앞에서 발표하는지 물어보니 200석 마련되어있다고 한다. 물론 꽉차진 않겠.. 2022. 11. 30.
[Develog] 11월 29일 회고록 11월 29일(화) 발제 및 원장님 강의 진행 데이터 타입에는 기본형과 참조형이 있다. 기본형과 참조형의 구분은 복제의 방식에 있다. 기본형은 값이 담긴 주소값을 바로 복제하고 참조형은 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제한다. 자바스크립트에서 변수는 데이터 그 자체이고 식별자는 변수명이다. 값을 바로 데이터에 대입하지 않고 주소를 복제하는 이유는 1) 이미 입력한 문자열을 수정해서 길어지게 돼 다른 데이터 영역을 침범하는 상황을 방지하기 위해 2) 똑같은 데이터를 여러번 저장해야 할 때 효율적이다. 2022. 11. 29.
[Develog] 기초 프로젝트 회고 오늘 프로젝트 칭찬을 많이 들어서 너무 기분이 좋았다! 프로젝트 회고 한 일 Firebase를 활용한 SPA 사이트 만들기 Git과 GitHub 협업 느낀점 성효진: 작은 에러 하나도 그냥 넘기지 않는 팀원들 덕분에 완성도 높은 프로젝트를 만들 수 있었습니다. 서로의 의견에 귀기울여준 팀원들에게 정말정말 감사합니다 👍 남마리나: 팀원분들이 잘 가르쳐주고 도와주셔서 부족하지만 끝까지 잘 따라갔다고 생각합니다! 이번 프로젝트가 제겐 잊지못할 갚진 경험입니다. 정말 감사합니다! 박진산: 뿌듯합니다! 미니프로젝트 때보다 더 많은 에러를 만나 두들겨 맞았습니다. 그만큼 성장한 것 같아요. 부족한 저를 채워준 팀원들에게도 고맙습니다! 이정은: 열정적인 팀원들과 손발이 잘 맞아서 프로젝트가 힘들지 않고 너무 즐거웠습.. 2022. 11. 28.
[Develog] 11월 4주차 이번주 로그 벌써 내일배움캠프를 시작한지 한달이 지났다. 두번째 프로젝트는 생각보다 순조로웠다. 첫번째로 똑똑한 팀장이 머릿 속에 뭘 해야할지를 다 알고 큰 그림을 그렸기 때문이고 두번째로 큰 그림을 바탕으로 팀원들이 제 역할을 충실히 했기 때문이라고 생각한다. 그리고 팀원들 간의 시너지 효과가 발생해서 나도 엄청 열정적으로 팀프로젝트에 임할 수 있었고 퀄리티를 높이기 위해 하나하나 신경쓰다보니 오류 하나 해결하는 데도 굉장히 큰 희열을 느꼈다. 11/18(금) 프로젝트 첫 날 정적페이지를 하나씩 분배해서 주말동안 먼저 구현했다. 11/21(월) 이 날 부터 본격적인 기능 구현을 진행했다. 류제천 튜터님의 코드와 강의를 토대로 복습하면서 진행하다보니 시간은 오래걸렸지만 코드의 흐름은 확실히 잡혀갔다. 11/22(화).. 2022. 11. 27.

티스토리툴바