분류 전체보기
-
Next.js에서 Google Font 적용하기개인프로젝트 2023. 4. 10. 14:51
요새 면접보러 다니느라 너무 바쁘고 힘든 나날이 연속되서 프로젝트에 손을 놓고 있었습니다 ㅠㅠ.. 언능 마무리 짓고자 고고 하겠습니다. 저는 이 프로젝트를 크롬으로만 확인하며 UI를 제작했습니다. 그러다 기능테스트를 위해 사파리로 들어갔었는데 왠걸.. 궁서체 비슷한 폰트로 나오는겁니다. 다른 환경에서도 동일한 UI를 보여주기 위해서는 폰트를 꼭 적용해야겠다 라고 느끼고 Next.js에서는 어떻게 웹폰트를 적용시켜야 하는지 검색해보았습니다. 그냥 리액트는 Google Font 에서 지원해주는 주소를 복붙만 하면 됐는데 Next.js는 조금 다르다고 합니다. 관련 공식문서 https://nextjs.org/docs/basic-features/font-optimization Basic Features: Fon..
-
Next.js에서 Image컴포넌트가 적용되지 않습니다..개인프로젝트 2023. 4. 2. 14:00
이렇게 Next.js에서 이미지를 알아서 최적화해주는 Image컴포넌트를 사용하려고 했습니다. 근데 아래와 같이 이미지가 나오지 않습니다. 원인은 아마 이미지URL에 있을 것 같은데요. 저 src 안에 있는 profile을 콘솔로 출력하면 주소는 다음과 같습니다. popfile: 'http://www.animal.go.kr/files/shelter/2023/03/202304012104101.jpg'; URL에 실제 들어가보면 이미지는 잘 나옵니다. 이미지를 가지고 오는 과정에서 문제가 생기는 것 같아요. 혹시몰라 http를 https로 바꿔주고 하드코딩 했는데 아래와 같은 에러가 뜨네요. 저 빨간 문구를 눌러보니 이런 화면이 뜹니다. 아~~컨피그에 등록을 해줘야되는군요. 아래 코드를 next.config..
-
공공API 가져오기 너무 어렵다..개인프로젝트 2023. 4. 1. 03:01
일단 유기동물의 리스트를 가져오기 위해 https://www.data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15098931 농림축산식품부 농림축산검역본부_동물보호관리시스템 유기동물 정보 조회 서비스 동물보호관리시스템의 유기동물 정보를 조회할 수 있는 서비스이며, 유기동물정보에 포함되는 부가적인 정보를 조회할 수 있도록 시도 조회 API, 시군구 조회 API, 보호소 조회 API, 품종 조회 API www.data.go.kr 구글링하여 이런 API를 찾아 들어갔습니다. 활용신청을 하니 바로 API Key를 주네요. 이 것을 활용하기 위해 샘플코드를 봅니다. 음.. 뭔가 내가 원하는 형태는 아니네요. API Key는 소중하니 환경변수로 따로 만들어줍..
-
React에 대한 면접질문 및 답변 리스트CS지식 모음 2023. 3. 30. 14:56
✔ React의 개념과 장점, 그리고 컴포넌트란 무엇인가요? React는 UI를 구축을 위한 자바스크립트 프론트엔드 라이브러리 입니다. 주로 Single Page Application를 만들 때 사용됩니다. React의 장점에는 virtual DOM을 사용해서 어플리케이션의 성능을 향상시키고, 클라이언트 사이드 렌더링이 가능합니다. 또한 다른 프레임워크와도 사용이 가능하며, 컴포넌트의 가독성을 높이며 유지보수가 쉽습니다. 여기서 컴포넌트란, 레고 블록과 같이 작은 단위로 만들어서 그것을 조립하는 것처럼 개발하는 방법입니다. 컴포넌트를 사용한다면 캡슐화, 확장성, 결합성, 재사용성과 같은 이점이 있습니다. [정리] 개념: UI를 구축하기 위한 자바스크립트 프론트엔드 라이브러리 장점: virtual DOM을..
-
HTTP에 대해 설명해주세요.CS지식 모음 2023. 3. 30. 13:45
HTTP(Hyper Text Transfer Protocol) 인터넷에서 클라이언트와 서버가 데이터를 주고받을 수 있는 프로토콜(규칙)입니다. 클라이언트는 데이터를 서버로 요청하는 요청자이며, 흔히 웹브라우저가 그 역할을 하고 응용프로그램에서는 HTTP요청을 위해 사용하는 라이브러리가 클라이언트 역할을 합니다. 서버는 클라이언트가 요청한 데이터를 제공하는 제공자이며, 이미지,HTML파일처럼 파일을 제공하는 서버,API서버 등 다양하게 있습니다. HTTP통신에서는 서버가 제공하는 결과를 응답(Response)라고 합니다. 80번 port를 이용합니다. HTTP 통신을 위해 저는 Axios 라이브러리를 사용해본적이 있습니다. HTTP 메세지 구조 HTTP Request 구조 HTTP Request 메세지는 ..
-
개인 프로젝트(유기동물 홍보 플랫폼) 구상하기개인프로젝트 2023. 3. 29. 22:29
개인 프로젝트로 유기동물 홍보 사이트를 만들어보려고 합니다. 포인핸드처럼 만들어보고 싶으나 실력이 부족해서 될지 모르겠어요. 최선을 다해서 만들어보겠습니다. 그리고 반응형으로 구현할 것이기 때문에 모바일 먼저 구현할 계획입니다. 와이어프레임은 시간이 너무 오래걸릴 것 같아 패스 이번 목표는 "나의 프론트엔드 개발 역량을 최대한 보여주자" 입니다. 채용된 기술 사용 언어 - Typescript / 런타임 이전 버그나 에러를 잡기위해 채용 프레임워크 - Next.js / SEO, 코드스플리팅을 통한 로딩속도 개선, 유연성과 확장성이 높아 채용 서버 상태관리 - React Query / API요청결과를 캐시해서 재사용할 수 있음, 상태관리와 비동기처리에 용이하여 채용 클라이언트 상태관리 - Redux Tool..
-
캐시(Cache)에 대하여 설명해주세요.CS지식 모음 2023. 3. 29. 13:56
제가 아는 캐시는 $ 캐시밖에 없습니다.. 그래서 이번에는 캐시에 대하여 공부해봤습니다. 캐시 란...? 데이터나 자원을 미리 저장해놓는 임시 저장소 입니다. 일반적으로 캐시는 프로세서나 애플리케이션 내부에서 동작하며, 빠른 속도로 접근할 수 있고, 시스템의 성능을 개선할 수 있습니다. 캐시는 데이터의 일부만 저장하고 저장된 데이터는 일정 시간이 지나면 만료 됩니다. 캐시의 장,단점에 대해 설명해주세요. 장점 접근 속도가 빠릅니다. - 캐시에 저장된 데이터나 자원은 빠른 접근이 가능하기 때문에, 매번 원본 데이터나 자원에 접근하는 것 보다 더욱 빠른 속도로 데이터나 자원에 접근할 수 있습니다. 시스템 성능이 개선됩니다. - 빠른 접근 속도로 인해 시스템의 처리량이 개선되고, 더 많은 요청을 처리할 수 ..
-
프레임워크와 라이브러리의 차이점을 설명해주세요.CS지식 모음 2023. 3. 29. 13:13
음.. 프레임워크와 라이브러리의 차이점. 제가 예전에 테크유튜브를 보다가 프레임워크와 라이브러리의 차이점에 대해서 설명하는 영상을 보았는데요. 오래전이라 기억은 자세히 나지 않지만 차이점은 이랬습니다. 프레임워크 : 정해진 규정에 맞게만 코드를 작성하면 됨 라이브러리 : 이 코드가 아니면 안됨 근데 React 공식문서를 가보면 대문에 React는 라이브러리 라고 소개하고있는데, 음.. 저렇게 따지면 React는 프레임워크가 아닌가? 라는 생각이 듭니다. 그래서 아직도 React가 프레임워크다, 라이브러리다 공방이 펼쳐지고 있는 것 같은데요. 오늘 주제를 통해서 프레임워크와 라이브러리의 차이점이 뭔지 확실히 알아보겠습니다! 프레임워크 뼈대나 기반구조를 뜻하며, 제어의 역전 개념이 적용된 대표적인 기술. 전..
-
parameter와 argument의 차이CS지식 모음 2023. 3. 28. 13:14
parameter와 argument는 분명히 다르다고 하는데 저는 뭐가 다른지 알지 못합니다. 자, 이번에는 GPT선생님한테 물어보았습니다. GPT선생님은 parameter와 argument가 자바스크립트 함수에서 매우 중요한 개념이라고 하네요. 개념은 GPT선생님이 답변해준걸 보고 한번에 이해됐습니다. parameter는 함수를 "정의 할 때" 함수의 인자를 나타내는 변수를 말합니다. 함수를 "호출하기 전"에 미리 정의되며, 함수의 인자 값을 함수 내부에서 참조하여 사용합니다. // 예시코드 const greet = (name) => { console.log(`hello, ${name}!`); } 위 예제에서 name은 함수 greet의 parameter입니다. argument는 함수를 "호출 할 때"..
-
Hoisting과 TDZ 대하여CS지식 모음 2023. 3. 28. 12:34
정말 많이 들어봤던 호이스팅! 이 호이스팅은 어떤 역할을 하고 또 무엇일까요? ..저도 몰라서 찾아봤습니다. MDN에는 이렇게 적혀있습니다. 호이스팅 JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. 호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것"으로 말하곤 합니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지..