개발길에서 살아남기

전체 글

[JS] - URL 체크 2022.02.23
[css] - 이미지 잘리지 않게 css 사용 2022.02.22
[React] - 6차 - props 반복 학습 2022.02.18
[React] - 5차 - 조건 렌더링 2022.02.18
[React] - 4차 -겹치는 코드 뭉쳐서 관리 2022.02.18
[React] - 3차 - useEffect 사용 예 2022.02.18
[React] - 2차 - useState 사용 예 2022.02.18
[React] - 1차 2022.02.18
[JS] - ajax통신 알림창 확인후 실행 2022.02.10
[JS] - 문자열을 특정 문자 기준으로 배열로 변환 2022.02.10
[Xshell] - 명령어 및 기본기 2022.02.10
[JS] - 일정시간 이후 함수 실행 2022.02.10

[JS] - URL 체크

hg_96 2022. 2. 23. 10:48

2022. 2. 23. 10:48

아주 간단하게 받은 문자열이 http://또는 https://로 시작하는지 체크만 해준다

function checkUrl(urlData) {

let Url = /^http[s]?\:\/\//i;

let resultUrl = Url.test(urlData);

return resultUrl;

}

'코딩 공부 > JS' 카테고리의 다른 글

[JS] - 체크박스 제어 (전체 선택 해제 응용) (0)	2022.04.18
[JS] - 비동기 처리해서 html 요소 추가하기 (0)	2022.03.21
[JS] - ajax통신 알림창 확인후 실행 (0)	2022.02.10
[JS] - 문자열을 특정 문자 기준으로 배열로 변환 (0)	2022.02.10
[JS] - 일정시간 이후 함수 실행 (0)	2022.02.10

[css] - 이미지 잘리지 않게 css 사용

hg_96 2022. 2. 22. 11:25

2022. 2. 22. 11:25

출처: https://multifidus.tistory.com/182

일정한 사이즈 div 안에 이미지 넣기 (잘리면서 꽉차게, 잘리지 않고 축소)

+) 이번 프로젝트를 진행하면서 퍼블리싱 부분에서 가장 애를 먹었던 부분. 혹시 제가 놓친 점이나 더 좋은 방법, 다른 방법이 있다면 얼마든지 알려주시기 바랍니다. 1. 잘리면서 꽉차게 * 상위 d

multifidus.tistory.com

1. 잘리면서 꽉차게

* 상위 div 에 꽉 채우고 싶다.

* 비율이 깨지지 않도록 한다.

* 이미지의 가운데 부분이 보여지도록 한다.

* 넘치는 부분은 자른다.

HTML 예시

<div class="image-box">
	<img class="image-thumbnail">
</div>

CSS 예시

.image-box {
    width:380px;
    height:220px;
    overflow:hidden;
    margin:0 auto;
}

.image-thumbnail {
    width:100%;
    height:100%;
    object-fit:cover;
}

width: 380px, height: 220px 인 상위 div 가 있다.

이 div 에 딱 맞게 어떤 비율의 이미지든 맞춰서 꽉차게 넣고 싶은 경우.

극단적인 예시로 width: 1000px, height: 20px 인 이미지를 width: 380px, height: 220px 인 div 에 딱 맞게 넣으려면

비율이 사정없이 깨질테니 가운데 부분만 보여주고 div 에 들어가지 않는 나머지 영역은 자르기로 한다.

포인트)

1. 상위 div 에 일정한 사이즈 width, height 및 overflow:hidden 을 주어 이미지 태그가 해당 사이즈를 벗어나면 잘리도록 한다.

2. 이미지 태그는 원본 비율을 유지하도록 width: 100%, height: 100% 를 주고,

상위 div 크기에 딱 맞아 들어가도록 object-fit: cover; 를 부여한다.

2. 잘리지 않고 축소하여

* 상위 div 에 꽉 차지 않아도 상관 없는 경우.

(혹은 이미지 전체를 노출시키고자 할때. 본인은 정보성 이미지를 넣을 때는 1번보다 2번을 택했다.)

* 비율이 깨지지 않도록 한다.

* 잘리는 부분 없이 이미지 전체가 보여지도록 하고 싶다.

HTML 예시

<div class="product-title">
  <div class="product-img-div">
  	<img class="product-img">
  </div>
</div>

CSS 예시

.product-title {
    text-align:center;
    display:table;
    border:1px solid #cecece;
    width:280px;
    height:250px;
}

.product-img-div {
    display:table-cell;
    vertical-align:middle;
}

.product-img {
    max-width:180px;
    max-height:180px;
}

포인트)

1. 가장 바깥 div 에 display: table

2. 이미지 태그를 감싸는 div (product-img-div) 에 display: table-cell

3. 이미지 태그가 div 안에서 수직 가운데 정렬이 되도록 감싸는 div (product-img-div) 에 vertical-align: middle 을 준다.

4. 이 때, 틀이 되는 div (product-title) 는 width 와 height 값을 지정해 주고

이미지 태그가 div 안에서 가운데 정렬이 되도록 text-align: center 를 부여

5. 여기까지만 하면 상위 div 보다 큰 사이즈의 이미지일 경우 바깥으로 넘치므로, max-width 혹은 max-height 값을 적절하게 준다.

* 또 다른 방법

HTML 예시

<div class="image">
</div>

CSS 예시

.image {
    width: 300px;
    height: 300px;
    background-image: url(./개미.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border:1px solid black;
}

포인트)

1. background-image 에 원하는 이미지의 경로를 적는다.

2. 비율을 맞춰서 넣으려면 background-size: contain 을 준다.

(이 예시는 contain 이지만, div 에 꽉차게 넣으려면 background-size: cover 를 주면 된다. 단, 비율이 깨질 수도 있음.)

3. div 사이즈보다 이미지가 작은 경우, 이미지가 반복되므로 한 장만 보여주기 위해 background-repeat: no-repeat

4. 가운데 정렬을 위해 background-position: center

'코딩 공부 > HTML' 카테고리의 다른 글

모달 스크롤할 때 바디 스크롤 방지 (0)	2022.03.31
[HTML] - 버튼 링크 연결 방법 (0)	2022.02.23
html - select 박스에서 placeholder 쓰기 (0)	2022.01.12
[CSS] 텍스트 뒤에 이미지 따라다니게 하기 - select 박스 (0)	2022.01.11
[HTML, CSS] 스크롤바 생성 overflow (auto, scroll, hidden) (0)	2022.01.10

[React] - 6차 - props 반복 학습

hg_96 2022. 2. 18. 18:29

2022. 2. 18. 18:29

1. JS

import './App.css';

import { useState, useEffect } from 'react';

import Data from './components/Data'; // 디렉토리 구조

function App() {

const data = [

{ title: '이름1', year: 1000 },

{ title: '이름2', year: 2000 },

{ title: '이름3', year: 3000 },

{ title: '이름4', year: 4000 },

];

const renderData = data.map(adata => {

return (

);

});

return (

{ renderData }

</div>

);

}

export default App;

2. JS

import React from "react";

const Data = ({ data }) => { // props 였는데 { }로 원하는 부분만 빼오는게 가능

return (

<div className='data-title'>{data.title}</div>

</div>

);

}

export default Data;

3. CSS

.data {

display: flex;

align-items: center;

border: 1px solid gray;

border-radius: 5px;

padding: 10px;

margin-bottom: 5px;

}

.data-title {

flex-grow: 1;

}

.data-year {

font-size: 10px;

color: red;

}

map함수 사용할 때 자식에게 고유 키값을 줘야한다

'코딩 공부 > REACT' 카테고리의 다른 글

next auth 를 next api 디렉토리에서 써보자! (0)	2023.11.02
[REACT] - 숫자만 받기 (보완점 많음) (0)	2022.03.06
[React] - 5차 - 조건 렌더링 (0)	2022.02.18
[React] - 4차 -겹치는 코드 뭉쳐서 관리 (0)	2022.02.18
[React] - 3차 - useEffect 사용 예 (0)	2022.02.18

[React] - 5차 - 조건 렌더링

hg_96 2022. 2. 18. 17:48

2022. 2. 18. 17:48

import './App.css';

import { useState, useEffect } from 'react';

function App() {

const [state, setState] = useState(false);

const toggle = () => setState(!state);

useEffect(() => {

console.log(state);

}, [state])

const renderState = state ? "1번!!" : "2번!!";

return (

<div>

{renderState}

</div>

</div>

);

}

export default App;

'코딩 공부 > REACT' 카테고리의 다른 글

[REACT] - 숫자만 받기 (보완점 많음) (0)	2022.03.06
[React] - 6차 - props 반복 학습 (0)	2022.02.18
[React] - 4차 -겹치는 코드 뭉쳐서 관리 (0)	2022.02.18
[React] - 3차 - useEffect 사용 예 (0)	2022.02.18
[React] - 2차 - useState 사용 예 (0)	2022.02.18

[React] - 4차 -겹치는 코드 뭉쳐서 관리

hg_96 2022. 2. 18. 17:34

2022. 2. 18. 17:34

1.

import './App.css';

import { useState, useEffect } from 'react';

import Counter from './components/Counter'; // 디렉토리 구조

function App() {

const [name1, setName1] = useState("클릭!!");

const clickBtn = () => {

setName1("클릭변경함!");

}

return (

<br/>

</div>

);

}

export default App;

2.

import React from "react";

import { useState, useEffect } from 'react';

const Counter = (props) => {

const [num1, setNum1] = useState(0);

const increment = () => {

setNum1(num1+1);

}

const clickString = props.click || "받은 값 없음";

return (

<button onClick={increment}>전송버튼 ({clickString}) {num1}</button>

);

}

export default Counter;

1번 코드에서 Counter 를 불러오고

click="클릭값" 으로 키="값" 형태로 보낸다

이것을 2번코드에서는 Counter 에서 props로 받아서 사용한다

'코딩 공부 > REACT' 카테고리의 다른 글

[React] - 6차 - props 반복 학습 (0)	2022.02.18
[React] - 5차 - 조건 렌더링 (0)	2022.02.18
[React] - 3차 - useEffect 사용 예 (0)	2022.02.18
[React] - 2차 - useState 사용 예 (0)	2022.02.18
[React] - 1차 (0)	2022.02.18

[React] - 3차 - useEffect 사용 예

hg_96 2022. 2. 18. 16:35

2022. 2. 18. 16:35

import './App.css';

import { useState, useEffect } from 'react';

function App() {

const [num1, setNum1] = useState(0);

const [num2, setNum2] = useState(0);

useEffect(() => {

console.log("num1 변경: "+num1)

}, [num1])

useEffect(() => {

console.log("num2 변경: "+num2)

}, [num2])

useEffect(() => {

console.log("num1 OR num2 변경: "+num1,num2)

}, [num1, num2])

useEffect(() => {

console.log("처음 한번만 실행")

}, [])

const incre1 = () => {

setNum1(num1+1);

}

const incre2 = () => {

setNum2(num2+1);

}

return (

</div>

);

}

export default App;

useEffect를 사용한 예인데 아직 완벽하게 이해하지 못해서

이것을 어떻게 활용하는지 좀더 공부 해봐야겠다

함수 뒤에 , [ ]안에 값이 변경되면 실행할 변수를 입력하면 조절이 가능하고 빈값으로 두면 최초 한번만 실행한다

'코딩 공부 > REACT' 카테고리의 다른 글

[React] - 6차 - props 반복 학습 (0)	2022.02.18
[React] - 5차 - 조건 렌더링 (0)	2022.02.18
[React] - 4차 -겹치는 코드 뭉쳐서 관리 (0)	2022.02.18
[React] - 2차 - useState 사용 예 (0)	2022.02.18
[React] - 1차 (0)	2022.02.18

[React] - 2차 - useState 사용 예

hg_96 2022. 2. 18. 15:59

2022. 2. 18. 15:59

import './App.css';

import { useState } from 'react';

function App() {

const [text, setText] = useState("몰라일단");

const updateText = () => {

setText("업데이트!!"); {/* 연결할 명칭사용 예 */}

console.log(text);

}

return (

<span>{text}</span> {/* 사용할 명칭사용 예 */}

</div>

);

}

export default App;

여기서 좀 신기한게 useState

선언하고 값을 조절하는건 익숙하지만 useState로 값을 조절하는게 신기했다

몇가지 테스트를 해보니

const [ 사용할 명칭, 연결할 명칭 ] = useState("텍스트 값");

이런느낌이었다 사용할때는 '사용할 명칭'은 변수명으로 선언되고 연결할 명칭은 함수처럼 선언되어 사용한다

import './App.css';

import { useState } from 'react';

function App() {

const [input1, setInput1] = useState("");

const [input2, setInput2] = useState("");

const onSubmit = () => {

alert("onSubmit함수 실행"+" || "+input1+" || "+input2);

}

return (

<input placeholder='이름!' value={input1} onChange={(e) => setInput1(e.target.value)}></input><br />

<input placeholder='비번!' value={input2} onChange={(e) => setInput2(e.target.value)}></input><br />

</form>

</div>

);

}

export default App;

'코딩 공부 > REACT' 카테고리의 다른 글

[React] - 6차 - props 반복 학습 (0)	2022.02.18
[React] - 5차 - 조건 렌더링 (0)	2022.02.18
[React] - 4차 -겹치는 코드 뭉쳐서 관리 (0)	2022.02.18
[React] - 3차 - useEffect 사용 예 (0)	2022.02.18
[React] - 1차 (0)	2022.02.18

[React] - 1차

hg_96 2022. 2. 18. 15:39

2022. 2. 18. 15:39

import './App.css';

function App() {

const onSubmit = () => {

alert("클릭함수 실행");

}

const onKeyUp = (event) => {

if (event.keyCode === 13) {

console.log("키 업!!");

onSubmit();

}

return (

<button onClick = {() => alert("클릭성공") }>전송1</button>

);

}

export default App;

조금 다른게 { ( ) => } 이런 부분이랑 { } 이걸로 다루는 것

함수에서는 = ( ) => { } 이부분 그동안 ( ) { } 이렇게 써왔는데 어색하다

'코딩 공부 > REACT' 카테고리의 다른 글

[React] - 6차 - props 반복 학습 (0)	2022.02.18
[React] - 5차 - 조건 렌더링 (0)	2022.02.18
[React] - 4차 -겹치는 코드 뭉쳐서 관리 (0)	2022.02.18
[React] - 3차 - useEffect 사용 예 (0)	2022.02.18
[React] - 2차 - useState 사용 예 (0)	2022.02.18

[JS] - ajax통신 알림창 확인후 실행

hg_96 2022. 2. 10. 11:55

2022. 2. 10. 11:55

ajax 통신중에 사용자의 확인을 한번더 물어보는 상황이 반드시 생긴다

예를들어 삭제할때

만들어두고 사용할때 예

let arrData = { 키: 값,

키 : 값 }

let postUrl = "컨트롤러 함수"

let successUrl = "성공시 이동 경로"

ajaxFormConfirm_base("삭제하시겠습니까?", postUrl, arrData, successUrl, "삭제에 실패했습니다.");

함수부분

// 메시지, 컨트롤러함수, 데이터, 성공시주소, 실패시문구

function ajaxFormConfirm_base(congirmMessge, postUrl, arrData, successUrl, errorMessage) {

if (confirm(congirmMessge)) {

$.ajax({

url : postUrl,

type : "POST",

data : arrData,

success : function(res){

location.href = successUrl;

error: function(error){

alert(errorMessage);

})

}

'코딩 공부 > JS' 카테고리의 다른 글

[JS] - 비동기 처리해서 html 요소 추가하기 (0)	2022.03.21
[JS] - URL 체크 (0)	2022.02.23
[JS] - 문자열을 특정 문자 기준으로 배열로 변환 (0)	2022.02.10
[JS] - 일정시간 이후 함수 실행 (0)	2022.02.10
[JS] - 모달 url 생성 (0)	2022.02.04

[JS] - 문자열을 특정 문자 기준으로 배열로 변환

hg_96 2022. 2. 10. 11:08

2022. 2. 10. 11:08

문자열을 배열로 만들어서 값을 받거나

해야할 때가 있는데 이렇게 하면 된다

let addr = "가 나다 라마바 사";

let addrArr = addr.split(" ");

console.log(addrArr);

'코딩 공부 > JS' 카테고리의 다른 글

[JS] - URL 체크 (0)	2022.02.23
[JS] - ajax통신 알림창 확인후 실행 (0)	2022.02.10
[JS] - 일정시간 이후 함수 실행 (0)	2022.02.10
[JS] - 모달 url 생성 (0)	2022.02.04
[JS] - 유효성 검사(닉네임) (0)	2022.01.28

[Xshell] - 명령어 및 기본기

hg_96 2022. 2. 10. 10:32

2022. 2. 10. 10:32

처음 리눅스 환경을 접했을때 신기한것들만 가득했다

파일의 접근 권한을 설정 할 수 있고 그걸로 부족한지 유저 별로 접근권한을 줄수있다

xshell

pwd : 현재 접속한 경로 확인
cd 이동 파일 경로 (처음 root경로일때는 /경로)
mkdir 생성폴더:
mkdir [옵션] [디렉토리명]
mkdir [디렉토리명1][디렉토리명2][디렉토리명3]
옵션 -p 하위 디렉토리 까지 한번에 생성
rmdir [디렉토리명] : 디렉토리 삭제

cd ~ : 홈디렉토리 이동
cd / : 최상위 디렉토리 이동
ls : 파일 디렉토리 목록 출력

ls -al : 디렉토리 권한 보기
chmod 세자리숫자 디렉토리명
r 4 읽기
w 2 쓰기
x 1 실행

vi /etc/httpd/conf/httpd.conf

편집모드에 들어가기 위해서는 i를 누르면 하단에

--insert-- 가

표시되며 수정이 가능하다

수정이 다끝나면 esc버튼과 :기호뒤에 wq(저장하고 나가기)를 입력해준다

웨일의 경우
https로 들어가지면서 testing 123이 뜨면 ssl.conf 문제 해결하기
기본으로는 http로 접속
http에서 작업 하려면 엣지 또는 크롬을 활용 (웨일은 https로 접근 하는거같음)

<VirtualHost *:80>
DocumentRoot /경로
ServerName url주소

<Directory /경로>
AllowOverride All
Require all granted
</Directory>
</VirtualHost>

[JS] - 일정시간 이후 함수 실행

hg_96 2022. 2. 10. 10:08

2022. 2. 10. 10:08

조회수 카운트 할때 무작정 카운트를 올리기보다 유저가 글을 읽었는지

아니면 그냥 들어갔다 나갔는지 구분하기 위해서 구현했다

setTimeout(function() {

$.ajax({

url : "여기에 실행할 함수 url",

type : "POST",

data : {

post이름: 값,

success : function(res){

error: function(error){

location.href='에러시에 이동';

})

}, 1000);

사용법은 아주간단하다 ajax통신을 사용하고 함수 끝에 1000이부분을 조정해서 시간을 조절한다

'코딩 공부 > JS' 카테고리의 다른 글

[JS] - ajax통신 알림창 확인후 실행 (0)	2022.02.10
[JS] - 문자열을 특정 문자 기준으로 배열로 변환 (0)	2022.02.10
[JS] - 모달 url 생성 (0)	2022.02.04
[JS] - 유효성 검사(닉네임) (0)	2022.01.28
자동완성 검색어 추천 (0)	2022.01.19

PREV 이전 1 ···3 4 5 6 7 8 9 ···15 NEXT 다음

개발길에서 살아남기

전체 글

[JS] - URL 체크

'코딩 공부 > JS' 카테고리의 다른 글

[css] - 이미지 잘리지 않게 css 사용

출처: https://multifidus.tistory.com/182

1. 잘리면서 꽉차게

2. 잘리지 않고 축소하여

'코딩 공부 > HTML' 카테고리의 다른 글

[React] - 6차 - props 반복 학습

1. JS

2. JS

3. CSS

'코딩 공부 > REACT' 카테고리의 다른 글

[React] - 5차 - 조건 렌더링

'코딩 공부 > REACT' 카테고리의 다른 글

[React] - 4차 -겹치는 코드 뭉쳐서 관리

1.

2.

'코딩 공부 > REACT' 카테고리의 다른 글

[React] - 3차 - useEffect 사용 예

'코딩 공부 > REACT' 카테고리의 다른 글

[React] - 2차 - useState 사용 예

'코딩 공부 > REACT' 카테고리의 다른 글

[React] - 1차

'코딩 공부 > REACT' 카테고리의 다른 글

[JS] - ajax통신 알림창 확인후 실행

'코딩 공부 > JS' 카테고리의 다른 글

[JS] - 문자열을 특정 문자 기준으로 배열로 변환

'코딩 공부 > JS' 카테고리의 다른 글

[Xshell] - 명령어 및 기본기

[JS] - 일정시간 이후 함수 실행

'코딩 공부 > JS' 카테고리의 다른 글

+ Recent posts

티스토리툴바