코드스테이츠

캐롤 드렉 교수의 마인드셋 이론Fail 대신 Not yet어려움은 발전의 기회뇌의 가소성 Brain Plasticity뇌는 사용할수록 자라나고, 시간이 지나도 퇴화하지 않는다.결론: 꾸준함, 끈기, 근성(grit)는 새로운 재능을 불러 일으킬 수 있다.나는 어떤 마인드

웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어input은 self closing tag이다. 1\. text 2\. password 3\. checkbox 4\. radio (+) textarea라디오버튼 nam

컴포넌트 기능별로 묶어서 제작레이아웃 디자인타이포그래피와 색상 적용정렬과 배색UX 분석셀렉터로 스타일을 줄 요소를 선택하고 선언블록 내에 선언을 통해 적용한다.이때 선언은 속성명: 속성값; (property: value;) 의 형태를 사용한다.셀렉터 { 속성명: 속성값

각각의 요소를 목적에 맞게 배치어떤 목적을 가진 것인지 파악이 되어야 좋은 와이어프레임https://www.sitepoint.com/css-architecture-block-element-modifier-bem-atomic-css/참조: Get BEM http

Document Object Model 웹사이트를 구축하는 데 사용되는 Web API 돔은 문서를 노드와 객체로 나타낸다. 트리구조. script는 등장과 함께 실행된다. > console.dir(document.body.children) id 이름이 nav인 d

script태그를 만나면 렌더링이 멈춘다.(화면이 멈춤)script를 body 하단에 넣는다.

나는 5년 뒤에 재택근무하는 개발자 혹은 디지털노마드가 될 것이다.배운 것을 꾸준히 블로그에 정리하고 있다.하루에 한번은 꼭 설기랑 산책을 하고 있다.페어와 커뮤니케이션을 잘 하고 있다.과제를 주어진 시간 내에 비교적 잘 하고 있다.하루 세끼를 챙겨먹으려 노력하고 있다

https://ko.reactjs.org/docs/getting-started.html사용자 인터페이스를 만들기 위한 JavaScript 라이브러리React “엘리먼트(element)” 를 생성한다.JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식

Single Page Application페이지 이동시 페이지 전체가 계속 렌더링되는 것은 사용자경험에 좋지 않은 영향을 끼친다. 속도가 저하되고, 과부하가 발생된다. 그래서 SPA라는 것이 생겼다. SPA에서는 중복되는 부분은 새로 불러오지 않고, 필요한 부분만 불러

변할 수 있는 값컴포넌트를 사용하는동안 컴포넌트 내부에서 변할 수 있는 값컴포넌트의 속성을 의미한다.부모 컴포넌트로부터 전달받은 값을 의미한다.최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용.객체형태이다.읽기 전용이다. 함부로 변경되지 않아야한

npm install react-router-dom@^6.3.0시멘틱 태그 사용하기Tweet 컴포넌트를 따로 만들었다. Tweets랑 다름주의날짜 형식을 .toLocaleDateString('ko-kr')를 사용해서 가공해 parsedDate에 할당해줌.Tweet파일에

그동안 코드를 작성할때, 페이지 단위로 작업을 했다면하나의 특정한 기능을 수행하는 코드의 단위하나의 컴포넌트는 하나의 기능만 수행한다.즉 기능단위로 작업을 한다.이렇게 상향식으로 앱을 만들면, 테스트가 쉽고 확장성이 좋다.컴포넌트 단위로 나누었으면 그 다음에는 트리구조

https://ko.reactjs.org/docs/events.html

pages/Main.jspages/component/Serch.js부모컴포넌트인 Main에서 onSearch로 search함수를 전달했다.(내려줬다)이 search함수는 주어진 검색 키워드에 따라 condition 상태를 변경한다.자식컴포넌트인 Search에서 onSe

https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction/https://ko.javascript.info/fetch-crossorigin서버로 오는 HTTP 요청마다 createServer에

메소드 + urlGET readPOST createPUT updatePATCH updateDELETE deleteOPTIONS -POST /upperPOST /lower응답상태코드 상태메세지200 성공300 리디렉션400 실패(클라이언트)500 실패(서버)버퍼링이라는

각 라우트는 하나 이상의 핸들러 함수를 가질 수 있다. 함수는 라우트가 일치할 때 실행된다.app.METHOD(PATH, HANDLER)클라이언트는 특정한 HTTP 요청 메서드와 함꼐 서버의 특정 URI로 HTTP요청을 보낸다. 라우팅은 클라이언트의 요청에 해당하는 E

flightController.js

와우 이렇게나 줄어들 일인가ㅋㅋㅋㅋㅋㅋ진짜 새삼 node.js로 했을때랑 비교해보니까 다들 왜 express쓰는지 알겠다...그래도 node.js로 해보니 express를 봤을때 이해가 잘 되는 것 같긴 함!!그래도 코드가 잘 안적히는 건 낯설어서겠지...??

경로의 각 쿼리스트링 매개변수에 대한 속성을 포함하는 개체이다.query parser가 비활성화로 설정되면 {}.명시된 route parameter 에 매핑된 속성을 포함하는 개체이다. route parameter는 URL의 해당 위치에 지정된 값을 가져오는 데 사용되

find는 찾는 요소가 발견되면 바로 작업을 마친다.filter는 해당되는 요소를 모두 찾아 배열을 만든다.fetch할때 /discussions를 빼고 해서 몇시간이나 애를 먹었다...ㅠㅠlocalhost:4000으로 받으니까 당연히 string만 받아와서 json으로

JavaScript Promise의 기능과 필요한 이유에 대해서 설명해주세요. 프로미스는 약속이라는 뜻으로 어떤 데이터를 언제라도 보내주겠다는 뜻입니다. 사용자가 클라이언트에서 작업하는 중에 요청한 작업이 완료되지 않아도 화면이 멈추지 않도록 합니다. 자바스크립트는 원

stringifyJSON tree UI

사람들이 컴퓨터와 상호작용하는 시스템.그래픽 요소, 키보드, 마우스 등 물리적 요소 또한 여기 해당한다.사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경프론트엔드에서의 UI는 GUI라 해도 무방하다.사용자가 어떤 시스템, 제품, 서비스를 이용하면서 느끼고 생각

Control + Shift + ?복사하기 : Command + C붙여넣기 : Command + V잘라내기 : Command + X복제하기 : Command + D 혹은 Option 누른 상태로 드래그여러 요소 동시에 선택하기 : Shift 누른 상태로 클릭그룹으로 묶

https://eggdrop.co.kr/m반응형x 이미지만 작아졌다 커졌다 함폰트나 버튼 등은 반응하지 않음페어분과 signature brunch set를 주문하려는 고객이라는 명확한 주제를 두고 유저플로우 다이어그램을 만들어 보았다.https://w

부품 단위로 ui 컴포넌트를 만든다.컴포넌트 생성 -> 결합 -> 페이지 조립https://uikit.wfp.org/docs/index.html?path=/docs/components-navigations-anchornavigation--regular-anch

스터디할때 나왔던 주제다!!이라고 대략 이야기 했던 것 같은데,DOM노드, 엘리먼트, React 컴포넌트 주소값을 참조할 수 있다고 한다.리액트에서 돔을 건드는 것은 지양해야 하지만 예외적인 상황에서 사용해야 할 때가 있다.포커스, 텍스트 선택영역, 혹은 미디어의 재생

모달이 열린 상태에서 스크롤을 멈춰야 함.시도해본것 1. 조건에 따라 클래스네임을 주기 2. useEffect1은 전체 컨테이너(root)에 클래스네임을 줘야 기능할 것 같다.2는 스크롤을 막긴 하는데 모달창이 안열려있어도 스크롤이 안되는 문제가 생김.useRef를 사

컴포넌트와 상태를 분리해 전역에서 상태관리를 해줄 수 있게 해주는 라이브러리상태 동적으로 표현되는 데이터Side Effect 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인상태는 로컬/전역으로 나뉜다.컴포넌트 내에서만 영향을 끼치는 상태는 로컬이다. 다른 컴포넌트

상품을 장바구니에 추가하는 기능을 구현함. 페어분이랑은.. setCartItem을 이용해 다른 함수를 만들어서 그 함수를 전달했었다. 그럴필요가 없었는데...; 상태변경함수를 그냥 props로 넘겼을때 분명 오류가 떠서 상태변경함수가 아니라 그 함수를 이용한 함수를 부

Redux: 컴포넌트와 상태를 분리해 전역에서 상태 관리를 해줄 수 있게 해주는 상태관리 라이브러리이다.리덕스는 전역 상태를 관리할 수 있는 저장소 Store를 제공한다.☻ : Action ➡ Dispatch ➡ Reducer ➡ Store𝟙 상태가 변경되어야 하는

토큰을 기반으로 외부 인증 중개서버로 사용자 인증 처리를 맡김! 네이버나 카카오 계정으로 로그인하는 것과 같음.이미 사용자 정보를 가지고 있는 웹 서비스에서 사용자의 인증을 대신해주고, 접근 권한에 대한 토큰을 발급한다.Resource Owner: 사용자이며 정보 제공

복습을 위해 스터디를 하고 있는데, 잘한 선택인 것 같다! 앞으로도 스터디에 열심히 참여하자.알고리즘 강의를 듣기 시작했다. 발전했다 나!지금도 역시 잘 자고 잘 일어나고 있다. 너무 일찍자는 것 같아서 탈ㅎ 10시~11시만 되면 너무 졸리다.사이드프로젝트를 시작했다.

주소 표시줄, 이전/다음버튼, 북마크 메뉴 등에 관련된 GUI 부분을 통칭한다.사용자 인터페이스와 렌더링 사이의 동작을 제어한다.브라우저 엔진은 DOM 자료구조를 구현한다.레이아웃 엔진이라고 하기도 하는데, 렌더링 엔진과 밀접한 연관이 있기 때문에 보통 브라우저 엔진

번들 : 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음 >## 웹팩 : 프론트엔드 애플리케이션 배포를 위해 가장 많이 사용하고 있는 번들러 모듈 번들러 세분화된 모듈 파일들을 호출해 브라우저에 띄워야 하는데, 각 변수들의 스코프 문제, 각 자원을 호출할 때 생겨

리액트 웹팩으로 번들링하기 왤케 어렵냐... 절레절레설상가상으로 깃허브페이지 하려니까 안되는 불상사까지 벌어졌다.베어미니멈만 하고 오늘도 그 담은 진도 못나감...ㅎ 혼자서라두 해보자!!진행하면서 의문이 들었다.나는 프론트랑 백을 구분해주어야 할 것 같아서 프론트 파일

가상의 DOM 객체. DOM객체에 접근해 변화 전과 후를 비교하고 바뀐 부분을 적용한다.DOM이 변경되면 브라우저의 렌더링 엔진도 리플로우하기 때문에 속도가 느려지게 된다. 자바스크립트로 조작하는 돔의 요소가 많을수록 돔 업데이트에 대한 비용이 많이 들게 된다.언뜻 듣

GraphQL에서의 모든 데이터는 그래프 형태로 연결되어있다고 전제한다.그리고 이를 통해 클라이언트 요청에 따라 트리 구조의 JSON 데이터를 응답으로 전송할 수 있다.GraphQL은 클라이언트 요청에 따라 🌈유연하게 자원을 가져올 수 있다.즉, 트리 구조로 쿼리 결

정말 많이 헤맸다... 간신히 함페어분 아녔으면 시간내에 못했을거같음.아고라스테이츠에서 디스커션 가져오는 게 미션이었다.가장 기본적인 거라 하기에 위 코드를 복사해서 테스트해봤는데 오류가 떴다;App() 함수 내에 복붙을 했는데 빨간줄이 나옴.그래서 바깥으로 뺐더니 또

javascript에서 TDD : Mocha, Chai 1. 실패하는 테스트 코드 작성 2. 테스트 코드를 성공시키기 위한 실제 코드 작성 3. 중복 코드 제거, 일반화 등 리팩토링 리액트에서 TDD : Testing Library, Jest

주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정.최적화는 허용된 자원의 한계 내에서 주어진 요구사항을 만족시키면서 최선의 결과를 얻는 과정이다. 수익과 관련되는 분야에서는 이익을 최대로 내는 과정을 말하기도 한다. 다양한 분야와 때에 따라 다르

Cloud Computing 이전에는 전산실에서 컴퓨터를 배치하고 인터넷을 연결해 서비스를 제공했다. 이러한 방식은 주기적인 관리가 필요하고 공간의 한계가 있게 된다. 그래서 서버의 자원과 공간 및 네트워크 환경을 빌려 사용하는 데이터 센터가 생기게 되었다. 이러한

전통적인 개발 방식은 워터폴 방식이다. 폭포수처럼 일단 땅으로 떨어지면 다시 전단계로 돌아갈 수 없다.요구분석 -> 설계 -> 구현 -> 테스트 -> 유지보수 순으로 개발이 되는데, 테스트 단계에서 여러 다양한 테스트를 도입하기도 한다.전통적인 개발 방식의 한계를 극복

정규표현식은 스터디원분들 덕에 몇번 접한 적이 있다.그래서 오늘 공부하는데 아주 수월했다.ㅎㅎ아주 길고 복잡한 함수가 한줄로 줄어드는 기적을 몇번 보기도 해서 공부한번 하면 좋겠다 싶긴 했는데 이렇게 공부하게 되었다.사실... 암기하기는 어렵지만 정규표현식 보고 이해하