이 날은 React에서 event, ref에 대해 배웠다. 제대로 이해된 부분도 있고 그렇지 못한 부분도 있어서, 블로그에 정리하면서 완전한 내 것으로 소화시키려고 한다.React - Event Handling이벤트 핸들링(Event Handling)은 요소에 특정 동작이 실행되도록 하는 것을 의미한다. HTML에서는 속성으로 함수를 연결해서 사용했었는데, React에서 이벤트 핸들링을 사용하려면 아래의 특징들을 주의해야 한다.속성명을 카멜 케이스(camelCase)로 작성한다.JSX 문법으로 함수 이름만 불러오면 React가 알아서 찾아와서 실행시킨다. (소괄호 입력 금지)input, btn 등 기본 DOM 요소에만 설정할 수 있다. 컴포넌트에 이벤트를 걸 수는 없지만, props를 구조분해하여 정의를..

최근 SeSAC 교육과정 중에 React를 배우고 있는데, 다수의 객체로 이루어진 배열 데이터를 다루는 부분이 조금 복잡해서 따로 포스팅을 하게 됐다. 일단 수업 시간에 가장 먼저 실험해봤던 예제는 각종 상품에 대한 정보가 담겨있는 객체들로 이루어진 배열 데이터였는데, 코드를 살펴보자.// prodItem.jsxexport default function ProdItem({ prodData }) { return ( 제품명: {prodData.name} 가격: {prodData.price}원 );}ProdItem은 상품을 하나씩 보여줄 함수 컴포넌트이고, 인자로 들어가는 props는 구조분해할당된 prodData.return 내부에 부모 태그에서 key 속성으로 상품의 i..

오늘은 React의 State에 대해서 배웠다. State라는 것의 개념 자체는 그렇게 어렵지 않았는데, 수업 끝나기 직전에 작성한 예시는 살짝 복잡한 코드였어서 이해하는데 시간이 조금 많이 걸렸다. 아직 배우는 단계니까 그럴 수도 있다고 긍정적으로 생각해야 하는데, 코드 하나 작성하려면 생각을 너무 오랫동안 해야하니까 자신감이 약간 떨어졌다.😢이전 2개의 파트는 그렇게 어렵지도 않았고, 예전에 공부했던 것도 있어서 비교적 수월했지만, 이번 파트는 한번도 접해보지 않은걸 이제 하나씩 배우기 시작했으니까, 차근차근 천천히 잘 따라가보자..!React - StateState는 유동적인 데이터를 다루기 위한 개체로서, '상태' 또는 '상태관리'라고 한다.계속 변화하는 특정 상태에 따라 다르게 동작하여, st..

오늘은 React의 JSX, props에 대해서 배웠다. 리더님의 설명을 듣고 직접 코드를 작성해보면서 분명히 알 것 같은데 약간 헤맸어서, 블로그에 학습내용을 정리하면서 개념을 확실히 기억하려고 한다.JSX (JavaScript + XML)자바스크립트 확장 문법. Babel을 이용해 일반 JS 코드로 변환해준다.JSX의 기본적인 사용법이자 특징 5가지가 있는데,export default function FunctionComponent() { return( 함수형 컴포넌트 사용하기 );};1. HTML 태그는 반드시 단 하나의 부모 요소가 전체를 감싸는 형태로, return 키워드 소괄호 내부에 작성한다.만약 반환할 태그가 하나인 경우에는 소괄호 필요없음.→ virtual DO..

오늘은 지난 시간이 끝나기 전에 설치한 node.js를 이용하여 본격적으로 React를 다루기 시작했다. 직접 사용해보니 쉬운 것 같으면서도 만만하지는 않은 것 같아서 걱정스럽지만, 그럴수록 더 치열하게 연구하고 실험해봐야지!Module 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각. 또는 기능 단위로 모아둔 함수/변수.모듈이 성립하려면 자신만의 파일 스코프를 가질 수 있어야 하며, 이름은 PascalCase로 작성해야 한다.💡 여기서 잠깐!module에 대해서 기록하기 전에, 자바스크립트의 성장과정부터 알아야 한다.ES5 까지를 'common JS'라고 부르는데 이전에 사용되던 자바스크립트 표준 버전이고,ES6 (ECMAScript version6)가 2015년에 출시된 자바스크립트..

이날부터 드디어 전체 교육과정의 세번째 파트가 시작되었다. 이번 파트에서 다루는 내용은 나도 처음 배우는거고, 그동안 팀플 진행하느라 두번째 파트에서 배운 내용도 많이 까먹어서 블로그에 정리하면서 학습내용을 제대로 내 것으로 만들어야겠다.전개구문 (Spread)반복 가능한 (큰 의미의) 객체에 사용하는 문법으로, 객체의 요소에 접근하여 요소들을 꺼내 하나씩 늘어놓는 것.배열, 유사 배열, 문자열에 사용할 수 있고, 연산자로 ...을 사용한다./* 1. 배열의 전개구문 */const lunchMenu = ['국밥', '치킨마요', '파스타', '돈까스'];const dinnerMenu = ['라면', '볶음밥', '피자', '햄버거'];// 연산이 필요하지 않을때 전개연산자로 요소에 접근하기console...

이번주는 2차 프로젝트 마무리와 발표가 있었다. 프로젝트의 완성도를 끌어올리는데 집중하느라 매일 어떤 작업을 했는지 기록해두지 않아서, 지난 일주일의 기록을 최대한 생각나는대로 적어보려고 한다.일단 지난 주말에는 회원가입 페이지의 JS 코딩을 거의 완료했고, 미디어쿼리로 화면을 줄였을 때 아이디 '중복확인' 버튼 때문에 레이아웃이 깨지는게 보기 싫어서 과감하게 버튼을 삭제하고 input에 입력되는 값을 실시간으로 받아서 검증하도록 디자인을 변경했다. 회원가입 페이지에서 해야하는 JS가 많아서, 로그인 JS는 일요일 오후에야 겨우 손을 댔던 것 같다.😂25일 월요일 - Day 35✍ 팀 편성이 발표되고 팀장을 선정하라고 했을 때, 나는 JS 실력이 부족한데다 1차 팀플에서 팀장을 해봤기 때문에 팀원들에게..

현재 SeSAC 교육과정 2차 팀 프로젝트의 마무리 단계여서, 나중에 다시 코드를 봤을 때 어떻게 했었는지 까먹을까봐 해당 프로젝트에서 사용했던 기술들을 정리해보았다.✍ 아직 실력이 부족해서 내가 맞게 설명하고 있는건지는 모르겠지만, 내가 아는 선에서 최대한 쉽게 설명해보려고 한다.※ 사용기술 - HTML, CSS, JS, Bootstrap, Figma, Netlify 등※ 2차 프로젝트 github repo - https://github.com/eun1230/sessac_B_teamproject/아이디와 비번 확인 및 유효성검사로그인을 할 때, 아이디와 비밀번호를 입력하면 길이와 형식이 맞는지 확인하고, 등록된 아이디와 비번이 일치하는지 확인한다. 아이디와 비번이 모두 확인되어야만 로그인 버튼을 클릭했..

현재 SeSAC 교육과정 2차 팀 프로젝트의 마무리 단계여서, 나중에 다시 코드를 봤을 때 어떻게 했었는지 까먹을까봐 해당 프로젝트에서 사용했던 기술들을 정리해보았다.✍ 아직 실력이 부족해서 내가 맞게 설명하고 있는건지는 모르겠지만, 내가 아는 선에서 최대한 쉽게 설명해보려고 한다.※ 사용기술 - HTML, CSS, JS, Bootstrap, Figma, Netlify 등※ 2차 프로젝트 github repo - https://github.com/eun1230/sessac_B_teamproject/본론으로 들어가기에 앞서, 내가 담당하는 페이지는 로그인과 회원가입인데, 이러한 페이지들은 제작 과정에서 '유효성검사' 기능이 아주 중요하다.유효성검사(Validation) - 사용자가 입력한 데이터가 서버로 ..

지난주부터 2차 프로젝트가 시작되어, 이번주는 기획을 마무리하고 각자 담당하는 페이지의 코드를 작성하느라 바빴다. 프로젝트 기간이기 때문에, 지난 1차 프로젝트 당시와 마찬가지로 일주일의 기록을 한 번에 작성하려고 한다.✍우선 주말(16~17일)에는 팀원 모두가 온라인(카톡)에서 모여서 회의를 진행했다.유저플로우를 미리 작성해봐야 최종적으로 어떤 페이지들이 필요할지 알 수 있을 것 같아서 내가 작성해보려고 했는데, 사이트의 전체적인 구성이 확정되지 않은 상태라 만들 수 없었다. 그래서 팀원들과 우리 사이트의 정체성이 무엇인지 생각하면서 구성을 논의했고, 1차적으로 확정하여 유저플로우를 만들어서 공유했다. 내비게이션 바의 메뉴 구성과 미디어쿼리 사이즈까지 온라인 회의를 통해 결정했다.그리고 개인적으로는 내..