전체 글195

• 

  [Linux] 리눅스 명령어 정리 개요프로젝트를 진행하면서 linux 서버를 처음 접하게 됐다. 서버를 설치하면서 사용했던 명령어를 정리해보려고 한다. 이 게시물은 새로운 내용이 생길 때마다 계속해서 업데이트 할 것이다.  서버구분명령어기능서버ip addr show서버 IP를 확인한다. 폴더 및 파일구분명령어기능폴더cd [경로]해당 경로로 이동한다. ([..] 입력 시 상위 폴더로 이동한다.)폴더ll해당 폴더 안의 파일 목록을 보여준다.폴더ls [옵션]해당 폴더 안의 파일 권한을 보여준다.USBmount -t vfat [usb 폴더] [linux 폴더]하드웨어 장치를 사용하기위해 지정 폴더에 인식시킨다.USBumount [mount된 linux 폴더]사용을 완료한 하드웨어 장치를 분리시킨다.압축tar -zxvf [압축 파일 경로]압축 파.. ⚙️OS/Linux 2024. 7. 30.

• 

  [React] 검색어와 동일한 단어 강조 개요원티드의 8월 프리온보딩 사전 미션을 진행하면서 간단한 검색창을 구현했다. 검색창에 검색어가 입력되면 해당 단어가 강조되는 기능을 구현해야 했다.  구상처음 생각한 방법은 해당 단어가 있는 문자열을 split() 함수로 자르고 해당 문자열 사이에 단어를 넣는 방법을 생각했다. 하지만 이 방법을 사용하기엔 같은 단어가 여러 번 반복되는 문자열인 경우에는 적용할 수 없다고 판단했다. 그래서 래퍼런스를 찾아보던 중 태그를 사용해서 강조 처리하는 방법을 찾아 적용했다.  코드// 1const highlight = useCallback((text: string, query: string) => { // 2 const parts = text.split(new RegExp(`(${query})`, 'gi').. 🖥️Frontend/React 2024. 7. 30.

• 

  [사전 미션] Wanted - React와 다시 시작하는 취업 준비 | 프리온보딩 FE 챌린지 8월 사전 미션아래 영상의 기능과 동일한 기능의 화면을 만들기   사용 프레임워크vite + react   설계1. 검색창에 검색어를 입력하면 입력한 값이 태그의 value값으로 변경돼야 한다.2. 검색창에 검색어가 입력되면 Company 목록을 보여줘야 한다.3. 검색창에 입력한 검색어와 동일한 단어가 굵게 표시돼야 한다.  설계에 대한 구현1. 검색어가 변경되는 경우, 두 컴포넌트(검색창, 회사 목록)에서 검색어를 알아야 한다.  > 따라서 최상위 컴포넌트인 App.tsx에서 useState() 함수를 선언하고 각 컴포넌트에 props로 전달해준다. 2. 검색어가 입력되는 경우에만 회사 목록을 보여준다.  > 회사 목록 컴포넌트를 검색어가 있는 경우에만 표시되도록 검색어의 length를 체크해서 표시한다.. 🌈일상/대외활동 2024. 7. 26.

• 

  [Java] Netty를 사용하여 간단한 Echo 서버 및 클라이언트 구현 Netty 란?고성능 네트워킹 애플리케이션을 제작하기 위한 자바용 고급 프레임워크이다. 단일 API로 블로킹과 논블로킹 방식의 여러 전송 유형을 지원한다. 그리고 사용 방법이 간단하며 추가 의존성 없이 netty 라이브러리만을 설치하여 사용할 수 있다. 무엇보다 코어 자바 API보다 높은 처리량과 짧은 지연 시간, 리소스 소비 감소, 메모리 복사를 최소화한다는 장점이 있다.  준비하기Netty를 사용하기 위해 의존성을 추가해준다. 필자는 Gradle을 사용해서 아래 의존성을 build.gradle에 추가했다.implementation 'io.netty:netty-all:4.1.109.Final'  Echo Server네티 서버 구성 시 다음 항목이 필요하다.  • ChannelHandler   - 클라이.. 🛠️Backend/JAVA 2024. 7. 24.

• 

  [IntelliJ] The file size exceeds the configured limit. 에러 상황프로젝트를 진행하며 google protobuffer를 사용했고, protobuf 파일 호출 시 빨간색 밑줄이 그어졌다. 그리고 창 위에 다음과 같은 경고 메시지가 나타났다.  에러 코드The file size (MB) exceeds configured limit (2.56 MB). Code insight features are not available.  해결 방법IntelliJ config에서 설정한 최대 파일 사이즈를 초과해서 발생하는 오류이다. 메뉴의 [도움말] > [사용자 지정 프로퍼티 편집...] 을 누르면 idea.properties 파일 창이 열린다. 아래의 코드를 추가 및 저장한 후 IntelliJ를 재시작하면 재빌드 후 소스 코드가 제대로 적용되게 된다.idea.max.inte.. 🛠️Backend/오류해결 2024. 7. 24.

• 

  [Java] 순수 자바 프로젝트에서 MS-SQL 연결하기 개요새 프로젝트를 하면서 Spring Boot를 사용하지 않고 프로젝트를 진행하게 됐다. Spring Boot를 사용하지 않은 이유는 단순히 TCP/IP 통신 및 DB 만을 사용하는 프로그램에서 굳이 무거운 Spring Boot를 사용하지 않아도 된다고 판단했기 때문이다. 많은 래퍼런스가 없었기에 진행하면서 적용한 코드를 정리해보려고 한다.  gradle 의존성 추가mssql을 사용하기 위해서 build.gradle 파일에 의존성을 추가했다.implementation 'com.microsoft.sqlserver:mssql-jdbc' 하지만 정상적으로 빌드되지 않았고, jre 버전과 맞는 버전을 추가해주니 정상적으로 의존성이 추가됐다.implementation 'com.microsoft.sqlserver:.. 🛠️Backend/JAVA 2024. 7. 17.

• 

  [IntelliJ] error: unmappable character (0xEB) for encoding x-windows-949 에러 상황IntelliJ로 프로젝트를 진행하는 도중 한글로 입력한 주석에서 오류가 발생했다.  에러 코드error: unmappable character (0xEB) for encoding x-windows-949  해결 방법한글 인코딩 문제로 인해 빌드 시 오류가 발생했다. 설정 후 IntelliJ 캐시 무효화 및 재실행을 해주면 오류가 해결된다. 1. [파일] > [설정] > [에디터] > [파일 인코딩]  2. [도움말] > [사용자 지정 VM 옵션 편집...] > 코드 추가-Dfile.encoding=UTF-8-Dconsole.encoding=UTF-8  3. [파일] > [캐시 무효화] > [파일 시스템 캐시 및 로컬 기록 지우기 체크] > [무효화 및 다시 시작] 클릭  위 방법으로 해결이 안.. 🛠️Backend/오류해결 2024. 7. 17.

• 

  [React + TypeScript] Kakao Map API 적용해보기 개요사이드 프로젝트 진행 중 Kakao Map API를 활용하여 개발을 하고싶었다. 공식 문서와 블로그들을 찾아봤고, 미숙하지만 적용 방법을 작성해 보려고 한다.  Kakao API 사용 신청하기https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 먼저 kakao developers 사이트에서 API 사용을 위해 프로젝트 생성을 해준다.  버튼을 눌러 정보를 입력해서 애플리케이션을 추가해준 후 생성된 애플리케이션 목록을 클릭해준다.  그림2 처럼 우측의 플랫폼 메뉴로 들어가면 Web 플랫폼을 등록할 수.. 🖥️Frontend/React 2024. 7. 3.

• 

  [Spring Boot] 설정 파일 값 암호화 및 적용하기 (feat. Jasypt) 개요프로그램을 개발한 후 프로젝트를 외부에 배포하기 위해 회사 내부 정보를 암호화해야 했다. 우선 가장 대중적이고 래퍼런스가 많은 Jasypt 라이브러리를 사용해 DB 접속 정보를 암호화하기로 했다.  의존성 추가라이브러리https://github.com/ulisesbocchio/jasypt-spring-boot GitHub - ulisesbocchio/jasypt-spring-boot: Jasypt integration for Spring bootJasypt integration for Spring boot. Contribute to ulisesbocchio/jasypt-spring-boot development by creating an account on GitHub.github.com Gradle.. 🛠️Backend/Spring 2024. 6. 25.

• 

  [JavaScript] l로 만들기 문제알파벳 소문자로 이루어진 문자열 myString이 매개변수로 주어진다. 알파벳 순서에서 "l"보다 앞서는 모든 문자를 "l"로 바꾼 문자열을 반환하는 함수를 작성해라.  풀이const solution = myString => myString.replaceAll(/[a-k]/g, "l"); 🧬알고리즘/Programmers 2024. 6. 20.

• 

  [JavaScript] 날짜 비교하기 문제정수 배열 date1과 date2가 매개변수로 주어진다. 두 배열은 각각 날짜를 나타내며 [year, month, day] 꼴로 주어진다. 만약 date1이 date2 보다 전이라면 1을, 아니면 0을 반환하는 함수를 작성해라.  나의 풀이// 배열을 문자열로 변환하고 바꾼 문자열을 숫자로 변환한 후 크기 비교// ex) [2021, 12, 29], [2021, 12, 28] => 20211229 > 20211228 => trueconst solution = (date1, date2) => Number(date2.join("")) > Number(date1.join("")) ? 1 : 0;  다른 풀이// 배열을 곧바로 new Date() 함수에 넣어 데이트 형식으로 변환하여 비교const solut.. 🧬알고리즘/Programmers 2024. 6. 18.

• 

  [JavaScript] 0 떼기 문제정수로 이루어진 문자열 n_str이 매개변수로 주어진다. n_str의 가장 왼쪽에 처음으로 등장하는 수가 0들을 뗀 문자열을 반환하는 함수를 작성해라.  예시n_strresult"0010""10""854020""854020"  나의 풀이function solution(n_str) { const arr = n_str.split(""); while( true ) { // 배열의 첫 번째 값이 "0"이 아닌 경우 break if( arr[0] !== "0" ) break; // 배열의 첫 번째 값이 "0"인 경우 shift() arr.shift(); } return arr.join("");}  다른 풀이const solution = (str) => String.. 🧬알고리즘/Programmers 2024. 6. 18.