🖥️Frontend65 [JavaScript] 문자열 중간에 다른 문자열 삽입하기 문제문자열 my_string, overwrite_string과 정수 s가 있다. my_string의 인덱스 s부터 overwrite_string의 길이만큼을 overwrite_string으로 바꾼 값을 리턴하는 함수를 작성해라. 나의 풀이function solution(my_string, overwrite_string, s) { // my_string 문자열의 인덱스 0부터 s까지 let prefix = my_string.substring(0, s); // my_string 문자열의 인덱스 s이후 let another = my_string.substring(s); let suffix = ""; // my_string 문자열의 인덱스 s이후 문자열이 overwrite_string의 길이보다 긴.. 🖥️Frontend/Programmers 2024. 5. 30. [JavaScript] 문자열 대소문자 바꿔서 출력하기 문제영어 알파벳으로 이루어진 문자열 str의 문자열의 각 알파벳을 대문자는 소문자로, 소문자로 대문자로 변환한다. 풀이let str = "AbCdeFg";// 변환 값을 넣어 줄 빈 배열 생성let arr = [];for( let i=0; i 소문자로 변환 if( str[i] === str[i].toUpperCase() ) { arr.push(str[i].toLowerCase()); } else { // str[i] 문자가 대문자가 아닌 경우 -> 대문자로 변환 arr.push(str[i].toUpperCase()); }}// join 함수를 사용해서 배열을 문자열로 변환console.log(arr.join("")); 🖥️Frontend/Programmers 2024. 5. 30. [React] 지정한 시간 마다 백그라운드 이미지 변경하기 (with TypeScript) 개요 프로젝트 진행 중 메인 화면에서 지정된 시간마다 변경된 이미지를 보여줘야했다. 코드 Main.tsx const Layout = styled.div` width: 100%; height: 100%; background: url(${(props) => props.url}); background-size: cover; background-position: center center; display: flex; flex-direction: column; justify-content: center; align-items: center; color: rgba(0, 0, 0, 0.7); `; const Main = () => { const [ activeIndex, setActiveIndex ] = useStat.. 🖥️Frontend/React 2024. 3. 29. [React] Vite를 사용해서 React 프로젝트 생성 및 실행 Vite 란? 현재 CRA의 지원이 중단되었고 여러 가지 대체 프레임워크가 추천된다. Vite(비트)는 프로젝트를 CSR(Client Side Rendering)로 생성해주는 ESbuild 기반의 빌드 툴이다. Native ESM을 지원하기 때문에 빠른 HMR(Hot Module Replacement)을 지원한다. ESM을 이용해서 전체 코드를 번들링하지 않고 수정된 모듈만을 반영한 뒤 요청이 오면 해당 모듈만 전달한다. 그러나 CSR로 동작하기 때문에 SEO에 약하다는 단점이 있다. SEO를 우선시 하는 사이트에서는 Next.js 및 Remix 같은 대체 프레임 워크의 사용을 권장하고 있다. 하지만 클라이언트 사이드 핸들링만을 하는 경우에는 Vite 또는 Parcel 사용을 권장하고 있다. Vite로 .. 🖥️Frontend/React 2024. 2. 7. [Node] 로그아웃 기능 구현 JWT 토큰 인증 https://tlseoqja.tistory.com/54 [Node] 페이지 접속 시 JWT 토큰 인증 회원 로그인 기능 구현 https://tlseoqja.tistory.com/53 [Node] 회원 로그인, 비밀번호 복호화 및 JWT 토큰 생성 비밀번호 암호화 https://tlseoqja.tistory.com/51 [Node] 회원 가입 시 비밀번호 암호화 MongoDB 연동 및 tlseoqja.tistory.com 로그아웃 로그아웃 기능은 간단하다. 이전에 작성한 auth API를 이용해서 쿠키에 저장된 토큰 값을 복호화한 후 나온 _id값으로 MongoDB에 해당 유저의 존재 여부를 확인하고, 유저가 존재하는 경우 token 값을 공백으로 업데이트한다. index.js auth.. 🖥️Frontend/Node 2023. 12. 1. [Node] 페이지 접속 시 JWT 토큰 인증 회원 로그인 기능 구현 https://tlseoqja.tistory.com/53 [Node] 회원 로그인, 비밀번호 복호화 및 JWT 토큰 생성 비밀번호 암호화 https://tlseoqja.tistory.com/51 [Node] 회원 가입 시 비밀번호 암호화 MongoDB 연동 및 회원 가입 기능 구현 https://tlseoqja.tistory.com/49 [Node] node.js 서버와 MongoDB 연동하기 (mongoose) Mongoose란? Mong tlseoqja.tistory.com JWT 토큰 인증 토큰 인증은 개인 정보 보호를 위해 필수적으로 거쳐야하는 로직 중 하나이다. 서버로 부터 받아온 모든 개인 정보를 저장소에 저장하게 되면 개인 정보를 탈취당하기 쉬울 것이다. 그래서 암호화.. 🖥️Frontend/Node 2023. 11. 30. [Node] 회원 로그인, 비밀번호 복호화 및 JWT 토큰 생성 비밀번호 암호화 https://tlseoqja.tistory.com/51 [Node] 회원 가입 시 비밀번호 암호화 MongoDB 연동 및 회원 가입 기능 구현 https://tlseoqja.tistory.com/49 [Node] node.js 서버와 MongoDB 연동하기 (mongoose) Mongoose란? Mongoose 라이브러리는 MongoDB란 NoSQL DB를 Node.js에서 사용할 수 있게 도와주는 라이 tlseoqja.tistory.com JWT JWT(Json Web Token)은 Json 객체에 인증이 필요한 정보들을 담은 후 비밀키로 서명한 토큰이다. 웹 표준을 따르고 있으며, 공식적으로 인증(Authentication) & 허가(Authorization) 방식으로 사용된다. 필.. 🖥️Frontend/Node 2023. 11. 29. [React] canvas & x, y좌표 값으로 길 그리기 Canvas API 자바스크립트와 HTML의 canvas 엘리먼트를 통해 그래픽을 그릴 수 있게 제공하는 API로서, HTML5의 구성요소이다. 주로 2D 그래픽을 다루는데 사용되고 있다. 비트맵 데이터의 픽셀 하나 하나를 조작할 수 있고 그래픽 처리 성능이 좋은 편이다. Method 자주 사용되는 canvas의 메소드는 아래와 같다. 메소드 기능 beginPath() 새로운 경로(path)를 생성한다. 새 경로를 생성하는 메소드이기 때문에 최초에 호출하지 않아도 된다. closePath() 경로를 닫는다. 마지막 경로에 있는 점과 시작점을 연결한다. stroke() 경로에 선을 그려준다. fill() 경로의 내부를 채운다. moveTo() 아무것도 그리지 않고 시작 위치를 옮긴다. lineTo() 현재.. 🖥️Frontend/React 2023. 11. 28. [Node] 회원 가입, 비밀번호 암호화 MongoDB 연동 및 회원 가입 기능 구현 https://tlseoqja.tistory.com/49 [Node] node.js 서버와 MongoDB 연동하기 (mongoose) Mongoose란? Mongoose 라이브러리는 MongoDB란 NoSQL DB를 Node.js에서 사용할 수 있게 도와주는 라이브러리이다. 데이터를 만들고 관리하기 위해 스키마(Schema)를 만들고, 그 스키마로 모델(Model)을 만들어 tlseoqja.tistory.com BCrypt 1999년에 publish된 password-hasing function이다. 키(key) 방식의 대칭형 블록 암호(Blowfish 암호)에 기반을 둔 암호화 해시 함수이다. OpenBSD에서 이 암호화 방식을 사용하고 있다. .NET, J.. 🖥️Frontend/Node 2023. 11. 28. [Node] nodemon 설치 (자동 코드 반영) nodemon 기존 node에서 변경된 코드를 적용하기 위해서는 서버를 종료하고 다시 재실행시켜야 코드가 적용됐다. 그러한 번거로움을 해결해주는 라이브러리가 nodemon이다. node monitor의 약자로, 노드가 실행하는 파일이 속한 디렉터리를 감시하고 있다가 파일의 상태가 변경되면 자동으로 노드 애플리케이션을 재실행시켜주는 확장 모듈이다. nodemon 적용 nodemon 라이브러리를 설치해준다. npm install nodemon 기존 노드 서버를 실행하는 명령어가 아닌 nodemon을 이용해 서버를 실행시켜준다. // 기존 서버 실행 명령어 node index.js // nodemon을 사용한 서버 실행 명령어 nodemon index.js scripts 명령어 등록 매번 긴 명령어를 직접 쳐.. 🖥️Frontend/Node 2023. 11. 28. [Node] node.js 서버와 MongoDB 연동하기 (mongoose) Mongoose란? Mongoose 라이브러리는 MongoDB란 NoSQL DB를 Node.js에서 사용할 수 있게 도와주는 라이브러리이다. 데이터를 만들고 관리하기 위해 스키마(Schema)를 만들고, 그 스키마로 모델(Model)을 만들어 데이터를 관리한다. 스키마와 모델로 데이터를 불러온 후 객체화시켜서 빠르게 수정함으로써 데이터에 접근 가능하게 만들어준다. MongoDB 데이터 베이스 생성 우선 MongoDB를 사용하기 위해 웹 사이트에 접속해서 간단한 회원가입을 진행한다. https://www.mongodb.com/ko-kr MongoDB: 애플리케이션 데이터 플랫폼 업계 최고의 최신 데이터베이스를 토대로 구축된 애플리케이션 데이터 플랫폼을 사용해 아이디어를 더욱 빠르게 실현하세요. MongoD.. 🖥️Frontend/Node 2023. 11. 23. [Node] node.js & express로 간단한 서버 구현 Node.js의 등장 크롬, 익스플로러, 파이어폭스 등의 브라우저들은 자바스크립트를 읽고 해석하는 역할을 한다. 자바스크립트 해석을 빠르게 읽고 해석하면 웹 사이트의 렌더링 성능도 빨라지게 되니 브라우저 개발자들은 자바스크립트 해석 엔진 개발에 열성이었다. 그러던 중 '크롬 브라우저 개발자'들이 혁신을 일으키게 된다. 자바스크립트 해석엔진인 V8이라는 프로그램을 개발했는데 성능이 너무 뛰어나서 V8 엔진을 분리하여 엔진에 살을 붙여 만든 것이 Node.js이다. Node.js란? 위에서도 언급했듯이 V8 엔진으로 빌드된 자바스크립트 런타임이다. 런타임은 간단히 설명하면 실행창이다. 기존에 브라우저에서 실행하던 자바스크립트를 로컬 PC에서도 실행시킬 수 있는 도구이다. Node.js 설치 node.js 사.. 🖥️Frontend/Node 2023. 11. 23. 이전 1 2 3 4 5 6 다음