전체 글 103

[next.js/typescript] bootstrap에서 scrollSpy 적용시키기

내가 선택한 개인 웹사이트 디자인에는 scrollSpy 기능이 적용되어있는 디자인이었다 https://getbootstrap.kr/docs/5.0/components/scrollspy/ 스크롤스파이스크롤 위치에 따라 Bootstrap 내비게이션 또는 목록 그룹 컴포넌트를 자동으로 갱신하여 뷰포트 내에서 현재 어떤 링크가 활성화 된지를 나타냅니다.getbootstrap.kr 간단하게 설명하자면 웹사이트를 들어갔을 때 내가 스크롤을 내릴때마다 옆에 있는 sideBar의 메뉴들이 내 스크롤 위치에 따라 변경되는 그런 웹 사이트들을 많이 봤을 것이다 그런 기능을 하는 것이 scrollSpy다 물론 직접 코드로 구현할 수도 있지만 bootstrap에서 아주 간단하게 제공하고 있기 때문에 그 친구를 써주기로 했다n..

기술/웹 개발 2024.08.06

[typescript] typescript에서 Union Types를 enum처럼 사용하기

개인 홈페이지 프로젝트에서홈페이지에 띄울 내 개인정보들을담을 data들을 enum 형태로만들어야겠다고 생각했다 나도 typescript는 처음인지라이것저것 구글링을 해보았는데enum이 없는 javascript와는 다르게typescipt는 typescript 자체적으로enum을 지원하고 있었으나이 enum을 사용하지 않는 편이좋다고 하는 글을 하나 발견했다 https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.들어가며 안녕하세요. LINE Growth Technology UIT 팀의 Keishima(@pittanko_pta)입니다. ..

기술/웹 개발 2024.08.04

[웹개발/개인홈페이지 개발] Start Bootstrap 무료 템플릿 사용하기

처음 개인 홈페이지 개발 프로젝트를구상할 때는피그마에서 템플릿을 보고html이랑 css부터 하나하나손수 작성해서 개발해보자는야심찬 꿈을 꾸었으나 .. 내가 프론트엔드 전문 개발자가 아니다보니시간이 어마어마하게 소요되는 문제가 있었다..  피그마에서 마음에 드는 템플릿가져와서 html이랑 css까지하나하나 손수 제작하다가일시정지했던 이전 프로젝트.. 그래도 저정도까진 작업했다 react 처음 + node.js도 처음이었는데야심차게 DB까지 연동시켜서이것저것 막 작업하다가시간이 너어어어무 오래걸려서좀 더 효율적으로 작업해보자는 마음에방향을 바꿔보기로 했다 ㅎㅎ.. 5-6시간동안 개발했는데폭풍 서칭하느라 크롬에서 검색 탭만거의 10개가 넘었었는데그래도 저정도까지 작업한 것도꽤나 잘했다고 생각한다 ㅎㅎ..(자기..

기술/웹 개발 2024.08.04

[웹개발/개인홈페이지 개발] next.js 설치 및 시작하기

이전부터 늘 해보고 싶었던개인 홈페이지 만들기 프로젝트 .. 너무너무너무 귀찮아서지금까지 미루고 미루다가 이젠 정말 남는 시간마다개발을 해보기로 했다 지금까지 내가 해본 웹 개발은백엔드 spring + 프론트 vanillaJS로정말 간단한 회사의 업무툴을두 번정도 만들어 보았고 회사 다닐 때spring으로 백엔드 작업 해본게전부이긴하다 그래도 웹개발하면 가장 많이쓰는node.js나 react를 한 번 접해보고싶었고이전부터 늘 개인 홈페이지를 만들어보고 싶었어서시작하게 된 프로젝트-!NextJS란?next.js는 웹 어플리케이션 무료로 배포로 유명한vercel이라는 회사에서 개발했다 Next.js는 react 기반의웹 개발 프레임워크이다 흔히 주로 비교되는 node.js와의가장 큰 차이점은 바로Server..

기술/웹 개발 2024.08.03

[neo4j] 자체 개발 plugin implement하기(docker)

우리 연구실에선 공간 데이터의 효율적인 DB 검색을 위해 graphDB인 neo4j를 채택했는데 neo4j에서 공간 데이터를 위한 쿼리 기능이 그렇게 좋지는 않다고 한다 따라서 우리 연구실에서 검색 성능 개선 및 공간연산(join, intersect)을 자체 plugin을 java로 개발했고 이를 neo4j에 플러그인으로 implement 해야했다 neo4j 공식문서에서 docker 환경에서의 plugin 설치 및 적용법을 참고하여 진행하였다 참고: https://neo4j.com/docs/operations-manual/current/docker/plugins/ Plugins - Operations ManualHow to load plugins when using Neo4j in Docker.neo4j..

기술/DB 2024.07.31

[리눅스/우분투] ssh 파일 전송, permission denied 해결

ssh를 통해 접속한 서버로내 로컬에 있는 파일을 전송해야했다 우선 ssh 접속을 통해파일을 원격으로 전송하는 명령어이다scp [전송할 파일경로] [사용자명@전송서버ip주소]:[전송서버내 저장경로] 만약 따로 설정한 포트 번호가 있다면scp -p [포트번호] [전송할 파일경로] [사용자명@전송서버ip주소]:[전송서버내 저장경로]위와 같이 하면 된다  그런데 명령어를 사용해서파일을 원격 전송하려 했더니permission denied 에러가 발생했다 따라서 구글링을 해본 결과3가지 정도의 경우의 수가 있다고 한다 1. 읽기 및 쓰기 권한 확인전송하려는 파일이 있는 폴더에서ls -al명령어를 치면 읽기, 쓰기, 실행 권한을 확인할 수 있는데읽기 및 쓰기 권한이 있는지를 확인해주자  가장 왼쪽의-rw-r--r-..

기술/서버 2024.07.31

[docker] docker image 다운로드 경로 변경

docker image를 pull 하면 다운로드되는 경로를특정 폴더로 변경해야하는 상황이 발생했다 우선 그래서 현재 docker image가다운로드되는 경로를 확인해줬다docker info | grep "Docker Root Dir" 위 명령어를 입력해주면아무 것도 변경한 적이 없다면/var/lib/docker로 경로가 뜰 것이다 이 경로를 내가 원하는 다른 경로로변경해줘야한다1. 안전하게 docker 서비스 종료현재 작동하고 있는 docker service를 종료시켜야설정을 변경하기 안전하다sudo systemctl stop docker.servicesudo systemctl stop docker.socket 기존에 돌아가고 있던 container들도 모두 종료된다 2. 새로 image를 저장할 경로 ..

기술/기타 2024.07.30

[리눅스/우분투] 일반 사용자에게 root 권한 부여하기

root 계정을 마음대로 ssh로 접속 가능하게해서사용하는 것은 보안상 위험한 경우가 많다 따라서 우리는 일반 사용자 계정에root 권한을 부여해서 사용해주기로 했다 하는 법은 매우 간단하다 리눅스에서 일반 사용자가 sudo 명령을 사용하게 하려면sudo 그룹에 사용자를 추가해주면 된다 사용자를 sudo 그룹에 추가sudo usermod -aG sudo 사용자이름 해당 명령어를 통해 추가해 주었으면로그아웃 후 재로그인 하거나newgrp sudo이 명령어를 실행해주면 변경사항이 적용된다  적용된 사용자가 sudo 권한을 갖고 있는지 확인하려면sudo whoami명령어를 입력하면 다음과 같이 나타나는 것을 확인할 수 있다

기술/서버 2024.07.30

[리눅스/우분투] 새로운 사용자 계정 추가하기

연구실의 새로 산 서버에우리가 작업할 사용자 계정을 생성해주었다 생성하는 법은 매우 간단하다 우선 리눅스에서 계정을 생성하는 명령어는useraddadduser2가지가 있는데 useradd는 조금 더 저수준의 명령어로세부적인 설징이 필요할 때 사용하는 명령어이고adduser는 기본적인 설정을 자동으로 추가해주는고수준의 명령어이다 useradd는 계정에서 사용할 비밀번호나, 디렉터리, 기본 쉘 등을수동으로 설정해줘야한다 따라서 우린 adduser로 그냥 간단하게 해주었다sudo adduser [사용자이름] 관리자 권한을 통해 adduser를 해준 뒤,새로 생성한 계정의 비밀번호까지 설정해준다 그럼 계정을 생성하면서자동으로 디렉터리 생성, group 추가 등을 해준다 Full Name이나 Room Number..

기술/서버 2024.07.30

[리눅스/우분투] 초기 root 계정 설정

연구실에 새로 구매한 서버에초기 root 계정을 설정해주었다 리눅스에서 root 계정은 관리자 계정으로전체 권한 관리, 시스템 관리, 보안, 디스크 관리와 같이중요한 작업들을 맡아서 할 수 있다 매우 중요한 권한을 갖고있는만큼외부에서의 접근을 주의해야하고,평상시에는 사용하지 않는 편이 좋다 root 계정의 uid는 0번이다 서버를 새로 구매하면이 root 계정의 비밀번호를 새로 설정해주면서root 계정을 셋업해주어야한다sudo passwd root위의 명령어를 친 뒤현재 접속해있는 계정의 비밀번호를 친다 new password라고 나타나면새로 설정할 비밀번호를 설정해주면된다 그럼 root 계정으로 자동 로그인이 되고터미널에 id라는 명령어를 치면iduid(0)=root 라고 나타나는 것을 확인할 수 있다

기술/서버 2024.07.30