본문 바로가기

전체 글

 (265)
강의 정리 참고 강의 정리 내용은 저작권상 비공개글로 작성하였습니다.
[Git] GitHub에 fork했던 파일 복사 후 기존 연결 끊기 Netlify 사이트에 프로젝트를 배포하려고 기존 fork를 통해 clone했던 파일을 복사 후 내 GitHub에 새로 올렸다. 그런데 기존 GitHub에서 연결되었던 remote로 계속 연결이 되는 오류가 발생했다. 아래 방법으로 진행하여 오류를 해결하였더니 기존 연결이 끊어지고 내 GitHub 주소로 연결될 수 있었다. 1. 기존에 git init을 했던 디렉토리라면 .git 이라는 숨겨진 파일이 있다. 이것을 삭제하여 기존 설정을 지워준다. rm -rf .git 2. 제대로 해제가 되었는지 확인한다. git status fatal: not a git repository (or any of the parent directories): .git 나오면 됨 3. 다시 git 설정 git init 4. g..
[React] Netlify 사이트 배포 방법 https://app.netlify.com/ Netlify App app.netlify.com 1. 깃허브 계정으로 접속 후 왼쪽 아래에 Sites 에서 Add new site - Import an existing project 클릭 2.GitHub 클릭 후, 배포하려는 프로젝트 선택하기 3. 빌드시 실행할 세팅 설정하기 => Deploy site 클릭 Branch to deploy : Github에 branch를 여러개 만들어놨다면, 배포하고자 하는 branch를 설정해줘야한다. Base directory : Github에 client, server 등 branch에 파일을 여러개 만들어놨을 때, Netlify가 어떤 것을 배포할지 알려주는 것이다. 만약 client에 프론트쪽..
[코드숨] 리액트 13기 - 8주차 주간 회고 CodeSoom 2022.11.28 - 2022.12.04 Redux Toolkit, Emotion 과제 : 레스토랑 앱 꾸미기 벌써 ..!!! 코드숨 리액트 과정이 끝이 났다. 교육을 듣는 동안 시간이 빠르게 지나간 것 같다. 이제 연말이라니..😂 오늘은 마지막 과제 PR을 올리는 최종 데이였다! 그동안 진행했던 레스토랑 앱을 꾸며 최종 결과물을 내는 것이 이번 과제였다. 강의에서 배운 Emotion으로 전체 style을 입히고 본문에 내용을 추가했다. 수정됨에 따라 다시 test 작성을 하는 중에 에러가 나서 이리저리 추가하다보니 시간이 금방 갔다. 그래도 style을 적용시킨 결과물을 보니 매우 뿌듯하였다.😊 이번 주엔 Redux Toolkit을 사용해보았는데 slice파일에 action creat..
[코드숨] 리액트 13기 -8강/2.리덕스 툴킷 Redux Toolkit, PureComponent Redux Toolkit Redux Toolkit 공식 문서 Redux Toolkit - 한글 번역 지금까지 redux를 이용해서 개발할때 복잡하고 코드가 많았다. 어플리케이션이 복잡해질수록 다양한 액션과 리듀서에 대한 관리가 복잡해지며 편의를 위한 패키지 추가가 많이 필요했다. immer, ducks pattern 등을 공식적으로 지원한다. redux-thunk가 비동기 처리를 위해 기본으로 포함됐다. ducks pattern: redux를 사용할 때 action과 reducer를 하나의 파일에서 사용하는 패턴. redux-toolkit은 이를 slice.js 란 파일에 모아둔다. 사용해보시면 편한게 딱 느껴짐..! redux의 악명 높았던 사용법이 정말 많이 개선된 걸 느낄 수 있다. 또한 입맛에 따..
[코드숨] 리액트 13기 -8강/1.Emotion(CSS-in-JS라이브러리) Emotion CSS-in-JS CSS-in-JS에 관해 알아야 할 모든 것 이전까진 CSS를 xxx.css 와 같이 별도의 문서로 관리했지만 요즘은 자바스크립트 코드에서 CSS를 작성합니다. CSS-in-JS라는 명칭은 방법론입니다. 실제로 작성을 돕는 라이브러리는 매우 많습니다. 대표적으로 styled-components와 emotion이 있습니다. 이번 교육에서는 emotion을 사용합니다. Emotion 공식 문서 1. 설치 npm i @emotion/react @emotion/styled 강의에선 npm i @emotion/core @emotion/styled 로 나왔으나 core => react 로 업데이트됨 2. 사용 1) import 해준다. import styled from '@emoti..
TDD - React와 TDD FEConf Korea - [A5] 프론트엔드에서 TDD가 가능하다는 것을 보여드립니다 영상에서 코딩 코드 GitHub - Go 리액트 관심사의 분리 리액트의 관심사때문에 리덕스를 쓴다 리액트의 관심사는? 상태 반영 상태반영:어떤 상태가 리액트 컴포넌트에 전달이 된다면 그 컴포넌트에 전달된 상태를 바탕으로 UI를 그리게 된다 -그렇기때문에 리액트는 상태관리에는 관심이 없음 -많아지면 코드가 복잡해지기때문에 관심사를 쪼개서 분류해주어야함(서로 의존성이 생기지 않아서 Test를 잘 작성할 수 있어 TDD가 원활) Component Container Component : 리덕스에서 상태를 가져와서 하위 컴포넌트(Presentational Components)에게 전달 Presentational Componen..
[코드숨] 리액트 13기 - 7주차 주간 회고 CodeSoom 2022.11.21 - 2022.11.27 로그인 과제 : 레스토랑 로그인 페이지 및 리뷰 작성 페이지 구현하기 HTTPie를 사용하여 데이터 조회 및 전송을 테스트하는 방법을 배웠다. 설치를 하는데 Windows는 Mac과 방법이 달라 꽤 애를 먹었다..😂 처음 Python을 설치하고 환경변수를 설정 후 CMD에서 HTTPie를 설치했는데 CMD에서 계속 Python만 출력되고 작동되지 않았다. 알고보니 환경변수 Path를 잘못 설정하여 일어난 오류라 폴더 위치를 다시 확인 후 설정하자 에러가 해결되었다. 그리고 다시 HTTPie를 설치하는데 중단되는 에러가 발생하였다. 환경변수를 다시 살펴보고, 설치방법이 잘못되었는지 다시 확인하는 등 다양한 방법을 시도 끝에 Python 버전을 낮은..

티스토리툴바