학습노트 (47) 썸네일형 리스트형 iOS 16 개발자 모드가 필요함 설정 방법 (developer mode) react-native 를 통해서 프로젝트를 하던 도중 iOS16으로 업데이트를 하고 app distribution에 올려놓은 앱이 실행되지 않는 현상이 발견되었습니다. 아래 사진처럼 개발자 모드가 필요함 'ㅇㅇ'앱을 실행하려면 개발자 모드가 필요합니다. 개발자 모드가 활성화되기 전까지는 이 앱을 사용할 수 없습니다. 이라는 문구가 나타났고 해결방법을 찾아보았습니다. 해결방법 설정 - 개인정보 보호 및 보안 - 개발자 모드 - 개발자 모드 활성화 - 재부팅 재부팅 후 맥북 프로 자동 전원 On/Off 설정 및 전원 소리 On/Off 이직을 한 후 맥 os를 처음 사용해보면서 불편한 점이 몇 가지 있었다. 그중 노트북 덮개를 위로 올릴 때 자동으로 전원이 켜지는 것을 막고 싶었는데 맥 os에는 시스템 설정에서 이것을 고치는 방법이 없어서 터미널로 명령어를 실행시켜야한다는 사실을 알게되었다. 우선 맥 os에 기본 내장된 터미널을 실행시키고 기능 별로 아래의 명령어를 그대로 실행시키면 된다. 자동부팅 활성화 sudo nvram AutoBoot=%03 자동부팅 비활성화 sudo nvram AutoBoot=%00 부팅음 활성화 sudo nvram BootAudio=%01 부팅음 비활성화 sudo nvram BootAudio=%00 [node.js] req.body가 안 보내질 때 아래 이 한 줄이 추가되어 있어야 프론트엔드에서 보낸 데이터를 서버에서 req.body로 받아올 수 있습니다. app.use(express.json()); [React] input 태그 infinite render in react. or re-render in react. 리액트에서 프로젝트를 진행하다보면 input태그를 사용하여 프로젝트를 분명히 진행하게 될 것이다. 하지만 하나의 component에 input 태그와 table 혹은 데이터를 보여주는 자료를 함께 넣다보면 input태그에 텍스트를 넣을 때 마다 component가 re-rendering 되는 현상을 겪을 수 있다. 그럴 때는 input component를 만들어서 따로 component를 불러와서 그려주는 방법이 바람직하다. 예를 들면 하나의 컴포넌트에서 작용하는 상황에서 아래에 있는 표를 스크롤 내려놓고 글을 쓰게되면 다시 컴포넌트가 리렌더링되어 글을 적을 때마다 표 스크롤이 다시 올라가는 현상을 확인할 수 있을 것이다. 하지만 컴포넌트를 따로 관리하게 되면 리렌더링 되는 현상을 막을 수 있다. ..... 구형 웹 브라우저 체크하기 (IE 10 이상 브라우저) + 조건부 주석 (IE 10 미만 브라우저) javascript navigator 안녕하세요 포스팅에서는 구형 웹 브라우저를 체크하여 경고창을 띄우거나 다른 웹을 그리게 하는 방법에 대하여 소개하겠습니다. 이 방법을 소개하게된 이유는 현재 진행 중인 프로젝트에서 구형 웹 브라우저에서 웹 화면이 정상적으로 작동하지 않는 문제를 발견하였기 때문입니다. 문제를 해결하고 블로그에 포스팅하면 좋을 기술이겠다 싶어서 올리게 되었습니다. 우선, IE 10 미만의 버전에서는 조건부 주석이라는 방법으로 해결할 수가 있습니다. 해당 HTML에서 아래와 같은 형태로 조건부 주석을 사용할 수 있습니다. 조건부 주석에 사용되는 기호 ! 부정 [if !ie] ie가 아니라면 lt 작다 [if lt ie 7] ie7보다 작다면 lte 작거나 같다 [if lte ie 7] ie7보다 작거나 같다면 gt 크다 [i.. 서비스에 mysql 없음 mysql workbench는 설치했지만 아래와 같은 오류 메세지가 뜨고 services.msc에 mysql이 없다면 failed to connect to mysql at 127.0.0.1 with user root error 2003 (hy000): can't connect to mysql server on 'localhost' (10061) mysql server가 깔려있지 않아서 localhost에서 실행이 되고 있지 않기 때문이다. 해결방법은 dev.mysql.com/downloads/mysql/ MySQL :: Download MySQL Community Server Select Operating System: Select Operating System… Microsoft Windows Ubun.. express와 MySQL 연동 const express = require('express'); const mysql = require('mysql2'); const app = express(); const port = 8080; // mysql 계정 연동 const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: '****', database: 'boilerdb' }); // mysql 연결 connection.connect(console.log('mysql is connected')); // mysql로 query보내기 connection.query('SELECT * from users', (error, rows, fields) => {.. npm install bcrypt error 해결 방법 bcrypt 설치시 아래와 같은 오류가 뜬다면 해결하는 방법이 있습니다. 오류 코드 > bcrypt@3.0.6 install D:\Project\test\bb\back\node_modules\bcrypt > node-pre-gyp install --fallback-to-build node-pre-gyp WARN Using needle for node-pre-gyp https download node-pre-gyp WARN Tried to download(404): https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.6/bcrypt_lib-v3.0.6-node-v72-win32-x64-unknown.tar.gz node-pre-gyp WAR.. How to send a request body with a DELETE request (axios) axios를 이용하여 서버와 프론트에서 데이터를 주고 받는데 get이나 put을 이용하면 body로 request를 받아올수 있지만 delete는 못받온다. 하지만 delete를 이용해서 받아오는 방법을 찾아내서 적어본다. front 측 const deletePost = (id) => { const posts = { token: localStorage.getItem("company-auth-token") }; Axios.delete(`/posts/${id}`, {data:{posts: posts}}) .then((req) => alert("삭제완료")) setPost(post.filter((elem) => elem.id !== id)); }; 프론트측에서 이런 식으로 url 다음 파라미터에 {data: .. [React Hook] React Hooks란?, Lifecycle의 개념 React Hooks란? 간단하게 설명하자면 기존 React의 Class 활용한 Component 설정 방법을 개선한 것이다. 기존의 단점은 세 가지 정도로 꼽을 수 있다. 1. 계층이 너무 많아진다. 2. Component가 너무 복잡해진다. 3. Class를 Component로 쓰면 bind, this를 쓰는데 이 방식은 컴퓨터에게는 복잡한 작업을 수행하게 하고 사람에게는 혼란을 발생시킨다. 위 세 가지 단점을 종합해서 말하자면 가독성이 떨어진다고 할 수 있다. 따라서 react hook은 Class 형태였던 Component를 function을 통해 만들 수 있게 해주는 API이다. React Hook를 사용할 때에는 실질적으로 두 가지만 사용한다. useState()와 useEffect()가 바로.. [React] (12) Delete 기능 구현 (CRUD) - CRUD 구현된 github 이제 CRUD의 마지막 기능인 Delete 기능이 남았다. 우리는 이미 Control.js에 delete버튼을 만들어 놓았다. Control.js import React, { Component } from 'react'; class Control extends Component { render() { console.log('Control render') return ( create update ); } } export default Control; 그리고 App.js에서 Control 태그 부분을 이렇게 고치면 된다. 전체 App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import ReadContent.. [React] (11) Update 기능 구현 (CRUD) Update기능은 Create기능과 Read기능이 결합된 형태라고 볼 수 있다. 그래서 우선 components폴더 안에 UpdateContent.js를 만든다. UpdateContent.js import React, { Component } from 'react'; class UpdateContent extends Component { render() { console.log('UpdateContents render') return ( Update ); } } export default UpdateContent; 위 코드는 CreateContent.js에서 가지고 왔다. 그리고 App.js에 Import 시켜준다. refactoring (필수아님) getContent라는 함수를 만들어 조금 정리해준다... 이전 1 2 3 4 다음
