728x90
반응형
SMALL

# 자바스크립트 숫자 타입의 값 버림, 올림 등 다양한 방법

다른 언어들 처럼 숫자를 쉽게 변환할 수 있는 편리한 함수가 자바스크립트에서 존재하며 이때는 Math 객체를 사용합니다. 아래는 Math 객체를 사용하는 간단한 모습입니다.

Math.floor(변환할 값)



Math 객체는 값을 처리하는 다양한 메소드(함수)들이 존재합니다. 이때 어떻게 사용하는지 간단한 예제와 방법들을 아래에서 확인하시기 바랍니다. 먼저 가장 간단한 소수점을 처리하는 방법에 대하여 알아보겠습니다.



# 숫자 변환의 다양한 예제보기

아래는 각각 올림, 내림, 버림 등등 여러가지 Math객체를 사용하는 예제입니다.

! Math() 소수점 올림, 버림, 반올림 방법아무래도 숫자를 처리하는데 사용되는 메소드들 중에서 소수점을 처리가 가장 많이 사용될 것입니다. 소수점을 처리하는 방법 중 가장 많이 사용되는 올림, 버림, 반올림의 간단한 사용방법은 아래와 같습니다.

  • Math.ceil() : 소수점 올림, 정수 반환
  • Math.floor() : 소수점 버림, 정수 반환
  • Math.round() : 소수점 반올림, 정수 반환


그렇다면 간단한 예제를 통해서 알아볼까요? 만약 소수점을 가지는 변수 testnum가 있는 경우를 가정하여 아래의 예제를 통해 알아봅시다.



# 소수점 처리방법 예제소스 코드보기

소수점을 제거하거나 올림 등으로 처리하는 예제입니다.

! 소수점 올리기

var   testnum  = 99.11;

alert(Math.ceil(testnum));
// 100 출력, 올림 적용​



! 소수점 버림

var   testnum  = 99.11;

alert(Math.floor(testnum));
// 99 출력, 버림 적용




! 소수점 반올림

var   testnum  = 99.5;

alert(Math.round(testnum));
// 100 출력, 반올림 적용



그 외에 소수점 처리를 하는 다른 방법들도 아래에서 알아봅니다.

 

# 소수점 처리에 사용되는 다른 방법, 함수

아래 방법은 소수점 처리에 사용할 수 있는 다른 함수들 입니다.

! toFixed()toFixed를 사용하면 숫자에서 원하는 소수점 길이만큼만 반올림하여서 반환해 준다. 아래는 간단한 예제이다.

var   testnum  = 99.9876543;

testnum.toFixed(0);  // 100 출력
testnum.toFixed(5);  // 99.98765 출력




! toExponential()이 함수를 사용하면 지정한 소수점 이하부터는 지수표기법으로 변환하여 출력된다. 아래의 예를 보자.

var   testnum  = 99.12345;

testnum.toExponential(3);  // 9.9123e+ 2 출력 지수표기법으로 표기됨




! toPrecision()지정된 값만큼 반올림한 정수와 소수점으로 나타낸다. 이때 지정한 값보다 원래 데이터 자리수가 더 많은 경우 지수표기법으로 나타난다. 반대로 원 데이터의 자리수가 더 적은 경우 뒷자리는 반올림으로 표기된다.

var   testnum  = 99.123;

alert(testnum.toPrecision(2));
// 9.9e+ 2  출력, 지수표기법

alert(testnum.toPrecision(4));
// 99.120 반올림하여 표기



여기까지 자바스크립트에서 숫자에 사용가능한 많은 방법들을 알아보았습니다.

출처: https://wdevp.tistory.com/59 [노마님의 블로그:티스토리]

728x90
반응형
LIST
728x90
반응형
SMALL

 

안녕하세요! 😊 오늘은 프론트엔드 개발자가 되기 위해 무엇을 준비해야 하는지 정리해보려고 합니다.

최근 IT 산업이 빠르게 성장하면서 프론트엔드 개발자의 수요도 계속 늘어나고 있어요.
✅ 웹 개발에 관심이 많다면?
✅ 사용자 경험(UX/UI)에 흥미가 있다면?
✅ HTML, CSS, JavaScript에 관심이 있다면?
👉 프론트엔드 개발자가 되는 걸 고민해볼 때입니다!

그럼 지금부터 프론트엔드 개발자가 되기 위해 준비해야 할 것들을 단계별로 알려드릴게요! 🚀


🎯 1. 프론트엔드 개발이란?

프론트엔드 개발자는 사용자가 직접 보는 **웹사이트의 화면(UI)**을 만드는 역할을 합니다.
HTML, CSS, JavaScript 등을 사용하여 웹사이트의 디자인과 기능을 구현
React, Vue, Svelte 등의 프레임워크 활용
✅ 백엔드(API)와 연결하여 동적인 웹사이트 개발

쉽게 말해!
✔ 백엔드가 웹사이트의 뼈대라면,
✔ 프론트엔드는 그 뼈대 위에 예쁘게 디자인하고, 기능을 추가하는 역할이라고 보면 됩니다!


🛠 2. 프론트엔드 개발자가 되기 위한 핵심 기술

✅ 1️⃣ HTML & CSS

📌 웹의 기본 골격과 디자인을 다루는 필수 기술

  • HTML: 웹페이지의 구조를 만드는 언어
  • CSS: 스타일과 레이아웃을 담당하는 언어
  • 필수 개념: Flexbox, Grid, 반응형 디자인, SCSS

🔥 추천 학습 사이트


✅ 2️⃣ JavaScript (JS)

📌 웹페이지에 기능을 추가하는 언어

  • 버튼 클릭, 애니메이션, API 호출 등 다양한 기능 구현 가능
  • 최신 JavaScript (ES6+) 문법 배우기 (let/const, 화살표 함수, 비동기 처리 등)
  • DOM 조작, 이벤트 핸들링 이해하기

🔥 추천 학습 사이트


✅ 3️⃣ 프레임워크 & 라이브러리 (React, Vue, Svelte)

📌 효율적인 개발을 위한 필수 스킬

  • React.js: 가장 인기 있는 프론트엔드 라이브러리 (Meta 개발)
  • Vue.js: 사용하기 쉽고 가벼운 프레임워크
  • Svelte: 새로운 방식의 컴파일형 프레임워크

🔥 추천 학습 사이트


✅ 4️⃣ 버전 관리 (Git & GitHub)

📌 코드를 안전하게 관리하고 협업하기 위한 필수 도구

  • Git 기본 명령어 (clone, commit, push, pull) 익히기
  • GitHub을 활용하여 프로젝트 저장 및 협업 경험 쌓기

🔥 추천 학습 사이트


✅ 5️⃣ API & 비동기 처리 (fetch, axios)

📌 백엔드와 데이터를 주고받기 위한 필수 개념

  • REST API, GraphQL 개념 이해하기
  • fetch(), axios() 등을 활용한 API 통신 연습

🔥 추천 학습 사이트


🎯 3. 프론트엔드 개발자가 되기 위한 실전 준비

✅ 1️⃣ 프로젝트 만들어 보기

이론만 공부하는 것보다 직접 작은 프로젝트를 만들어보는 것이 중요합니다!
📌 추천 프로젝트
✔ 간단한 To-Do List 만들기
✔ 날씨 앱 (API 연동)
✔ 개인 포트폴리오 웹사이트 만들기

🔥 초보자를 위한 무료 프로젝트 사이트


✅ 2️⃣ 코딩 테스트 준비

기업에서는 기본적인 알고리즘 테스트를 요구하는 경우가 많아요.
📌 알고리즘 & 자료구조 기본 개념 학습하기
✔ 배열, 문자열, 해시맵, 스택, 큐, 재귀

🔥 추천 사이트


✅ 3️⃣ 포트폴리오 & 이력서 준비

📌 GitHub, 블로그, 포트폴리오 웹사이트로 자신만의 프로젝트 공유
✔ GitHub에 프로젝트 코드 올리기
✔ 기술 블로그 운영 (공부한 내용 정리)
✔ 포트폴리오 사이트 제작 (자기소개, 프로젝트 소개 포함)

🔥 추천 블로그 플랫폼


🚀 4. 프론트엔드 개발자로 취업하기

📌 1️⃣ 인턴 & 실무 경험 쌓기

✔ 오픈소스 프로젝트 참여
✔ 스타트업 인턴 지원
✔ 프리랜서 웹사이트에서 프로젝트 참여

📌 2️⃣ 기술 면접 준비

✔ JavaScript 기본 개념 & ES6 문법
✔ HTML/CSS 면접 질문 연습
✔ React, Vue 등 프레임워크 관련 개념 정리

🔥 면접 질문 연습 사이트


🎯 마무리

프론트엔드 개발자가 되기 위해서는
HTML, CSS, JavaScript 기본기 다지기
React/Vue 등의 프레임워크 익히기
실전 프로젝트 만들어보기
GitHub & 블로그로 포트폴리오 관리하기
코딩 테스트 & 기술 면접 준비하기

👨‍💻 처음에는 어려워 보일 수 있지만, 꾸준히 공부하고 프로젝트를 만들다 보면 실력이 쌓일 거예요!
**"작은 프로젝트라도 직접 만들어보는 것이 가장 좋은 공부 방법"**이라는 점, 잊지 마세요.

💬 여러분은 프론트엔드 개발자가 되기 위해 어떤 준비를 하고 계신가요?
더 궁금한 점이 있다면 댓글로 질문 주세요! 😊✨


🏷 관련 태그

#프론트엔드개발 #웹개발자 #HTML #CSS #JavaScript #React #프로그래밍 #코딩공부


 

728x90
반응형
LIST
728x90
반응형
SMALL

안드로이드에서 webview로 파일 전송하기

webview는 jsp로 구현됨

 

1. jsp에서 파일 선택 버튼 및 표시할 img 

<body>
<input type="file" id="testfile" width="100px" height="100px" multiple/>
<img id="testimg" width="100px" height="100px"/>
</body>

 

2. 안드로이드에서 이벤트 받고, 탐색기로 이동한다.

mWebView.setWebChromeClient(new WebChromeClient(){
    @Override
    public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
        Log.d(TAG, "onShowFileChooser");
        mFilePathCallback = filePathCallback;
        //갤러리 호출
        Intent intent = new Intent();
        intent.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, "*/*");
        intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true);
        intent.setAction(Intent.ACTION_GET_CONTENT);
        activityResultLauncher.launch(intent);
        return true;
    }
});

 

탐색기가 아니고 이미지로만 가고싶다면

"*/*" 부분을 "image/*"로 변경하면 됨

 

3. 탐색기에서 선택한 파일의 정보를 받아온다.

ValueCallback<Uri[]> mFilePathCallback;

ActivityResultLauncher<Intent> activityResultLauncher = registerForActivityResult(
        new ActivityResultContracts.StartActivityForResult(),
        new ActivityResultCallback<ActivityResult>() {
            @Override
            public void onActivityResult(ActivityResult result) {
                if(result.getResultCode() == RESULT_OK) {
                    Intent intent = result.getData();

                    if(intent.getClipData() == null && intent.getData() != null){
                    	// 1개선택
                        Uri[] uris = new Uri[1];
                        uris[0] = intent.getData();
                        mFilePathCallback.onReceiveValue(uris);
                    }else if(intent.getClipData() != null && intent.getClipData().getItemCount() > 0){
                    	// 여러개선택
                        int cnt = intent.getClipData().getItemCount();
                        Uri[] uris = new Uri[cnt];
                        for(int i=0; i<cnt; i++){
                            uris[i] = intent.getClipData().getItemAt(i).getUri();
                        }
                        mFilePathCallback.onReceiveValue(uris);
                    }else{
                        // 파일이 없다.
                        mFilePathCallback.onReceiveValue(null);
                    }
                }
            }
        }
);

 

4. onReceiveValue로 보낸 정보를 jsp에서 받는다.


<script type="text/javascript">
const fileInput = document.getElementById('testfile');

fileInput.addEventListener('change', (event) => {
	if(event == null){
		console.log('not file')
		return;
	}
	const fileReader = new FileReader();
    fileReader.readAsDataURL(event.target.files[0]); // sample로 1개만 해봄

    fileReader.onload = (e) => {
      let base64data = fileReader.result;
      document.getElementById('testimg').src = base64data; // 이미지 표시
    }
});
</script>
728x90
반응형
LIST
728x90
반응형
SMALL

Vue.js와 React.js는 현재 웹 개발에서 가장 인기 있는 프론트엔드 프레임워크입니다. 두 프레임워크 모두 각각의 장점과 단점이 있으며, 개발자들이 선택할 때 고려해야 할 요소들이 많습니다. 이번 포스팅에서는 Vue.js와 React.js의 특징과 차이점, 그리고 어떤 상황에서 어떤 프레임워크를 선택해야 하는지에 대해 자세히 알아보겠습니다. 😊

Vue.js는 2014년에 Evan You에 의해 개발된 오픈 소스 프론트엔드 프레임워크입니다. Vue는 사용자 인터페이스를 구축하기 위해 설계되었으며, 특히 단일 페이지 애플리케이션(SPA) 개발에 적합합니다. Vue는 반응형 데이터 바인딩과 컴포넌트 기반 아키텍처를 제공하여 개발자들이 효율적으로 작업할 수 있도록 돕습니다.

React.js는 Facebook에서 개발한 오픈 소스 라이브러리로, 사용자 인터페이스를 구축하는 데 중점을 두고 있습니다. React는 컴포넌트 기반 아키텍처를 사용하며, 가상 DOM을 통해 성능을 최적화합니다. React는 JSX(JavaScript XML)를 사용하여 UI를 정의하는데, 이는 JavaScript와 HTML을 결합한 형태입니다.

Vue.js의 특징

  1. 반응형 데이터 바인딩 : Vue는 양방향 데이터 바인딩을 지원하여, 데이터의 변화가 UI에 즉시 반영됩니다. 이는 개발자가 UI와 데이터 상태를 쉽게 관리할 수 있도록 도와줍니다.
  2. 컴포넌트 기반 아키텍처 : Vue는 컴포넌트를 통해 UI를 구성합니다. 각 컴포넌트는 독립적으로 관리되며, 재사용이 용이합니다.
  3. 가벼운 프레임워크 : Vue는 상대적으로 가벼운 프레임워크로, 빠른 로딩 속도를 자랑합니다. 이는 사용자 경험을 향상시키는 데 큰 도움이 됩니다.
  4. 유연한 구조 : Vue는 다양한 방식으로 사용할 수 있어, 기존 프로젝트에 쉽게 통합할 수 있습니다. 또한, Vue CLI를 통해 프로젝트 설정이 간편합니다.

React.js의 특징

  1. 가상 DOM : React는 가상 DOM을 사용하여 실제 DOM의 변경을 최소화합니다. 이는 성능을 크게 향상시키며, 대규모 애플리케이션에서도 원활한 사용자 경험을 제공합니다.
  2. 단방향 데이터 흐름 : React는 단방향 데이터 흐름을 채택하여, 데이터의 흐름을 명확하게 관리할 수 있습니다. 이는 디버깅을 용이하게 하고, 애플리케이션의 상태를 예측 가능하게 만듭니다.
  3. JSX 사용 : React는 JSX를 사용하여 UI를 정의합니다. 이는 JavaScript와 HTML을 결합한 형태로, 개발자가 UI를 더 직관적으로 작성할 수 있게 합니다.
  4. 강력한 커뮤니티 : React는 Facebook에서 지원받고 있으며, 방대한 커뮤니티와 생태계를 가지고 있습니다. 이는 다양한 라이브러리와 도구를 활용할 수 있는 장점이 있습니다.

Vue.js와 React.js의 주요 차이점

  1. 데이터 바인딩 방식 : Vue는 양방향 데이터 바인딩을 지원하는 반면, React는 단방향 데이터 흐름을 사용합니다. 이는 개발자가 데이터를 관리하는 방식에 큰 영향을 미칩니다.
  2. 코드 작성 방식 : Vue는 템플릿 기반으로 UI를 정의하는 반면, React는 JSX를 사용하여 UI를 정의합니다. 이는 개발자가 UI를 작성하는 방식에 차이를 만듭니다.
  3. 성능 : React는 가상 DOM을 사용하여 성능을 최적화하는 반면, Vue는 반응형 데이터 바인딩을 통해 성능을 향상시킵니다. 두 프레임워크 모두 성능이 뛰어나지만, 특정 상황에서는 한쪽이 더 유리할 수 있습니다.

각 프레임워크의 장단점

  • Vue.js 장점 :
    • 배우기 쉽고 직관적인 문법
    • 반응형 데이터 바인딩으로 UI 관리 용이
    • 가벼운 프레임워크로 빠른 로딩 속도
  • Vue.js 단점 :
    • 대규모 애플리케이션에서의 성능 저하 가능성
    • 상대적으로 작은 커뮤니티
  • React.js 장점 :
    • 강력한 성능과 대규모 애플리케이션에 적합
    • 방대한 커뮤니티와 생태계
    • 재사용 가능한 컴포넌트 구조
  • React.js 단점 :
    • JSX 문법이 처음에는 다소 복잡할 수 있음
    • 단방향 데이터 흐름으로 인해 데이터 관리가 복잡해질 수 있음

어떤 상황에서 어떤 프레임워크를 선택해야 할까?

  • 소규모 프로젝트 : Vue.js는 배우기 쉽고 빠르게 개발할 수 있어 소규모 프로젝트에 적합합니다. 특히, 빠른 프로토타입 제작이 필요할 때 유리합니다.
  • 대규모 애플리케이션 : React.js는 성능이 뛰어나고, 대규모 애플리케이션에 적합합니다. 복잡한 상태 관리가 필요한 경우, React의 단방향 데이터 흐름이 유리할 수 있습니다.
  • 팀의 경험 : 팀의 경험에 따라 선택할 프레임워크가 달라질 수 있습니다. 만약 팀원이 Vue.js에 익숙하다면 Vue를 선택하는 것이 좋고, React에 익숙하다면 React를 선택하는 것이 좋습니다.

이처럼 Vue.js와 React.js는 각각의 장점과 단점이 있으며, 개발자의 필요와 프로젝트의 요구에 따라 선택할 수 있습니다. 두 프레임워크 모두 훌륭한 선택이 될 수 있으니, 상황에 맞게 잘 선택하시기 바랍니다. 😊

태그

#Vue #React #프론트엔드 #웹개발 #프레임워크 #개발자 #프로그래밍 #JavaScript #컴포넌트 #데이터바인딩

이런 자료를 참고 했어요.

[1] 코딩애플 - 카카오가 리액트 냅두고 왜 Vue 쓰는지 알려드림 (https://codingapple.com/unit/why-use-vue-over-react/)

[2] oopy.io - React와 Vue의 장단점 비교 - 팔만코딩경 Mobile (https://80000coding.oopy.io/f27f6183-0523-43e1-ab90-8f8175bd4a88)

[3] AppMaster - Vuejs 대 React: 가장 인기 있는 두 가지 프론트엔드 JS ... (https://appmaster.io/ko/blog/vuejs-dae-baneung)

[4] 브런치스토리 - 리액트(React.js)와 뷰(Vue.js)의 차이점 (https://brunch.co.kr/@@EMK/573)

 

해당 게시물은 AI 자동 글쓰기를 이용하여 제작되었습니다.

728x90
반응형
LIST

'AI 자동' 카테고리의 다른 글

육아 국민템, 필수품  (8) 2024.11.06
경유차와 요소수  (3) 2024.11.06
기계식 키보드  (0) 2024.11.06
비플페이  (4) 2024.11.06
락토핏 생유산균 골드  (2) 2024.11.06

+ Recent posts