이나의 공부 블로그

하루가 정신없이 지나갔다 ...원래 중간중간 TIL 적는 편인데오늘은 적지도 못하고 정신차려보니 저녁시간이 다 되어간다.  1️⃣ 오전7시 반에 일어나기 성공ㅎㅎ나가서 15분 정도 걷뛰하고집와서 씻고 밥먹으니까 9시 되어서 발제 들었다. 오늘부터 최종 프로젝트 시작...!새로운 팀원분들과 만나서 인사하고 아이스브레이킹 및 노션 작성하기 했다ㅎㅎ팀원분들 다 좋은 것 같아서 마음이 놓여요 🥺 2️⃣ 오후최종 프로젝트에서는 MVP를 기획,디자인,개선해야하는데오늘은 팀원들과 어떤 도메인을 선정할지 자료조사를 했다.이전 프로젝트들은 다 일주일 이내로 해야했어서 마음이 급했는데최종 프로젝트는 한 달 넘는 시간이 있어서 하루를 그냥 리서치에 써도 된다는 게 너무 마음이 편했다.하지만 이번주까지는 디자인 집중반도 병..

1️⃣ 리액트 숙련 1주차Styled component 부터📌 CSS-in-JS1. 태그에 직접 스타일 속성을 지정해주기2. HTML처럼 className을 지정해서 css를 지정해주는 방법 이것보다 간단한 방법이 CSS-in-JS이다.자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식이다.기존의 방식에서는 style을 작성할 때 조건문 등의 로직을 적용할 수 없었는데이 방식을 사용하면 style 적용 시에도 조건문,변수 등 다양한 로직을 이용할 수 있다. CSS-in-JS를 사용하기 위해서는우선 터미널에 아래 명령을 입력하여 패키지를 설치한다.yarn add styled-components 그리고 VSCode에서 아래 플러그인을 설치해야한다. styled components(이하 sc..

1️⃣ 리액트 입문 2주차state의 불변성부터📌 불변성리액트 State를 이해하기 위해 꼭 필요한 개념인 불변성.불변성이란 메모리에 있는 값을 변경할 수 없는 것을 뜻한다.쉽게 풀어서 말하면 state를 직접 변경하지 않고 기존 것을 복사해서 새로운 값을 만들어 바꾸는 것이다. 리액트는 화면을 업데이트 할 때 이전 값과 새 값이 다르다는 것을 빠르게 인식해야한다.만약 state를 직접 바꿔버리면 리액트는 값이 바뀐 것을 인식하지 못해서화면을 업데이트하지 못하거나 오류가 발생할 수 있다. ❌ 잘못된 방법(불변성을 지키지 않은 경우)function App() { const [numbers, setNumbers] = useState([1, 2, 3]); const addNumber = () => { ..

어제 UI 집중반에서는 2시간 가량 피드백 시간을 가졌다.2시간 집중해서 듣고나니 넘 힘들어서 TIL 제대로 마무리 못한 채로 일단 내버리고 퇴실 하자마자 기절잠 자버림... 항상 내가 만든 UI는 뭔가 밋밋하고 단조롭다는 생각을 갖고 있었는데...피드백 시간에 튜터님께서 왜 그런지 짚어주셔서 고칠 점을 알게 되었다!!나는 예전부터 디자인할 때 강약 조절을 잘 못한다는 얘기를 많이 들었는데ㅠㅠ 아직도 그렇군...좀 더 과감하게 강약 조절을 해보도록 노력해야겠다!!!  오늘은 리액트 강의를 안들었다아직도 props와 state가 이해가 안가기 때문이다 ㅎㅎ여기 저기 다른 강의도 찾아보고튜터님께서 발제시간에 눈높이에 맞춰 가르쳐주신 걸 들었는데도 잘 모르겠다....전에 같은 팀이었던 분들이랑 잠시 얘기 나눴..

1️⃣ 리액트 입문 2주차props가 너무 어려워요2222📌 props 추출props 추출이란 컴포넌트가 받은 props 중에서 필요한 특정 값만 꺼내서 사용하는 것을 말한다.props 추출을 사용하며 코드의 가독성이 더 좋아지며 반복적으로 사용되는 proprs를 쉽게 재사용할 수 있다. 1. 구조 분해 할당과 props구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript의 표현식이다.function Greeting({ name }) { return 안녕, {name}!;}function App() { return ;} {name}을 사용하여 props.name이라고 길게 적지 않아도 객체에 접근 가능하다. 2.Default argument..

1️⃣ 리액트 입문 2주차props가 너무 어려워요 📌 propsProperties의 줄임말.props란 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터이다.= 컴포넌트 간의 정보 교류 방법 props의 특징1. props는 반드시 위에서 아래 방향, 단방향으로 흐른다.2. props는 읽기 전용이기 때문에 부모가 준 데이터를 자식이 마음대로 바꿀 수 없다.(부모 컴포넌트에서만 데이터를 정할 수 있다.) // 부모 컴포넌트function Parent() { return ( );}// 자식 컴포넌트function Child(props) { return 안녕, 나는 {props.name}이야!;} 위 코드는 부모가 자식에게 name 이라는 데이터를 보낸 것이다...

1️⃣ 리액트 입문 2주차리액트 개발환경 세팅부터 📌 개발환경 세팅리액트로 개발을 하기 위해 필수적으로 설치해야하는 것들!크롬 브라우저 - 우리가 만들 웹은 브라우저에서 구동되기 때문에 가장 많이 쓰는 크롬 설치VScode - 설명이 필요없는 코드 에디터 ㅎㅎgit - 작성한 코드를 저장 및 관리하고 다른 사람과 공유할 수 있는 툴Node - 자바스크립트 코드를 실행해주는 도구(LTS 버전 설치)yarn - 자바스크립트 패키지 관리자, 프로젝트 의존성을 관리하는 도구📌 리액트 프로젝트 생성 방법1️⃣ CRA한 줄의 명령어 입력으로 개발 필수요소를 자동 구성하는 방법 1) 프로젝트를 셋업할 경로로 이동한 후, 다음 CRA 명령어를 입력한다.yarn create react-app [원하는 프로젝트 이름]..

1️⃣ 리액트 입문reduce 메소드부터 단축평가까지 ~ 📌 배열 - reduce // reduceconst numbers = [1, 2, 3, 4, 5];const result = numbers.reduce(function (누적된값, 일반값) { return 누적된값 + 일반값;});console.log("result =>", result);// result => 15 메소드 이름은 reduce인데 왜 전체를 합한 값이 나오는 걸까 ...?강의만으로는 이해가 안돼용... 그래서 챗지피티한테 reduce가 뭐냐고 물어봄 reduce는 배열의 모든 값을 하나로 "줄여주는" 역할을 한다!   📌  배열 - sort// sortconst fruits = ["Banana", "Orange", "Ap..

1️⃣ 리액트 입문 변수의 종류부터 객체와 배열까지 📌 변수가 필요한 이유1) 데이터 저장 및 관리의 필요성변수는 프로그래밍에서 데이터를 저장하고, 그 값을 쉽게 관리하고 재사용할 수 있도록 해준다.사용자로부터 받은 입력을 처리하거나 계산 결과를 다시 사용해야할 때 효율적으로 할 수 있다. 2) 프로그램의 복잡성 관리변수가 없을 경우,직접 값을 기입해야하므로 코드의 복잡성이 증가하고 오류 가능성이 높아진다.프로그램의 확장성과 유지보수성이 떨어질 수 있다.변수를 사용하면 코드의 가독성이 높아지고, 수정하기에도 용이하다. 3) 재사용성 및 유지보수 향상변수를 통해 정의된 데이터 값을 여러 위치에서 재사용함으로써 코드의 재사용성을 높일 수 있다.변수를 사용함으로써 프로그램의 유연성,효율성,확장성을 동시에..

FACTS지난 일주일간 있었던 일, 내가 한 일 ☀️월요일디자인 플러스 주차 발제를 들었다.튜터님께서 개발공부 하는 방법과 수도 코드 작성 방법도 알려주셔서 유용했다!새로운 팀원분들과 만나서 인사하고 아이스브레이킹 했다!자바스크립스 문법 강의를 봤는데 강의 내용이 생각보다 어려웠다...그리고 취업 지원 세션을 들었다.취업 준비는 당장 지금부터! 매일 5분씩만 하라고 하신게 기억에 남는다.노션 양식도 공유해주셔서 유용하게 쓸 수 있을 것 같다.디자인 집중반도 처음으로 진행한 날이었다!!다시 보니 월요일에 뭘 되게 많이 했군... ☀️화요일자바스크립트 문법 강의를 마저 들었다...이 때까지는 기록 안하면서 들어서 내가 뭘 했는지 잘 모르겠네...앞으로 기록 안하는 짓은 하지 말도록 하자... 이렇게 다 까먹..