본문 바로가기

Programming64

React, React-Native 한 번에 여러 스타일 적용하는 법 한 번에 여러 스타일 적용하는 법 (multiple styles) 스타일 적용 시 아래와 같은 TypeError가 발생했고 스타일 적용 문제였다. React — TypeError: CSS2Properties doesn’t have an indexed property setter for ‘0’ 한 태그에 여러 스타일을 적용하려고 한 부분에서 생긴 에러였고, 한 번에 여러 스타일을 적용하는 해결방법을 찾았다. React style={Object.assign({},style1, style2, ...)} React-Native style={[style1, style2, ...]} 참고 https://medium.com/@abhaytalreja/react-typeerror-css2properties-doesnt-.. 2021. 7. 23.
[Redux] 새로고침 유지: Redux Persist 테스트 후기 도입 배경 Redux의 스토어는 페이지 새로고침 시 state의 데이터들이 초기화되기 때문에, 새로고침 시에도 저장된 상태가 없어지지 않도록 캐시 기능을 구현하는 장치가 필요했다. 기존에는 새로고침 시에 로그인이 풀리지 않도록 하기 위해서, LocalStorage로 사용자 인증 상태를 확인하기 위한 토큰을 저장하고 불러와서 사용하고는 했다. 하지만 그 토큰에 페이지의 많은 상태값이 의존하고 있고, LocalStorage에 매번 직접 접근하여 인증 정보를 가져오는 것보다 store에서 관리하는 것이 더 적합하다고 생각했고, 추후 자동 로그인 기능 도입을 위해서도 반드시 대안이 필요할 것이라고 판단하였다. 또한 새로고침 시에 유지해야 할 상태값들이 많이 추가되었고, 앞으로의 확장성을 위해서도 Redux Pe.. 2021. 7. 23.
React 빌드, 배포 시 주의할 점 소스맵 제거하기 create-react-app으로 빌드, 배포하는 경우 기본적으로 webpack에 의해 번들링 된 파일과 sourcemap이 생성된다. sourcemap은 디버깅을 위한 파일이기 때문에 브라우저 내에서 다시 원본 소스처럼 확인할 수 있다. 개발자 도구에서 source 확인 시, 코드가 그대로 노출될 위험이 있으므로 반드시 package.json에서 아래와 같이 수정이 필요하다. 최종 배포 전에 꼭 브라우저에서 다시 확인하는 작업이 중요하다. GENERATE_SOURCEMAP=false "build" : "GENERATE_SOURCEMAP=false react-scripts build" 또는 빌드 후 직접 삭제 (v1.0.11 보다 높은 버전이어서 사용해보지는 않았다) "build": "r.. 2021. 7. 23.
[JavaScript] Set 사용법 Set이란? Set 객체는 중복되지 않는 유일한 값들의 집합입니다. Set 객체는 배열과 비슷하지만 차이점이 존재합니다. 배열 Set 객체 동일한 값을 중복하여 포함 가능하다. O X 요소 순서가 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X 위의 특성으로 보아 Set 객체는 수학적 집합의 특성과 일치하며, 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있습니다. Set 객체 생성 Set 생성자 함수로 Set 객체를 생성합니다. 생성자 함수에 인자를 전달하지 않으면 빈 Set 객체가 생성됩니다. const set = new Set(); console.log(set); // Set(0) {} Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성하는데, 이때 이터러블의 중복.. 2020. 3. 23.
[Node.js] Node.js 입력 받는 방법, 표준입출력 Node.js 표준입출력 readline을 사용하여 사용자에게 입력을 받을 수 있다. 한 줄의 입력만 받고 프로그램 종료하는 방법 const readline = require("readline"); const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); rl.on("line", function(line) { console.log("hello !", line); rl.close(); }) .on("close", function() { process.exit(); }); 예시: 두 수를 공백으로 구분지어 입력 -> 합을 구해 출력 const readline = require('readline'); const .. 2020. 3. 18.
[React] CRUD 블로그 만들기 - 2. 프론트엔드 [React] CRUD 블로그 만들기 - 1. 백엔드 에 이은 포스팅입니다. [React] CRUD 블로그 만들기 - 1. 백엔드 프로젝트 목적: React 프로젝트로 CRUD 게시판 만들기. 챕터 1. 백엔드 개발. 웹 서버 - Koa 프레임워크를 사용했다. Django와의 고민이 있었지만, python을 추가로 설치할 필요 없이 nodejs로 개발할 수 있다는.. bolob.tistory.com 프로젝트 목적 React 프로젝트로 CRUD 게시판 만들기 프론트엔드 개발 구현 기능 및 화면 회원가입/로그인, 포스트 목록 조회, 특정 포스트 조회, 포스트 작성/수정/삭제 상태 관리 모듈, 컴포넌트를 react-router-dom와 Redux로 상태 관리 해결한 오류 Fix typo(오타, 필드 네임 불일.. 2020. 3. 9.
[React] CRUD 블로그 만들기 - 1. 백엔드 프로젝트 목적: React 프로젝트로 CRUD 게시판 만들기. 챕터 1. 백엔드 개발. 웹 서버 - Koa 프레임워크를 사용했다. Django와의 고민이 있었지만, python을 추가로 설치할 필요 없이 nodejs로 개발할 수 있다는 점이 큰 장점으로 작용했다. 백엔드 라우팅은 Koa-router를 사용하여 다른 주소로 요청이 들어올 때 다른 작업 처리하도록 했다. REST API를 사용하여 직접 데이터를 변경하지 않고 클라이언트와 DB 사이에 REST API(서버)를 두어 작업을 처리했다. (요청 종류에 따라 다른 HTTP 메서드 사용함. 포스트 작성: POST, 포스트 목록 조회: GET, 포스트 삭제: DELETE, 포스트 업데이트: PATCH ... ) 폴더 / 파일 관리: 폴더 - 라우팅 종류.. 2020. 3. 8.
[jQuery] jQuery 요소 찾기, 텍스트 바꾸기, 요소 변경/생성 1. 텍스트 바꾸기 안녕하세요? What is jQuery? jQuery is the most popular JavaScript library. It gives developers lots of useful functions so they can make their webpage interactive across multiple browsers. jQuery is an open source library with a big community of contributors. Why should you learn jQuery? If you learn jQuery, you'll be able to use it in your own webpages, understand other developer's webpag.. 2019. 12. 22.
[Node.js] Node.js로 서버 구축하기 간단한 턴제 게임의 서버를 구축해보기 서버 실행 코드 cd [file_path] node server.js server.js const http = require('http'); const url = require('url'); const fs = require('fs'); http.createServer((request, response) => { const path = url.parse(request.url, true).pathname; // url에서 path 추출 if (request.method === 'GET') { // GET 요청이면 if (path === '/about') { // 주소가 /about이면 response.writeHead(200,{'Content-Type':'text/ht.. 2019. 12. 22.
AJAX란 Ajax(Asynchronous JavaScript and XML) 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법 중 하나. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지 일부분만을 갱신할 수 있게 해준다. 즉, 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다. Ajax의 한계 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식(사용자가 직접 원하는 정보를 서버에 요청하여 얻는 방식)을 사용하므로, 서버 푸시 방식(사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것, 앱 푸시 알림)의 실시간 서비스는 만들 수 없음. Ajax로는 바이너리 데이터를 보내거나 받을 수 없음. Ajax 스크립트가 포함된 서버가 아닌 다른 서버.. 2019. 12. 21.
[중급] Object 클래스 Object 클래스 최상위 클래스, 아무것도 상속받지 않으면 자동으로 Object 상속. 오브젝트의 메소드 중 가장 많이 쓰는 메소드 셋. (반드시 오버라이딩) equals 객체가 가진 값 비교 toString 객체가 가진 값 문자열로 변환 hashCode 객체의 해시코드 값 반환 package com.company; import java.util.Objects; public class Student { String name; String number; int birthYear; //generate @Override public String toString() { return "Student{" + "name='" + name + '\'' + ", number='" + number + '\'' + ", .. 2019. 12. 19.
[기초] 예외 처리 예외 처리 1) try{ } catch(Exception e){ } finally{ } 2) throws Exception public class Main { public static void main(String[] args) { int i =10; int j =0; try{ int k = divide(i,j); System.out.println(k); }catch(ArithmeticException e){ System.out.println("0으로 나눌 수 없음."); }finally{ System.out.println("----끝----"); } } public static int divide(int i ,int j) throws ArithmeticException{ int k = i/j; retu.. 2019. 12. 19.

티스토리툴바