본문 바로가기

분류 전체보기102

코드스테이츠 프론트엔드 부트캠프 Day 30 1. 오늘 배운 것: 리액트 기초 블로깅, 깊은 복사와 얕은 복사, 토이프로젝트 와이어프레임 2. 어려웠던 점: 리액트에서 map 돌릴 때 id 넣어주는 걸 자꾸 까먹... 얕은 복사로 state 업데이트 시 리렌더링 X / 토이프로젝트에서 깃헙으로 협업 중 머지 충돌, 반응형 웹 만들기에서 막혔음 / 호버 시 뒤집는 기능도 막혔음 3. 극복/해결하기 위해 한 일: 리액트는 줌 세션에서 듣고 이해완! / 깃헙 문제는 1시간 넘게 매달려서 계속 구글링하고 시도해보았으나 안돼서 밀고 새로 클론 받기로... 그리고 깃헙에서 오류 없이 협업하기 위해 필요한 세팅이나 기본 원칙들을 다같이 주말에 공부해보기로 했음 / 반응형 웹 만드는 법도 구글링해서 주말에 코드 짜오기로 함 / 호버 시 뒤집는 기능은 레퍼런스 찾.. 2022. 12. 1.
리액트 02 리액트 Intro (JSX, 리액트 컴포넌트) 1. 현재의 무드: 어제 과제를 일찍 끝내서 오늘 리액트 기초를 다시 복습하고, 블로깅하고 있다! 공부할 시간이 널널해서 기분이 아주 구웃 ㅎㅁㅎ 계속 영상만 보면서 리액트를 학습해서, 오늘은 공식 문서를 찬찬히 읽어보며 리액트가 돌아가는 원리에 대해 더 학습해볼것이다. 2. 오늘 학습한 내용 중 키워드: 리액트, JSX, 컴포넌트 3. 오늘 학습한 내용 요약 드디어 리액트 라이브러리를 배우기 시작했다. 오늘의 학습 목표 1. 리액트의 3가지 특징 이해하고, 설명하기 2. JSX가 왜 명시적인지 이해하고, 작성하는 방법 알기 3. 리액트 컴포넌트의 필요성에 대해 이해하고, 설명하기 리액트: 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리. 선언형 컴포넌트 기반 범용성 이 세가지 특징 덕분에, 리액.. 2022. 11. 30.
코드스테이츠 프론트엔드 부트캠프 Day 29 1. 오늘 배운 것: 리액트 props, state / useState hook / 이벤트 처리 2. 어려웠던 점: useState hook의 작동 원리와 props 를 부모컴포넌트로부터 받아오는 것이 개념 부분을 학습할때는 대략적으로 이해가 되었지만, 막상 과제에서 적용해 코드를 작성하는 것이 막막하게 느껴졌다. 3. 극복/해결하기 위해 한 일: 어느 정도 고민해본 후, 페어분과 함께 해결함. 4. 피드백: 혼자서 고민해보고 구글링해보는 시간을 더 늘릴 것. 영상으로 듣는 설명이 더 이해가 쉬워서 거기에 치중하다보니, 리액트 공부하면서는 공식 문서나 글을 통해 배우는 시간이 아예 없어졌다. 내일은 공식 문서도 좀 뜯어보고, 리액트의 기본 원리들에 대해 더 면밀히 공부해보면서 그동안 배운 것들 블로깅하는.. 2022. 11. 30.
리액트 01 Router 활용 연습_계산기 목업 1. 현재의 무드: 이전에 만들었던 계산기 목업이 웹 페이지 테마로 되어있어서, 그걸 오늘 배운 리액트 라우터를 활용해 연결해보았음! 생각보다 수월하게 되었고, 구현을 원하는 페이지를 직접 만들어가는 과정이 간단하지만 재미있었다. 2. 오늘 학습한 내용 중 키워드: 리액트 라우터 3. 오늘 학습한 내용 요약 구현한 페이지 이 페이지는 section 1 진행 당시 제일 처음으로 진행한 과제였다. 여러 CSS 효과를 주고 계산기 목업을 구현했었다. 오늘 배운 리액트 라우터로 이 첫 랜딩 페이지로 두 페이지를 SPA로 구현하고자 했다. 그래서 react-create-app 으로 불러낸 파일들에 이 네가지 파일을 더해줬음! calculatorPage는 계산기 나오는 페이지, firstPage는 이번에 추가해준 .. 2022. 11. 28.