메인페이지 UI완성 layout은 아래와 같이 나눴다. 상단에는 NavBar와 네이버 명언에서 크롤링해온 데이터가나오는 롤링배너를 위치시켰다. 메뉴의 구성은 아래와 같이 나눴다. Write : 글쓰기 Collection : 좋아요 누른 글만 모아보는 페이지 Diary : 한줄일기를 작성할 수 있는 페이지 Request : 요청사항을 적는 페이지 홈의 왼쪽 구간에는 사이트에 대한 설명과 인기글 3개를 보여준다. GIF이미지는 여러 이야기들이 한공간에 모이는 느낌이 드는 이미지로 선정했다. 가운데 구간은 최신글 리스트를 보여준다. react-scrollbar를 사용하여 스크롤이 가능하도록 구현했다. 마지막으로 오른쪽 구간은 접속중인 유저목록과 글쓰기 플로팅 버튼을 보여준다. 온라인 유저가 리스트 처음으로 오..
NavBar UI 스타일 적용 NavBar의 프로필 부분을 모달창의 컴포넌트는 만들어놨지만 작동을 안해서 수정할 경 스타일을 적용했다. 약간 어두운 흰색을 배경으로 채도가 조금 빠진 검정색을 이용했다. 유저프로필쪽에 호버를 하면 메뉴가 내려오도록 꾸몄다. 로그인 하지 않은 상태의 기본 모습 로그인 한 상태의 기본 모습 로그인 한 상태에서 호버하면 나타나는 메뉴 로그아웃 한 상태에서 호버하면 나타나는 메뉴 메인페이지 명언 칸 명언데이터 크롤링 기존에 빈 칸이였던 자리에 여러 유명인사들의 명언들을 보여주도록 크롤링 하는법을 찾아봤다. 많은 난항이 있었다... 일단 get메소드로 html파일을 가져오고 cheerio라이브러리를 사용해 html파일에서 원하는 클래스 혹은 태그에서 데이터를 가져왔다. await ..
LIKE 버튼 구현 UI는 아래와 같이 스타일을 적용했다. Like 버튼의 데이터는 글, 날짜, 작성자와 동일하게 가져왔다. Like 버튼은 데이터만 가져오면 끝나는게 아니다. 누를 때 마다 데이터가 업데이트 되어야 하고, 이미 눌렀다면 다시 뺀 값이 업데이트 되어야한다. api는 게시물 번호와, 유저명을 받아 해당 게시물을 찾아서 like배열에 유저명을 넣는 식으로 작성했다. like배열에 이미 유저명이 있으면 배열에서 유저명을 제거해서 다시 돌려준다. /** * @path {PATCH} http://localhost:8000/api/posts/like * @description 좋아요 수 변경 * @returns {post} */ router.patch('/posts/like', async (req,..
문제 설명 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 제한 조건 n은 10,000,000,000이하인 자연수입니다. 나의 풀이 function solution(n) { return (n+'').split('').reverse().map(Number); } 다른 풀이 function solution(n) { var arr = []; do { arr.push(n%10); n = Math.floor(n/10); } while (n>0); return arr; } 마무리 숫자를 배열로 변환해서 뒤집어서 반환하는 문제였다. 일단 나는 문자 풀이로 문제를 풀었다. 근데 다른 사람들의 풀이를 보니 숫자풀이로 문제를 풀어..
컴포넌트(클래스 / 함수) 함수 컴포넌트와 클래스 컴포넌트의 차이가 무엇인가요? 클래스 컴포넌트 먼저 클래스 컴포넌트는 자바스크립트의 class 키워드로 시작하여 React.Component를 상속받는 형태를 가지고 있다. 컴포넌트별로 state 속성을 정의할 수 있고, state 초기화를 위해 constructor 함수를 사용할 수 있다. 그리고 컴포넌트 라이프사이클별 메소드를 임의로 정의하여 사용할 수 있다. 마지막으로 render 메소드를 통해 컴포넌트가 렌더링 할 JSX를 반환한다. 함수 컴포넌트 함수 컴포넌트는 기존에 state를 관리할 수 없고 라이프사이클별 코드를 작성할 수 없어서 선호되지 않았다. 하지만 리액트 Hook의 추가로 useState와 같은 Hook을 통해 상태와 여러가지 상황 ..
React React는 라이브러리인가요 프레임워크인가요? 공식문서에서도, 리액트는 View에 관련된 기능 개발을 위한 라이브러리라고 소개하고 있다. 리액트를 사용할 때, 라우팅이나 상태관리와 같은 개발에 필요한 여러 기능들은 서드파티 라이브러리에 의존해야 한다. 따라서 리액트는 개발을 위한 자바스크립트 라이브러리라고 생각한다. 라이브러리와 프레임워크의 차이를 알고 있나요? 라이브러리는 특정 기능 개발을 도와주는 도구들을 모아놓은 개념이고, 프레임워크는 프로그램을 개발하기 위한 구조를 제공하는 개념이다. 따라서 프레임워크를 사용하면 개발에 대한 전체적인 기능을 제공하고, 프로그램 제어 흐름을 프레임워크에서 관리하는 차이점이 있다. 리액트의 특징을 설명해주세요. (리액트를 사용한 이유) 리액트는 단방향 데이..
브라우저 렌더링 과정 브라우저 렌더링 과정에 대해 설명해주세요. (프론트엔드 위주) 다운로드 웹 브라우저에 사용자가 입력한 URL 주소를 DNS를 통해 IP 주소를 검색하고, 그 IP 주소에 HTTP GET 요청 메시지를 전송한다. 네트워크를 통해 웹서버로부터 요청에 대한 웹 서버로부터 응답 메세지를 전달 받는다. 파싱 (DOM 트리, CSSOM 트리 생성) 브라우저는 응답 메세지의 body에 있는 HTML를 문서를 파싱해 DOM 트리 생성을 시작한다. 먼저 HTML 상단의 DOCTYPE 을 읽어서 HTML 버전을 체크하고, 그 이후 버전에 따라 HTML 파일을 마크업 단위로 시리얼라이징 한다. 파싱 과정 중 link, script, img 와 같은 특수한 태그를 만나면 추가적인 일을 진행한다. 스타일 ..
객체지향 프로그래밍 객체지향 프로그래밍이란? 현실 세계의 사물처럼, 프로그래밍에 필요한 개념을 객체라는 개념으로 추상화하고, 객체들간의 상호작용을 중심으로 프로그래밍하는 패러다임을 의미한다. 객체지향 프로그래밍에서 객체란? 좁은 의미로 객체는 클래스의 인스턴스라고 할 수 있고, 넓은 의미에서 객체는 속성과 행위로 이루어진 독립된 단위를 의미한다. 객체지향 프로그래밍의 특징을 설명해주세요. 추상화 : 추상화는 객체간에 공통적인 특징이나 기능을 추출하는 것을 의미한다. (예를 들어, 강아지와 고양이를 동물이라는 공통적인 특징으로 추상화 할 수 있다.) 상속 : 상속은 기존 객체의 기능을 다른 객체에서 사용할 수 있도록 넘겨주는 것을 의미한다. 다형성 : 다형성은 어떤 메소드가 다양한 방식으로 동작할 수 있는..
프로그래밍 프로그래밍이란 무엇인가요? 프로그래밍이란 문제상황을 이해하고 분석하여 도출한 해결 방법을 컴퓨터에게 실행 요청하는 것이다. 컴파일러/인터프리터를 알고 계신가요? 컴퓨터에게 어떤 문제 해결을 요청할 때는 프로그래밍 언어라고 하는 사람이 이해할 수 있는 문법을 사용하여 코드를 작성한다. 하지만 컴퓨터는 기계어만 이해할 수 있기 때문에 우리가 작성한 자연어 상태의 코드를 이해할 수 없다. 그래서 프로그래밍 언어로 구성된 코드를 컴퓨터가 이해할 수 있는 코드로 변환하는 일종의 번역기를 컴파일러 또는 인터프리터라고 부른다. 컴파일러와 인터프리터의 차이를 알고 계신가요? 둘 다 고수준의 언어를 컴퓨터가 실행할 수 있는 기계어로 변환하는 기능을 가지고 있다. 컴파일러는 전체 코드를 한 번에 컴퓨터가 실행할..
전체 글 가져오는 기능 Hook으로 만들어 사용 전체글을 가져오는 기능을 필요로 하는 페이지가 점점 많아지다보니 페이지마다 동일한 코드를 작성할 수 없었다. 그래서 Hook으로 만들어 필요한 정보를 리턴해 원하는 페이지에서 데이터를 가져가다 쓸 수 있도록 했다. 문제는 useQuery로 받아온 데이터는 객체로 받는데 보통 객체를 배열로 변환하는 함수를 사용하곤 하지만 무슨이유인지 배열로 변환할 수가 없었다. 그래서 아래와 같이 for in문을 사용해 객체 하나씩 돌면서 원하는 배열에 저장하는 방법을 사용할 수 밖에 없었다. export const useGetAllposts = () => { const { data: postData, error } = useQuery( ['allPosts'], async ..
