항해99

HTML (Hyper Text Markup Language) 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어 웹 페이지(web page) : 월드 와이드 웹 상에 있는 개개의 문서 ht

JQurey 미리 만들어진 자바스크립트를 가져와서 쓰는것 https://www.w3schools.com/jquery/jquerygetstarted.asp 를 head 에 추가해주면 사용 할 수 있다. (부트스트랩에는 JQuery가 이미 들어가있어서 따로 추가해줄 필

프로젝트 명 : Seoul Plate프로젝트 간단 설명 : 서울의 맛집을 쉽게 찾을 수 있는 검색사이트 입니다.와이어 프레임 1)로그인 페이지 사이트 내의 댓글기능으로 매긴 평점중 별점 높은 5개 맛집을 보이게 만듦검색한 지역의 맛집을 보여줌 (네이버 크롤링 예정)댓

컴포넌트와 리액트 요소를 다룰 수 있다이벤트를 관리할 수 있다라우팅을 할 수 있다기존의 웹 프레임워크는 MVC 방식(페이지 이동박식)으로 분리하여 관리해 각 요소의 의존성이 높아 재활용이 어려웠다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재활용을 할 수 있고

NVM : node version manager - nvm은 Node.js의 버전 관리자입니다.리액트는 사실 노드라는 런타임 위에서 동작된다. 노드는 버전이 수시로 나오기 때문에 이걸 관리해주는게 nvmnpm : node pakage manager - 노드의 패키지를

트리 구조인 Dom 에서 하나의 하위 항목을 수정할때마다 모든 데이터를 찾는 방식은 비효율적이다. 따라서 메모리위에서만 존재하는 가짜 DOM이 존재.동작방식 : 어떤 작업을한 가상 DOM을 기존 DOM 과 비교하여 업데이트된 부분만 갈아끼워주는 방식컴포넌트는 Moun

1) head 안에 스크립트를 그냥 포함할 경우\-> 사용자가 html 파일을 다운 받았을때 브라우저가 한줄씩 파싱(분석)하면서 css와 병합해 Dom 요소로 변환함\-> 스크립트를 태그를 만나면 파싱을 멈추고 필요한 자바스크립트 파일을 가져와서 읽고나서 파싱을 다시

기본문법1) 변수와 상수변수 생성의 3단계선언 -> 초기화 -> 할당\-선언 : 실행 컨텍스트에 벼수 객체를 등록\-초기화 : 변수 객체에 등록된 변수를 위해 메모리에 공간을 확보(변수는 보통 undefined로 초기화)할당 : undefined로 초기화된 변수에 실제

리터럴: 백틱(``), 달러(${}) 사용법 템플릿 리터럴의 기능 줄바꿈(개행) 백틱으로 템플릿 리터럴을 사용하면, 줄바꿈 등을 쉽게 표현할 수 있다. 결과 -> 표현식 삽입 ${} 사이에 변수나 연산등을 삽입할 수 있게 되었다. 리액트 안에 style 속성 넣

1주차 강의후 파일 상태결과물components 폴더 -> elements 파일들을 연결해서 중간다리 역할을 하게 만듦ex) 댓글창 하나, 알림 하나 등등 같은 포맷을 유지하는 컴포넌트elements 폴더 -> 최소단위 컴포넌트로 이미지 텍스트 포함pages 폴더 ->

어떤 작업하나를 요청해놓고 다른 작업하다가 결과를 받으면 나머지 일을 하는것자바스크립트는 싱글 쓰레드로 동작(쓰레드 = 일꾼) -> 작업을 하나씩하고 동시작업을 하지 않는다.=> 자바 스크립트는 비동기 작업을 동시에 할 수 있다.싱글쓰레드 = 콜스텍이 하나 => 작업을

이번주차는 자유주제로 미니프로젝트를 진행하게 되었다. 처음으로 백앤드와 협업으로 진행되는 프로젝트라 협업에 난관이 있을것으로 예상된다.우리조가 정한 주제는 social study network로 친구맺은 상대방의 공부시간을 공유하는 사이트이다.초기구상 기능으로는여기서

오늘 미니프로젝트에서는 header, sideNav 컴포넌트를 만들었다.ssn의 main page의 기본틀이고기획에서 처럼 헤더의 인풋박스에서 친구를 찾아 추가할 수 있게 만들것이고왼쪽 사이드에 전체 친구가 뜨고 접속중인 친구를 볼수있고 클릭하면 유저 정보를 볼 수 있

이전에는 request나 axios, jquery와 같은 라이브러리로 원격 api를 호출했지만 요즘은 라이브러리 없이 브라우저에 내장된 fetch함수를 이용하면 충분하다.첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받는다. 그리고 Promise 타입의 객체를 반환

유튜브 생활코딩 리덕스 정리리덕스의 핵심은 '스토어'이고, 여기에 모든 정보가 저장된다.스토어 안에는 실제정보가 state에 저장된다.state에는 직접 관여하지 못한다.스토어를 만들면서 reducer라는 함수를 만들어 공급해야됨렌더는 리덕스와 상관없이 내가 짤 코드이

새로운 주차에는 주제가 클론코딩이였다. 주된 기능으로는 로그인,회원가입, 메인페이지, 장바구니 정도가 있었는데 저번주차에 실력이 많이 부족해 같은 팀원의 배려로 개인공부에 더 집중할 수 있었다. 그걸 바탕으로 이번에 맡게된 로그인, 회원가입 기능을 열심히 구현중이다.현

오늘은 어제완성한 로그인 view에 공부했던 리덕스의 ActionCreator부터 reducer까지 설치하여서버로부터 API 를받으면 바로 실행가능하게 세팅완료하였고 회원가입의 view를 완성 시켰다. 내일은 위의 주소검색부분을 누르면 팝업창을 띄워 서버로 리퀘스트를

처음으로 기능다운 기능을 구현하였다(물론 팀원들의 도움을 많이 받았지만..). 이번프로젝트는 마켓컬리를 클론코딩한 주차였고 나는 로그인과 회원가입부분을 맡았다. 프로젝트 기간 : 4.14~4.21 [회원가입 페이지] [ 로그인 페이지 ] 비로그인 상태에서는 상단의 회원가입과 로그인을 history를 사용하여 각페이지로 이동하게 하였다. 업로드중....

항해99 마지막 실전 프로젝트 start

리액트 js는 div를 찾아서 마운트한다.아래 새진처럼 index.js의 root id 에서 마운트한다.다음은 index.html 파일 body 부분이다.여기 root에 리액트가 들어온다.그런데 가끔 리액트 루트 밖을 만지고 싶을때가 생기는데 리액트루트 밖에 리액트를

redux-thunk는 리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어 이다. 이 미들웨어를 사용하면 액션 객체가 아닌 함수를 디스패치 할 수 있다. 즉 액션 대신 함수를 반환하는 액션 크리에이터를 쓸 수 있게 해준다. 파라미터는 dispatch와 g

유저가 작성한 게시글에 유저의 정보API를 뿌려주는 카드를 만들다가 "TypeError: Cannot read property 'map' of undefined" 라는 오류가 발생했다.리액트는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행하기 때문에 map함수를 반

디자인이 완성된 메인페이지의 sideNav이다.메인페이지에서 카드 정보를 sideNav 에 뿌려주기를 API가 완성되기전에 Mock data로 해보고 싶었다.이번에 redux-toolkit을 사용했기 때문에 그 방법에 대해서 정리 한다.initialState 안에 들어

Debounce와 Throttle Debounce : 이벤트의 마지막 이벤트만 인식 Throttle : 이벤트가 발생하고서 일정 주기마다 이벤트가 발생되도록한다. 사용자가 검색하려고 할때 검색하는 단어 타이핑을 마쳤을 때 api요청을 하는게 자연스럽다. 스로틀의 경