[TIL]

1\. React란, 무엇일까?라이브러리는 익히 도서관이라는 의미를 지니고 있다. 도서관이 정보집합의 공간이라고 해석한다면, 프로그래밍에 있어서 라이브러리란 무엇일까?바로 프로그래밍에 필요한 정보집합의 공간일 것이다. React는 기본적으로 Javascrip 라이브러리

1\. Component Part 1영어단어 'Component'는 한국말로 요소 내지는 부품을 의미한다. 레고로 만들어진 장난감에서 레고를 의미한다고 생각하면 된다. React의 관점에서 이해하자면, 'Component'는 화면을 구성하는 하나의 단위이며 이는 곧 '

1\. Props Part 1'Component'라는 요소를 잘 활용하기 위해서는 'Props'의 개념에 대한 이해가 요구된다. 'Props'는 부모 컴포넌트로부터 받아온 데이터를 의미한다.Mother 컴포넌트에는 '홍부인'이라는 이름을 가진 데이터가 있다. Child

1\. State Part 1'State'란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. 'State'가 일반적으로 '상태'라는 뜻으로 사용되는 단어라는 점으로 미루어 볼 때, 'State'는 컴포넌트 내부의 동적 데이터를 지칭하는 개념이라는 것을 짐작할 수 있다.

1\. 컴포넌트 꾸미기앞서 배운 컴포넌트를 꾸미기 위해서, 컴포넌트에 'CSS'를 적용하는 것에 대해서 학습했다. 아래 이미지를 구현하는 것이 학습목표였다.우선 바탕의 Style과 네모의 Style 두 가지를 먼저 만들어줬다. 바탕에는 padding:"100px"이라는

1. Hello World 코딩을 처음 시작할 때 'Hello World'라는 문구를 출력해보는 것은 코딩세계에 존재하는 일종의 관습 같은 것이다. 관습에 충실해보자. 처음으로 'javascript'라는 이름의 새로운 폴더를 생성했다.

1\. 데이터 타입'변수 part'에서 값(데이터)을 변수에 할당하고 출력하는 것을 해봤는데, JS에는 여러 종류의 데이터 타입이 존재한다. 그 중에서도 기본 또는 원시형(primitive) 타입이라고 불리는 'number', 'string', 'boolean', 'n

1\. 연산자(2)비교 연산자말 그대로 숫자값을 비교하는 연산자이다. '비교 연산자'를 통해 궁극적으로 얻게 되는 값이 바로 'Boolean'이다.논리 연산자'or(||)', 'and(&&)', 'not(!)'과 같은 연산자를 '논리 연산자'라고 한다. (||)는 연산

1\. 반복문과 조건문 활용반복문과 조건문은 코딩에 있어 핵심 중의 핵심이다. 앞서 학습한 반복문, 조건문을 활용하여 다음의 예제를 실습해봤다.예제) 반복문과 조건문을 같이 활용하여 1부터 10까지의 숫자중 3으로 나누었을 때 나머지가 0인 숫자를 구해서 출력해보자.퀴

1\. 클래스와 객체(1)객체(Object)란 '물리적으로 존재하거나 추상적으로 생각할 수 있는 것중에서 자신의 속성을 갖고 있고 다른 것과 식별 가능한 것'을 의미한다. 객체를 생성하기 위해서는 클래스(Class)를 선언해야 한다.'객체'는 이미지 좌측 하단에 위치하

1\. 배열(1)배열이란 JS에서 같은 타입의 데이터들을 하나의 변수에 할당하여 관리하기 위해 사용하는 데이터 타입이라고 할 수 있다. 배열을 선언하는 방식에는 다음과 같이 두 가지가 있다.방법1의 경우 클래스를 활용하여 객체를 만드는 것과 동일한 형태를 띄고 있다.

머리글조건문은 이전에 살펴봤듯이, 조건을 충족할 때에만 특정 구문을 실행하기를 원할 때 사용한다. '조건 (삼항) 연산자', 'switch문' 등은 표현상의 차이로 인해 출현하게 된 개념으로서, 궁극적으로는 조건문이라고 할 수 있다. 조건문의 다양한 형태를 공부해봤다.

머리글함수에 대해서는 이전에도 공부한 바 있지만, 학습한 내용의 총량이 함수를 이해하기에 턱 없이 부족하기도 하고, 너무 중요한 개념이기 때문에 구글링을 통해 추가적으로 살펴보았다.1\. 함수함수에 대한 정의부터 다시 살펴보고 진행하기로 한다. 일반적으로 함수란 자신의

Array.method 개론배열(Array)을 놓고 '.'을 입력하면 다양한 메소드(Method)가 제시된다. 'method'는 기본적으로 function과 유사한 의미로 사용된다. 입력값(매개변수 또는 인자)을 받고 결과값(return값)을 도출해낸다. 여기에서 잠시

Array.prototype.filter()오늘 살펴본 'filter' 역시, array 내부에 있는 데이터를 조작하기 위한 'method'의 일종이다. filter는 여과 장치라는 뜻을 갖고 있다. "array의 데이터를, 특정한 조건을 통해 '여과'하는 역할을 하지

Array.prototype.reduce()오늘도 역시 array의 method에 관해 공부했다. 'reduce'라는 method인데, 본래 뜻에 맞게 "배열에 있는 데이터의 값을 감소시키거나 제거하는 method가 아닐까?" 하는 예상을 했으나 보기 좋게 빗나갔다.

호이스팅(Hoisting) 호이스팅(Hoisting)이란 변수나 함수가 어디에서 선언이 되든지 간에 최상단에 위치하게 되어(=최상단으로 끌어 올려져) 동일한 스코프에서는 어디서든 '참조'할 수 있게 되는 현상을 말한다. 역시 한국말이 세상에서 가장 어렵다. 예제 코드

머리글 프론트엔드(FE)의 꽃이라 할 수 있는 'React'에 관한 '실무 기초' 강의를 본격적으로 수강하기에 앞서, 서버와 클라이언트라는 큰 줄기를 통해 몇 가지 기초 지식을 살펴보았다. > 서버와 클라이언트 인터넷이 동작하기 위해서는 컴퓨터가 최소 2대 있어야

머리글오늘은 'TODO LIST 만들기'라는 첫 'React' 프로젝트를 수행하기 위해 필요한 최소한의 내용을 공부했다. 어제 만들어놓은 기본적인 HTML setting을 CSS로 꾸며보았고, 추가적으로 JavaScript로 'DOM'을 조작해봤다.CSS(1) Sele

머리글오늘은, 어제 공부한 'JavaScript로 DOM을 조작하는 방법'을 TIL을 통해 복습했다. 강의를 더 들으려고 했지만, 복습하는 중에 이해가 되지 않는 부분이 있어서 고민의 시간을 가졌다.자바스크립트 기초(1)1) documnet로 DOM에 접근하기1-a)

머리글 React 프로젝트를 위한 최소한의 'JavaScript 문법'을 학습했다. 이전에 JS를 살짝 맛보기는 했다. 이미 아는 내용은 복습한다는, 그리고 모르는 내용은 더 알아가겠다는 마인드로 접근했다. 오늘은 크롬에서 시크릿 모드를 켠 후, 해당 창에서 콘솔 창

Array.prototype.map() 직접 구현해보기이전에 학습했던 'map'은, 모든 배열 내부의 items에 대하여 function을 실행하는 method였다. 'map'을 포함한 여러가지 'method'는 결국 누군가가 조금 더 편리하게 사용하기 위해서 구현한

머리글 지난주 목요일에 듣다가 지쳐서 잠시 미뤄두었던 자바스크립트 기초 강의를 이어서 수강했다. class의 상속부터 정리하겠다. > 자바스크립트 기초(2) 1) Class의 상속 class를 '상속'한다는 것은, 이미 만들어 둔 특정 class를 통해 자식 c

머리글 오늘은 'React 프로젝트를 위한 자바스크립트 기초'의 마지막 강의를 수강했다. array의 대표적인 method 네 가지를 살펴보았다. 강의를 통해 이미 아는 내용은 복습했고, 몰랐던 내용은 새롭게 익혀보는 시간을 가졌다. > 자바스크립트 기초(3) 1

머리글React 강의를 이어서 수강하려고 했으나, 어제까지도 map을 function으로 구현하지 못한 것이 계속 마음에 남아서 끝장을 봤다. 성공하고 보니 별거 아니었지만 매우매우매우매우 뿌듯하다. 내친김에 forEach도 낱낱이 파헤쳐 봤다. Start!map, '

첫 React 프로젝트 만들기공부 목적으로의 TIL을 처음 작성했을 때 react 프로젝트를 만든 경험이 있으나, 당연히 전혀 기억나지 않는다. 반복만이 살길이다. 다시 해봤다.강의에서는 nvm과 node.js 설치를 진행했는데, 나는 이미 설치가 완료된 상태였다. 버

'map method' 함수로 구현각 데이터에 2가 곱해진 새로운 배열을 생성하는 것이 목적이었다.'forEach method' 함수로 구현배열 내부의 데이터를 모두 더한 값을 출력하는 것이 목적이었다.'filter method' 함수로 구현20보다 큰 값만을 필터링하

라이프 사이클이란?'Component'가 웹 페이지에 들어갔다가 사라지기까지의 한 과정을 '라이프 사이클(Life Cycle)'이라고 한다. Life Cycle을 이해하기 위해서는 '가상 돔(Virtual DOM)'에 관한 학습이 선행되어야 한다.'DOM(Documen

머리글Component는 '함수형'과 'Class형'으로 구분된다. class형은 이제 잘 사용하지 않지만, 코드를 알아볼 수는 있어야 하기 때문에 두 종류 모두 살펴보았다.Component예전에 'React'가 '레고'라면, 'Component'는 '블록'이라고 비유

버킷리스트 컴포넌트 만들기 Quiz주어진 코드를 수정해서, 상단의 이미지를 현출하는 것이 Quiz의 목적이었다.구체적인 퀴즈의 내용은 다음과 같다.우선 '내 버킷리스트'라는 큰 제목이 필요한 관계로, App.js 폴더의 render 영역에 h1 태그로 감싼 '내 버킷리

styled-components'styled-components' 설치는 이전에 했으니, 실제로 사용하는 방식을 익혔다.가장 먼저 styled를 import하는 작업을 선행했다. export 바로 상단에 'MyStyled'라는 변수를 선언하고 'styled' 키워드와

React에서 'DOM 요소'를 가져오는 법 with Ref 기존에 만들었던 버킷리스트 하단에 input box를 생성하여 작동하게 하는 것이 본 강의의 목적이었다. 관련해서 'Ref'라는 것을 사용해봤다. 'Ref'는 render 메서드에서 생성된 DOM 노드나

머리글그저께 공부하면서 알게 된 유튜버님이 인프런에서 진행하고 있는 강의가 있어서 고민 없이 바로 결제했다. 인프런 강의와 기존에 듣고 있던 강의를 병행하며 React를 마구마구 파헤쳐 보겠다.React에서 자주 쓰이는 JS 문법 정리key와 key 값에 들어가는 변수

State: 리액트가 리액트인 이유해당 강의에서는, '클릭을 할 때마다 숫자가 1씩 늘어나는' 버튼을 만들었다. 버튼을 만드는 과정을 통해 state를 이해해 봤다.버튼 태그를 통해 '클릭 버튼'을 만들었고, 숫자가 올라가는 것을 보여주기 위해 'counter'라는 변

가위바위보: 박스 만들기가위바위보 게임을 위해 기본적인 UI를 만들었다. Item 선택하기'가위바위보'를 위한 기본적인 logic을 구현했다.처음에 onClick 이벤트로서 'play'라는 함수를 실행할 때 'play()'만 입력했더니, 버튼을 클릭하지 않았음에도 '선

유저가 선택한 아이템 보여주기User가 버튼을 클릭했을 때, 클릭한 값이 박스에 보이도록 하는 작업을 수행했다. 박스에 클릭한 값이 보인다는 것은 곧 UI의 변경을 의미한다. 따라서 React의 Hook 중 하나인 'useState'를 사용하였다.'play' 함수는 '

머리글 무작정 만들어 보는 것도 물론 도움은 되겠지만, 로직을 이해하기 위한 최소한의 노력이 가미되어야 한다고 판단했다. 오늘은 개조식으로 글을 작성하면서 코드를 복습해 보겠다. > 가위바위보 게임 프로젝트 로직 이해 박스 2개 그리기(박스는 title, img,

5\. '3, 4'의 결과로 승패를 따지게 한다.강의에서는 'user' 기준으로의 승패 결정 로직만을 설명해 줬다. 'computer 기준의 로직 적용'과 '테두리 색 변경'은 다음에 해보겠다. 오늘은 머리가 잘 안 돌아간다.CSS: Flex 익혀보기'Flex'는 레이

Class Component: 옛날 방식이지만 중요한 것 React 공식문서에서는 더 이상 'Class Component'를 사용하지 말고 'Function Component'를 사용할 것을 권고하고 있지만, 그럼에도 'Class Component'를 학습해야 할 몇

현재위치 기반 날씨 가져오기매번 느끼는 것이지만, 왜 어제는 안 됐는데 오늘은 잘 되는가...UI 만들기넘버링은 차후에 복습할 때 해보기로 하고, 일단은 강의의 흐름을 충실하게 따라가기로 결정했다!날씨 데이터 보여주기Flex 연습하기 with 개구리 옮기기https&#

버튼 보여주기버튼을 여러 개 만들어줄 때, 굳이 배열을 'cities'라는 변수에 할당해서 'WeatherButton.js'에 props의 형태로 보냈다.만약 웹에서 보여줘야 할 도시 정보가 1000개가 넘는다면, 매번 복사 붙여넣기로 버튼을 추가하는 것 자체가 곤욕이

라우터란?: 여러 웹페이지를 만드는 지름길 'Route'는 다음과 같이 '경로'라는 뜻을 갖고 있다. 여러 웹페이지를 만들고 경로에 따라서 이동할 수 있게 만들어 주는 것이 라우터의 역할이다. 우선 react router를 설치하는 명령어를 터미널에 입력해서 설치를

useSearchParams: URL 쿼리값을 읽어보자'Query String'이란 사용자가 입력 데이터를 전달하는 방법 중 하나로, url 주소에 '미리 협의된 데이터'를 'parameter'를 통해 전달하는 것을 의미한다.지금 작성하고 있는 TIL의 주소를 확인했다

useEffect에 대한 개념 정리가 잘 되어있지 않다고 판단해서 오늘은 'useEffect' 한 놈만 팼다.useEffect!'useEffect'는, 함수형 컴포넌트에서 'side-effect'를 수행하기 위한 'Hook'이다. 그렇다면 'side-effect'라는

JSON ServerJSON Server는 로컬에서 빠르게 RESTful API를 모의(mock)할 수 있도록 도와주는 도구이다. 'JSON 파일을 데이터 소스로 사용해서 API 엔드포인트를 생성'하고, 클라이언트에서 해당 엔드포인트에 요청(Request)을 보내면 적

What is Redux?Redux는 스스로를 다음과 같이 소개한다. 'A predictable state container for JavaScript apps'. 개발을 할 때 '복잡성'이라는 개념은 우리를 위험에 빠뜨릴 수 있다. 애플리케이션을 이전보다 더욱 pre

React-Redux는 상태관리 도구인 'Redux'를 React에서 쉽게 사용할 수 있도록 도와주는 라이브러리이다. React-Redux는 Redux store와 React component를 연결하여, Redux store의 데이터를 React 컴포넌트에서 사용할

Updating state based on the previous stateuseState를 활용하며 한 가지 의문점이 생겼다. 의문점은 다음과 같다.위 코드에서 setCount 함수를 세 번 연속으로 작성한 까닭은, button을 한 번 클릭할 때마다 숫자가 '3'씩

counter 예제를 통해 redux 이해하기redux가 미친 듯이 이해되지 않아서, 침착하게 전체 과정을 넘버링 했다. 도대체 습작으로 만든 react project가 몇 개인지 모르겠다. 하지만 반드시 이해해야 한다.yarn add redux, yarn add re

Router Redux에 심취한 나머지 Router 설정을 매우 매우 많이 까먹었다. 기억을 천천히 헤집으면서 복습하는 시간을 가졌다. 1. React Router 라이브러리 설치 을 terminal에 입력해준다. 2. BrowserRouter src/inde

component 만들기페이지에 회색 배경 색상을 적용했다.페이지의 배경 색상을 설정하려면 body 태그에 css를 적용해주면 된다. styled-component에서 글로벌 스타일을 추가하고 싶다면 createGlobalStyle을 사용하고, 해당 함수를 통해 만들어

투두리스트 연습하기회고간단한 예제인데도 어렵다 ㅜㅜ 내일도 화이팅!

GoalReact로 투두리스트 만들기상태는 useState()를 통해 구현CSS는 파일 형태로 관리할 일을 추가하는 form 구현추가된 할 일이 나타나는 Todo 영역 구현(완료 버튼도 구현)완료 버튼을 누르면 완료된 Todo를 모아두는 Completion 영역 구현C

머리글 최근에 개발에 관련해서 좋은 글을 읽었다. 해당 글에서는, 개발은 학습보다는 훈련에 가까우며, 이 효과적인 성장에 꽤나 유효하다는 내용이었다. 이후에는 만들고, 하면 된다고 제시하고 있다. > 남의 코드를 어디서 배껴올 것인가 에게 꽤나 디테일하게 물어봤

오늘의 삽질큰 제목과 text를 입력하는 필드, 그리고 추가 버튼까지를 하나의 컴포넌트로 분리했다. 그다음은 각각 Todo 영역과 Completion 영역이다.App.js에서 component를 작성하고 따로 파일로 빼서 구성하는 방식으로 진행했다. 스타일링은 styl

CRUD(데이터 처리의 기본) 는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 인 를 묶어서 일컫는 말이다. CRUD를 어떤 방식으로 구현하는지에 따라 todolist가 될 수도, blog가 될 수도 있다. 결국 학습의 본질은 CRUD로 대표되는, 데이터 처리 기능

투두리스트 코드새로운 형태의 투두리스트에 도전 중인데, index만으로는 기능을 구현하는 데 한계가 있어서 id를 활용하고자 했다. id를 통해 코드를 조정하는 순간 맛이 갔다. 그래도 차근차근 학습하는 과정에서 많은 것들이 익숙해지고 이해됐다. 회고최근에 TIL 작성

구현하고자 하는 기능을 큰 틀에서 이해해 보려 노력했다. 각각의 넘버링 된 항목이 '지식의 서랍'이라고 생각하고, 서랍 안에 있는 내용들을 꺼내서 설명할 수 있는 상태를 최종 지향점으로 두고 공부하겠다. 내일도 화이팅!

src/App.jssrc/Components/InputSection.jssrc/Components/TodoSection.jssrc/Components/CompleteSection.jsid를 어떻게 적용해야 할까...?

src/App.jssrc/Components/InputSection.jssrc/Components/TodoSection.jssrc/Components/CompleteSection.js오늘까지의 최선... 일단은 굴러간다

src/App.js src/components/InputSection.js src/components/TodoSection.js src/components/CompleteSection.js현재까지의 스타일링 (styled-components)내일은 DeepDive를 읽

src/App.jssrc/components/InputSection.jssrc/components/TodoSection.jssrc/components/CompleteSection.jssrc/components/TodoTemplate.js현재까지의 스타일링 (styled

src/App.jssrc/components/InputSection.jssrc/components/PrevEditForm.js기존에 TodoSection.js 파일에서 todo.id와 edit.id가 다른 경우 반환하던 코드였다. TodoSection.js 파일의 코드

src/App.jssrc/index.jssrc/Reducer/store.jssrc/Reducer/reducer.jssrc/Components/InputSection.js현재투두리스트의 상태를 redux를 통해 관리하고 싶은데 생각보다 어려웠다. 가장 작은 단위부터 성취

1. 프로젝트 생성, 설치 리액트 프로젝트에서 의존 패키지를 설치하면, 항상 package.json에서 잘 설치되었는지 확인해주는 작업을 해야함! 2. reducer 생성, st

4. TodoSection 컴포넌트 & 필요한 Action 생성 요구사항 정리하기 할 일 list가 제시되는 TodoSection이 필요함 추가된 할 일에는 세 가지의 버튼이 존재함 세 가지 버튼은 각각 edit, complete, delete 기능을 수행함 edit

CompleteSection<src/Components/InputSection.js><src/Components/TodoSection.js><src/Reducer/reducer.js><src/Reducer/store.js><src/App.js

Router 까먹었다!https://velog.io/@velopert/react-router-v6-tutorial벨로퍼트님의 글을 통해 복습했습니다!React Router프로젝트 생성라이브러리 설치src/index.jssrc/pages/Home.jssrc/pa

src/pages/Profile.jsURL 파라미터를 사용하는 방법을 학습하기 위해 Profile 페이지 컴포넌트를 생성함src/App.jsApp.js에서 Profile 컴포넌트는, path에 username을 파라미터로 넘기고 있다. params 상수를 콘솔에 찍어봤

페이지에 회색 배경색상 적용 > 메인 페이지 꾸미기 src/components/MainPageTemplate.js index.js에서 App 컴포넌트를 BrowserRouter로 wrapping함 App.js에서는 해당 페이지의 경로를 지정해줌 중간점검 >

상세 페이지 관련 츄라이 어제는 상세 페이지에 대한 기본 골격만 잡았다. 투두리스트에서는 Main Title만 보여주고, 상세 페이지로 넘어갔을 때 subtitle과 desc를 보여주고 싶었다. detail page에서 todo.subtitle과 todo.desc를

Try 1 todo section에서는 title만 보여주기 상세 페이지에서 subtitle, desc 보여주기 객체 형태로 subtitle과 desc에 대한 state를, useNavigate()를 통해 페이지가 이동될 때 전달함. 기존에 Todo Card에 있던

PhoneBook Service 구현 InputTodo와 TodoSection 컴포넌트에 대응되는, InputPhoneNumber와 PhoneNumberSection 컴포넌트가 필요함. PhoneBook Service 전용 reducer가 필요함. store에 해

redux-logger오픈소스 커뮤니티에 있는, 더 잘 만들어진 로거 미들웨어를 활용하는 방법에 대해 학습했다.설치적용store.js 수정더 예쁘게 기록이 된다고 합니다!비동기 작업을 처리하기 위한 미들웨어 사용해보기redux-thunk, redux-promise-mi

2. 웹 요청 처리하기 🔴 a) 비동기 작업 처리 & Promise 🟠 redux-thunk를 사용하여 비동기 작업을 처리하려 한다. 라는 라이브러리를 이용하여 웹 요청을 할 것이다. axios는 이다. 는 ES6에서 비동기 처리를 다루기 위해 사용되는 이다.

netflix 만들기 뜬금없지만 예전에 결제해놓고 듣지 않은 강의에서, 요즘 내가 학습하고자 하는 내용들을 많이 담고 있다고 보여서 진행했다. > installation

환경 변수api key는 다음과 같이, 상수에 할당하는 방식으로 파일에 직접 작성할 수 있다. 그런데 api key는 사람의 '주민등록번호'와 같은 말 그대로 고유한 'key 값'이다. 데이터를 요청하거나 서비스를 사용할 때 인증하는 데 사용된다. 외부에 노출되지 않도

Reference: https://redux.js.org/tutorials/essentials/part-5-async-logicUI에서 Deposit Button을 클릭함onClick Event에서 dispatch를 통해 '액션생성함수'를 '호출'하여 '액션'

async logic 실습비동기 작업을 다루기 위해, 무료 가상 API를 제공하는 {JSON} Placeholder를 활용했다.reference: https://jsonplaceholder.typicode.com/guide/해당 사이트에서 posts와 관련된

프로젝트 생성 및 환경 설정 🟣store 관련 셋팅 🟣src 폴더 외부에 db.json 생성하고 대강 초기 데이터 설정json-server 설치 후, port 8000으로 실행src/index.js에서 App 컴포넌트를 Provider로 wrapping하고 stor

loading spinner 구현하기 🟣 loading spinner를 구현하기에 앞서, action이 무엇인지 console에 찍어봤다. action은 기본적으로 '객체'이다. action 객체 내부에서 'requestStatus라는 key와 fulfilled라는

함수 선언문함수를 정의하는 방식 중 함수 선언문(Function declaration) 방식이 있다. 기본적인 syntax는 다음과 같다.다음은 함수 선언문 방식의 특징이다.함수 선언문은 function 키워드를 사용한다.함수 선언문 방식으로 함수를 정의할 때, 함수명

App.js아주 좋은 학습용 코드를 구했다. 이번 주는 이 코드를 이해하고 투두리스트를 적용하는 것을 목표로 하겠다.

src/App.js src/components/Layout.js src/components/FirstSection.js src/components/SecondSection.js src/components/ThirdSection.js src/components/

useRef 🟢 Reference 🟡 컴포넌트의 최상단에서 useRef를 호출하여 ref를 선언한다. Usage 🟡 Referencing a value with a ref 🟣 ref를 사용하여 값을 참조할 수 있다. 위 컴포넌트는 버튼이 클릭된 횟수를

x zcczxc

Layout.jsHome.js오늘의 삽질어제 예정한 대로, 오늘은 공식문서의 코드를 참고하여 스크롤 기능을 완성하는 것이 목표였다. 개별 컴포넌트에서 forwardRef를 사용하는 것은 큰 문제가 되지 않았다.분명 제대로 했는데, 맵핑 과정에서 footer가 화면 최하

ㅈ

파일 구조App.js최상단인 App.js에서는 Homepage 컴포넌트만을 보여줌src/pages/Homepage.jshomepage는 크게 1)AppBar, 2)Common, 3)Footer 로 구성src/components/appbar/AppBar.jsAppBar

오늘 한 일파일 구조 변경에 따른 recent todo 재구성회고width와 height를 설정하며, 부모 컴포넌트로부터 논리적으로 접근했다. 평소 css는 단순히 view를 꾸며주는 것 그 이상도 이하도 아니라고 생각했는데, 처음부터 논리적으로 접근하지 않으면 코드가

정리부터 CSS 폭망 이슈로 코드의 늪에서 빠져나올 수 없다고 판단해서, 처음부터 구조를 직접 정리했다. 어차피 더 붙잡고 있어봐야 해결 안 될 것이 뻔했다. > 문제상황 상태관리는 차치하더라도 일단 scroll이 되어야 하는데, 진짜 인내심을 끝없이 시험한다.

forwardRef부모 컴포넌트에 ref가 있는 경우, 자식 컴포넌트를 부모 컴포넌트에서 노출하기 위해서는 forwardRef의 사용이 필요하다.reference: https://react.dev/reference/react/forwardRef우선 'ref 값

asdsasda

Authentication in ReactJS Using Firebase 🟠 프로젝트의 진행을 위해, 로그인과 회원가입 기능(Authentication)에 대한 학습은 필수불가결하다. 외국인 프로그래머 누님의 자료를 참고했다. reference: https://w

Sidebar Nav Menu 🟠reference: https://www.youtube.com/watch?v=5R9jFHlG6ik&list=WL&index=1sidebar를 구현하고 싶었다. pedro 형님이 말아주시는 sidebar 강의를 듣고, style

파일 구조 변경 🟠프로젝트에 sidebar 적용 🟠회원가입 🟠지금까지 🟠회고 🟢10%도 완성되지 않았는데 엄마가 되게 좋아한다. 그럼 대작이지 뭐,,, 내일은 딥다이브 좀 읽어야겠다. 진행시켜!

LogIn 상태, 전역에서 관리하기(feat. Redux Toolkit) 🟠 > src/pages/LogInPage.js 🔵 > src/modules/authSlice.js 🔵 > 해결 과정 🟢 개요 어떤 action을 행함에 있어, 특히 개발자는 따위의 대답을 해서는 안 된다. 에 대한 근거부터 서술하고자 한다. 전역 상태 관리는, 소...

Validation에 대해 알아보자 🟠 어디에서 🟢 전역 상태 관리와 유사하게, 유효성 검사 자체에 대한 독립된 directory가 필요하다고 판단했다. utils가 바로 그것이다. src/utils/LogInValidation.js 🟢 LogInValidation.js는, 세 개의 함수(isValidLogIn, isValidEmail, isV...

CardComponent 🟠src/components/common/ProductCard.jssrc/data/ProductList.jssrc/pages/Home.jsproduct list에 대한 데이터 구조를 잡고, 카드 컴포넌트에 map을 통해 적용한 뒤, home

event page 관련 🟠 정육각의 event page를 구현하고자 한다. 마우스를 'press'하고(click과 구분할 것) 우측에서 좌측으로 넘기면, 진행중인 event들이 oveflow되는 모습을 볼 수 있다. best practice를 이해하는 방식을 택했

src/pages/EventPage.js 🟡 > src/data/EventList.js 🟡 > src/images/index.js 🟡 > 현재 모습 🟡 업로드중.. > 회고 🟢 '이상도 이하도 아니다'라는 표현은 과대평가와 과소평가를 막으려는 의도로

문제 정의 🟠어느 페이지를 가도, width가 900px 이하가 되면 우측 화면이 깨졌다. 문제 해결 접근 방식 🔵'어느 페이지를 가도'라는 말에서 layout에 관한 코드에 문제가 있음을 인지했고, 'width가 900px 이하'라는 말에서 디버깅의 대상을 구체화

1\. ver2 🟢layout의 흐름을 놓친 결과는 처참하다. 괜찮다 수정하면 되니까. 차분히 고민을 녹여낼 ver2 파일을 만들었다.최상단 App.js에서는 로그인 페이지를 포함한 여러 페이지들을, PageContainer라는 컴포넌트로 감싸고 있다.PageCont

EventPage 반응형 구현 🟠SignUpPage layout 재구성 🟠validation logic 수정 🟠타입 지정 및 switch 문 적용, case 별로 error에 대한 처리를 어떻게 할 것인지는 고민중.

쇼핑하기 페이지 구현 🟠iamge정육각 홈페이지에서 이미지를 추출해 옴!, 객체 형태로 각 이미지를 구성한 다음, shoppingMainImg라는 이름으로 exportdata카테고리 리스트에서는 id, title, image를 객체로 담아 배열화 함!shopping

두괄식 글쓰기망함쇼핑하기 페이지에서, 카테고리에 해당하는 버튼을 클릭하면, 버튼 하단에 상품 카드가 나타나는 기능을 구현하는 것이 오늘의 목적이었다.돼지고기 이미지를 정육각 페이지에서 야무지게 받아왔다.해당 객체를 export 해준다.기존에 있던 카테고리 리스트에, i

reference: https://baekkyoungjung.medium.com/react로-확장성-있고-재사용성도-있고-가독성도-있으면서-코드를-추가하기도-쉽고-동시에-제거하기-쉬운-코드-컴포넌트-만들기-아토믹-컴파운드-패턴-7912f1b65a40정육각 프로

시작에 앞서... 🟢 학교를 다니고 종강 이후에는 일을 하는, '바쁘다 바빠 현대사회'를 몸소 체험하고 있다. 그런데 매번 상황이 바뀔 때마다 초반에 정신을 못 차린다는 느낌을 받았다. 10번째의 myTask가 계속 주어지고 process라는 함수로 실행은 하는데,

쇼핑하기 페이지 추가 🟢antibioFree를 통해 subtitle에 '무항생제'가 포함된 경우, 해당 제품명의 색을 green으로 변경하는 로직을 추가했다.이미지에 마우스를 갖다 대면 호버를 통해 이미지 배경이 검정색으로 변한다. 고기가 상당히 고급져보이는 효과가

오늘의 myTask 🟡auth data를 활용하여 AppBar의 UI를 변경하기로 했으나, '로그아웃'을 구현하는 것이 선행되어야 한다고 생각했다. pedro 형님이 firebase에서 signOut 함수를 가져오고 있음을 확인했다. signOut 함수에 auth를

슬라이더 구현하기 🟡정육각에는 위 이미지와 같은 slider가 있다. '기능적으로' 최대한 비슷하게 구현하는 것이 오늘의 학습 목표였다.최상단인 App.js에는 '이미지 슬라이더 예제'라는 제목, 그리고 'ImageSlider 컴포넌트'가 있다.이 부분을 보여주고 있

.

1\. QnA Page 경로 지정 🟢2\. QnA Page 셋팅 🟢3\. QnA List 셋팅 🟢4\. QnA List Detail 셋팅 🟢5\. 현재 모습 🟢

QnA Page는 , 으로 구성된다. 1-1. 제목 영역 wrapper를 통해 제목이 나타나

NotifyPage에 관하여(근데 이제 페이지네이션을 곁들인...) 🟢 1) 전체적인 를 설명하고, 2) 을 정리하도록 하겠다. > 페이지 구조 🟢 좌측 NotifyPage는 1) background-color와 padding을 조절하는 와, 2) Compon

Detail Page를 위한 Routing 연습 🟢최상단 파일인 App에서는 ProductPage와 ProductDetailPage를 보여준다.ProductPage는 상품 이름 목록을 보여준다. 이커머스 사이트의 '상품'이라고 가정했다. 해당 상품을 클릭하면 그에 맞

상세 페이지 전체적인 구조 🟢1)2)3)4)상세 페이지 주요 로직 🟢useParams()를 통해 url에 부여된 id를 가져온다. useLocation()을 통해 url에 대한 정보를 담고 있는 location 객체를 가져오는데, navigate를 통해 페이지를 이

반응형 🟢px(픽셀)과 같은 고정 단위를 쓰면 위와 같이 처참한 결과를 얻을 수 있다. 코드를 수정했다.수정 후 모습 🟢코드에 대한 설명이 필요한데, 오늘은 도저히 힘이 나지 않는다. handleDirectClick 함수를 통해, 로그인이 되어 있지 않다면 logi

Dropdown Box 🟢 App.js에서는 'Dropdown Example'이라는 제목과, Dropdown 컴포넌트를 렌더링한다. 동시에 options라는 배열이 상단에 선언되어 있는데, 이를 Dropdown 컴포넌트에 props로 전달하고 있음을 확인할 수 있다. Dropdown.js에서는 위 내용을 return한다. 1) Dropdown But...

Detail page layout 🟢ProductDetailPageBackgroundStyle에 의해 전체적인 배경색이 적용되고 있다. AllContentWrapper는 첫 번째 사진에서 노란색 border로 표시되는 영역이다. 해당 wrapper는 width가 90

CartPage 시작 🟢detail page에 있는 내용이다. 바로구매를 클릭하면 가장 먼저 if 문을 통해 로그인 여부를 확인한다. 로그인이 되어 있지 않은 상태라면 로그인 페이지로 이동하고, 로그인이 완료된 상태라면 쇼핑카트 페이지로 이동한다. 이때 이동에 앞서

redux-toolkit shopping cart(with. redux-persist) ✍️ reference: https://github.com/trickjsprogram/toolkit-shopping-cart 최상단인 App.js에서는 NavBar와 CartCo

reference: 1)https://www.youtube.com/watch?v=tosLBcAX1vk2)https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API3)https://kyoung

장바구니 버튼 🛒 1) MUI에서 쇼핑 카트 아이콘을 가져와서 color와 fontSize를 적절히 변경함 2) onClick 이벤트에 handleNavigate 함수를 적용해서, 아이콘을 클릭했을 때 쇼핑카트 페이지로 이동하도록 설정함 3) SidebarDat

reference: https://www.npmjs.com/package/redux-persist > Redux-Persist ✍️ 배경 🟠 프로젝트 진행 중(=쇼핑 카트 목록 페이지), 새로고침에 의해 데이터가 초기화된다는 문제점을 발견했다. Redux-Per

쇼핑 목록 추가 로직 정리 (redux slice를 중심으로) ✍️ ☝️ 정리 구조 a) slice에 정의된 액션 생성 함수를 소개한다. b) 어떤 파일에서 무엇을 dispatch 하는지 살펴본다. c) addCase에서 데이터를 어떻게 parsing 되는지 살

상세 페이지 ✍️ 상세 페이지에서 '바로구매' 버튼을 클릭하면 144번 라인의 handleDirectClick 함수가 실행된다. dispatch를 통해 getCartData라는 액션 함수로, 상세 페이지 상의 상품 정보를 전달한다. category와 count가 추가

장바구니, 옵션 추가 로직 ✍️ 옵션은 기본적으로 Drodown 컴포넌트를 통해 보여진다. 위 코드는 Dropdown을 컨트롤하기 위한 기본적인 state, array, Fn이다. 상세페이지에서는 Dropdown을 '보여주기만' 한다. 따라서, 위에서 설정한 sta

서론 ✍️사람은 why에 대한 본인만의 대답이 없을 때 흔들린다. 다들 무엇(what)을 하겠노라고 쉽게 얘기한다. 어떻게(how) 하겠다는 말로 무엇(what)을 강화한다. 그런데 지칠 때면 왜(why) 해야 하는지에 의심을 품기 시작하고, 명확한 답이 없을 때 혹은

reference: https://inpa.tistory.com/entry/GIT-⚡%EF%B8%8F-개념-원리-쉽게이해정육각 배포 관련 ✍️배포에 앞서, 버전 관리에 대해 공부해야겠다는 생각이 들었다. 찐막 찐찐막을 반복하던 삶에서 벗어나고자 하는 욕구에서

✅ 코딩은 무협이다운 좋게 참여하게 된 프로젝트에서, footer 관련 작업을 진행 중이었다. 그런데 footer 코드가 318 라인이 되는 순간 깨달음이 찾아왔다. 컴포넌트는 개나 줘버렸다는 사실을 깨달았다.리액트는 '컴포넌트'로부터 UI를 생성하는 도구다. 이것이

reference: https://yozm.wishket.com/magazine/detail/1561/카테고리는, 유사한 특성을 가진 항목들의 묶음 내지는 분류를 의미한다. 이커머스 최적화 사이트인 Notos에 따르면 구매의 70% 정도가 카테고리를 통해 발생

✅ Pagination 정리Pagination에 활용된 로직을 정리하고자 한다.✅ table data, button array, page handler

✅ 또두리스트?거의 1년 전에 투두리스트로 CRUD를 연습했다. 이제 프로젝트를 정리해나갈 시기가 왔기 때문에, 과거에 사용했던 기술을 복습할 겸 투두리스트 리뉴얼 버전을 제작하기로 결심했다.(notion에 디테일하게 정리할 예정)평소 예찬하던 뽀모도로 기법이 반영된

reference: https://www.youtube.com/watch?v=D9W7AFeJ3kk&t=2160s✅ 왜 살까?Lama 형님의 firebase를 듣는 35분 경이었다. Firebase에서 제공하는 Cloud Firebase에 데이터를 추가하는 작업

reference: https://www.youtube.com/watch?v=u4VylkVzB8k&list=PLmsBpw69UXdYtB2aAwpMvblRoQDegGZ05&index=1next => update, delete 듣고 코드 분석하기✅ 또두리스트새로운

✅ todo-backend/server.js 1. 모듈 및 환경 변수 설정 🎯 server에 관한 기본적인 모듈 및 환경 변수 설정이다. express와 mongoose, cors, 그리고 dotenv에 관한 내용을 각각의 변수에 할당하고 있다. 여기서 requ

reference 1) https://www.react-hook-form.com/get-started/#Integratinganexistingform 2) https://react.dev/learn/referencing-values-with-refs 3) https

reference:1) https://www.react-hook-form.com/api/usecontroller/controller2) https://legacy.reactjs.org/docs/render-props.html✅ React-Hook-Fo

Reference:1) https://bluemiv.tistory.com/872) https://emewjin.github.io/feature-sliced-design/3) https://dev.to/m_midas/feature-sliced-

reference: 1) https://vitejs.dev/guide/why.html 2) https://www.youtube.com/watch?v=UdTD_NAWxyE&t=185s 3) https://crystallize.com/comics/no-code-splitt

reference: 1) https://brunch.co.kr/@theopenproduct/58 (무한 스크롤에 대한 정의, 페이지네이션과의 비교를 중심으로) 2) https://tech.kakaoenterprise.com/149 (카카오 엔터프라이즈 포스팅) 3)

reference:1) https://www.youtube.com/watch?v=\_7UQPve99r4&t=257s(MERN Stack CRUD API Tutorial, 50분 수강)✅ InsomniaInsomnia는 HTTP 및 RESTful API를 테스트

✅ 1. 시작이 왜 안 됨?전투적인 정보처리기사 공부를 잠시 멈추고 다시 개발 공부에 돌입하려 했는데, 왜 때문인지 npm run serve(or dev)가 돌아가질 않았다.Connection이 안 된다는 것은, mongoose 쪽 코드를 봐야 한다는 뜻.ㅋㅋ 진짜 잘

reference:1) https://medium.com/@sanjanashivananda07/mastering-user-authentication-mern-stack-login-page-part-1-backend-107ef537f8e6(Part 1 — Bac

reference:1) https://medium.com/@sanjanashivananda07/mastering-user-authentication-building-a-simple-login-page-using-mern-stack-part-2-frontend-

✅ 강남(=특정 지역)으로 이동 강남 버튼을 클릭하면 moveToGangnam 버튼이 호출됨 map이라는 조건을 기준으로, 강남의 위도 및 경도를 통해 중심화 및 zoom이 이루어짐 map은 handleMapReady 함수의 실행 결과 handleMapReady는 N

✅ Overview새로운 프로젝트에 대한 몇 가지 요구사항이 있는데, 핵심은 '지도'와 '검색'이다.방탈출 및 보드게임 카페의 위치를 지도 상에 마커로 표시하고, 사용자의 '지역 검색어' 및 '실시간 위치 정보'를 기반으로, 해당 지역의 방탈출 및 보드게임 카페에 대한

🌿 1. Naive한 기획집에서 배를 벅벅 긁다가 '대졸 백수 400만 시대'라는 폭력적인 제목의 기사를 읽게 되었다. 단어는 철학을 반영한다. '채용'에서 '영입'으로, '공개 채용'에서 '수시 채용'으로, '인사팀'에서 '직원경험팀'으로, 사회에서 사용하는 용어가

✅ Jotai v2와 친해지기 reference: https://tutorial.jotai.org/quick-start/intro (금일 학습 목표: 공식문서 Tutorial을 통해 Jotai의 컨셉에 익숙해지자) 1. 소개 어마어마하게 좋은 전역 상태 관리 라이

✅ 나만의 로제타 스톤 구현하기MongoDB: NoSQL 데이터베이스로, JSON 형태의 데이터를 저장하고 관리한다.Express.js: Node.js 기반의 웹 애플리케이션 프레임워크로, 서버 및 API를 쉽게 구축할 수 있도록 지원한다.React.js: 사용자 인터

✅ TanStack-Query 사용 이유Fetching Server StateCaching Server StateSynchronizing Server StateUpdating Server State=> 서버 상태의 효율적인 관리를 위해 사용✅ API Reference

reference: https://tanstack.com/query/latest/docs/framework/react/reference/useQueries#memoization > ✅ API Reference - useQueries 예제 코드 ✍️ 공식문서의 내용

✅ API Reference - useMutation 일단 useMutation이 왜 만들어졌는지 알아야 하는데, API Reference에는 해당 내용이 없다. Guides & Concepts의 Mutation 파트에서 해답을 찾을 수 있었다. useQuery가

✅ API Reference - useMutationState MutationCache에 존재하는 모든 mutation에 접근할 수 있도록 하는 hook이다. 1)filter를 통해 mutation을 좁힐 수 있고, 2)select를 통해 mutation의 상태를

✅ Why NestJS?최근에 구입한 'Node.js 백엔드 개발자 되기'라는 책에서 발췌한 표다.일단 기본적으로 NestJS는 NodeJS 서버 측 애플리케이션을 구축하기 위한 프레임워크라는 점에서는 Express와 다를 바 없다.공식문서에 의하면 NestJS는 Ty

✅ CRUD Blog MVP 모델 만들기 CRUD가 구현된 Blog MVP(Minimum Viable Product) 모델을 만들기 위해 다음과 같은 기술 스택이 동원되었다. : 데이터베이스로 사용 : 백엔드 프레임워크 : 프론트엔드 라이브러리 : JavaScrip

✅ Kakao Auth 2.0 Flow Based on NestJS (up to refetch)1\. GET /oauth/authorize (Client -> Kakao)사용자의 Kakao 계정으로 인증을 요청한다. 이 단계에서 클라이언트는 Kakao의 인증 서버에 c