728x90

[Front-end] 개발자 공부 108

[개발 공부 28일차] "그래서 Router, 왜 쓸까?" | 개인과제 시작

개인과제를 시작했다. 자꾸 과제만 하려 치면 부담감부터 느껴지는 나.. 아 ㅋㅋ 시작이 젤 어려운 거라고 ㅋㅋ... ㅋ... 그래서 바로 시작. 오늘은 Router 개념이 제대로 안 잡힌 나를 위해 Router 개념 특식을 준비했다. 아 ㅋㅋ 진수성찬 아니겠냐고 농담 그만하고 목차 적자면 다음과 같다. 아 그리고 Router 내용에 평소에 궁금했던 404 error 내용이 나오길래 이에 대해서 좀 더 알아보고 작성해보았다. 1. 개인과제 막혔던 부분들 (1) React 절대경로 안 됨 (2) 배경사진 안 들어감 2. Router (라우터) (1) 그건 알겠는데, React-Router는 '왜 사용'하는 걸까? (2) Router 종류 (3) 404(페이지를 찾을 수 없음) 오류 (4) Rea..

[개발 공부 27일차] useParams, useNavigate, Batch

아 분명 배웠는데 다시 보는 듯한 이 새로운 짜릿함... 이제 그만 느껴도 좋을 텐데.. 오늘은 헷갈린다기보단 내가 설명할 수 없겠는 개념과 기능 위주로 작성해보았다. 리마인드 + 개념을 정확히 아는 데에 도움이 되리라 생각한다. 1. React와 선언형 라이브러리? 2. 모르는 Hook 정리 (1) useHistory (2) useNavigate (3) useParams 3. 모르는 개념 정리 (1) 프레임워크와 라이브러리의 차이 (2) Batch | [자료구조] Stack, Queue 차이 4. 금일 소감 1. React와 선언형 라이브러리? 선언형 프로그래밍 = 추상적인 코드 [React rendering 특징] 실제 화면을 업데이트하는 게 아닌, 업데이트를 위한 과정이다. React는..

[개발 공부 26일차] 선언형 프로그래밍 | every(), some()

1. 선언형 프로그래밍: "보여주고 싶은 '결과'에만 집중하라" 2. [선언형 UI 라이브러리, React!] 선언형 코드 작성법과 장단점 3. 모르는 개념과 메서드 용도 정리 4. 금일 소감 1. 선언형 프로그래밍: "보여주고 싶은 '결과'에만 집중하라" 요즘 실력 있는 개발자의 역량 중 하나는 '코드를 얼마나 이해하기 쉽게 만드는가' 1) 선언형 프로그래밍 : 원하는 '결과'를 묘사하는 방식으로 코드를 작성하는 프로그래밍 패러다임 '데이터를 어떻게 조작해야 하는지'가 아니라 '원하는 데이터가 무엇인지'에 집중 ⇒ 전체적인 가독성과 추상화 수준을 높여 개발자가 문제의 본질에 집중할 수 있도록 도와줌! 재사용성이 높고 병렬 처리에서 유리함 2) 명령형 프로그래밍 : 코드가 '어떻게' 동작해야..

[개발 공부 25일차] 코드 리뷰 | Cookie, Cache, Heap, 일급객체

코드 리뷰 받은 내용과 이번 주에 공부하며 언급된 내용 중에 모르는 개념을 정리해보자. 일단 모르는 개념이 정말 많아서 얼마나 걸릴지 모르지만... 시작해보자 1. 코드 리뷰 (보완사항) 2. 모르는 개념 정리 1) Cookie, Cache, Session, Token, CDN 2) 일급객체 (first-class object) 3) architecture (아키텍처) 4) hoisting 5) polyfill 6) [메모리 구조] Heap, Stack의 차이 3. 금일 소감 1. 코드 리뷰 (보완사항) 1) 컴포넌트명: 직관적 & 용도에 따라 명확하게 작명 const Button = ({ clickAddButtonHandler }) => { return : Button 컴포넌트는 이름부터가..

[개발 공부 24일차] Closure, Execution Context와 Scope

챌린지 반 세션이 끝나고 할 일 하다가 이제서야 쓰는 TIL이다.. 일단 조금 피곤한 관계로 눈이 반쯤 풀려있는 상태다. 상태?.. 하루 종일 코딩 공부를 하다 보니 '상태'처럼 배운 내용 관련 단어나 표현만 보이면 바로 코딩 용어가 떠올라버린다. 방금도 '상태'라고 하면서 '헉.. state..?' 이러고 있는 나를 발견할 수 있었다. 아무튼,,, 오늘은 뭘 배웠는지 써보자. 공부하며 내가 생각하기에 기억해야 할 내용과 중요한 부분만 작성하며 정리해보려고 한다. 노답 삼형제는 특히, 좀 더 쉽게 접근하고 이해하기 위해 나만의 언어로 표현하며 작성해 보았다. 1. [React 숙련] 핵심 정리 1) React.memo 2) Virtual DOM 2. 이해하기 난해한 노답 삼형제 1) Exec..

[개발 공부 23일차] 비동기와 setState, 의존성 배열과 useEffect, useRef, useContext

오늘부로 React 숙련 주차가 시작되었다. 배속 없이 들으면 약 6시간 소요되는 강의지만 이해하며 듣고자 하면 2배속으로 들어도 12~15시간 정도 꼬박 걸리는 듯하다. 오늘은 절반 정도 들었다. 일단 지금까지 들은 내용 정리 및 가볍게 복습해두고 오늘 남은 시간에 다음 강의를 들을 생각이다. 1. 튜터님께 드린 질문 및 답변 1) 의존성 배열과 useEffect 2) 비동기 처리와 setState 2. React 숙련 핵심 요약 1) styled-component 2) useState 3) useEffect & 의존성 배열 4) useRef 5) useContext 3. 금일 소감 1. 튜터님께 드린 질문 및 답변 1) 의존성 배열과 useEffect 오늘은 강의 총 내용 중 절반 정도 ..

[개발 공부 22일차] "컴퓨팅적 사고 능력을 길러라"

오늘은 챌린지 반 아티클을 읽고 소감과 내용을 요약하는 시간을 가졌다. 그리고 자바스크립트 공부 및 개인 과제 특강을 하였다. 이 중에서 오늘은 아티클 과제 내용만 담아보려 한다. 1. 소감 2.《 컴퓨팅 사고와 개발 실력 늘리는 공부법》핵심 요약 ① 컴퓨터적으로 사고하는 개발자 되기 1) 문제를 데이터의 관점에서 인식하고 처리하는 것이 바로 컴퓨터적인 사고의 시작! 2) 추상화라고 하는 개념을 이해하고 잘 활용 3) [프로그래밍의 핵심 요소] 변수, 타입, 조건, 반복, 함수 4) 컴퓨팅적 사고력을 검증하는 것: 코딩 테스트! 5) 의식적으로 훈련하기! ② 개발, 학습 말고 훈련하기 1) 만들고 싶은 목표부터 정하자! 2) 추상화라고 하는 개념을 이해하고 잘 활용 3) 어떻게든 내 환경에서..

[개발 공부 21일차] React 입문 - 개인 과제 완료! 블록 요소와 인라인 요소

재밌지만 어려웠던 리액트 과제가 끝났다! 강의 내용에 대부분 답이 있어서 2/3 정도는 어렵지 않게 했지만 완료 버튼을 눌러서 Done이 있는 곳으로 컴포넌트를 보내줘야 하는 기능을 구현하는 게 정말 어려웠다. 식은 적었는데 어떻게 구현해야 할지 막막해하다가 어제 다른 동기 분이 특강 아닌 특강을 해주셔서 이해가 잘 되었고, 또 과제를 얼른 마칠 수 있었다. 1. [React 개인과제] 완성 1-1) 기능 구현 계획 1-2) 구현 문제 및 해결책 1-3) 블록 요소와 인라인 요소 1-4) npm start가 안 됨 && 해결책 2. 금일 소감 1. [React 개인과제] 완성 위 사진처럼 완료 버튼을 눌렀을 때 Done이 있는 위치로 컴포넌트를 보내줘야 한다. 이 부분이 너무 어려워서 정말 ..

[개발 공부 20일차] React 입문 청강 완료! & 챌린지 반 과제 완료

휴... 바로 드가자 1. [React 기초] 완강 및 개념 명확히 1-1) 핵심 요약 1-2) 질문 및 답변 2. [article] React로 사고하기 3. 금일 소감 1. [React 기초] 완강 및 개념 명확히 1-1) 핵심 요약 default props : 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기값 ↓ 유사 Default Argument : 매개 변수가 지정되지 않았을 때, 자동으로 지정해줄 값 정해줌 hook : 기능 state : React에서 이벤트에 의해 변경되는 동적인 값 UI 바꾸려고 씀. 즉, 렌더링 다시 하려고 예문 작성 중에 에러 원인 알려주는 확장 프로그램이 구조분해할당을 구조파괴선언이라고 알려준다 ㅋㅋㅋㅋㅋㅋㅋ 아니 구조 파괴 선언이라니 이 친구..

[개발 공부 19일차] React 개발환경 세팅 & 개념

휴 요즘 특강과 수준별 분반 수업이 함께 진행돼서 주된 강의를 챙기기가 좀 어려워졌다. ← 요건 내가 부족한 탓이긴 하다. 계속해서, 무수하게 쏟아지는 정보를 좀 정리하고자 앞으로 블로그 포스팅에는 내가 모르는 개념, 알아둬야 하는 핵심 등을 위주로 기술할 예정이다. 다소 짧게 적는 날이 있더라도 지엽적인 내용 빼고 액기스만 담으려 한다. 그럼 바로 드가자 1. Node.js 설치 및 npm과 yarn 오류 2. [특강] VS code 꿀팁: 확장 프로그램, 단축키 3. [React 입문] 기억해야 내용 4. 금일 소감 1. Node.js 설치 및 npm과 yarn 오류 에러 코드는 위와 같이 떴다. 어제부터 Node.js 설치 버전이 16으로 설치되지 않았다. 일단 엄청 급한 건 아니니 강..

728x90