전체 글 118

2022-02-28 환경변수

Intro API key는 공개되어서는 안됨. 그래서 PC에 저장해두고 사용해야함. JS에서 변수에 문자열을 할당하는 것처럼, API key를 PC에서 사용하는 변수에 할당하고 사용할 수 있음 JS에서 변수는 전역변수와 지역변수로 나뉨 그러나 파일 A에서 전역변수로 선언하더라도, 다른 파일 B에서 파일 A의 전역변수에 접근할 수 없음 하지만 파일 A의 전역변수를 export 한다면, 파일 B에서 파일 A의 전역변수에 접근할 수 있음. Linux 기반의 운영체제의 PC에는 시스템 자체에 전역변수를 설정할 수 있고 시스템에 설정한 전역변수를 환경변수라고 함. export 를 이용해 환경변수를 설정할 수 있음 Achivement Goals PC에 저장하는 환경변수가 무엇인지 이해하고, 사용할 수 있다. PC에..

카테고리 없음 2022.02.28

2022-02-28 Read, Write, Execute 권한

Intro - 맨처음 - 는 not directory, or directory임 그다음 세개 rwx x 3 는 각각 read permission, write permission, execute permission 임 3번 반복하는 이유는 처음에는 사용자와 그룹 나머지에 대한 권한 차이임 그니까 helloworld.js는 나는 r w 가 가능 하고 나머지는 r 만 가능하다는 뜻 read: 파일의 내용을 보는것! execute: 파일을 실행만 하는 것! user, group, and other user user는 파일의 소유자. 기본적으로 파일을 만든 사람이 소유자가 됨. group group에는 여러 user가 포함될 수 있음. 그룹에 속한 모든 user는 파일에 대한 동일한 group 액세스 권한을 가짐..

코딩공부/T.I.L 2022.02.28

SEB Full 37기 66일 차

✍ 오늘 공부에 대해 리액트에서 상태를 컨트롤할 수 있는 리액트 리덕스에 대해 배움 확실히 props들을 전달하여 문법을 적는것보다 상태 관리가 편리하고 쉽다. 내가 전에 했던 공부들을 왜 할까 싶었는데 그 과정속에서 불편함을 개선할 수 있는 부분들을 점차 배우니까 점점 재밌어진다. 🧡 오늘 감정에 대해 😍 좋았던 것(Liked) : 오랜만에 재밌는 스프린트와 공부 했음! 💦 부족했던 것(Lacked) : 페어와의 소통??? 🕯 바라는 것(Longed for) : HA 화이팅! 📄오늘의 띵언 매일 행복 할수는 없어. 하지만 행복한 일은 매일있어.

코딩공부/T.I.L 2022.02.18

2022-02-18 Intro to Redux

Intro - React에서 State는 Class component안에서 관리함. 그런데. 근데 이러면 상태관리가 매우 복잡해지겠지? 그래서 나온게 리덕스 Redux의 기본 개념 : 세 가지 원칙 1. Single source of truth 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다. 데이터를 저장하는 '하나의 공간'이 있다. 2. State is read-only usestate처럼 action이라는 객체를 통해 변경가능 3. Changes are made with pure functions 리듀서와 관련 Store 컴포넌트와 별개로 상태가 관리되는 오직 하나의 공간. Action 자바스크립트 객체임. { type: ‘ADD_TO_CART’, payload: request } -type..

코딩공부/T.I.L 2022.02.18

2022-02-18 Redux 성취목표

- Redux 스프린트에서는 컴포넌트와 상태를 분리하는 패턴을 배움. 뭔가 구현해내는 것보다 원리와 구조, 즉 설계를 알아가는데 포커스를 두자. 참고로, Redux에 대한 대표적인 오해 중 하나가, Redux는 React의 관련 라이브러리, 혹은 하위 라이브러리로 오해하는데, Redux는 React 없이도 사용할 수 있는, 상태 관련 라이브러리입니다. Before you learn 함수 컴포넌트와 클래스 컴포넌트를 만드는 방법과 차이에 대한 이해 props와 state의 개념 props의 특징과 전달 방법, 규칙 이해 React 컴포넌트 간 데이터 흐름 및 상호작용의 원리를 이해할 수 있다. React에서 하위 컴포넌트에서 이벤트가 발생했을 경우, 부모 컴포넌트의 상태를 변경하는 방법에 대한 이해 rea..

코딩공부/T.I.L 2022.02.18

SEB Full 37기 65일 차

✍ 오늘 공부에 대해 리액트의 컴포넌트에서 props의 상태 전달 방법에 대해 배움 화실히 props를 저기 아래에 까지 계속 전달하려고 하니까 너무 벅참. 그래서 리덕스라는 것을 배우는구만.. 오늘 페어 분은 전에 만났던 분인데 나름 똑똑한 분이시다. 조금 소통만 더 원활하게 되면 더 좋을것같았다! 🧡 오늘 감정에 대해 😍 좋았던 것(Liked) : 이번 스프린트는 조금 잘 이해되었던것 💦 부족했던 것(Lacked) : 요새 점점 게을러지고 있음/// 🕯 바라는 것(Longed for) : 조금더 힘내자 힘들어도 일어나자! 📄오늘의 띵언 별은 바라보는 자에게 빛을 준다.

카테고리 없음 2022.02.18

2022-02-17 프론트엔드 개발에서의 상태 관리

intro React가 상태 관리를 위한 라이브러리는 아니다. 그러나 상태 관리의 주요 원칙을 배우고 이를 따라간다면, 컴포넌트 간 서로 느슨하게 결합된 구조적으로 아름다운 코드를 작성할 수 있음. - 상태란? UI에 동적으로 표현될 데이터 프론트엔드 개발에서의 Side Effect Side Effect란? 함수(또른 컴포넌트)의 읩력 외에도 함수의 결과에 영향을 미치는 요인 ex) 네트워크 요청 API 호출 React의 주요 개발 원칙 중 하나는 UI를 페이지 단위가 아닌 컴포넌트 단위로 보는 것이다. 만약 그림과 같이 이라는 컴포넌트를 만든다면, fetch와 같은 API 요청이 없이도 이 컴포넌트는 작동되어야 한다. 어떤 데이터가 들어오는지 상관하지 않고 설사 데이터가 가짜 데이터라 할지라도 컴포넌트..

코딩공부/T.I.L 2022.02.17

2022-02-17 [React] 상태 관리 성취목표

Read Me 소요시간 : 1 min Achievement Goals 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다. Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다. Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다. Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다. Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다.

코딩공부/T.I.L 2022.02.17

SEB Full 37기 64일 차

✍ 오늘 공부에 대해 리액트 컴포넌트 디자인 어드밴스드와 페어와 30분 CSS에 관한 질의응답을 주고 받았다 이번 페어는 뭔가 소통이 원활하지 않기보다는 없어서 조금 아쉬웠다. 그리고 내가 CSS가 많이 부족하다는걸 깨닫는건 예전에도 했지만 실제롤 공부를 하지는 않았는데 지금 어느정도 그래도 선택자, 결합자 같은것은 블로그에 정리해놔서 어느정도 이해되는것 같다. 그리고 확실히 면접준비라는게 많이 필요할 듯 하다. 🧡 오늘 감정에 대해 😍 좋았던 것(Liked) : CSS를 공부하기 위해 내가 움직였다는 사실 💦 부족했던 것(Lacked) : 조금 더 일찍 공부할 걸. 이란 말이 나올때 조금 더 일찍 공부할 걸.. 🕯 바라는 것(Longed for) : HA 통과! 📄오늘의 띵언 낭비한 시간에 대한 후회는..

CSS 선택자, 결합자 (미완성)

1. 태그 셀렉터(Type Selector) 규칙: 태그이름 설명: 지정된 태그명을 가지는 요소를 선택합니다. HTML CODE Q. Select the bento boxes CSS CODE bento { } 2. ID 셀렉터(ID Selector) 규칙: #id이름 설명: id값을 선택하는 셀렉터입니다. id는 html에서 중복되어 사용할 수 없습니다. Q. Select the fancy plate CSS CODE #fancy { } 3. 자손 선택자( Descendant Selector ) 규칙: A B 설명: A안의 모든 B를 선택함. 띄어쓰기 하나 있음. ID 셀렉터 등 여러 요소와 결합시킬 수 있음 HTML CODE Q. Select the apple on the plate CSS CODE pl..