생각기록

전시간 요약 더보기 컴포넌트를 원하는곳에 코드 덩어리를 넣을 수 있는데 내용을 변경할 수 있는것이 props : props라는 객체로 부모 > 자식 데이터 전달 받는곳에서는 키값으로 적용 가능 props 구조분해할당 { props }.. 객체 배열형태 (백엔드 多) map 사용 > 배열에 있는 데이터를 그려준다. .map((el) => {}) 컴포넌트, html 코드를 그리게되던 가장 상위에 존재하는 곳에 key={값} 반드시 부여해야 한다. 부여하지 않으면, 에러 ( 콘솔 처리 해주면 좋습니다. ) index 키 값은.. 최후의 수단 배열/객체 전달 각각의 데이터타입에 맞게 받고 받을때 구조분해 할당해서 받아도된다. 안받으면, 코드 가독성이 떨어져서 중첩이 심해질때는 구조분해 할당으로 코드 가독성을 올..

인포라는 값이 바뀔때마다 info.map 부분을 재 랜더링 하고 싶어하는 것 등록버튼을 누르면, 배열값이 바뀌겟다라는 뜻입니다. 어떠한 변수를 바꾸고 변수에 따라서 바뀌려면.... state로 써야햇다. input에 onChange 사용 버튼의 온클릭과 같고, 함수를 쓴다. 온체인지의 이벤트를 걸겟다는 함수를 쓰게 되고, 함수의 첫번쨰 매개변수는 무조건 관련된 이벤트가 담긴 정보 객체가 있다. 보통 e라고 씁니다 e.target 해당 이벤트가 걸린 태그 선택 즉 해당 input 태그를 쓴것이다 값을 가져오려면 e.target.value setState(e.target.value) 이렇게 설정해주고 등록 버튼에서 해당 변수를 써서 info 배열을 바꿔야 한다. 사람 추가 배열.concat(인자) 원래 배열..

컴포넌트로 코드를 줄이자 템플릿 기능! Props 원하는 정보를 컴포넌트에게 전달하는 이벤트, 객체, 배열, 문자 다 전달 가능 리액트에서는 props(properties) 라는 것으로 데이터 전달이 손쉽게 가능합니다 부모 컴퍼넌트가 자식 컴퍼넌트를 부를때, 즉, 데이터 전달 할때 props라는 객체형태로 전달 객체 내부에 객체, 함수 배열 변수 등등 다 전달이 가능하단 소리! 간단한 MainHeader 라는 컴포넌트 만들기 매개변수 전달 부분에 { } 추가 부모로 부터 받아올 props 명을 적는다. import React from 'react' // props 인자 받은것을 그대로 출력하는 형태 // 부모가 자식 컴포넌트에게 보내는 구조 메인헤더를 App.js..에서 export default fun..

state 중요한 개념!! 특수한 기능을 하는 변수 상태를 의미 ㅡ> 즉, 리액트에서 컴포넌트에 대한 상태를 의미 사용 이유? > state가 변경되면 해당 컴포넌트는 다시 리랜더링되어 컴포넌트의 유동성 관리가 쉽다. 이게 왜 중요해? 리액트는 부드러운 화면전환 버츄얼 돔 사용해서 특정 컴포넌트만 랜더링해서 새로고침 없이 빠른 화면전환이 장점이라했는데 그것을 관리해주는 것이 이 state입니다. 오류 1 > eslint와 리엑트가 충돌 오류 해결 state React 관련 팁 설치하면, 리액트 관련 자동완성 기능 만들어준다. Ex1.js 파일 rfc라고 치면, 파일이름 기반으로 function이 생긴다. 파일명과 동일하게 컴포넌트 구성해준다. *리액트에서 컴포넌트를 구성할때 return요소는 하나의 부모..

MERN Stack 외국의 대세 프레임워크 MongoDB Express JS React JS Node JS 조금 수업할 몽고DB가 SQL보다 쉽다.. 걱정 노노 코드를 정리 확인 가능한 Formatting, Linging,Typescript세팅 더보기 코드 formatting이란 협업할 때, 같은 if문 이라도 사람마다 다르다. () { "devDependencies": - 빌드할때는 빠짐 - 개발할때 사용하는 부분 설치 셋팅 2. .prettierrc 파일 생성 후 안에 룰을 지정 해줍니다. vscode도 prettier를 사용할 수 있도록 셋팅 해줍니다. 3. .vscode 폴더를 만들고 그 안에 settings.json 파일을 만들어줍니다. * 프리티어가 먹힌다면 "[jav" 만 쳐도 자동완성이 될..

js https://velog.io/@kwb020312/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%98%B9%EC%95%8C%EC%9D%B4-2 function solution(babbling) { // 해당 풀이는 StarBlitz님의 풀이를 해석하였음을 미리 밝힙니다. let count = 0; // 연속되는 경우 let dup = ['ayaaya', 'yeye', 'woowoo', 'mama']; while (babbling.length) { let b = babbling.pop(); // 연속되는 발음은 패스 if (dup.some(v=>b.includes(v))) continue; // 가능한 발음을 모두 숫자로 바꾸어 b = b.r..

Welcome to JSX World 그림 요소와 기능 요소를 합치자! js 는 중괄호! { } return 소괄호 안에 html 요소를 넣으면 된다 html 요소 안에 {str} js.. 우리는 jsx 문법을 사용하지만 결과적으로 브라우저는 js코드를 받게 된다. 바벨이 jsx를 순수 js로 번역하여 브라우저에 전달한다. JSX 문법 기존 HMTL과 JS에서 쓰던 것과 달리 규칙을 지켜야한다. 번역기인 BABEL이 헷갈려 할 수 있어서! 1. Class? ㅡ> ClassName html인지 js인지 헷갈려 하기 때문에 규칙을 정했다. 리턴 내부에 html에 className이라고 해줘야 합니다. 2. 카멜표기 Kebob-case to camelCase 소문자 시작 , 연결부위 대문자! JSX에서는 반드..

추천하는 일 만들어보고싶다.... 구상을 미리 해두고, 프로젝트에 적용하면 좋을 것.. 코딩 테스트, 토이 프로젝트, 팀프로젝트를 병행하면 좋다. 토이 프로젝트란? 더보기 토이 프로젝트란 개발자가 남는 시간을 투자해 무언가를 만드는 작업이다. 거창한 프로젝트가 아니라 말 그대로 장난감(토이)을 갖고 놀 듯 흥미 위주의 프로젝트를 진행하는 것으로 생각하면 된다. 핵심은 업무나 수업을 듣는 시간을 제외하고 여유 시간을 활용해 소기의 목적을 달성하는 것이다. 이 과정에서 새로운 기술을 접하거나 시행착오를 겪으며 자연스럽게 개발 실력이 향상될 수 있다. 출처 : 코딩월드뉴스(https://www.codingworldnews.com) 그리고 코테는 빨리 하면 할 수록 좋은데... 코테 ... 즉 코딩테스트는 말을..