전체 글

[React] 소셜웹페이지 - 자바스크립트 ➡️ 리액트 변환

자바스크립트로 구현해놓은 페이지를 리엑트로 옮겨 똑같이 기능하도록 만들어보았다. react-router-dom npm install react-router-dom --save 리액트는 싱글 페이지 어플리케이션(SPA)이다. 즉, 리액트 프로젝트는 index.html으로 하나의 HTML을 사용하며 한 개의 웹에서 여러 개의 페이지를 보여주는 방법에는 라우팅이 있다. 라우팅이란 url 주소에 따라 다른 화면을 보여주는 것이다. 리액트에 내장된 기능이 없으므로 이런 써드파티 라이브러리를 설치해 사용해야 한다. import { BrowserRouter, Routes, Route } from "react-router-dom"; // 컴포넌트로 사용하기 위해 import 해준다. function App() { re..

HTTP

정의 HTTP는 HyperText Transfer Protocol의 약어이다. 공식문서에서 정의된 내용은 HTML과 같은 하이퍼미디어 문서를 전송하기 위한 애플리케이션 레이어 프로토콜이라고 되어있다. 어려운 네트워크 용어를 빼고 해석하자면 클라이언트와 서버가 서로 통신하는 방법을 표준화해둔 것이다. 즉 데이터가 인터넷을 통해 요청되고 전송되는 방식을 정의한다. 초기에는 웹 브라우저와 웹 서버 간의 커뮤니케이션을 위해 디자인되었지만 최근에는 모바일 애플리케이션 및 IoT 등과의 커뮤니케이션과 같이 다목적으로 사용되고 있다. HTTP는 메세지를 캡슐화해 읽기 쉽고 간단하게 설계되었으며 HTTP 헤더를 사용하면 프로토콜을 쉽게 확장할 수 있다. 클라이언트-서버 모델을 따르며, 무상태 프로토콜이라는 두 가지 ..

[JS] 중요 랜더링 경로( Critical Rendering Path )

중요 랜더링 경로 HTML, CSS, JavaScript로 작성된 문서를 파싱 하여 브라우저에 시각적으로 출력하는 것을 랜더링이라고 하며, 그 일련의 단계를 중요 랜더링 경로라고 한다. 파싱 리플로우 & 리페인트 페인트 1. 파싱 파싱은 텍스트 문서를 읽어 들여 실행하기 위해 문자열을 의미 있는 토큰(어휘 분석의 단위)으로 분해하고 토큰화 된 문자열들로 파스 트리를 생성하는 과정이다. 이러한 파싱을 전문적으로 해주는 부분을 파서라고 한다. HTML, CSS는 랜더링 엔진에서 파싱 하고, JavaScript는 별도의 자바스크립트 엔진에서 파싱 한다. (1) HTML 파싱과 DOM 생성 브라우저의 요청에 의해 서버가 응답한 HTML 문서는 문자열로 이루어진 순수한 텍스트이다. 따라서 앞서 설명한 파스 트리를..

[JS] 소셜웹페이지 - 댓글 추가기능 구현

classList /* CSS */ .emptyHeart { content: url(/img/icon/heart.png); } .fullHeart { content: url(/img/icon/fullheart.png); } .deleteButton { content: url(/img/icon/cancel.png); float: right; width: 12px; } // JS const changeHeart = (e) => { let target = e.target.classList; if (target.contains("emptyHeart")) { target.remove("emptyHeart") target.add("fullHeart") } else { target.remove("fullHeart")..

[JS] 소셜웹페이지 - 메인화면

HTMLCollection 메인 페이지를 만들면서 가장 큰 문제는 HTMLCollection의 사용이었다. 댓글 기능을 구현하면서 document.getElementClassName() 으로 요소를 가져와 forEach문으로 순회했다. 댓글을 쓰면 이전 댓글을 덮어쓴다거나, 1번 피드에 댓글을 달면 2번 피드에 있던 댓글이 지워지는 시행착오를 겪었다. 받아오는 거야 배열로 받기만 하면 되니 괜찮았지만 반복문에서 계속 해결 못했다. 결국 억지로 억지로 작동은 하게 만들었지만 추후에 fetch 함수를 연결하거나 댓글 좋아요 기능 등을 넣게 되면 오류가 날 게 뻔했기 때문에 리팩토링을 하기로 했다. 1. form으로 입력받기 앞전에는 그냥 div 박스 안에서 input과 button 태그로 동작하고, HTML..

[Git] 깃 시작하기

평소에 깃헙데스크탑을 사용하면서 CLI의 사용을 이 악물고 피해왔지만 이제는 마주할 때가 되었다. 특히 깃헙데스크탑에서는 사용하지 못하는 기능들도 있다 하여 언젠가는 넘어야 할 산이었다. 기본적인 명령어 정리부터 시작해서 평소 써보지 못했던 기능들까지 정리해보려 한다. 설치부터 git 계정 입력까지 완료한 상태부터 진행한다. 계정 입력이 되어있는지의 여부는 git config --list 를 입력해서 확인할 수 있으며, 계정 정보를 미리 config 해놓지 않으면 수시로 아이디와 비밀번호를 입력해야 하니 확인해두는 게 좋다. 1. 깃 초기화 git init 저장소를 만들고 싶은 디렉터리로 이동해서 위 명령어를 입력해 깃을 초기화한다. 만약 git init을 사용했을 때 다음과 같은 문구들이 뜬다면 git..

[JS] 소셜웹페이지 - 로그인 UI

그리드 작업을 중간쯤 진행해보니 처음 레이아웃을 나눌 때 더 세분화해서 나눴어야겠다는 생각이 들었다. 큼직하게 로고, 입력창, 로그인으로 나누고 시작했는데, 위에서 부터 내용을 채워가며 계속 자식의 자식을 만드는 과정에서 구조가 헷갈리게 되면서 중간중간 형제와 부모 관계가 정확하지 않아 불필요한 검토작업이 필요하다. flex를 적용할 때 자식의 자식 요소는 적용되지 않는다. 내용을 세로 배치하기 위해서 flex-direction: column을 주어야 하는데, 자식을 만들면서 flex를 사용할 일이 있다면 다시 display:flex; 속성을 줘야 한다. 배경 전체 선택자 ( * )에 배경색을 주고, 내부 배경색을 하얀색을 줬는데 사진처럼 자식 요소로 가면 전체 선택자의 배경과 색이 같아진다. 구체성 문..

7월 회고

들어가며 이번 달에 새로운 스터디에 참여하게 됐고, 리액트도 많이 배울 수 있었다. 역시 혼자 할 때보다 다른 사람들이 보는 관점에서 고민하게 될 때 많은 공부가 되는 것 같다. 스터디 중에 자바스크립트로 간단한 게임을 만들어 보기도 했는데, 이벤트 리스너 연습하기에 좋은 작업이었다. 6월엔 알고리즘이랑 CS에 집중했다 보니 7월은 다양한 작업도 해보고 새로운 지식을 배울 수 있어서 재밌었다. 서울 대구를 오가는 일정이 있었는데, 기차에서도 졸아가며 작업하느라 고생했던 기억이 난다. 서울로 올라갈 때마다 열심히 준비해야겠다는 자극을 많이 받고 온다. 판교에 들러서 네이버 본사나 다른 회사들 모여있는 곳에 가보고 싶었는데 일정이 맞지 않아 아쉬웠다. 올해가 가기 전에 꼭 오겠다 생각하면서 어디에 집을 구해..