본문 바로가기

전체 글

 (26)
항해99-8주차 기록(실전프로젝트 1주차) 회의 때 제시되었던 주제 보기 더보기 거정 - 개발자키우기 - 개발 로드맵 제시 ★ 송이 - 캠핑장예약&캠핑용품 판매 플랫폼, 주말농장 관리 플랫폼 (농장운영자가 농장 등록, 이용자가 운영자와 농장 상태를 채팅으로 확인가능, cctv 볼수있는 그런기능도 가능하다면, 지도로 주변에 등록된 주말농장 조회할수 있고, 신청하는 폼도 있고) ★★★★ 견적 뽑는 사이트?? 바다 관련 성지 (스노클링, 스쿠버다이빙, 서핑, 낚시 등 해양 레포츠를 즐기는 스팟을 공유하는 사이트. 지도위치공유,) ★★ 지도 + 알림 + 쪽지or채팅 + 관련상품 크롤링 +게시판 + 지도위치에 날씨API(파도높이☆,바람☆) 싹, 평점 관련상품 중고거래 커뮤니티+쇼핑몰입점+빠나나보트+근처맛집,숙박시설추천 스쿠버 다이버 키우기 - 스쿠버다이버..
항해99-7주차 기록(클론코딩) *처음 주제 회의를 통해서 구현할 기능을 중심으로 클론코딩할 주제로 당근마켓을 정했다. 당근마켓의 경우 웹보다는 앱 위주의 화면구성이 필요했고, 다른 클론코딩 주제들보다 css부분에 투자할 시간이 적을 것 같아서 실시간 채팅, 북마크, 검색 기능 등을 구현할 수 있을 것 같아서 선택하게 되었다. 지난주차의 실패를 경험삼아, 크게 기능들을 로그인, 회원가입 / 게시글 CRUD / 채팅, 북마크 등 크게 3가지 파트로 분배하고 안을 세분화 해서 작업을 했다. 이번 주차에서 react-hook-form과 usequery를 맛보기 형식으로 사용해보고, sockjs를 통한 실시간 채팅을 구현해봤다. 개인적으로 북마크 기능과 권한에 따른 새post 등록, post 수정을 하나의 jsx 파일로 구현해보면서 학습의 확..
항해99-6주차 기록(미니프로젝트) *한주 마무리 프론트엔드와 백엔드의 첫 협업이였다. 3주동안 배운 리액트가 손에 익지도 않았는데, 협업을 한다는 사실에 조금은 불안한 마음도 있었으나, 다행히도 좋은 조원들을 만났다. 특히 프론트엔드가 다른조와 다르게 3명이었다는 점이 고무적이였다! 평소에 대화를 많이 했던 동규님과 새로 봤지만 몇주 만났던것 같은 지민님, 그리고 낮밤 상관없이 게더에 상주하면서 서버 개발을 열심히 해주신 기웅님, 유경님, 태웅님 덕에 완성은 다 못한 조금의 아쉬움과 배운 것이 많은 한주였다. 내가 구현 성공했다고 생각한 것에 너무 집중해 불필요한 잡음을 만드는 커뮤니케이션을 하기도 했던 것 같다. 양쪽 다 커뮤니케이션에 있어서 아쉬움이 존재했던 것 같다. 백엔드와 프론트엔드에 대해 서로 이해가 부족했기에 일어난 문제인 ..
항해99-5주차 기록(주특기 숙련 -React) *Axios Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 아다. 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다. 이미 자바스크립트에는 fetch api가 있지만, 프레임워크에서 ajax를 구현할땐 axios를 쓰는 편이라고 보면 된다. Axios의 특징 오래된 브라우저에서도 지원한다.(많은 브라우저에서 지원된다.) 라이브러리이기 때문에 설치가 필요하다. (비슷한 역할을 하는 fetch는 설치가 불필요하다.) data object를 포함한 속성을 사용한다. 자동으로 JSON 데이터 형식으로 변환된다. 요청을 취소할 수 있고 타임아웃을 걸 수 있다.(fetch에서는 불가능하다.) HTTP 요청을 가로챌 수 있..
GET과 POST의 차이 GET과 POST의 차이 GET은 Idempotent, POST는 Non-idempotent하게 설계되었습니다. Idempotent(멱등)은 수학적 개념으로 다음과 같이 나타낼 수 있습니다. 즉, 멱등이라는 것은 동일한 연산을 여러 번 수행하더라도 동일한 결과가 나타나야 합니다. 여기서 GET이 Idempotent하도록 설계되었다는 것은 GET으로 서버에게 동일한 요청을 여러 번 전송하더라도 동일한 응답이 돌아와야 한다는 것을 의미합니다. 이에 따라 GET은 설계원칙에 따라 서버의 데이터나 상태를 변경시키지 않아야 Idempotent하기 때문에 주로 조회를 할 때에 사용해야합니다. 예를 들어, 브라우저에서 웹페이지를 열어보거나 게시글을 읽는 등 조회를 하는 행위는 GET으로 요청하게 됩니다. 반대로 PO..
항해99-4주차 기록(주특기 심화-React) *라이프 사이클 (클래스 컴포넌트) 마운트(생성) [constructor] - 컴포넌트가 만들어지면 가장 먼저 실행되는 생성자 메서드 [render] - 컴포넌트를 렌더링하는 메서드 [componentDid-Mount] -컴포넌트의 첫번째 렌더링을 마치고 나면 호출. 메서드 호출 시점에는 컴포넌트가 화면에 나타내기 완료 1)DOM 을 사용해야하는 외부 라이브러리(D3, masonry 등) 연동을 하거나, 2) 해당 컴포넌트에서 필요로하는 데이터를 요청하기 위해 **ajax 요청(axios, fetch 등)**을 하거나, 3) DOM 의 속성을 읽거나 직접 변경하는 작업을 진행. 수정: 부모가 자식에게 주는 데이터 값이 변경된 경우(props) [getDerivedStateFromProps] - 컴포넌트의..
항해99-3주차 기록(주특기 입문-React) #React Dom?? 텍스트 파일의 웹 문서를 브라우저에 렌더링하기 위해서는 브라우저가 이해할 수 있는 구조로 메모리에 올려야 함. 이를 가능하게 하는 것이 DOM. 웹페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게 브라우저 내에서 트리구조로 만든 객체 모델. (html 등의 문서와 J.S의 연결) VirtualDOM?? 모든 컴포넌트를 조작하는 것에 있어서 가상돔이 없이 실제돔을 사용한다면, 매번 접근 메서드를 하나하나 찾아야하고, 그 변화에 따라 레이아웃이 변화하고, 웹페이지를 다시 렌더링해서 보여줘야하는 문제가 생긴다. 만약 필요한 작업이 하나뿐이라면 크게 문제가 없을 수 있지만, 여러가지 동작을 하면서 이는 메모리 누수와 속도의 문제가 생길 수 있다. 실제 DOM에 직접 접근해 조작하는 ..
React 입문주차 S.A. 🐤 JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ? 느슨한 타입(loosely typed)의 동적(dynamic) 언어 JavaScript의 변수는 어떤 특정 타입과 연결되지 않고, 모든 타입의 값으로 재할당이 가능하다. 소스가 빌딩 될 때 값을 정하는 것이 아닌, 실행할때 값이 할당되는 과정에서 자동으로 자료형이 결정된다. 따라서 같은 변수에 여러 자료형의 값을 대입할 수 있다. 느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있을지 생각해보세요 데이터 값을 자유롭게 할당할 수 있어 편리하지만, 사용자가 의도하지 않은 데이터 타입의 변환이 일어날 수 있음. 고정으로 사용할 변수에는 const()를 사용하여 ..

티스토리툴바