# back

tororae

Flutter 는 Android, iOS 둘 다 개발 가능하다. 그래서 두가지 플랫폼에 대해 공통적인 작업이 많다. 하지만 몇몇 작업에 대해서는 플랫폼의 특징에 의해 개별적인 작업이 필요하다. 대표적인 예가 안드로이드의 뒤로가기. 즉 Back 버튼에 대한 처리다. Android의 Back 버튼 Android 에서 뒤로가기 버튼은 다양한 방식으로 반응한다. 페이지 뒤로가기, 앱 종료하기, 알림창 띄우기 등이다. 대부분은 이전에 켰었던 상위 페이지로 이동하다가 더이상 이동할 페이지가 없으면 팝업 메세지를 띄우게 된다. > '앱을 종료하시려면 한번 더 뒤로가기 버튼을 눌러주십시오' 그리고 이때 한번 더 Back 버튼을 누르게 되면 종료되는 방식이다. Flutter에서는 어떻지? Flutter에서는 뒤로가기 버튼을 클릭시 Navigator로 이동한 페이지들을 Pop으로 거슬러 올라간다. 그러다 최상위 페이지로 올라간 후 뒤로가기 버튼이 눌러지면 앱이 꺼

exafe1009

이슈 React 에서 뒤로가기를 할 경우에 페이지가 렌더링 되지 않고 전체가 하얗게 나오거나 일부 요소들이 그려지지 않는 경우가 있다. 경험 몇년전에도 비슷한 이슈를 경험해서 동료가 해결했던 경험이 있었는데 그때 기록을 하지 않아서 기억이 나질 않았다. 이번에 비슷한 이슈를 다른 동료가 또 경험하고 그걸 해결한 분이 해결책을 제시해서 기록을 해본다. 해결 next.js 로 구성된 프로젝트였고 body~root 까지의 Dom 요소들의 height 를 100% 를 줘서 해결했다고 한다. 회고 이런 이슈들은 설명하기가 굉장히 어렵다. 실제 화면이 있는 영상이 있어야 커뮤니케이션을 하기 쉽다.

reeze

URL 이동을 위한 history 는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공한다. 1. pushState() 매개변수(Parameters) : 새로운 세션 기록 항목에 연결할 상태 객체. : 지금은 대부분의 브라우저가 매개변수를 무시하지만, 미래에 쓰일수도 있다. : 새로운 세션 기록 항목의 URL. 2. replaceState() 매개변수(Parameters) : state 객체는 replaceState에 전달된 history 항목과 연관된 JavaScript 객체. : 지금은 대부분의 브라우저가 매개변수를 무시하지만, 미래에 쓰일수도 있다. : history 항목의 URL. 새 URL은 현재 URL과 출처가 동일해야(same origin)합니다. 그렇지 않으면 replaceState에서 예외가 발생한다. 3. pushState와 replaceState 차이

horang-e

거의 10년 이상을 IOS 유저로 살아온 나는 android의 뒤로가기 버튼(하드웨어)을 그렇게 사람들이 많이 사용하는지 몰랐다. 하지만 이번 프로젝트를 진행하면서 android 의 뒤로가기 버튼을 신경쓰지 않고 프로젝트 로직 플로우를 구현했고 실제 테스트를 하면서 대부분의 android 유저들이 화면 자체(어플)의 뒤로가기 보다 습관적으로 하드웨어적 뒤로가기 버튼을 클릭한다는 사실을 알게 되었고 이 부분들이 QA 리스트로 들어오게 되었다. 원래 프로젝트 화면에서 어플상의 뒤로가기를 누르면 안내 모달이 뜨고 다시 확인을 눌렀을 때만 실제로 뒤로 가는 로직을 구현해 두었고 이 부분에서 문제가 되었다. 해당 로직을 화면(어플)의 뒤로가기 로직에 setBackModal(true) 해당 부분이 있었고 react-native 자체 함수인 BackHandler 로 같은 로직이 구현되게 만들어 두었다. 만약 뒤로가기 터치시 아무 동작도 일어나지 않게 하려면 이렇게 해주면 된다!

hugh0223

🧐 EC2 를 사용하여 DJango 실행하기 🤨 EC2 로 무료 인스턴스 만들어서 진행하기 > EC2 란 아마존 서버이며 Elastic Compute Cloud 의 약자이다. 확장성이 아주 유연하다. > 다음 과정은 ubuntu 인스턴스를 만들고 유형은 무료로 사용하기 위해 t2.micro 기본을 사용할 예정 😑 EC2 생성 과정 > 다음 내용은 AWS 계정이 있는 것을 전제하에 시작합니다. 필요한 AWS 서비스를 검색하기 위해 다음 돋보기 버튼을

darcyu83

passport & passport-local 로그인 개념을 먼저 잡자면 ... > LocalStrategy : req.body에서 props(id,pwd) 가져와서 DB조회 후 결과값 반환 LocalStrategy는 req.body에서 아이디와 비밀번호 property의 값을 가져와서 DB 조회 한후 결과값을 done 함수로 전달함. LocalStrategy의 done(서버에러 | null , 유저정보 | null , info) done(err, user, info) > passport.authenticate : Strategy 실행 후 DB조회 결과값 받아서 처리(로그인, 세션 등) '/login' 요청에 대해서 passport.authenticate('local')실행하여 loca strategy를 실행해서 db를 조회하게 하고 done()함수의 파라미터 값을 callback으로 받아 로그인 처리한다. (session처리도 여기서

darcyu83

Session 흐름 > 사용자가 처음 사이트 접속할 경우(세션아이디 없음) 새로운 임의의 세션아이디를 쿠키에 넣어서 사용자에게로 전송 response headers에 아래 값포함해서 사용자 브라우저에 보냄 >1.최초 접속: req.headers.cookie undefined > 서버 응답 : 세션아이디 값 포함해서 쿠기 반환 Set-Cookie: connect.sid=s:lNAiD0pfgOV84BdgrTp4aghi1ffEoks5.P3sCigmjaaK1vc20W/uQkx659ih+z8AZv7JZsGBL9DQ; * Path*=/; Expires=Wed, 18 Jan 2023 07:03:07 GMT; HttpOnly > 3.재접속: req.headers.cookie connect.sid=... 쿠키에 세션키를 가짐

black1594

오늘은 저번주 금요일에 배운 axios의 활용에 대해서 배웠다. axios는 rest-api를 할 때 브라우저, node.js를 위한 HTTP비동기 통신 라이브러리이다. 기능으로는 promise, Async/Await 등이있다. 사용방법은 yarn add axios를 vscode 터미널에 입력을하여 설치완료후, 코드에 작성하여 이용하면 된다. axios http의 메서드종류로는 아래4가지가있다. axios.get("url주소",) : 서버에서 데이터를 가져올 때 사용하는 메서드이다. axios.post("url주소",) : 서버에 데이터를 새롭게 생성 할 때 사용하는 메서드입니다. 두번째 파라미터로는 생성할 데이터를 넘깁니다. axios.put("url주소",) : 서버에 있는 특정 데이터를 수정할 때 요청하는 메서드입니다. put은 새로운 리소스를 생성, 이미존재하는 데이터를 대체할 때 사용되어집니다. axios.delete("url주소",) :

darcyu83

Multer 이미지, 동영상 등을 비롯한 여러 가지 파일을 멀티파트 형식으로 업로드할 때 사용하는 미들웨어 멀티파트 형식이란 다음과 같이 enctype이 multipart/form-data인 폼을 통해 업로드하는 데이터의 형식을 의미 body-parser로는 처리할 수 없고 직접 파싱(해석)하기도 어려우므로 multer라는 미들웨어를 따로 사용하면 편리 multer 함수의 인수로 설정 storage 속성에는 저장 위치(destination) 이름정보(filename) 설정 destination과 filename 함수의 req 매개변수에는 요청에 대한 정보가, file 객체에는 업로드한 파일에 대한 정보가 있음 limits 속성에는 업로드에 대한 제한 사항을 설정할 수 있으며, 파일 사이즈(fileSize, 바이트 단위)는 5MB로 제한 done 함수 : 첫번째 인수는 에러, 두번째 인수 실제 경로나 파일이름 req나 file의 데이터를 가공해서 done으로 넘기

darcyu83

JSON은 JSON 형식의 데이터 전달 방식 URL-encoded는 주소 형식으로 데이터를 보내는 방식 폼 전송은 URL-encoded 방식을 주로 사용 urlencoded({extended: false}) : extended:false면 노드의 querystring 모듈을 사용하여 쿼리스트링을 해석 extended:true면 qs 모듈을 사용하여 쿼리스트링을 해석 qs 모듈은 내장 모듈이 아니라 npm 패키지이며, querystring 모듈의 기능을 좀 더 확장한 모듈입니다 요청의 body를 스트림 형식으로 받음 => 로 데이터를 받음 body-parser를 사용하면 위의 코드가 필요없음. 알아서 처리해줌 app.use(bodyParser) eg. 1-1. JSON 형식으로 { name: 'zerocho', book: 'nodejs' } 요청 1-2. req.body = { name: 'zerocho', book: 'nodejs' }

darcyu83

Http 상태코드 const http = require("http") 200이나 500과 같은 숫자는 HTTP 상태 코드입니다. res.writeHead에 첫 번째 인수로 상태 코드를 넣었는데, 브라우저는 서버에서 보내주는 상태 코드를 보고 요청이 성공했는지 실패했는지를 판단합니다. 여기서는 대표적인 상태 코드들을 알아보겠습니다. > • 2XX: 성공을 알리는 상태 코드입니다. 대표적으로 200(성공), 201(작성됨)이 많이 사용됩니다. > • 3XX: 리다이렉션(다른 페이지로 이동)을 알리는 상태 코드입니다. 어떤 주소를 입력했는데 다른 주소의 페이지로 넘어갈 때 이 코드가 사용됩니다. 대표적으로 301(영구 이동), 302(임시 이동)가 있습니다. 304(수정되지 않음)는 요청의 응답으로 캐시를 사용했다는 뜻입니다. > • 4XX: 요청 오류를 나타냅니다. 요청 자체에 오류가 있을 때 표시됩니다. 대표적으로 400(잘못된 요청), 401(권한 없음), 403(

hugh0223

😀 웹 개발 동기 웹 개발 목적 동료 세명이서 협업하며 랜딩 페이지를 빠르게 만들어 보고자 시작했습니다. 주제 선정 이유 "The Science Times" 라는 언론 사이트에 Web 디자인을 바꿔 보고자 했습니다. [https://www.sciencetimes.co.kr/] 참조한 사이트는 "뉴욕 타임즈 - 스노우 폴" 과 "BBC" 입니다. 필수 조건 슬라이더 기능이 구현된 섹션 필수 CSS 애니메이션 사용 반응형 구현 고정 섹션 또는 버튼 필수 포함 상단 메뉴 기능 포함 팝업 기능 포함 CSS Flex 또

junsu1222

2계층 구조 과거 대부분의 웹사이트는 2계층 구조로 개발되어있다. 2계층 구조란, 화면이 보여지는 클라이언트(Client)와 데이터베이스(DB)가 물리적으로 분리되어 있는 것을 뜻하며 클라이언트에는 UI(User Interface)와 비지니스 로직이 함께있는 구조다. 비교적 쉽고 빠르게 개발할 수 있고, 애플리케이션 구조가 단순하여 초기 서비스나 웹사이트들이 많이 사용하는 구조다. 다만 클라이언트 속도 문제, 비즈니스가 복잡해지거나 비대해지면 관리하기가 어렵다. 3계층 구조 2계층 구조와 3계층 구조의 가장 큰 차이점

saing0813

정보를 불러오는 방법은 2가지 있다. params parmas는 필수값으로 url을 보낼 때 꼭 넣어주어야 하는 값이다. url에 :id를 추가하면 request에 params에 id라는 속성이 추가 된다. 원하는 값을 :함꼐 넣어주면 된다. id값을 가지고 와서 메소드를 통해서 겂들을 찾아주고 send메소드로 보내주면 된다. 2.query 필수값은 아니지만 원하는 특증 찾고 싶을 때 사용한다. 주로 필터나 어떠한 기준을 가지고 정보를 찾고 싶을 때 사용을 한다. url에 ?를 넣어주고 원하는 필터의 키와 값을 넣어준다. ex) ?team=server 그로면 request에 query라는 객체에 속성이 생긴다. 그리고 매소드를 통해서 정보들을 찾아서 send메소드로 보내준다.

saing0813

express로 동적 라우팅을 해보고자 한다. 이름이 적힌 배열이 있고 이 배열에 이름들을 동적 라우팅을 해주고 한다. get메소드 첫 번째 url에 "users/:id"라는 url을 사용하면 :id부분이 동적 라우팅이 가능하다. "users/1"이라는 url을 넣어주면 request객체에 params객체가 있다. 이 객체 안에 id라는 키와 1이라는 값으로 이루어진 속성이 생긴다. 그 객체의 속성을 불러와서 -1해주고 그 값의 인덱스와 맞는 요소를 보여주다.

saing0813

express: node.js에서 실행될 서버 프로그램을 간편하게 만들 수 있게 해주는 프레임 워크 npm으로 express로 설치해준다. require함수로 express를 불러오고 app이라는 상수에 담아준다. express의 get이라는 메소드를 통해서 첫 번쨰 인자로 url을 넣어주고 (*은 모든 url) 두 번째 인자로 콜백함수를 넣어준다. 두 번째 인자로 넣어준 콜백에는 두 파라미터를 넣어줄 수 있다. request는 요청에 대한 파라미터이고 rsponse는 응답에 대한 파라미터이다. respone 객체를 보면 end라는 매소드가 있고 end메소드로 어떤 응답을 보내 줄 지 정할 수 있다. 위 코드가 보면 h1 태그로 Welcom!를 보여주고 있다

saing0813

node.js에 코어 모듈에 http라는 모듈이 있다. http라는 코어모듈을 통해서 http라는 통신규약으로 클라이언트와 통신하는 서버를 만들 수 있다. http.createServer() 메소드는 서버역할을 하는 객체 하나를 생성해준다. server.listen()은 서버객체가 외부의 요청을 받아드릴 수 있게 해준다 lieten()은 뜻 그대로 클라이언트의 요청을 듣도록 귀를 기울리고 있는 것이다. 이 때, listen(3000)에서 3000은 포트번호를 의미한다. Node를 실행시키고 브라우저에서 127.0.0.1를 쳐주는데 127.0.0.1은 아이피 주소를 의미한다. 네트워크에서 하나의 컴퓨터가 같는 주소를 아이피라고 한다. 127.0.0.1은 자기 자신의 컴퓨터를 나타내도록 특별히 정해준 아이피 주소이다. 이 상태에서 127.0.0.1:3000을 하면 접속이 되지않고 로딩만 된다. 그 이유는 서버에서 요청을 받았을 어떻게 반응을 해주어야 할지 설정을 해

changchanghwang

BACK END typeORM 사용 DB 연결까지 eslint, prettier 설정 graceful shutdown apollo server 세팅 (resolver가 없어 주석처리) 현재 sync 옵션이 CREATE TABLE IF NOT EXISTS가 아니라 그냥 CREATE TABLE로 쿼리가 입력되서 일단 DROP TABLES -> CREATE TABLE로 테이블만 만들어주도록 함 (추후 마이그레이션으로 변경할 예정) FRONT END eslint, prettier 설정 웹팩 설정 중 Can't resolve './src' in ... 에러 발생 왜 폴더를 못읽는지 아직 몰라서 찾아보는중 (extension이 제대로 먹히지 않을 가능성이 커보인다.) -> module.exports인데 module.export로 씀 ㅡㅡ; favicon

jsin2475

rather - Bot : 깃 헙, 봇 추가하기 목적 bot.py를 수정해서 notice 함수를 start, cancel할 수 있도록 만들기. 이를 통해 더 많은 기능을 제공할 수 있도록 tasks 이전 코드에서도 tasks.loop()를 사용했지만 이 상황에서는 cancel이 되지 않았다. 주어진 레시피를 조금 바꾸는 방식으로 구현을 했다. discord.ext.tasks API docs channels 여러 서버에 봇을 등록하려면 어떻게 해야 하나 생각했는데 그냥 연결된 서버를 다 저장하는 방식을 썼다

alghrksl

1. DNS(Domain Name System)란? 우리는 도메인(www.naver.com) 를 통해 웹 브라우저에 접근한다. 하지만 실제로는 도메인이 가진 IP 주소로 웹브라우저에 접근한다. 우리가 입력한 도메인을 IP 주소로 변환되어 해당 웹 브라우저에 접근하는데, 이를 변환 시켜주는 시스템이 DNS > 입력한 도메인을 IP 주소로 변환시켜주는 시스템 - DNS 2. DNS를 사용하는 이유 길고 긴 IP주소를 외워 웹 브라우저를 통해 접근 하는게 힘들기 때문에 3. DNS의 구성 요소 도메인 네임 스페이스(Domain Name Space) : 최상위 루트 DNS 서버가 존재 하고, 그 하위로 인터넷에 연결된 모든 노드가 연속해서 계층으로 구성 > ( 루트(최상위) - 탑레벨 하위노드 (net,com,org) - 세컨드레벨 하위노드 (secret) ) 연속된 노드로 구성 ![](https://images.ve