# front end
[Next.js] getServerSideProps와 getStaticProps
getServerSideProps getServerSideProps은 데이터 패칭을 위한 함수이다. 서버 사이드 렌더링(SSR)에 사용되는 nextjs의 주요 함수이다. 이 함수는 각 요청에 대해 서버에서 실행되며, 페이지를 렌더링하기 전에 필요한 데이터를 가져온다. 이 함수가 반환하는 객체는 페이지의 props로 전달된다. 이 방법은 사용자나 세션별 페이지 내용이 변경되어야 하는 경우나, 항상 최신 상태를 유지해야 하는 경우에 유용하다. 위의 코드를 살펴보자! export async function getServerSideProps(context) { ... } 처럼 선언을 해두면 nextjs에서 알아서 이 함수를 수행해준다. 페이지가 요청될 때마다 서버에서 실행되며, 필요한 데이터를 미리 가져온다. const res = await fetch(https://.../data) 부분으로 api에서 데이터를 가져오기 위한 작업이다. const data = awai
프로젝트 NavBar 트러블 슈팅
[회고] navigationBar 작업 중 서버에서 렌더링된 HTML과 클라이언트에서 생성된 HTML의 불일치로 인해 발생한 에러 해결 Problem : 상단 navBar에서 로그인시에 로그아웃 드롭다운이, 비로그인시에는 로그인이 랜더링 되어야 하는데 제대로 작동하지 않는 문제를 겪음. Reason : 현재 사용중인 프레임워크 Next.js가 SSR(server side rendering)방식이기 때문에 서버에서 렌더링된 HTML과 클라이언트에서 생성된 HTML의 불일치 문제가 발생함. Try to solve : useEffect를 사용하여 클라이언트에서 로그인 여부를 확인하고 랜더링 처리를 하는 방식으로 수정함 - 해결 로그인과 비로그인시에 “로그인”버튼과 “비로그인”버튼 랜더링은 제대로 되었지만 프로필 이미지를 상단바에서 보여져야 하지만 제대로 보이지 않는 문제가 발생함. Problem : 로그인시에 recoil에 담기는 프
1차 프로젝트 회고록
이 글을 지난 9월 11일부터 15일까지 진행된 미니 프로젝트의 과정을 아카이빙하기 위해 작성되었습니다. 1. 프로젝트 인트로 1.1. 목표 SNS 쓰레드 서비스와 유사한 UI의 Wereads라는 가상의 서비스를 개발하는 것이 1차 프로젝트의 목표였습니다. 필수 구현 사항은 회원 가입과 로그인으로 이어지는 일련의 과정, 그리고 쓰레드 목록 표시와 쓰레드 글쓰기를 통한 서버와의 통신이었습니다. 1.2. 분석 기 전달된 Wereads의 Figma 디자인은 플로우가 한눈에 들어오지 않았기에 프로젝트가 시작되기 전, 주말에 시간을 내어 내용을 정리하였습니다. 
신화로 공상하던 프론트엔드 개발자
1. 처음 국문학과를 전공했습니다. 단지 신화가 흥미롭다는 이유만으로 진학을 선택한 치기 어린 결정이었습니다. 그렇게 학부와 대학원까지 잇따라 읽고 배운 신화는 퍽 흥미로운 학문이었습니다. 신들의 이야기라고는 하지만, 인간 중심에서 사고하고, 인간을 닮은 신들의 행태를 그리고 있다는 점이 좋았습니다. 그들은 전지전능함에도 불구하고, 실수와 포기, 후회와 질투 등 다양한 양상으로 세상과 마주합니다. 그리고 그 과정에서 다뤄지는 수많은 주제와 요소가 세상 밖으로 뛰쳐나올 때가 있습니다. 형태는 여럿입니다. 소설과 영화, 드라마와 애니메이션, 그리고 게임에 이르기까지 다양한 문화 전반에서 신화는 자신의 목소리를 냅니다. 우리는 알게 모르게 이러한 신화의 소용돌이 속에서 과거부터 현재까지 이어지는, 그리고 그 깊이를 알 수 없을 정도로 쌓여온 인간의 무한한 상상력을 만끽하고 있습니다. 2. 중간 2.1. 고민과 결심 개발에 관한 관심이 생긴 시기는 대학원 졸업 전 학기
[Vue3] Composition API를 활용한 watch 기능
현재 프로젝트에서 Vue3를 사용하고 있다. 다음에 또 활용할 수 있게 watch 기능에 대해서 작성한다. > 환경은 node.js, Vue3, setup, Composition API를 사용한다 아래와 같이 foo의 값의 변경이 일어날 때 변경될 값 newValue의 값을 활용할 수 있다. >#### 단일 ref >#### getter 나의 경우 부모 컴포넌트의 값을 자식 컴포넌트로 전달할 일이 있어 watch로 props를 감지하도록 활용했다. 출처 : https://ko.vuejs.org/guide/essentials/watchers.html#basic-example
[The Odin Project | Full Stack JS] SVG
🚀 SVG >What is SVGs? SVGs are a very common image format on the web. SVGs are a scalable image format, which means they will easily scale to any size and retain their quality without increasing their filesize. They’re also very useful if you need to create or modify your images programmatically, because you can change their properties through CSS and JavaScript. [Example] SVG는 사람이 읽을 수 있고 HTML 요소와 마찬가지로 DOM의 요소가 될 수 있다. 💡 Use Icons Graphs/Charts Large, simple
[The Odin Project | Full Stack JS] Emmet
🚀 Emmet >What is Emmet? Emmet is a plugin, built into VS Code, that helps you write HTML and CSS more efficiently by providing a bunch of clever shortcuts. [Example] 🔎 Emmet abbreviations > 1. Wrap with Abbreviation (⇧⌘A) [
[The Odin Project | Full Stack JS] Introduction
🚀 Introduction 시작하기 전에 TIL링크내용 외우기 아니고 눈에 익히기!! 💡 TIL HTML elements reference CSS Cheat Sheet
grid vs flex
웹 레이아웃 영역을 나누어 요소를 배치하는 기준 1. flex 1차원으로 수평 또는 수직 한 방향으로 나누어 요소를 배치할 수 있음 2. grid 2차원으로 수평과 수직 영역을 동시에 나누어 요소를 배치할 수 있음
position: fixed 와 filter
첫글! 문제 상황 html,css 에서 position에 대해서 공부하던 중 button에 대해서 'position: fixed' 를 했음에도 불구하고 스크롤 할때 고정이 되지를 않아서 원인을 찾아봤다. 바로 구글링에 들어갔는데 원인을 찾지 못해서 결국 내가 코드를 처음부터 천천히 수정해보면서 filter 부분이 원인인 것을 발견했지만... 초반 구글링할때 더 꼼꼼히 읽었더라면 더 빨리 해결할 수 있었을 것이다.. 반성하도록..ㅋㅋ 문제의 코드 문제 원인 / 해결 방법 filter 부분을 삭제하니까 제대로 작동이 됐다. 이 사이트를 읽어보니 이유를 찾을 수 있었다. > 요소의 조상 중 하나가 transf
Data & Fetch
상수 데이터 반복적인 UI를 하드코딩하지 않기 위해 데이터를 만들어놓고 Array.map() 메서드를 이용하여 UI를 표현 Mock Data 백엔드 API가 완전하지 않아도 프론트엔드 개발은 가능 그것을 가능케 하는 것인 Mock Data, 즉 모조 데이터 이 데이터는 실제 서버에서 주는 데이터의 형식과 동일해야 하기 때문에 JSON(JavaScript Object Notation) 형식으로 생성할 필요가 있음 이 데이터는 로컬 서버에서 받아와야 하므로, public 폴더 내에서 관리해야 함 Fetch() 메서드 (Feat. Mock Data) fetch() 메서드는 통신에 사용하는 메서드이며, 클라이언트가 서버에 요청하고 응답받을 수 있게 되어 있음 Fetch() 메서드
useEffect
⭐️ 추가로 공부할 내용 > - Clean Up Effect: setInterval과 그것을 초기화하는 ClearInterval까지 이해한 상태 (20230909) Side Effect 예를 들어, 단순하게 input 받아 output 내는 함수는 Side Effect가 없는 순수 함수라고 함 그러나 외부의 값을 읽어오거나 외부의 값을 변경한다면 그 함수는 Side Effect가 있는 함수 React에서의 Side Effect 함수 컴포너트는 props와 state라는 input을 통해 JSX를 만들어낸 함수 React에서의 Side Effect 사례 1) Data Fetching: 백엔드 APi와의 데이터 통신 2) DOM 접근 및 조작 3) 구독(Subscribe) useEfffect 렌더링 과정에서 Side Effect 발생 시 야기되는 문제 1) 렌더링 블록 2) 매 렌더링 시 Side Effect 실행 따라서 useEffect
구조 분해 할당
구조 분해 할당 JavaScript에서 객체와 배열은 사용 빈도가 높은 자료 구조 객체와 배열에 저장된 데이터를 전체가 아닌 부분만 추출하여 사용하고자 할 때의 번거로움을 줄이고자 구조 분해 할당을 사용 구조 분해 할당은 객체와 배열을 '변수'로 분해할 수 있음 구조 분해 할당 종류
hook, props, state
hook 상태(state)와 라이프 사이클(lifecycle) 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 해주는 함수 사용 규칙 함수 컴포넌트 내부에서 호출 커스텀 훅 내부에서 호출 최상위에서 호출 종류: useState, useEffect, useCallback 등 props 컴포넌트의 속성값 부모 컴포넌트로 전달받은 데이터를 지닌 객체 전달받는 데이터는 변수, 함수, state 값, 이벤트 핸들러 등 상관 없음 state 컴포넌트의 상태값 컴포넌트의 UI를 결정하는 상태값 hook 중 하나인 useState 함수가 필요 props와 state의 조합: state 끌어올리기
Sass (Scss) 정리
Sass Syntactically Awesome Style Sheets Less, Stylus와 같은 CSS 전처리기(CSS Preprocessor)의 일종 네스팅, 변수 사용, 조건문 등 다양한 기능 내장 Sass 3.0을 Scss라고 부름 설치 및 적용 문법(Syntax)
[웹 퍼블리싱 스터디] Component (1)
- 해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다. user agent stylesheet를 초기화하기 위해 reset, base, initialize 등으로 명명된 스타일 초기화 시트가 사용됩니다. 컴포넌트(Component)는 소스 코드의 재사용(생산성)을 위해 사용하며, 일관되게, 그리고 독립적으로 구성되어야 합니다. 
[웹 퍼블리싱 스터디] CSS (12)
- 해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다. flex: 1은 실무에서 빈번하게 사용합니다. 적응형 웹과 반응형 웹의 차이는 뚜렷합니다. 반응형 웹의 3요소는 뷰포트(viewport), 미디어 쿼리(media query), 유동형 그리드(flexible grid)라 할 수 있습니다. 반응형 웹 관련 기술로는 반응형 웹 그리드 시스템, 반응형 웹 이미지, 반응형 웹 폰트 등을 이야기할 수 있습니다. ![]
[웹 퍼블리싱 스터디] CSS (11)
- 해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다. flex는 부모 요소인 flex container에게 주는 속성과 자식 요소인 flex item에게 주는 속성을 나눠서 이해합니다. 요소 중앙 정렬의 세 번째 방법은 flex를 활용하는 방법(flex + justify-content + align-items)입니다. 
[웹 퍼블리싱 스터디] CSS (10)
- 해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다. 
[웹 퍼블리싱 스터디] CSS (9)
- 해당 자료는 2021년 콘텐츠웨이브 사내 스터디 그룹에서 진행했던 웹 퍼블리싱 스터디 자료입니다. 모든 저작권은 스터디 그룹장이자 발표자인 저에게 있습니다. 요소 중앙 정렬의 두 번째 방법은 position과 transform을 이용하는 것입니다. 첫 번째 방법(position + margin)과 달리 요소의 크기가 불명확할 때도 사용이 가능한 방법입니다. ![](https://velog.velcdn.com/images/ryushin0/post/ee6b1b17-fbb0-4be4-83ca-bfa8e10c94fb/image.j