작년 8월 14일부터 시작해서 1년이 넘는 시간 동안 진행한 사이드 프로젝트에 대한 회고를 시작합니다. > 현재 웹 버전은 완성되어 유지보수를 진행하고 있고, 이제 앱으로 포팅을 준비하는 단계에서 그동안의 여정을 정리해보고자 합니다. 사이드 프로젝트를 시작한 계기

div 태그로 Drop down 구현하기 보통의 경우 Drop down 을 사용 할 때에는 select 태그를 사용해서 구현을 합니다 .하지만 일반 태그로도 구현 해 볼 수 있습니다 .사실 굳이 할 필요는 없지만 그래도 한번 만들어 보았습니다 .select 태그로 구

사이드 프로젝트를 만들던 도중에 다크모드를 구현을 해보았었는데 그때는 Styled-Components를 ThemeProvider를 사용하여 구현하였다. 이렇게 구현하는 것도 장점이 있지만 theme의 값을 전부 props로 넘겨줘야 하니내가 느끼기에는 살짝 번거롭다는

localStorage란 ?데이터를 사용자 로컬에 보존 하는 방식.데이터를 저장, 덮어쓰기, 삭제등 CRUD가 가능자바스크립트(Javascript)로 조작.모바일에서 사용 가능위와 같은 특징이 있습니다 . 자바스크립트나 자바스크립트 기반의 프레임워크로 Web을 구현 하

페이지에 액세스 할 때 모든 콘텐츠를 대량으로 로드하는 대신 사용자가 필요한 페이지의 일부에 엑세스 할 때에 콘텐츠를 로드 할 수 있게 하는 것 입니다 . 페이지를 읽어 들이는 시점에 중요하지 않은 리소스 로딩을 추 후에 하는 기술입니다 . 대신에 중요하지 않은 리소스

회사 과제를 해결하기 위한 타입스크립트 공부기 ....Typescript로 함수형 컴포넌트 생성함수형 컴포넌트를 생성 할 때에는 React.FC (Functional Component의 약자) 라는 타입을 사용 한다 .

Dom 이란 ?문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다.웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.Do

함수형 프로그래밍을 알아보는데에 있어 먼저 알아야 할 것이 프로그래밍의 패러다임에 대해서 알아 보아야 한다 그 이유는 ? 전에 알아보았던 객체지향 프로그래밍과 이번에 알아볼 함수형 프로그래밍 모두 프로그래밍 패러다임의 한 종류 이기 때문이다 프로그래밍 패러다임(P

객체지향 프로그래밍에 대해서 알아보겠습니다 먼저 객체지향 프로그래밍이란 무엇일까요 ?객체 지향 프로그래밍은 컴퓨터 프로그래밍의 패러다임 중 하나로 프로그래밍에서 필요한 데이터를 추상화 시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호 작용을 통해 로

React의 모든 컴포넌트는 아래의 세가지 단계를 거칩니다 .초기화 단계업데이트 단계소멸단계 각 단계에서 몇개의 메서드들이 정해진 순서대로 작동하며 각 단계 속에서 호출되는 메서드들을 생명주기 메서드 라고 합니다리액트는 웹에서 UI데이터가 변경되면 자동으로 컴포넌트가

CSS의 활용도가 높아지고 대규모 프로젝트가 많아짐에 따라,복잡한 설계의 필요성을 느끼지 못했던 CSS에도 다양한 방법론들이 생기기 시작했습니다. 따라서 CSS를 어떤 방법으로 짜면 더 효율 적으로 짤 수있는지에 대한 방법론 입니다 .CSS 방법론의 공통적인 특징은 ?

이번에는 CSS z-index속성에 대해 알아보려 합니다 !z-index를 사용하는 이유 ? css를 작성하면서 내가 원하는 컨텐츠가 다른 컨텐츠 뒤에 가려져서 난감한 경우가 종종 있습니다 그런 경우를 해결하기 위해 사용하는 속성이 바로 z-index라는 속성입니다 z

이번에는 라이브러리를 이용한 슬라이더를 구현해 보았다 확실히 hooks만 사용한 것 보단 훨씬 쉽게 구현을했다 .라이브러리는 Slick을 사용했고 강의를 보면서 배워 보았다 가운데가 맞지 않는건 내가 동영상 캡쳐를 할때 가운대를 맞추지 않아서 이다 Slick을 사용하

오늘은 사진 슬라이드 기능에 대해 공부하고 기능을 구현해 보았다 우선 react Hooks 로 구현을 해보았는데 생각보다 쉽지 않았다 상태관리와 jpeg 파일로 전부 하나하나 만들어 주어야 해서 힘들었다 우선 이런식으로 구현을 해보았는데 치명적인 단점이 있다 .사진의

react로 웹사이트를 구현해 보았습니다 . HTML로 할 때에는 여러 코드가 복잡하게 얽혀 있었지만 react로 하니 코드가 복잡하지 않아 좋았습니다 .코드는 너무 길어 따로 업로드 하지 않겠습니다

오늘은 Styled Component에 대해 배워보았습니다 다소 헷갈리는게 있지만 정리해보겠습니다 .Styled Component 란 무엇인가 styles 지정과 React component를 생성을 동시에 할 수 있는 유용한 녀석이다 어떻게 사용하는가 해당 레포 프

Express의 사용법에 대해서 정리를 해보려고 합니다 express의 기본적인틀을 먼저 보게되면 다음으로 알아볼 건 use 메서드를 사용해서 내가 이 서버를 실행하기 전에 미리 설정해놓는 설정값이라고 생각 하면 됩니다 위와같이 외부 모듈과 전역변수를 적용해주고 실행로

Express이번에는 노드 서버를 빠르고 간결하게 사용하기 위해 만들어진 웹 프레임워크 Express 를 사용해 보랴고 합니다 express를 사용하기 위해서는 먼저 터미널에서 express를 설치해야 합니다 $ npm install express설치를 했다면 exp

노드 서버에서 요청 메서드 처리하는 방법을 알아보겠습니다 이번 스프린트 에서는 upper와 lower server를 구현해보았고 그 구현 과정을 설명 해보겠습니다이런식으로 메소드의 구간을 나누어서 요청되는 메소드가 어떤 메소드인지에 따라 알맞은 값을 줄 수 있습니다 그