차곡차곡 개발노트 차곡차곡 개발노트

리액트를 배우기 전에 (급) 미니 세션을 통해 리액트가 어떻게 작동하는지 접했는데, 당시에는 리액트가 작동하는 방식은커녕 어떤 녀석인지도 모르는 백지상태에서 들었던지라 거의 반 이상을 이해할 수 없었다. 리액트를 처음 접한 지 3개월 정도 지났다. 이제 어디가서 "리액트를 할 줄 안다"라고 말해야 할 텐데.. 습관적으로 작성하던 CRA, 그 뒤에 어떤 작동 방식이 있는지 알고 사용하지 않으면 진정 할 줄 안다고 말할 수 없기에, 그때의 기억을 되살려 정리해본다. 총 세 개의 포스팅으로 나누어 정리해보려고 한다. 1. 리액트가 작동하는 방식 2. Webpack 들여다보기 3. Babel 들여다보기 리액트 React 페이스북에서 개발하고 관리하는 UI 라이브러리다. 여기서 UI 라이브러리라고 꼭 집어 이야기..

깃헙에 사용자가 자신의 프로필을 디자인하는 기능이 있다. 정말 간단하게 프로필을 꾸밀 수 있다고 하지만, 나는 시간적 여유가 생겨 좀 복잡하게 꾸며봤다. 해놓고보니 살짝 정신없는것 같기도 하지만... 프로필이 중요하겠나... 안에 들은 코드들이 아름다워야지... 프로필은 이정도로 만족하고, 내일부터는 안에 담긴 레파지토리를 어떻게하면 퍼블릭으로 전환해도 안부끄러울지 연구해야겠다...^^ 레파지토리 만들기 간단하다. 새로운 레파지토리를 내 이름과 동일하게 만들면 된다! 그리고 새로 만들때 README.md 파일을 생성해주자. 아, 당연히 public으로 만들어야한다! private하면 외부 프로필은 커녕, 나 조차도 구경할 수 없는 프로필이 되어버린다...(머쓱) korany-lee/korany-lee i..

Prop Drilling 문제를 겪다보니 리덕스의 필요성이 느껴져서 공부했다. Redux 왜 필요해요... App.js에서 Header 컴포넌트에 어떠한 상태를 넘겨주고 Header에서는 또 MyPage 컴포넌트에 넘겨주고... 그러다가 Content라는 컴포넌트에 Books 컴포넌트에서 Mypage의 컴포넌트 상태 중 어떤 것이 필요하다면... 이정도만 되어도 간단하게 타고 올라가서 다시 뚫고(?) 내려가겠지만.. 깊이가 깊어질수록 불편하고, 헷갈리고... 대체 state를 누가 관리할 것인가 상태관리를 보다 편리하게 해주는 리덕스 라이브러리 이야기는 여러번 들었지만, 필요성을 느끼지 못하고 있었다. 프로젝트를 진행하며 상태가 복잡해지니 그것이 무엇인지 경험이나 해보고 싶어져서 들여다 보았다. 리덕스의..

VS코드에 TS버전이 내가 global에 설치한 버전과 달라서 발생하는 이슈 //tsconfig.json "compilerOptions": { jsx: "react-jsx" } "react-jsx" 부분에 에러가 생겨 아래와 같은 문제가 발생한다. Argument for '--jsx' option must be: 'preserve', 'react-native', 'react' react-jsx를 react로 변경하면 잠시 에러가 잡히지만, 다시 vs코드를 실행하면 자동으로 react-jsx로 바뀌며 에러 발생 vs코드에서 typescript 버전 설정하기 먼저 내 로컬 pc 터미널에서 typescript가 설치되었는지 확인한다. npm list -g typescript empty라면 typescript를..

우분투를 6개월 정도 잘 이용하는 중! 기본 터미널 디자인 그리고 기능에 불만은 없었지만(오히려 익숙해져 잘 사용하고 있었다) 다른 동료분들의 터미널을 보면 종종 추천 기능도 나오는 것도 부러웠고, git이 내장되어 있는 부분이 특히나 마음에 들어서 설치하기로 마음먹었다. >> 설치한 후 특히 마음에 드는 부분이다!! >> 많은 branch를 관리해야 하는 프로젝트에 적합한 것 같다!! 설치하는 방법은 이미 여러 블로그에 나와있다.(내가 참고한 것처럼!) 하지만 설치하며 겪은 문제들을 직접 남겨놓고 싶었다. 설치 sudo apt-get install zsh bash에서 zsh로 변경 chsh -s/usr/bin/zsh > 터미널을 종료하고 다시 실행하라고 하는데, 그래도 적용이 안됐다면 컴퓨터를 다시 실..

팀프로젝트 하면서 git을 어떻게 사용했고, 또 나아가 더 효율적으로 관리할 수 있는지 정리해보려고 한다. git [명령어] [옵션] git 은 명령어 단위로 이루어진 간단한 프로그램이다. 사용방법은 git 으로 시작하고 띄어쓰기로 구분되는 각각의 명령어와 옵션을 작성한다. 다양한 명령어들이 있고, 이는 공식 홈페이지의 Documentation의 Reference를 통해 확인할 수 있다. 혹은 git 실행환경(git 설치된 후)에서 git [명령어] --h 로 다양한 속성값을 살필 수 있다.(help) 기본적으로 git 을 설치해야하고, 설치한 후에는 초기화를 통해 사용할 수 있는 환경을 만들어준다 git 공식 홈페이지를 이용하여 자신의 운영체제에 맞게 다운로드를 하고나서 git init 을 통해 초기화..

YouTube API로 이것저것 하다보니 타이틀에 받아온 데이터의 텍스트 상태가 이상했다. encoded text 라고 하던데 하도 BTS를 검색하다보니 ㅋㅋ ' (')이 문자열때문에 거슬려서.. 검색어를 계속 이스케이프로 해서 그런지 해결책이 마땅히 나오지 않던 중.. 스승님이 관련 스택오버플로우 게시글을 찾아주셨다. (감사합니다 엘리님!) How to fix Youtube API results title that are returned encoded I'm using youtube-search 1.1.4 to find videos. The problem is that i get the results titles encoded with & or ' instead of just & and ' an..

드림코딩 by 엘리 강의를 수강하고 남기는 회고입니다. 리액트 혼자서 공부하기..? 처음 리액트를 접했을 때 개념과 작동원리가 생소하게 느껴졌다. 공식문서를 가장 열심히 챙겨 보았지만, 주먹구구식으로 이곳저곳에서 지식을 쌓는 듯했다.. 그러다 마침 유튜브에서 엘리의 자바스크립트 역사 영상을 접하게 되었고 순식간에 관련 영상들까지 해치워버렸다. 명쾌하고 명료한 설명에 흩어져 있단 나의 JS 지식들이 정리되는 느낌을 받았다. (+엘리 특유의 밝고 긍정적인 톤 +명확한 딕션은 덤!) 그래.. 이 분이라면 나의 리액트 지식도 집합시켜주실 수 있을 거야! 하는 확신이 생겨 홀린 듯 강의를 수강하게 되었다. 그리고 완강한 지금, 그 선택에 매우 만족하고 있다. 가장 기본적인 리액트의 컨셉과 구조 이해부터, 활용법 ..