전체 글

TIL - 2022.02.04 금요일

오늘 배운 것 1. 백엔드-프론트엔드 Architecture 오늘은 브라우저와 프론트엔드, 백엔드, DB가 연결되어있는 구조를 배웠다. 이러한 구조를 Architecture 라고 한다. 개발이란 기본적으로 협업이기 때문에, 서비스를 구동하기 위해 각 서버들이 어떤 방식으로 연결되어있는지 기본적인 구조는 이해하고 있어야 한다. 특히나 서버 사이드 렌더링(SSR) 방식을 사용하거나 모바일 앱 등을 개발하는 경우, 프론트엔드 개발자에게도 서버에 대한 충분한 이해가 필요하다. 프론트엔드, 백엔드, DB(데이터베이스)는 각각의 서버 프로그램이 설치되어 돌아가고 있는 '서버 컴퓨터'이며, '서버 컴퓨터'는 보통 컴퓨터를 생략하고 '서버'라고 부른다. 1. 브라우저가 프론트엔드 서버에 데이터 요청 2. 프론트엔드 서..

TIL - 2022.02.03 목요일

오늘 배운 것 1. 넷플릭스 리뷰 커뮤니티 - 댓글 수정 및 댓글 무한스크롤 기능 구현 댓글 목록 컴포넌트에서 각각의 댓글 Item들을 별도의 컴포넌트로 분리한 뒤, 수정 기능을 구현했다. react-infinite-slider를 이용해서 무한스크롤 기능도 구현 완료했다. 중간에 이유를 알 수 없는 오류가 자꾸 발생해서 고생했는데, 전부 오타 혹은 함수명 지정을 잘못한데에서 오는 에러였다. fetchBoardComments를 fetchBoards로 쓴다던가, page를 pages로 쓴다던가.. 2. 넷플릭스 리뷰 커뮤니티 - 메인 랜딩페이지 제작 컨텐츠를 다루는 서비스는 컨텐츠 외적인 요소가 최대한 간결해야 한다고 생각한다. 랜딩 페이지를 어떻게 만들까 한참 고민하다가, 영화라는 이미지를 강조하기 위해 ..

[Javascript] new Array() / fill() - 배열 생성자

new Array() Array() 생성자는 새로운 Array 객체를 생성할 때 사용한다. [element0, element1, ..., elementN] new Array(element0, element1[, ...[, elementN]]) new Array(arrayLength) fill() fill은 해당 배열을 동일한 값으로 채운다. 시작 인덱스와 끝 인덱스도 지정이 가능하다. arr.fill(value[, start[, end]]) 배열 생성자 사용 시, arrayLegnth만 입력해서 배열을 만들 경우 해당 길이의 빈 값을 가진 배열이 생겨난다. 이 때 fill을 이용해서 해당 배열의 빈 값을 동일한 값으로 채워줄 수 있다. 예제 let array1 = new Array(1, 2, 3, .....

[Javascript] isNaN() / Number.isNaN() - NaN인지 판별

NaN이란? Not-A-Number. 해당 값이 숫자가 아님을 나타내는 속성이다. NaN 여부는 === / == 로 판별할 수 없으며, isNaN 혹은 Number.isNaN 함수를 이용해 판별해야 한다. isNaN() 어떠한 값이 NaN인지 판별하는 함수. 값이 NaN일 경우 true, NaN이 아닐 경우 false를 반환한다. isNaN(value) // 결과값은 boolean으로 반환한다. Number.isNaN() isNaN의 경우 몇몇 케이스에서 혼동의 여지가 있다. (매개변수의 타입을 의도치 않게 숫자로 변환할 수 있음, 문자열인 값을 true로 반환함 등등..) 그러므로 엄격한 판별을 요할 때에는 Number.isNaN()을 이용하는 편이 좋다. 해당 값의 유형이 Number이면서 값이 Na..

[Javascript] reduce() - 배열의 각 요소에 대해 주어진 함수를 실행하기

reduce()란? Array.prototype.reduce() 메소드는 배열의 각 요소에 대해 주어진 함수(reducer)를 실행하고, 최종 결과값을 반환한다. const array1 = [1,2,3,4]; array1.reduce((a, b) => a + b) // array1의 각 요소의 총합을 구한다. array1.reduce((a, b) => a + b, 5) // 5라는 초기값에 array1의 각 요소를 더해 총합을 구한다. 문법 기본적인 형태는 아래와 같다. var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) { return accumulator + currentValue; }, 0); // sum is 6 위와 같은 내용을..

TIL - 2022.01.28 금요일

오늘 배운 것 - 오늘은 react-infinite-scroller 를 이용하여 무한 스크롤을 구현하는 방법을 배웠다. 게시판 목록 api를 불러와서 무한 스크롤 형태의 게시판 목록 만드는 데에도 성공했다. 중간에 오타 때문에 난 에러를 잡느라 시간을 한참 소비했지만 결국은 원인을 찾아냈다. 다행이다. page를 pages라고 치는 바람에 생긴 문제였음.. 하하 - 무한 스크롤에 이용하기 위해 스프레드 연산자도 배웠다. 현재 페이지에 이미 뿌려져있는 댓글의 배열과 새로 불러오는 댓글의 배열을 합치기 위해 사용했다. 스프레드 연산자를 알고 나니 이미 많은 곳에서 이미 사용되고 있다는 사실이 눈에 보인다. slick의 세팅값을 전달하는데에도 스프레드 연산자가 사용되고 있다. - 배너에 쓰는 slick의 아이..

TIL - 2022.01.27 목요일

오늘 배운 것 자유게시판에 페이지네이션을 만들어서 넣었다. 이것저것 고려하고 신경쓸 게 많아서 시간이 예상보다 훨씬 더 걸렸다. 완성된 모습이 아주 마음에 들지는 않지만, 기능을 제대로 구현했다는 것 만으로도 성공적인 첫 시도라고 생각한다. 메모해뒀던 페이지네이션 만드는 프로세스를 여기에도 옮겨둔다. (내가 보려고 해둔 메모라 나만 알아볼 수 있음 주의) 1. map을 이용해서 fetchBoards 한 데이터를 뿌려준다. 2. 한 번에 10개의 페이지를 노출시킨다고 할 때, 각각의 페이지는 {시작 페이지 + index }페이지가 되며, 시작페이지는 [1, 11, 21, 31 .. ]의 등차수열이다. 3. 시작 페이지에 해당하는 state를 만들고, 해당 state를 활용해서 fetchBoards의 var..

TIL - 2022.01.26 수요일

오늘 배운 것 오늘은 리액트의 기본 레이아웃을 어떻게 짤 수 있는지 배웠다. 모든 페이지에서 제일 처음 공통으로 렌더링되는 파일인 _app.tsx 에 따로 만든 Layout 컴포넌트와 글로벌 스타일 컴포넌트를 삽입한다. 그리고 레이아웃 내부의 바디 영역에 props.children을 이용해 각각의 페이지 컴포넌트들이 로드되게 한다. 이렇게 하면 LayoutHeader, LayoutBanner, LayoutNavigation 은 모든 페이지에서 공통으로 보인다. 그리고 그 밑의 Layout Body 영역에 게시판의 목록, 글쓰기, 수정 페이지 등이 필요에 따라 렌더링된다. 유지보수하고 관리하기 정말 편리한 구조다. 위의 내용을 활용해서 작업중이던 자유게시판의 기본 레이아웃 구조를 만들었다. 큰 틀을 먼저 ..

TIL - 2022.01.25 화요일

오늘 배운 것 오늘의 제일 큰 성과! 유튜브 동영상을 리액트에 쉽게 넣을 수 있도록 도와주는 React-player를 반응형으로 코딩해서 자유게시판에 넣었다. 알고보니 간단한데, 스스로는 생각해내지 못했을 것 같은 기발한 방법이라 무릎을 탁 쳤다. Position이랑 padding을 활용하면 된다. 역시 세상에는 고수가 많구나. 그 방법을 내가 이해한대로 구체적으로 적어보자면.. 우선 React-player를 감싸고 있는 div에 relative를 주고 react-player에 absolute를 줘서 부모 div의 height 값을 제로로 만든다. 그리고 padding-bottom 혹은 top에 원하는 비율을 퍼센테이지로 환산해서 입력하면 일정한 비율로 유튜브 플레이어가 들어간다. 앱솔루트의 새로운 활용..

TIL - 2022.01.25 월요일

오늘 배운 것 오늘은 코드 정리하는데에 많은 시간을 썼다. 하나의 페이지 컴포넌트 안에 덩어리째 묶어두었던 [ 게시글 보기 / 댓글 입력 / 댓글 보기 ] 를 세 개의 컴포넌트로 쪼개서 보기 편하게 만들었고, 타입스크립트로 마이그레이션하면서 미처 다 지정해주지 못한 요소들의 타입을 정리해주었다. 근데 워낙 코드가 섞여있어서 전부 끝내지는 못했음. 일단 상세페이지만 완료했다. 내일 코드리뷰라 코드를 공유할만한게 뭐가 있나 하다가, 그동안 생각만 하고 작업은 안했던 css 수정 작업을 진행했다. 넷플릭스 리뷰 게시판을 테마로 잡았다. 촉박하게 한 것 치고는 그럭저럭 마음에 들게 나왔다. 일단 내일 코드리뷰를 끝내고 차근차근 디테일을 손보자.. 작성자 부분에 들어간 linear-gradient 에도 트랜지션을..