git flow git flow란 깃에서 제공하는 강력한 브랜칭 기능을 활용한 변경이력 관리 전략입니다. 이 전략은 회사마다, 프로젝트마다 달라질 수 있습니다. 예를 들어 현재 내가 다니고 있는 wecode에서는 프로젝트를 진행할 때 메인 줄기가 되는 main br

위코드를 다니며 1차 프로젝트를 진행하였습니다. 진행하며 어떤 것을 하게 되었으며 무엇을 느꼈는지에 기록하고자 포스팅을 남기게 되었습니다. 프로젝트 주제 선정 1차 프로젝트는 클론코딩으로 진행되었습니다. 각 팀마다 여러가지 쇼핑몰들 중 하나를 선택하여 진행하게 되었는

react는 SAP(Single page application)이며 따라서 하나의 프로젝트에 하나의 html만 존재합니다. 그러나 우리는 브라우저 경로에 따른 다른 페이지를 로딩하는 방식을 오래전부터 사용해 왔습니다. 리액트에서도 이처럼 라우팅을 하는게 가능합니다. 그

REST(Representational State Transfer)REST는 현재 가장 널리 사용되고 있는 API 설계 규칙이다. RESTful API는 REST 규칙을 지켜 설계된 API를 말한다. self-descriptiveness의 특징을 살려 직관적으로 개발

인증은 누군가 또는 시스템이 실제로 그 누구인지 또는 시스템인지를 결정하는 과정이다.사용자의 자격 증명 정보와 인증 서버의 자격 증명 정보를 비교하여 시스템에 대한 엑세스 권한을 제공한다.돈을 인출하기 위해 은행에 간다고 했을 때, 은행원에게 통장과 도장 그리고 신분증

우리는 웹 페이지를 제작할 때 화면을 꾸며주기 위해 css를 사용한다.그러나 수많은 id, class, 선택자 등을 사용하게 되면 css 파일이 굉장히 보기 어려워진다.이런 단점을 보완하고자 나온 것이 sass/scss이다.이는 css 전처리기이며 때문에 웹 브라우저에

로컬 저장소에 git을 사용할 준비를 하는 과정이다.git init을 하게되면 현재 폴더에 .git이라는 폴더가 생성되며 해당 폴더에서 git 명령어를 사용할 수 있게된다.파일에 수정 및 변경이 일어나면 해당 파일의 상태를 보여주는 명령어이다.커밋하기 전 수정된 파일을

useMemo란 페이지 리렌더링시 렌더링이 불필요한 코드는 렌더링하지 않도록 해주는 hook이다.useMemo hook을 사용할 경우 이전에 계산한 값을 메모리에 할당한 후 해당 값이 변경되지 않으면 리렌더링되지 않도록 해준다.useMemo는 첫 번째 인자로 콜 백 함

자바스크립트로 날짜를 구할 때 보통 new Date()를 사용한다.그러나 console로 해당 결과를 출력해보면 아래와 같이 나타난다.Tue Feb 07 2023 22:22:03 GMT+0900 (한국 표준시)너무나 좋은 기능이지만 우리는 보통 날짜를 웹 상에서 나타내

this는 여러 언어에서 자주 볼 수 있는 녀석이다.타 언어와는 달리 자바스크립트에서는 this가 휙휙 바뀔 수 있는데,이것에 대해 이해하기 위해 한 번 알아보았다.먼저 자바스크립트의 this는 어떻게 동작할까?MDN에서 인용하기를 자바스크립트의 this는 "함수를 호

클로저란 함수와 렉시컬(Lexical) 환경의 조합을 말한다.(렉시컬 환경이란 내부함수가 선언되었을 때의 스코프를 의미한다.어디에서 호출하였는지가 아닌 어디에서 선언하였는지에 따라 결정된다.)즉, 함수가 생성될 당시 외부 변수를 기억하며생성 이후에도 계속 접근이 가능하

현재 내 위치 기준으로 날씨를 알 수 있는 사이드 프로젝트를 진행하던 중이었다.App Component에서 날씨 API를 호출하는게 아닌별도의 js파일에서 내 위치 구하기 및 해당 위치의 날씨 API를 호출하여내게 필요한 형태의 데이터로 가공 후 return하도록 비동

개발을 하다보면 개인이 여러 PC를 오가며 동일한 프로젝트를 작업하거나팀원들과 하나의 프로젝트를 작업하라면 git과 같은 버전(형상) 관리 도구를 이용해야 한다.그 중 이미 생성되어 있는 원격 저장소를 현재 작업하려는 내 PC에 연동하는 방법을 소개해보고자 한다.참고로

우리는 반응형 웹을 제작하고자 할 때 media query를 사용한다.사용법은 아래와 같다.위 코드는 스크린의 가로 너비가 375px 이상 400px 이하일 때 미디어 쿼리 안에 있는 css를 적용한다는 뜻이다.여기서 screen은 데스크탑 화면 or 스마트폰 화면을

자기소개 페이지를 제작하던 중 마우스 스크롤에 따른 페이지 이동이 되도록 구현하였다.먼저 5개의 페이지를 section 태그로 생성한다. (section이 아니어도 상관없음)그 다음 자바스크립트를 작성해주면 끝

자기소개 페이지를 제작하다가 네비게이션에 있는 섹션을 클릭하면 해당 섹션으로 이동하는 효과를 추가하고 싶어졌다.먼저 네비게이션과 각각 하나의 페이지가 될 섹션을 준비한다.style.css네비게이션도 적당한 css를 입혀준다.(제작 마무리단계에서 글을 작성하느라 앞뒤 c

자바스크립트의 시간을 구하는 함수 new Date()를 하게되면 아래와 같은 값이 나온다.시간이 위 주석과 같이 나오는 이유는 컴퓨터 언어에서는 GMT(Greenwich Mean Time) 기준으로 시간을 알려주는데, 한국 시간은 GMT 기준 9시간이 빠르기 때문이다.

자기소개 페이지를 만들던 중 "I'm frontend developer." 라는 문구를 썼다 지웠다 하는 애니메이션을 추가하고 싶어졌다.먼저 Html에 h6 태그를 생성한 후 css를 입혀주었다.이제 css파일을 살펴보자writing \-> color : transpa

position 속성과 마찬가지로 우리는 웹 페이지를 디자인 할 때 display 속성을 굉장히 많이 사용한다.HTML의 각 태그는 inline, block 등 각각 지정된 레벨의 display 속성이 있다.예를 들어 대표적으로 inline 속성에는 <span>,

웹페이지를 디자인 할 때 우리는 수많은 레이아웃 배치상 어려움을 겪는다.이 때 아주 간편하게 레이아웃을 배치할 수 있는 position 속성에 대해 정리해보고자 한다.문서상에 요소를 배치하는 방법을 말한다.top, bottom, right, left 속성을 사용할 수