티스토리

개발 스또리

검색하기

블로그 홈

개발 스또리

bomblang.tistory.com/m

개발공부 끄적끄적

구독자: 5

방명록 방문하기

주요 글 목록

iOS elastic scrolling 이슈 모바일 웹을 구현한 후 테스트를 진행했다. 웹에서는 잘만 되던 기능이 모바일에서 문제를 일으켰다. 아니 정확히 말하자면 ios에서만. 페이지의 상단과 하단에 바가 있는데, 스크롤을 아래로 내리면 상단 menu바가 사라지면서 하단의 nav바가 나타나고, 스크롤을 위로 올리면 상단 menu바가 나타나고 하단 nav바가 사라지게하는 간단한 기능이었다. jQuery와 scroll 이벤트 리스너를 사용하여 스크롤방향을 알아낸 후 상단바와 하단바가 보였다 안보였다하도록 class를 더하고 빼도록 구현했더니 웹과 안드로이드에서는 잘 작동했는데 .... 아이폰 웹브라우저창으로 테스트를 해보니 스크롤을 가장 위로 올렸을때와 맨 끝으로 내렸을 경우 상단바와 하단바가 나타나지않는 현상이 발생했다. 왜지 ???????????.. 공감수 0 댓글수 0 2024. 3. 7.
레노보 노트북 포맷 + window10 설치하기 ! 포맷 작업은 살면서 해본게 손에 꼽는것같은데 할때마다 방법이 뭐였지 하고 리셋이 되기때문에 기록을 해두려한다. window10, 우분투 듀얼부팅으로 설치되어있던 노트북인데 용량도 꽉차고 우분투사용할 일도 없어서 새롭게 window를 설치하게 되었다. 포맷이란 컴퓨터의 하드 디스크 드라이브를 초기화하거나 재설정하는 프로세스 일단 백업해야할 중요한 데이터들이 있다면 따로 백업해두고 포맷을 진행하여야한다. 포맷 프로세스 windowUSB만들기( 부팅파일 ) 노트북 바이소스 진입하여 USB로 부팅, window10 설치 윈도우CD키 입력 일단 포맷을 완료한 시점에서 기록해두는 것이라 과정 스샷은 없다 ^^^ .... 그치만 포맷하면서 생겼던 이슈사항들에 대해 기록해두자면 ! USB부팅파일을 만드는것까지는 했는데.. 공감수 0 댓글수 2 2023. 10. 30.
setState, useState State 상태관리에 대해 알아보자. 다음과 같이 count 변수를 선언하고 버튼을 클릭하면 숫자가 올라가게끔 구현하고싶다. 다음과 같이 작성하면 버튼을 클릭할때마다 count 의 숫자는 올라가고있지만 화면이 리렌더링되지않아 화면에서는 숫자가 올라가는것을 확인할 수 없다. 숫자를 더할때마다 render함수를 함께 호출하는 방법도 있지만 그닥 좋은 방법은 아니다. const root = document.getElementById("root"); let count = 0; function plusCount() { count++; } const App = ( count : {count} click me! ); ReactDOM.render(, root); 이러한 불편함을 해결해주는 기능이 바로 useState이.. 공감수 0 댓글수 0 2023. 9. 17.
JSX(JavaScript XML) Component JSX(JavaScript XML) React와 함께 사용되는 JavaScript의 확장 문법 JSX는 React 애플리케이션을 빌드할 때 주로 사용되며 JSX로 작성한 코드는 Babel과 같은 도구를 사용하여 JavaScript 문법으로 변환해야한다. 첫글자는 대문자로 ! 중괄호 {}를 사용하여 JavaScript 표현식을 JSX에 포함할 수 있음 하나의 부모요소안에 여러 태그를 묶어 return함 또는 를 사용하여 여러 요소를 묶는 방법도 있음 아래는 JSX로 컴포넌트를 만들어서 사용하는 예시이다 function HelloWorld() { return Hello, World!; } const HelloWorld = () => ( Hello, World!; ) 컴포넌트를 만들어서 재사용도 얼마든지 가능.. 공감수 0 댓글수 0 2023. 9. 17.
[PHP] PHP와 MySQL의 연동원리 웹서버가 웹 브라우저로부터 PHP파일 요청을 받을때 처리되는 과정을 정리해보았다. 1. 웹 브라우저가 웹서버로 index.php 파일 요청 2. 웹서버는 이를 처리하기위해 php모듈로 전달 3. php모듈은 mysql 서버로 쿼리문을 날려 처리된 데이터를 받아옴 4. php는 그 정보를 가지고 웹브라우저가 해석할수있는 순수한 html을 동적으로 생산하여 웹서버로 전달 5. 웹서버는 그 파일을 다시 웹 브라우저로 전송 웹 페이지를 웹 브라우저로 전송하는 역할의 웹 서버와, mysql 사이에서 php는 중간역할을 하고있는 것 ! 공감수 0 댓글수 0 2022. 6. 19.
[PHP] PHP와 데이터베이스 MYSQL확장 php는 정보를 저장할수 있는 기능이 없기때문에 데이터베이스를 사용하여 정보를 저장하는데 사용함 SQL : 데이터베이스를 제어할때 사용하는 언어 php로 데이터베이스를 연결하는 방법에는 PDO, mysql확장, mysqli 등이 있다 mysql확장은 현재php 버젼에서는 더이상 지원하지않으나 레거시를 위한 학습으로서 알아두는 것이 좋다 . PHP와 MYSQL의 연동 mysql_connect(host, user name, password) : 접속 mysql_select_db(디비명) : DB선택 mysql_query() : SQL 테이블 제어 데이터 조회, 수정, 삭제 empty() 인자로 전달된 값이 없으면 true를 리턴함 디버깅 mysql_error(); mysql확장기능을 사용하는 과정에서 마지막.. 공감수 0 댓글수 0 2022. 6. 16.
[PHP] 문자열 다루기 띄어쓰기 php로 띄어쓰기를 구현할땐 역슬래시와 n ( \n )을 사용하는데 쌍따옴표, 단따옴표를 사용시 차이가 있음 쌍따옴표 안에서는 줄바꿈기호로 해석되고 단따옴표는 단따옴표안에 있는 데이터가 그.대.로 해석됨 쌍따옴표는 해석의과정을 거치기때문에 속도가 조금 느리고 단따옴표는 속도가 좀 더 빠르다. 문자열안에서 변수사용하기 중괄호 사용 ! 공감수 0 댓글수 0 2022. 6. 16.
[PHP] 이미지 다루기 PHP는 내부적으로 이미지를 처리하는 기능은 포함되어있지않기때문에, 외부프로그램 혹은 외부 라이브러리으 힘을 빌려야하는데 그중 가장 많이 사용되는것이 GD 라이브러리이다. GD가 깔려있는지 확인하기위해선 phpinfo() 를 실행시켰을때 다음과같이 나오면 GD를 사용할 수 있는 것 JPEG, PNG Support 부분에 enabled 이라고 되어있으면 사용가능 만약 dg가 없다면, php.ini 파일을 열고 gd 검색 후, extension 되어있는 부분을 해제한다 extension_dir gd같은 확장기능들이 존재하는 디렉토리의 경로도 확인하도록 하자 (운영체제마다 gd 라이브러리 설치하는 과정이 다를 수 있다) 이미지에 글쓰기 header() 서버가 클라이언트로 전송하는 header안에 포함시킬 내용.. 공감수 0 댓글수 0 2022. 6. 16.
[PHP] 파일 업로드 파일업로드 : 사용자가 선택한 파일을 전송했을때 그것을 php쪽에서 받아서 원하는 디렉토리에 위치시키는 것 ▼ html파일의 form 태그 form 태그의 action에 데이터를 보낼 파일을 지정하고, method는 post로 지정해주어야한다 enctype는 반드시 multipart/form-data 로 지정해주어야 파일을 전송할 수 있다. 파일 수신 에플리케이션 axit 이후의 코드들은 하나도 실행되지않고 php어플의 실행이 종료됨 $_FILES 업로드된 사용자가 보낸 파일의 정보가 배열로 담김 name : 파일의 실제이름 type : 이미지의 파일형식 tmp_name : 브라우저가 전송한 파일이 서버에 위치하는 임시디렉토리상의 경로. 이를 알고있어야 원하는 디렉토리로 파일을 보낼 수 있음 error .. 공감수 0 댓글수 0 2022. 6. 16.
[PHP] 디렉토리 제어 현재 디렉토리와 디렉토리의 변경 getcwd chdir 디렉토리의 탐색 scandir 디렉토리의 생성 mkdir(디렉토리이름, 권한설정, 첫번째인자로 주어진 경로가 없으면 이 경로를 만들어준다는 의미) 공감수 0 댓글수 0 2022. 6. 15.
[PHP] 파일 제어 파일 복사 copy라는 함수를 호출하여 첫번째 인자엔 원본파일의 이름이, 두번째 인자엔 원본파일을 복사한 파일의 이름이 위치해야함 카피가 성공하면 true, 실패하면 false ▼ copy 성공 파일 삭제 unlink 함수사용 ▼ delete 성공 파일 읽기, 쓰기 file_get_contents 함수사용 기존에 있던 파일을 읽는것 텍스트로 이루어진 파일을 읽어서 문자열을 리턴 // 네트워크를 통해 데이터 읽어오기도 가능하다 file_put_contents 함수사용 어떤 파일을 만들어서 어떠한 데이터를 기록하는것 writeme.txt 파일이 만들어지고 'coding everybody!!!' 텍스트가 삽입된다. fopen 함수 파일을 열어서 쓰거나 읽거나 하는 또 다른 함수 https://www.php... 공감수 0 댓글수 0 2022. 6. 15.
[PHP] include와 namespace include : 현재 실행시키려고하는 PHP 파일에 다른 PHP파일을 불러와서 실행시키는 것 🍕include와 require의 차이점 거의 동일하나 불러오려는 파일이 없는 파일이거나 불러올 수 없는 파일일 경우 include는 warning error( 주의 )를 띄우고 계속 파싱하지만, require는 fatal error( 치명적 )를 띄우고 프로그램이 멈춰버림 🍕외부 php파일을 로드하는 명령어 4가지 - include - include_once - require - require_once _once라는 접미사가 붙은 것은 파일을 로드 할 때 단 한번만 로드하면 된다는 의미 namespace : 여러개의 PHP파일을 하나의 PHP파일에 로드해서 사용할때 중복되는 이름의 함수, 변수, 상수 등을 사.. 공감수 0 댓글수 0 2022. 6. 14.
[PHP] 배열 배열의 크기 // 5 배열 조작 push, pop, shift, unshift // array(6) { [0]=> string(1) "a" [1]=> string(1) "b" [2]=> string(1) "c" [3]=> string(1) "d" [4]=> string(1) "e" [5]=> string(1) "f" } 배열 정렬 sort, rsort(반대 정렬) // array(3) { [0]=> string(1) "a" [1]=> string(1) "b" [2]=> string(1) "c" } 기타 공식문서 https://www.php.net/manual/en/ref.array.php PHP: Array Functions - Manual While PHP has well over three-score.. 공감수 0 댓글수 0 2022. 6. 14.
[PHP] 반복문 if문 while문 break, continue while문 빠져나오는 조건식을 안걸어주면 무한루프에 빠지므로 주의하도록 하자 // 중괄호안에 변수 사용하기 // .과 소괄호로 다양한 활용가능 for문 - 중첩으로도 사용이 가능함 // coding everybody0 // coding everybody1 // coding everybody2 // coding everybody3 // coding everybody4 break, continue // coding everybody0 // coding everybody1 // coding everybody2 // coding everybody3 // coding everybody4 // coding everybody0 // coding everybody1 // coding everybody2 // codi.. 공감수 0 댓글수 0 2022. 6. 14.
[PHP] 비교연산자 조건문 논리연산자 1. 비교 연산자 주어진 값들이 같은지 다른지 큰지 작은지 구분하는 것을 의미 같다 == 공감수 0 댓글수 0 2022. 6. 14.
[PHP] 변수와 상수 1. 변수 PHP에서는 변수를 표기할때 '$' 표시를 쓴다 echo와 print는 같은 의미이다 //변수로 숫자를 할당한 경우 //변수로 문자를 할당한 경우 2. 상수 한번 정의하면 다시 값을 할당할 수 없음 define함수를 이용해 'TITLE'에 'PHP Tutorial'값을 할당 TITLE은 상수 ! 밑에 줄 JAVA Tutorial은 할당되지않음 관습적으로 상수는 대문자를 사용 ! //PHP Tutorial 3. 데이터형식 체크, 변환 4. 가변변수 변수에 할당된 값을 다시 변수로 지정 ! //PHP tutorial 공감수 0 댓글수 0 2022. 6. 14.
[PHP] data type 숫자와 문자 1. number type 연산 가능 // 8 숫자 타입 확인 // int(2) // float(2.5) 2. string type 문자열 타입 확인 // string(11) "hello world" 문자열과 문자열 더해서 사용할때 ' + '가 아닌 ' . ' 을 사용한다 ! 인용구를 쓰고싶을 경우 역슬래시를 써주면 다음으로오는 문자가 escaping 됨 // 잘못된 케이스 // 올바른 케이스 공감수 0 댓글수 0 2022. 6. 14.
OAuth Github 로그아웃 404 에러처리 깃헙 소셜로그인을 구현한 후, 로그아웃처리를 하려고하는데 난관에 부딪혔다. 다른 소셜로그인들도 그러하듯, 서비스상으로만 로그아웃처리를 하면 이미 깃헙에서 발급한 토큰의 유효기간이 만료되지않아 로그인을 눌렀을때 다시 사용자의 인증수락을 받지않고 그냥 로그인이 바로 되버리는 현상이 있기에 깃헙쪽으로 보내준 토큰을 만료처리해주세요 ! 라는 요청을 보내야했다. 이에대해 설명하고있는 깃헙에서 제공한 공식문서의 Code samples를 보며 정성껏 한자한자 코드를 작성하여 요청을 보내보았지만 돌아오는건 404 오류 뿐 ... 😂 아래는 깃헙 공식문서글 .. https://docs.github.com/en/rest/apps/oauth-applications#delete-an-app-authorization OAuth.. 공감수 0 댓글수 0 2022. 5. 13.
socket.io https 설정 socket.oi로 채팅창을 구현하는데 http로만 통신이 되어서 로그인 후 이용할수있게 해둔 채팅창으로 가려면 인증서를 적용했다 안했다를 반복 ...... 그러다 https로 할수있는 방법을 알게되어서 기록해두려한다. const socket = io.connect('https://localhost:4000',{secure: true}) connect url에 https를 붙히고, 뒤에 옵션을 붙혀주니 아주 잘됨 ! 공감수 0 댓글수 0 2022. 5. 10.
카카오 소셜 로그아웃 URL https://kauth.kakao.com/oauth/logout?%20%20%20%20 신나게 소셜 로그인을 구현한 후, 자체 서비스 로그아웃 처리가 아닌 소셜 로그아웃 처리을 해야함의 필요성을 느낀 후 친절한 kakao developers REST API 사용설명서를 읽어내려갔다. 카카오계정과 함께 로그아웃 카카오계정과 함께 로그아웃은 웹 브라우저에 로그인된 카카오계정의 세션을 만료시키고, 서비스에서도 로그아웃 처리할 때 사용하는 로그아웃 추가 기능입니다. 카카오계정과 함께 로그아웃 기능의 설명과 동작에 대한 자세한 내용은 이해하기, 설정 방법은 설정하기를 각각 참고합니다. 내가 원하던게 바로 이거구나 생각하고 비교적 간단해보이는 아래 설명법을 토대로 예쁘게 코드를 써내려갔는데 .... 잘못된 요청이라는 오류메시지와 콘솔창에는 Bad Request 라는 400 에러가 ... 도대체 뭐가 .. 공감수 0 댓글수 0 2022. 5. 7.
[MongoDB] mongoose 서버 연결 MongoDB를 사용하기에 앞서 MongoDB ODM인 mongoose를 설치하였고 server와 연결하는 법을 기록해놓으려 한다. 일단 터미널창을 이용하여 몽구스 모듈을 설치해주고 .. (express server에 연결하는 중) npm install mongoose server.js 파일에 다음과 같이 mongoose를 require해주고 URL을 연결시켜주니 "successfully dataases!"이 뜨는것을 확인할 수 있었다 ! 👍 const mongoose = require("mongoose"); const MONGOB_URL = "mongodb://localhost:27017/admin?authSource=admin --username root" mongoose.connect(MONGOB_.. 공감수 0 댓글수 0 2022. 4. 23.
환경변수 사용법 환경변수(environment variable) linux에서는 시스템전체에 영향을 미치는 변수를 설정할 수 있다 이를 환경변수(environment variable)라 부른다 리눅스에는 이미 많은 환경변수가 설정되어있다. cmd에 명령어 export를 입력하면, 기록된 환경변수들을 확인할 수 있다. 환경변수 추가하기 export NAME2="홍길동" export 명령어로 환경변수를 추가하고 echo $NAME2 //홍길동 echo 명령어와 환경변수앞에 달러사인($)으로 환경변수라는 것을 알린 변수명을 입력하면, 변수값인 "홍길동"이 출력된다. export 명령어로 추가한 환경변수는 현재 사용중인 터미널에서만 임시로 사용이 가능하다 (다시 로그인하면 사라짐) dotenv npm모듈 dotenv를 사용하면.. 공감수 0 댓글수 0 2022. 3. 1.
Read, Write, Execute 권한 linux 는 NOS network operating systems multi-user systems 여러사람이 쓰기때문에 관리가 필요하다 리눅스는 확장자 개념이 없다 고로 권한으로 관리한다 일단 커멘드창을 이용하여 폴더, 파일을 하나씩 만들고 ls -l 명령어를 입력해보면 다음과 같은 화면이 나온다 가장 왼쪽표현을 살펴보자 -rw-r--r-- drwxr-xr-x 가장 앞쪽의 -,d 로 표기된것은 각각 - : not directory (file) d : directory 이어지는 r,w,e는 r : read permission (읽기 권한) w : write permission (쓰기 권한) x : execute permission (실행 권한) r, w, x가 3번 반복해서 나타나는 이유는 소유주(ow.. 공감수 0 댓글수 0 2022. 2. 28.
코드스테이츠 Section2 걸어온 길을 되돌아보며 인생에 희노애락이 있다면 오늘은 완전완전 희의 날 ~~~ ^ㅇ^ 날씨마저도 오늘의 나를 축복해주듯 너무나도 화창하고 맑은 햇빛과 하늘 ! 정말 오늘은 기분이가 너무너무 너어~~무 좋다ㅏㅏ~~~ 물론 내 실력에 대해 아직 가야할 길이 구만리인거 너무나도 잘 알고있지만 ^^! 그래도 한계단을 넘어 다음 스텝으로 가게된 오늘의 이 기쁨 잠시 만끽하고 가실게여 ~~~ 섹션1때와는 다르게 훅↗ 수직상승한 난이도에 HA2에 대한 부담감과 압박감을 안고 온 6주정도 되는 시간 잠시 산책하러 나가는것을 제외한 많은 시간을 날이 흐리나 맑으나 눈이 펑펑오나 미세먼지가 잔뜩끼나 같은 자세로 컴터앞에만 앉아있다보니 마치 나의 시간은 세상이 흘러가는 시간과는 별개로 다르게 흘러가는듯 느껴지기도했다 내 일상은 멈춰져있는것같은데.. 공감수 0 댓글수 0 2022. 2. 27.
VSCode JSX파일에서 HTML자동완성기능 설정하기 VSCode JSX파일에서 HTML자동완성기능 설정하기 html파일에서는 잘만되던 자동완성기능이 jsx파일에선 되지않아 코딩의 생산성이 떨어진다 느낄져 구글링을 해보았더니 역시나 방법이 있어서 기록해둔다 VSCode 설정 - emmet - setting.json에서 편집 - 코드입력을 똭 ! 해주면 "emmet.includeLanguages": { "javascript": "javascriptreact" } 자동완성기능이잘 되는것을 확인할 수 있다^.~ 공감수 0 댓글수 0 2022. 2. 25.
[알고리즘] 선택정렬 선택정렬 N개이 숫자가 입력되면 오름차순으로 정렬하여 출력하는 프로그램을 선택정렬을 사용해서 작성하세요. 입력설명 첫 번째 줄에 자연수 N(1 공감수 0 댓글수 0 2022. 2. 6.
[알고리즘] 후위식 연산 스택(Stack)이용하여 풀기 후위식 연산 후위연산식이 주어지면 연산한 결과를 출력하는 프로그램을 작성하세요. 만약 3*(5+2)-9 을 후위연산식으로 표현하면 352+*9- 로 표현되며 그 결과는 12입니다. 입력설명 연산식의 길이는 50을 넘지않음 식은 1~9숫자와 +,-,*,/ 연산자로만 이루어짐 입력예제 352+*9- 출력예제 12 이 문제를 풀고나서 스택에 대해 조금은 감이 잡히는듯 싶다 처음엔 하나의 스택에 넣었다뺐다하면서 풀어나갈 알고리즘이 떠오르질않아서 입력예제의 수와 연산식을 서로다른 스택에 담아서 다시 각각의 스택에서 꺼내와 for문을 돌고돌아 해결해가야하나..........하고 한참을 고민했다 그러다 하나의 스택을 갖고도 풀수 있는 방법을 알게되니 아 이런식으로 스택을 사용하는거구나 .. 하고 이제서야 조금씩 감이.. 공감수 0 댓글수 0 2022. 2. 4.
[알고리즘] 완전탐색 자연수배열요소 뒤집어 정렬하기 자연수배열요소 뒤집어 정렬하기 N개의 자연수가 입력되면 각 자연수를 뒤집은 요소가 담긴 배열을 리턴한다 입력예제 [32, 55, 62, 20, 250, 370, 200, 30, 100] 출력예제 [23, 55, 26, 2, 52, 73, 2, 3, 1] 1. 처음 짠 코드 function solution(arr){ let answer=[]; //최종 리턴할 요소를 담을 배열 // 요소 하나하나를 배열로 만들어서 answer배열에 담기 arr.forEach(el => { answer.push(el.toString().split("")); }); //배열로 만든 요소 하나하나를 돌면서 거꾸로 만들어준뒤 //join하여 number타입으로 바꿔서 answer배열안에 담아주기 for(let i=0; i=0; j.. 공감수 0 댓글수 0 2022. 2. 3.
2차원배열 Array.from()사용하여 복사하기 기본형 데이터와 참조형 데이터가 있다 기본형 데이터 : string, number, boolean, null, undefined 등 참조형 데이터 : array, function, object 등 복사를 할때 기본형데이터는 원본이 변형되지않고 값만 복사되고 참조형데이터는 얕은복사로 데이터를 가르키는 주소값만 복사되는줄은 알고있었는데 array복사를 하다가 몰랐던 부분이 있어서 기록해놓으려한다. 보통 array복사를 할때, 다음과같이 스프레드문법 또는 slice로 복사를 해서 사용했다 let a = [1,2,3] // [1,2,3] let b = [...b] // [1,2,3] let c = a.slice(); // [1,2,3] c[0] = 5; console.log(a); // [1,2,3] conso.. 공감수 0 댓글수 0 2022. 2. 2.
mac 터미널에서 Visual Studio Code 실행하기 mac 터미널에서 Visual Studio Code 실행 터미널에서 디렉토리를 생성하고, 바로 Visual Studio Code를 실행하는 방법을 알아보자 터미널에서 code를 입력했을때 Visual Studio Code로 이동하는 path를 설정해주면 되는데, 설정되어있지 않다면 $ code //입력시 zsh: command not found: code 다음과같은 에러가 발생할 것이다. path를 설정하는 방법은 일단 VSCode를 열고, Command + Shift + P를 입력해 PATH에 'code'명령 설치를 해주면 된다. 설치 후 다음과같이 명령어를 입력해주면 잘 실행된다. $ code //입력시 => VSCode 실행 $ code . //입력시 => VSCode로 현재 디렉토리코드 실행 공감수 0 댓글수 0 2022. 1. 11.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.