Today I Learned🧤

React로 웹 프론트엔드 개발을 하면서 컴포넌트를 function(){} 형태로 선언하기도 하고 const=()=>{} 형태로 선언하기도 한다. 그렇다면 두 방식의 차이점은 무엇인지, 더 나은 방식이 있다면 어떤 것인지 알아보도록 하자. 먼저 두 방식의 차이점은 크게 두 가지이다. 호이스팅 가능 여부 export default 동시 선언 여부 * 호이스팅(hoisting) : 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 이동시키는 과정 호이스팅 가능 여부 Function() 으로 선언하는 방식은 호이스팅이 가능하기 때문에 함수 실행 코드 밑에 선언을 해주는 것이 가능하다. 반면에 Const=()=>와 같은 경우 호이스팅이 불가능하기 ..

위와 같이 웹사이트 메인 페이지에 타이틀을 테두리만 제거한 형태로 표현하고 싶어서 아래와 같이 작성했다. color:transparent; -webkit-text-stroke: 1px black; 글씨의 컬러를 투명색으로 설정하고, -webkit-text-stroke : width color; 형식으로 글씨에 테두리를 줄 수 있다.

먼저, 나는 React, TypeScript를 기반으로 CSS 스타일링은 Styled-Component를 쓰고, 게시판 기능을 위한 데이터베이스는 Firebase를 사용했다. 프론트엔드 개발 과정에서 가장 많이 사용해봤던 React를 사용하는 게 편해서도 있지만, 다음과 같은 이유로 리액트를 사용한다. 재사용 가능한 컴포넌트를 구현하는 것이 용이하다. 컴포넌트의 기능과 역할을 구분해서 유지보수와 관리가 용이하고, 반복 사용이 필요할 경우 분리해서 저장해두고 다시 사용할 수 있다. Virtual DOM을 이용해서 성능 향상이 가능하다. Virtual DOM은 실제 DOM의 복사본으로, 개발자가 변화를 주고 싶은 부분만 Virtual DOM을 변경한 뒤에 실제 DOM과 비교해서 변화가 일어난 부분 즉, 실제..

https://1eehyunji.com/ 이현지 | 프론트엔드 포트폴리오 1eehyunji.com 지난 11월, 약 일주일간 프론트엔드 포트폴리오 웹 사이트를 만들었다. 반응형, 애니메이션에 조금 신경써서 모바일에서도 원활하게 정보를 확인할 수 있는 동적인 반응형 웹을 목표로 했다! 단순 내 소개뿐만 아니라 간단하게 게시판 형태의 페이지도 만들어서 방문자가 메시지도 남길 수 있도록 했다. 최근엔 다크모드 기능을 추가해보려고 생각중이다! 그리고 조금 더 고민해보면서 코드 리팩토링이나 나를 더 어필할 수 있는 기능들을 구현해나가려고 한다. 그리고 그 개발 과정을 이 게시판에다 자세하게 풀어보려고 한다👩🏻‍💻 To Be Continued...

구글은 SSL 인증서를 강조하면서 사이트 내 모든 요소가 동일하다면 HTTPS 서비스를 하는 사이트가 그렇지 않은 사이트보다 SEO 순위가 높을 것이라고 공식적으로 밝혔다. SEO를 간략하게 설명하자면, 검색엔진 최적화를 뜻하며 사용자들이 검색엔진으로 웹 사이트에서 검색했을 때 그 결과를 페이지 상단에 노출시켜 많은 사람들이 볼 수 있도록 최적화하는 방법을 의미한다. 이를 위한 방법으로 캐노니컬 설정, 메타 설정 등이 있다. 캐노니컬 설정 동일한 웹 페이지가 서로 다른 URL을 사용할 수 있다. 이때 표준 URL이 무엇인지 검색 엔진에 알려주는 역할을 한다. 예를 들어, 아래 세 개의 URL이 모두 동일한 페이지를 가리킨다고 가정하자. 이처럼 똑같은 내용이 여러 개의 URL을 가질 경우 각 URL에 대한..

프록시 객체는 어떤 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 작업을 가로채서 특별한 다른 동작(트랩)을 할 수 있게 하는 객체를 뜻한다. 자바스크립트에서 프록시 객체는 두 개의 매개변수를 가진다. target : 프록시할 대상 handler : target의 동작을 가로채고 어떠한 다른 동작을 할 것인지 설정되어 있는 함수 프록시는 아래와 같이 정의한다. const proxy = new Proxy(target, handler) 먼저 핸들러가 없는 아래 코드와 같은 프록시라면 어떻게 될까? const target= {}; const proxy = new Proxy(target, {}) //핸들러가 없는 proxy 객체 정의 proxy.test = 5; // 1. proxy에..

쿠키, 로컬 스토리지, 세션 스토리지는 웹 브라우저의 작은 저장소 역할을 한다. 이러한 것들을 통해 보통 사용자의 커스텀한 정보나 인증 모듈 관련 사항들을 웹 브라우저에 저장해서 추후 서버에 요청할 때 자신을 나타내는 아이덴티티나 중복 요청 방지를 위해 쓰인다. 쿠키 쿠키는 브라우저에 데이터를 저장하기 위한 수단 중 하나이며, 만료기한이 있는 키-값 저장소이다. 브라우저에서 서버로 요청을 전송할 때, 그 요청에 대한 응답에 Set-Cookie 헤더가 포함되어 있는 경우, 브라우저는 Set-Cookie에 있는 데이터를 저장하고 이 저장된 데이터를 "쿠키"라 한다. Set-Cookie : normal=yes 위처럼 서버의 응답에 Set-Cookie 헤더가 포함된 경우, normal이라는 이름에 yes가 저장..