전체 글80 [WIL] Week 4 - 230630 ~ 0706 주특기 2주차 회고 Fact : 이번주 있었던 일, 내가 한 일 Feeling : 나의 감정적인 반응, 느낌 Finding : 그 상황으로부터 내가 배운 것, 얻은 것 Future : 배운 것을 미래에 어떻게 적용할 것인가 Fact 0630(금) - 리액트 숙련주차 redux 까지 수강 - JS 스터디) 발표 준비 0701(토) - 리액트 숙련주차 React Router Dom 까지 수강 - JS 스터디) 4. 객체 : 기본 1-3 발표 0703(월) - CS 스터디 발제 - 주특기 Lv.2 구현 - JS 스터디) 개인 공부 0704(화) - CS 스터디) 자료구조 개념공부 - 주특기 Lv.2 과제 구현 - JS 스터디) 발표 준비 0705(수) - CS 스터디) 자료구조 개념공부 - 주특기 Lv.2 과제 제출 - 주특기 .. 2023. 7. 10. [WIL] Week 3 - 230623 ~ 29 주특기 1주차 회고 Fact : 이번주 있었던 일, 내가 한 일 Feeling : 나의 감정적인 반응, 느낌 Finding : 그 상황으로부터 내가 배운 것, 얻은 것 Future : 배운 것을 미래에 어떻게 적용할 것인가 Fact 0623(금) - 주특기 주차 발제 - 리액트 입문 강의 수강 - 개인 스터디) 클론코딩 완강 0624(토) - 리액트 입문 강의 완강 - Lv.1 과제 시작 - 개인 스터디) 2주차 발제 JS 딥다이브 계획 수립 0626(월) - Lv.1 과제 제출 - 개인 스터디) 스터디 발표 준비 0627(화) - Lv.1 과제 페어 리뷰, 페어 제출 - 개인 스터디) 스터디 발표 준비 0628(수) - 실전 프로젝트 팀빌딩, CS 스터디 발제 - 스터디 발표 준비 0629(목) - 주특기 1주차 테스트 .. 2023. 7. 10. [WIL] Week 2 - 230616 ~ 22 프로그래밍 기초 2주차 회고 Fact : 이번주 있었던 일, 내가 한 일 Feeling : 나의 감정적인 반응, 느낌 Finding : 그 상황으로부터 내가 배운 것, 얻은 것 Future : 배운 것을 미래에 어떻게 적용할 것인가 Fact 0616(금) - 프로그래밍 기초 2주차 발제 - 1차 형성평가 풀기 - 페어프로그래밍으로 알고리즘 문제 풀기 0617(토) - 알고리즘 마라톤 끝까지 풀기 0619(월) - 알고리즘 챌린지 문제 풀기 - 개인 스터디 발제 0620(화) - 알고리즘 풀었던 문제 복습 0621(수) - 알고리즘 테스트 대비 0622(목) - 프로그래밍 기초 2 알고리즘 테스트 3F 구분 X - 날짜로는 벌써 한 달이, 심지어 임시저장을 한 지도 몇 주가 다 되어가는 프기 2주차 회고라 기억이 정말 완전치 않아서,.. 2023. 7. 10. [TIL] 230707 - CS 스터디 질문 제출, Lv.3 과제 진행, JS스터디 오늘 한 일 - CS 스터디 질문 제출 - Lv.3 과제 진행 - JS 스터디 - CS 스터디 알고리즘 풀이 - 깃허브 레포 합치기 CS 스터디 질문 키워드 1 : 자료의 표현 1. 질문 : ASCII와 유니코드&UTF-8에 대해 서술해주세요. 아스키코드 (ASCII)는 영문 알파벳과 일부 특수문자를 표현하기 위한 7비트 인코딩 방식입니다. 유니코드는 전 세계 모든 문자를 표현하기 위한 코드 체계입니다. UTF-8은 유니코드를 인코딩하는 방식 중 하나이며, 아스키 코드와 유니코드 문자를 호환 하면서 효율적인 인코딩을 제공합니다. 1-1. 꼬리질문 : 위의 인코딩 방식이 사용 되는 예시에 대해 설명해주세요. 아스키 코드는 이메일 주소와 파일명에서 사용 되고, 유니코드는 멀티언어 문서 및 웹 페이지에서 사용.. 2023. 7. 8. [TIL] 230706 - 주특기 2주차 테스트, Lv.2 과제 페어 리뷰, JS 스터디 오늘 한 일 - 주특기 2주차 테스트 - Lv.2 과제 페어 리뷰 - JS 스터디 주특기 2주차 테스트 제출 답안 1. 추가하기 버튼을 클릭해도 추가한 아이템이 화면에 표시되지 않음. - List 컴포넌트에서는 redex로 생성한 전역 데이터 todos를 useSelector로 가져와서 보여주고 있지만, Form 컴포넌트에서 addTodo라는 action creator를 import했음에도 사용하지 않아 redux의 데이터를 정상적으로 추가시켜주지 않고 있습니다. - 따라서 dispatch변수를 선언해 useDispatch()를 선언하여 사용해주고, 제출 버튼을 클릭했을 때 dispatch로 addTodo({...todo, id})를 실행하여 state를 변경할 수 있도록 합니다. const dispat.. 2023. 7. 8. [TIL] 230703~0705 - CS스터디, 주특기 Lv.2 과제 제출, 스터디 한 일 230703 - CS 스터디 발제 - 주특기 Lv.2 구현 - 스터디 개인 공부 230704 - CS 스터디 자료구조 개념공부 - 주특기 Lv.2 과제 구현 - 스터디 발표 준비 (+ 모던 자스 딥다이브 드디어 샀다... 🐕 비 싸 오늘 왔음) 230705 - CS 스터디 자료구조 개념공부 - 주특기 Lv.2 과제 제출 - 주특기 Lv.3 찍먹 시작 - 스터디 발표 준비 더보기 이번주는 집중력이랑 의욕이 레전드로 바닥나서 놀고 자고 ,,, 정말 최소한의 요구사항만 했던 나날들,,, 너무 한 게 없어서 많아보이라고 합쳐두기 ! ^^ WIL 적으면 아주 볼만할듯 싶다 세상에 이렇게나 얼레벌레인 인간이 있을까 미뤄놓은 덕분에 할 게 산더미군요 여기다 대충 순서대로 적어두고 가겠습니다 여기서 오늘은 7/.. 2023. 7. 6. [TIL] 230701 - 리액트 숙련주차 수강, 스터디 발표 오늘 한 일 - 리액트 숙련주차 React Router Dom 까지 수강 - vscode 리액트 익스텐션 설치 - 스터디 발표 리액트 관련 vscode 익스텐션 1. Auto Import - ES6, TS, JSX, TSX - 사용 가능한 모든 가져오기에 대한 코드 작업 및 코드 완료를 자동으로 찾아 구문 분석하고 제공합니다. (익스텐션 공식설명) - 자동으로 컴포넌트나 파일의 import 해주는 익스텐션 - 맨날 임포트 치기 귀찮았는데 짱짱 편함 2. Reactjs code snippets - 형식 자동 입력 스니펫 - 함수형 컴포넌트 만들 때 : rfc - 화살표형 컴포넌트 만들 때 : rsc - 다른 것도 많던데 참고해서 적절히 사용하면 좋을 듯 https://breathtaking-life.tis.. 2023. 7. 6. [리액트 숙련주차] 2-19~20 React Router Dom (1), (2) 1. React Router Dom 이란? - 페이지를 구현할 수 있게 해주는 패키지 - routing 2. React Router Dom 설치 yarn add react-router-dom 3. React Router Dom 사용하기 1. 페이지 컴포넌트 작성 - src 폴더에 pages 폴더를 만들고, 내부에 여러 페이지가 될 컴포넌트 파일을 만든다. 2. Router.js 파일 구현 - 브라우저에 url을 입력하고 이동했을 때 원하는 페이지 컴포넌트로 이동하게끔 만들어주기 -> 즉 url 1개당 페이지 컴포넌트를 매칭해주는 것 Route - src 폴더에 shared 폴더를 생성하고, Router.js 파일을 생성한다. import React from "react"; import { BrowserR.. 2023. 7. 1. [TIL] 230629 - 주특기 1주차 테스트, 리액트 숙련주차 수강, 스터디 개인공부 오늘 한 일 - 주특기 1주차 테스트 - 리액트 숙련주차 2-10 까지 수강 - 스터디 결석 개인공부 2023.06.29 - [이노베이션 캠프/[스파 2023.06.29 - [이노베이션 캠프/[스파르타코딩클럽] 강의 정리] - [리액트 숙련주차] 2-10 Lifecycle 르타코딩클럽] 강의 정리] - [리액트 숙련주차] 2-3~9 React Hooks 2023. 6. 30. [리액트 숙련주차] 2-12~18 Redux 2-12 Redux 소개 1. 리덕스가 필요한 이유 - 리덕스란? 상태 관리 라이브러리 - useState의 불편함 : prop-driling - state를 공유하고자 할 때, 부모 관계가 아니여도 되고 중간 컴포넌트를 거치지 않아도 됨 - 자식에서 만든 state를 부모에서도 사용할 수 있게 해 줌 => 즉, 중앙 데이터 관리소 (context API vs Redux context는 상위 컴포넌트의 값 하나만 바뀌어도 하위가 모두 렌더링되어야 하는 단점 有) 2. Global state, Local state - Local state 지역 상태란? 컴포넌트에서 useState를 이용해서 생성한 state - Global state 전역 상태란? 중앙화 된 특별한 곳에서 생성됨. 중앙 state 관리소.. 2023. 6. 30. [리액트 숙련주차] 2-11 DOM과 Virtual DOM 2-11 DOM과 Virtual DOM 1. 가상돔이란? - 리액트나 뷰는 가상돔을 사용해서 원하는 화면을 브라우저에 그려줌 - 자체적으로 효율적인 알고리즘을 사용하여 그려주기 때문에 속도가 어마어마함 2. DOM (Document Object Model) - 브라우저는 수많은 컴포넌트로 구성되어있음 -> 문서(document) - 페이지를 이루는 컴포넌트를 엘리먼트(element)라고 함 => DOM은 엘리먼트를 tree형태(DOM tree)로 표현한 것 - 트리의 요소 하나하나를 노드라고 부르고, 해당 노드에 접근과 제어할 수 있는 API를 제공함 - API : HTML요소에 접근해서 수정할 수 있는 함수 // id가 demo인 녀석을 찾아, 'Hello World!'를 대입해줘. document.g.. 2023. 6. 30. [리액트 숙련주차] 2-10 Lifecycle 2-10 Lifecycle 1. 생명주기란? [Mount] -> [Update] -> [Unmount] - 컴포넌트 중심 라이브러리의 집합체 - 리액트 컴포넌트에는 각각 생명주기가 존재하고 각 생명주기에 맞는 메서드들이 존재 - 클래스형 컴포넌트에서 적용했었던 메서드들을 많이 이야기하기 때문에 많이 시간 할애 X 2. 생명주기별 메서드 1. Mount : 컴포넌트가 생성될 때 constructor 생성자 함수 컴포넌트가 맨 처음 만들어질 때 호출 getDerivedStateFromProps 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할 마운트 될 때, 업데이트(리렌더링) 될 때도 호출 render 최초 mount가 준비완료 되면 호출되는, 렌더링하는 메서드 컴포넌트를 D.. 2023. 6. 29. 이전 1 2 3 4 5 6 7 다음
