hound

개발관련 문제들을 집요하게 추적하고 해결하는 중입니다.

Posts by Month

2024/01

맨 위로 이동 ↑

2023/12

맨 위로 이동 ↑

2023/11

SWR, intersectionObserver로 무한스크롤 구현

기존엔 해당 페이지의 목록값만 보여주면 되는 형태였기 때문에, params.page의 값에 따라 변경된 데이터를 보여주도록했습니다. 그러다가 더보기와 무한스크롤 UI로 개선이 필요했는데 Redux로 전체값을 관리하고 다음 페이지를 로딩할 때마다 배열에 값을 추가하는 방식은 비효율적...

맨 위로 이동 ↑

2023/07

맨 위로 이동 ↑

2023/05

맨 위로 이동 ↑

2023/04

맨 위로 이동 ↑

2022/11

맨 위로 이동 ↑

2022/10

[Profile] team convention

원활한 협업, 소통 그리고 유지보수를 위해 team convention 중요시 생각합니다. 따라서 회의를 통해 convention을 만들고 문서화합니다. code convention의 경우 Linter, Formatter, Husky를 통해 걸러냅니다.

맨 위로 이동 ↑

2022/09

[Profile] 업무 공유, 소통

스크럼, 코드리뷰를 통해 팀원간 업무 공유를 중요시 생각합니다. 전반적인 작업 상황과 코드의 흐름을 파악할 수 있어 개발 및 유지 보수에 좋고 업무 지연을 방지, 팀원과 일을 나눠 일정에 맞게 개발할 수 있기 때문입니다. 따라서 다음과 같은 방식으로 스크럼과 코드리...

[Profile] 집요한 문제 추적

작성하는 순간 레거시 코드가 된다고 생각하기에 문제를 찾고 해결합니다. 더 나은 코드를 짜기 위해서, 그리고 같은 실수를 반복하지 않기 위해서 기록하고 복기합니다.

맨 위로 이동 ↑

2022/08

맨 위로 이동 ↑

2022/07

맨 위로 이동 ↑

2022/06

맨 위로 이동 ↑

2022/05

맨 위로 이동 ↑

2022/04

맨 위로 이동 ↑

2022/03

[react] useref()

자바스크립트에서 DOM을 조작할 땐 queryselector나 getElementById, getElementByClassName DOM Selector메소드를 사용했죠. 하지만 리액트에서 그런식으로 DOM을 조작하면 안 됩니다. 대신 useRef() 훅을 사용해야 합니다.

[css] box Shadow

box-shadow는 선택한 요소에 그림자 효과를 만들어 주는 css 속성입니다. 기본값은 none으로 그림자 효과가 없는 상태입니다.

맨 위로 이동 ↑

2022/02

[react] 탭메뉴 만들기

오늘은 부트스트랩을 사용해 텝메뉴 만드는 법을 알아보도록 하겠습니다. 먼저 아래 처럼 react-bootstrap을 설치후 import해주세요.

맨 위로 이동 ↑

2022/01

[git] commit 변경

만약 commit시 메세지를 잘못 입력했다면 아래 방법으로 수정하시면 됩니다.

[blog] sidebar 만들기

오늘은 블로그에 다음과 같이 sidebar를 추가해보도록 하겠습니다.

[error] react Scripts 에러

평소처럼 npm start로 리액트 프로그램을 실행하려는데 다음과 같은 오류를 만났습니다. 😫

[react] 데이터 바인딩 ③ redux

redux는 index.js에서 Provider태그를 가지고 상위 컴포넌트 App에 state를 전송하고 reducer를 통해 데이터를 관리하기 떄문에 여러 컴포넌트에서 반복적으로 나타나는 데이터를 전송할 때 사용하면 편리합니다.

[blog] 블로그 댓글 utterances

github에 올린 페이지에 댓글달기 기능을 추가하고 싶다면, utterance를 사용하시면 됩니다. utterances는 github의 이슈를 만드는 방식으로 댓글을 생성합니다. 사용법

[react] 데이터 바인딩 ② usecontext

App 컴포넌트에서 생성한 state를 다른 컴포넌트에서 쓰려고 할 떄 전엔 props를 통해 전달해줬습니다. 간단한 데이터를 내보내기엔 편하지만 관리가 필요한 복잡한 데이터, 또는 여러번 props해줘야 되는 데이터의 경우엔 props를 여러번 사용하는 게 불편합니다. 이럴 때 ...

[react] axios(ajax)

ajax는 서버에 새로고침 없이 요청이 가능하게 해주며 다음과 같은 방법으로 사용합니다.

[react] useeffect

컴포넌트엔 인생주기 lifecycle가 있습니다. 마운트, 언마운트시 (등장 업데이트), 재렌더링되고 퇴장하는 모든 순간인데요. 이 각각의 순간마다 훅을 걸면 특정 순간에 작동되는 명령을 만들 수 있습니다.

[react] styled Components

컴포넌트가 많아지면 일일이 css 만들기 복잡합니다. 실수로 className을 중복 사용하는 경우도 있죠 그래서 styled-component를 사용합니다.

[react] useparams & 경로설정

저번 시간에 반복문으로 하나의 component를 여러번 출력 하는 방법에 대해 알아봤습니다.

[react] component + 반복문

쇼핑몰의 메인페이지엔 상품 수 만큼의 상품컴포넌트들이 출력됩니다. 그런데 이 코드들을 일일이 입력한다면… 😱 너무 일이 많아질 것입니다.

[react] react Router Dom ④ usehistory

useHistory는 방문기록을 저장할 수 있는 기능으로 훅으로 객체를 초기화해서 사용하는데 뒤로가기 같은 기능에 사용하기 좋습니다.

[react] react Router Dom ③ switch

리액트 라우터는 “/” 나 “/:id” 로 경로가 설정된 경우 모든 경로의 페이지를 라우팅합니다. 그게 싫고 정확히 매칭된 컴포넌트만 보이게 하고 싶다면 Switch를 사용하면 됩니다.

[react] 모듈화

리액트는 싱글페이지로 화면 개발합니다. App.js 내부에 컴포넌트들을 렌더링하기 때문에 현재 모든 컴포넌트들을 한페이지에 작성해뒀는데요.

[react] link

리액트로 작업을 하다가 터미널에 다음과 같은 메세지를 받아보신적이 있을 것입니다.

[react] sass

Sass는 css를 프로그래밍언어스럽게 작성하도록 도와주는 preprocessor 패키지입니다. 예로 sass를 사용하면 css 파일 내에서 변수, 연산자, 함수, extend import등을 사용해 코딩이 가능합니다.

Yarn

yarn은 자바스크립트 의존성 관리 패키지 매니저입니다. Java의 gradel이나 Python의 pip를 생각하시면 이해하기 쉬울 텐데요. npm과 같이 자바스크립트 패키지의 저장소를 제공할 뿐만 아니라 시스템에서 의존 패키지를 설치하거나 업데이트하는 등의 명령을 제공합니다. ...

[react] react Router Dom ① route

리액트는 알시다시피 하나의 페이지만을 사용하죠. 그런데 여러페이지를 띄우고 싶다면 어떻게 해야 할까요?

[java] priorityqueue

저번에 Queue 메소드에대해 알아봤는데요. 오늘은 이어서 Queue에 우선순위를 부여하고 해당 순서에 따라 출력순서를 정해주는 PriorityQueue 클래스에 대해 알아보도록 하겠습니다. 객체 생성

맨 위로 이동 ↑

2021/12

[java] queue method

Queue는 Stack의 LIFO(LastInFirstOut) 선입후출 방식과 반대로 FIFO(FirstInFisrtOut) 선입선출 방식을 따릅니다.

[java] hash

코딩테스트를 하다보면, 해시방법을 쓰라는 힌트를 볼 때가 있습니다.

[react] bootstrap 적용

프론트엔드 작업을 할 때 직접 css를 하기 귀찮다면, css 라이브러리 bootstrap을 이용하면 됩니다. 리액트에도 마찬가지로 적용가능한데요. 다음과 같은 방법으로 사용하시면 됩니다.

[css] selector

css에서 특정 요소의 디자인과 레이아웃을 바꾸고 싶을 때 해당요소를 선택하기 위해 selector를 사용합니다.

[react] props

App이란 컴포넌트에 아래 변수가 있습니다.

[react] input

저번 시간엔 event.target 속성을 이용해 input 값을 state에 저장하는 법을 알아봤는데요. 오늘은 그 값을 기존 state 배열에 저장해 화면해 출력하도록 해보겠습니다.

[react] component 옛날 작성법

요즘엔 함수로 컴포넌트를 생성하고 useState를 이용해 값을 저장하지만 옛날엔 클래스로 컴포넌트를 생성하고 생성자함수안에 this.state에 값을 저장했습니다.

[js] event.target

addEventListener 함수로 이벤트 핸들러를 등록할 때 객체를 전달해야 하는 경우가 있습니다.

[react] component

component를 사용하면 여러줄의html을 한 단어로 줄여서 쓸 수 있습니다. 리액트에선 하나의 주제값을 보여주는 div를 만들 때 컴포넌트형태로 만드는데요. 쇼핑몰 화면 각각의 상품칸이 이런 형태를 띄고 있다고 생각하시면 됩니다.

[react] jsx

JSX는 JavaScript XML의 줄임말로 자바스크립트에 XML을 추가한 확장형 문법입니다.

nodeWeb

오늘은 node.js를 사용해 웹페이지를 구현하는 방법에 대해 알아보도록 하겠습니다. 😉

맨 위로 이동 ↑

2021/11

Stack

stack은 ‘쌓다’, ‘더미’를 의미합니다.

[java] set vs list

아래와 같이 int[] 배열이 있을 때, 서로 다른 두 인덱스의 합을 저장한 뒤 오름차순 정렬을 하려고 합니다.

blog 검색 등록

저번 Google 검색 등록에 이어서 네이버,다음 검색 등록을 해보도록 하겠습니다.

[blog] google 검색 등록

블로그 제작 사이트를 통해 블로그를 생성한 경우 웹페이지가 자동으로 공개되지만 직접 블로그를 만들어 배포한 경우라면 그렇지 않습니다. 😢

Math클래스와 함수

Math 클래스는 수학과 관련된 일련의 작업들을 쉽게 처리해주는 api들로 구성돼있습니다. java.lang 패키지에 포함된 클래스이기 때문에 import가 필요없고 메소드가 전부 static형태라 따로 객체를 생성할 필요가 없습니다. 오늘은 그중에서도 자주 쓰는 메소드들에 대...

Continue vs break

반복문을 사용할 때 모든 경우를 다 돌아야 할까요? 🤔

맨 위로 이동 ↑

2021/10

[error] arithmeticexception

``` public static void main(String[]args){ Scanner sc = new Scanner(System.in); int [] arr ={1,2,3,4,5}; for(int i=0;i<arr.len...

[java]@media

반응형 웹사이트 만들기위해 화면 크기마다 css달리 적용해줍니다.

자바 문자 함수

오늘은 Java에서 문자열을 가지고 여러가지 값을 구해야 할 때 알면 좋을 함수들에 대해서 알아보겠습니다. 😎 변수의 자료형에 따라 그리고 어떤 클래스를 사용하는 지에 따라 사용할 수 있는 함수가 다르기때문에 나눠서 보도록 하겠습니다.

Transform과 translate()

특정 요소를 다양한 방식으로 변형할 때 사용합니다. 특히 transition함수 3d 기능과 함께 사용할 시 효과가 배가 되는데 이를 @keyframes을 통해 섞어 사용하면 애니메이션효과를 줄 수 있습니다.

웹페이지 구성

웹페이지 구조는 보통 다음과 같이 나눌 수 있는데요. 이를 시멘틱(의미적) 구조라고 합니다.

날짜구하기

게시판 DB에 현재시간을 넣으려면 어떻게 해야 할까요 😮

Node.js란

오픈소스 JavaScript엔진인 크롬 V8로 만들어진 JavaScript 런타임 환경으로, 브라우저 밖에서도 JavaScript로 서버를 구축하는 등의 코드를 실행할 수 있게 해줍니다. Node.js는 네트워크 프로그램 개발을 위해 만들어졌기에 주로 서버사이트에서 많이 사용...

Jpa

#JpaRepository 사용법

Setattribute() vs attr()

태그의 속성값을 바꾸고 싶을 때 자바스크립트에선 setAttribute()를 제이쿼리에서는 attr()를 사용합니다. 자바스크립트와 제이쿼리의 문법이 다르므로 밑의 예제를 보면서 설명을 하도록 하겠습니다.

Awesome font 무료 아이콘

아이콘을 직접 만들기 힘들 때 무료로 제공된 디자인을 사용하면 편리하죠. 😎

맨 위로 이동 ↑

2021/09

Gitbash 빠져나가기

해결방법 git add를 하는 데 오타가 나서 아래와 같이 화면이 쭉 이어진적이 있습니다. 😖

Intellij prettier 사용

Prettier란 코드 포멧터(Code Formatter)로 규칙을 작성하면, 코딩 문서를 해당 규칙에 맞는 스타일로 변환해 줍니다.

Disqus 댓글기능

저처럼 직접 정적페이지로 블로그를 운영하시는 경우 댓글기능은 기본 제공되지 않습니다. 동적으로 데이터를 저장해야 하는데 그런 처리가 불가능하기 때문이죠. 그럴 때 Disqus같은 소셜 댓글 서비스를 이용하시면 포스트에 댓글 기능을 사용할 수 있습니다.

테스트코드

테스트 코드란 서버를 실행하지 않고 작성한 코드가 제대로 작동하는지 알아보기 위해 따로 만들어 둔 코드를 의미합니다.

[error] git 에러(index.lock)

어느날 git을 사용하던 중 다음과 같은 에러메세지를 만났습니다. fatal: Unable to create '레포지토리로컬경로/index.lock': File exists. Another git process seems to be running in this repository,...

Intellij 설치

1. jetbrains의 IntelliJ IDEA 다운로드 아래 링크로 접속 후 자신의 운영체제에 맞는 프로그램을 선택해주세요.

Java 설치

0. Oracle 회원가입 *Java는 oracle에서 회원가입 후 다운로드가 가능합니다. 아래 순서 이전에 회원가입을 해주세요!!

[error] intellij start failed오류

IntelliJ가 실행이 안될 때 cmd 창에 cd 인텔리제이가 있는 파일 주소명을 입력 - idea.bat을 입력해줍니다. 그랬을 때 다음과 같은 메세지가 뜬다면

타임리프 javascript 함수 호출 복사본

Typo: in word:~ 생기는 원인 스펠링이 틀렸다고 인식해서 intelliJ는 스펠링 체크를 자동으로 해주고 있습니다. 만약 스펠링이 잘못된 것 같다 싶으면 위처럼 밑줄이 생기고 Typo: in word:~ 라는 메세지 박스가 뜹니다. 실제로 스펠링이 틀린 단어라 수...

Intellij 스펠링체크 해제 복사본

Typo: in word:~ 생기는 원인 스펠링이 틀렸다고 인식해서 intelliJ는 스펠링 체크를 자동으로 해주고 있습니다. 만약 스펠링이 잘못된 것 같다 싶으면 위처럼 밑줄이 생기고 Typo: in word:~ 라는 메세지 박스가 뜹니다. 실제로 스펠링이 틀린 단어라 수...

Javascript 변수 var,let,const차이

var 변수 선언을 여러번 할 수 있다. hoisting시 선언문 이전에 참조가능하다. ; hoisting(선언문을 해당 스코프의 선두인 것처럼 동작하는 것) 간단하게 변수를 테스트할 땐 편할 수 있지만 코드량이 많아지면 값을 파악하기 힘들다. 외부에서 접근이 ...

타임리프 조건문

타임리프 조건문 *타임리프에서는 데이터를 el식${}을 사용해 나타낸다. *태그안에서 조건문을 만들기 때문에 결과값도 태그의 범위 안에 있어야 인식이 된다. *if-unless( if조건 외 else는 unless로 표현) *switch case문 : 따로 break안해줘도 된다...

맨 위로 이동 ↑