Last Record(Web Develop)

빌드 : 소스 코드 파일을 실행할 수 있는 독립 소프트웨어 가공물로 변환하는 과정, 혹은 그에 대한 결과물 1. 소스코드를 작성하고 컴파일러를 통해 컴파일해서 목적 파일을 만든다. - 소스 코드(원시 코드) : 컴퓨터 프로그램을 사람이 읽을 수 있는 프로그래밍 언어로 기술한 텍스트 파일 - 컴파일 : 작성된 소스코드를 컴퓨터가 알아들을 수 있는 기계어로 번역하는 것 - 목적 코드 : 컴파일러가 소스코드 파일을 컴파일해서 생성하는 파일; 기계어로의 번역본 2. 단일 혹은 여러개의 목적파일을 묶어 커널과 연결해서 실행파일을 만든다. - 링크 : 목적 코드(목적 파일)을 가져와 단일 실행 프로그램으로 병합하는 과정 - 커널 : 응용 소프트웨어를 컴퓨터 하드웨어에 연결하는 핵심. 보안, 자원 관리, 추상화(같은..

0. 사전 준비 구글 크롬 설치 IDE 설치 git 설치 Node 설치 yarn 설치(npm 그냥 써도 됨. 말리지 않음) 1. 리액트 프로젝트 생성(Create-react-app) 터미널로 내가 프로젝트를 만들기 원하는 폴더로 이동, 혹은 VScode로 해당하는 폴더 열기 yarn create react-app 프로젝트명 그럼 프로젝트명으로 된 폴더가 생성되고 그 아래에 node_modules, public, src 등등 리액트의 프로젝트의 기본세팅이 만들어진다. VS code 폴더 열기로 생성된 프로젝트 폴더를 열었다. node_modules는 이미 깔려있는 혹은 앞으로 깔 라이브러리나 패키지에 관한 것들이 들어있다. public은 로고나 favicon 등을 관리하는 폴더이다. src가 실제 작업하는..

정말 이럴 생각은 아니었는데 정말 눈코뜰새 없이 너무 바빠서 WIL도 주간회고록조차도 못쓰고 5일이 지나버렸다. 진짜 많은 일들이 있었는데, 순서대로 써보자면, 24일 수요일에는 개인과제를 마무리했다. 리덕스로 전역변수 사용하는 것에 대해 모듈을 정의하고 스토어에 등록해서 사용하는 것을 했다. 이날 날밤을 새면서부터 모든 일정이 좀 꼬였던거 같다. createAction을 사용했더니 갑자기 TypeError가 발생하면서 자꾸 plain Object가 어쩌고 하는걸 잡지 못해서 한참을 헤메다가 결국 클래식한 방법으로 모듈을 정의하는걸 싹 갈아엎었더니 문제가 해결되었다.....createAction 관련해서 혹시 사용이 다른건지 알아봐야할 것 같다. 그리고 이번에는 부트스트랩말고 Bulma를 써봤는데, 뭔가..

일단, 어제는 좀 공부하는데 몰두를 했다. 유데미 리액트 강의를 섹션 5까지 들으면서 컴포넌트에 몇가지 상태를 주는걸 공부했고, 개인과제를 위해서 redux랑 react-rauter-dom을 공부했다. 아직 써보지는 않았고 대충 감만 잡은 상태다. 지난주에 만든 TodoList가 거의 클론 코딩 수준이어서 이번에 아예 처음부터 새로 짜려고 와이어프레임도 그렸다. 너무 욕심 내지 말고, 유데미랑 스파르타 강의 자료로 공부한 거를 최대한 활용하는 방식으로 짜봤다. 가능하면 반응형으로 해서 width에 따라 컴포넌트 자리가 바뀌는거까지 구현해보고 싶은데 어떻게 될지 모르겠다. 오늘은 와이어프레임 구현에 최대한 공을 들일 예정이다. 화이팅!

📣 이 자료는 Udemy의 React 완벽 가이드 강의와 React 공식문서를 참고하여 작성되었습니다. 그리고 개인적으로 공부하고 이해한 내용을 바탕으로 정리하는 용도로 작성되었으므로 이해를 돕기위한 예시는 최소화하였습니다. key? 리액트에서 map 메소드를 사용해서 어떤 컴포넌트를 렌더링할때, 콘솔창에서 이런 key에 관련된 warning을 볼 수 있다. 여기서 리액트가 말하는 key는 똑같이 생긴 컴포넌트들을 구분할 수 있는, 컴포넌트 각각의 고유한 어떤 표시를 말한다(DB로 보면 id 같은것!). 이런 key를 넣어줘야 하는 이유 중 하나는 리액트의 가상DOM과도 관련이있다. 지난 포스팅에서 리액트는 처음에 화면을 그려놓고, 그 똑같은 복사본을 메모리에 가지고 있다가 컴포넌트에 어떤 변화가 감지되..

유데미 리액트 강의 일단, 어제 정리한 포스팅 2022.08.21 - [Study Note/React] - React 기초4 : React 기초4 : 에서 받은 여러 의 state 처리(양방향 바인딩) 📣 이 자료는 Udemy의 React 완벽 가이드 강의와 React 공식문서를 참고하여 작성되었습니다. 그리고 개인적으로 공부하고 이해한 내용을 바탕으로 정리하는 용도로 작성되었으므로 이해를 돕기위 steady-on.tistory.com 2022.08.22 - [Study Note/React] - React 기초5 : 상향식 컴포넌트 통신 React 기초5 : 상향식 컴포넌트 통신 📣 이 자료는 Udemy의 React 완벽 가이드 강의와 React 공식문서를 참고하여 작성되었습니다. 그리고 개인적으로 ..

📣 이 자료는 Udemy의 React 완벽 가이드 강의와 React 공식문서를 참고하여 작성되었습니다. 그리고 개인적으로 공부하고 이해한 내용을 바탕으로 정리하는 용도로 작성되었으므로 이해를 돕기위한 예시는 최소화하였습니다. 자식 → 부모 컴포넌트로 정보 전달하기 앞에서 다루었던 props는 부모 컴포넌트가 자식 컴포넌트에게 전달해주는 정보였다. 그럼 자식 컴포넌트는 어떻게 부모 컴포넌트로 정보를 전달해줄 수 있을까? 답은 함수를 내려주는 것이다. 부모 컴포넌트에서 자식 컴포넌트가 값을 담아줄 수 있는 함수를 만들어서 props로 전달해주는 방법이 있다. 아니면 setState를 다이렉트로 내려줘도 된다. 함수를 이용해서 전달해주는 방법 // 부모 컴포넌트 const Parent = () => { con..

아침에 써야했는데, 늦잠자고 할일이 많아서 뒤늦게 쓰는 어제의 회고록 유데미 리액트 강의 수강중 2022.08.20 - [Study Note/React] - React 기초3 : Event Listener & Handler, React와 DOM, state React 기초3 : Event Listener & Handler, React와 DOM, state 📣 이 자료는 Udemy의 React 완벽 가이드 강의와 React 공식문서를 참고하여 작성되었습니다. 그리고 개인적으로 공부하고 이해한 내용을 바탕으로 정리하는 용도로 작성되었으므로 이해를 돕기위 steady-on.tistory.com 기초4는 아직 작성중이라 비공개 상태로 올라가 있다. 강의보면서 의문점이 드는 것들을 바로바로 정리하는 중이라 조금 ..

블로그 컨텐츠에 대한 고찰 TIL를 작성하는 방식에 대해 고민이 많았다. 나는 내가 쓰는 키워드가 카테고리에 딱딱 정리되어 있는게 좋다. 그래서 velog를 떠나서 티스토리에 정착한 것이다. 그런데 TIL은 뭐랄까... 그날그날 내가 필요에 따라 공부한 것들이 대충 키워드를 제목으로 마구잡이로 섞여있는 기분이 들어서 싫었다. 그리고, 밤에 열심히 공부하다가 '정신차려보니 잘시간' 같은 일이 많아서 매일 밤마다 그걸 정리하는 것도 쉽지 않았다. 그래서 차라리 그날그날 내가 공부하고 생각한 것들은 다음날 아침에 회고하는 형태로 적고, 그날그날 공부하는 내용은 키워드만 적어두었다가 나중에 블로그 컨텐츠로 따로 글을 작성하는 방향으로 했다. 그리고 최근에 리액트를 공부하면서는 거의 노트 정리의 느낌으로 배우는걸..

과제 키워드 2022.08.20 - [Study Note/React] - React 기초3 : Event Listener & Handler, React와 DOM, state React 기초3 : Event Listener & Handler, React와 DOM, state 📣 이 자료는 Udemy의 React 완벽 가이드 강의와 React 공식문서를 참고하여 작성되었습니다. 그리고 개인적으로 공부하고 이해한 내용을 바탕으로 정리하는 용도로 작성되었으므로 이해를 돕기위 steady-on.tistory.com 지난 포스팅에서 다루었으므로 링크로 대신한다!! 1. 웹의 동작 개념 서버리스에 대해 논하기 전에 우리 눈에 웹 페이지가 보여지기까지의 과정을 아주 간단하게 쫓아가보자 ✏️ 잠깐 용어 짚기! - 클라이..

📣 이 자료는 Udemy의 React 완벽 가이드 강의와 React 공식문서를 참고하여 작성되었습니다. 그리고 개인적으로 공부하고 이해한 내용을 바탕으로 정리하는 용도로 작성되었으므로 이해를 돕기위한 예시는 최소화하였습니다. 에서 받아온 여러 값을 state로 처리하는 방법 더보기 먼저, input 태그에 대한 mdn docs의 참고 자료 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input : 입력 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. developer.mozilla.org 요소는 사용자의 데이터를 받을 수 있는..

📣 이 자료는 Udemy의 React 완벽 가이드 강의와 React 공식문서를 참고하여 작성되었습니다. 그리고 개인적으로 공부하고 이해한 내용을 바탕으로 정리하는 용도로 작성되었으므로 이해를 돕기위한 예시는 최소화하였습니다. Event Listener - Event Handler 이벤트 리스너는 사용자가 어떤 이벤트를 일으켰을 때 그 이벤트를 캐치하는 것이고, 이벤트 핸들러는 그 이벤트가 일어났을 때 실행될 명령을 말한다. 리액트는 모든 기본이벤트를 on으로 시작하는 props(ex. onClick)로 노출한다. 그리고 JSX에 그 on으로 시작하는 props를 추가하는 것으로 이벤트 리스너를 만들 수 있다. ex) 그리고 이 이벤트 리스너에 연결되는 것이 이벤트 핸들러이다. 모든 이벤트 핸들러 prop..