querySelector

  • 정의
    querySelector는 CSS 선택자를 사용하여 문서에서 첫 번째로 일치하는 요소를 반환합니다. 요소를 찾지 못하면 null을 반환합니다.
  • 사용법
    document.querySelector(cssSelector) 형식으로 사용하며, cssSelector는 CSS 스타일의 선택자 문자열입니다.

예시

HTML 문서에서 첫 번째로 발견되는 classexample<div> 요소를 선택합니다.

<div class="example">첫 번째 예제</div>
<div class="example">두 번째 예제</div>
const firstExample = document.querySelector(".example");
console.log(firstExample.textContent); // "첫 번째 예제"

 

querySelectorAll

  • 정의: querySelectorAll주어진 CSS 선택자에 일치하는 문서 내 모든 요소의 정적(NodeList가 아닌) NodeList를 반환합니다. 일치하는 요소가 없으면 빈 NodeList를 반환합니다.
  • 사용법: document.querySelectorAll(cssSelector) 형식으로 사용합니다.

예시

HTML 문서 내에서 classexample인 모든 <div> 요소를 선택합니다.

<div class="example">첫 번째 예제</div>
<div class="example">두 번째 예제</div>
const allExamples = document.querySelectorAll(".example");
allExamples.forEach(el => {
    console.log(el.textContent);
});
// 출력:
// 첫 번째 예제
// 두 번째 예제

 

사용 시 주의점

  • querySelectorAll 반환값: querySelectorAll이 반환하는 NodeList는 정적이므로, NodeList를 생성한 후 DOM이 변경되더라도 NodeList의 내용은 업데이트되지 않습니다.
  • CSS 선택자: querySelectorquerySelectorAll 모두 CSS 선택자를 사용하므로, 유효한 CSS 선택자 문자열을 인자로 제공해야 합니다.
  • 성능 고려: 빈번한 DOM 접근은 성능에 영향을 줄 수 있으니, 필요한 경우에만 사용하고 결과를 캐싱하는 것이 좋습니다.
반응형

개요

현대의 모바일 애플리케이션 개발에서 Android 애플리케이션과 웹 서버 간의 데이터 통신은 필수적인 부분이다

Kotlin으로 개발된 Android 애플리케이션과 PHP 서버 간의 데이터를 주고받는 방법에 대해 알아보자

근래에는 PHP를 잘 쓰지 않지만 레거시 코드 수정 시 필요할 때가 가끔 있었다

 

방법

1. Android에서 PHP로 데이터 보내기

Android 애플리케이션에서 PHP 서버로 데이터를 보내는 것은 사용자 인증, 서버에 데이터 저장 등 다양한 목적으로 사용된다

다음 예제는 Android에서 PHP 서버로 HTTP POST 요청을 통해 데이터를 보내는 방법이다

Kotlin 코드 예시 (Android)

// HTTP 요청을 보내기 위한 함수
fun sendPostRequest(username: String, password: String) {
    val url = URL("https://domain.com/login.php")
    val postData = JSONObject()
    postData.put("username", username)
    postData.put("password", password)

    with(url.openConnection() as HttpURLConnection) {
        requestMethod = "POST"
        doOutput = true

        val outputStream = BufferedOutputStream(outputStream)
        BufferedWriter(OutputStreamWriter(outputStream, "UTF-8")).use { writer ->
            writer.write(postData.toString())
            writer.flush()
        }

	// URL 연결과 데이터 전송 후 서버로부터의 응답을 받는 부분
        if (responseCode == HttpURLConnection.HTTP_OK) {
            BufferedReader(InputStreamReader(inputStream)).use { reader ->
                val response = StringBuilder()
                var line: String?
                while (reader.readLine().also { line = it } != null) {
                    response.append(line)
                }
                // 응답 처리
                Log.d("HTTP_POST", "Response: $response")
            }
        } else {
            Log.e("HTTP_POST", "Error: $responseCode")
        }
    }
}

sendPostRequest

사용자 이름(username)과 비밀번호(password)를 인자로 받아, HTTP POST 요청을 통해 이를 PHP 서버로 전송하는 함수


HttpURLConnection

서버와의 연결을 설정하고, POST 요청을 보내기 위한 준비를 한다

doOutput = true는 요청 본문에 데이터를 포함시킬 것임을 나타낸다


BufferedWriter

JSON 데이터를 서버로 전송하기 위해 사용된다

데이터는 UTF-8 인코딩으로 전송된다


if (responseCode == HttpURLConnection.HTTP_OK)

서버로부터의 응답 코드를 확인하여, 요청이 성공적으로 처리되었는지 확인한다

이후 서버에서 보낸 데이터를 StringBuilder객체로 받아서 활용할 수 있다

 

PHP 코드 예시 (서버)

<?php
// login.php
$username = $_POST['username'];
$password = $_POST['password'];

// 데이터베이스에서 사용자 인증 처리
// 예시이므로 실제 데이터베이스 연결과 쿼리 실행은 생략됩니다.

if (/* 사용자 인증 성공 */) {
    echo json_encode(array("status" => "success", "message" => "로그인 성공"));
} else {
    echo json_encode(array("status" => "fail", "message" => "로그인 실패"));
}
?>

$username = $_POST['username']

Android 클라이언트로부터 전송된 데이터 수신

echo json_encode(array(...))

로그인 성공 여부에 따라 JSON 형태의 응답 클라이언트(안드로이드)로 전송

이 응답은 Android 측에서 처리할 수 있다 (위 Kotlin 코드 응답 부분 참고)

 

2. PHP에서 Android로 데이터 보내기

서버에서 Android 애플리케이션으로 데이터를 보낼 때는 주로 서버의 데이터 상태 변경, 푸시 알림 정보 등을 Android 앱에 알리는 데 사용된다

다음 예제는 PHP에서 Android 웹뷰로 데이터를 보내 JavascriptInterface를 통해 처리하는 방법이다

 

PHP 코드 예시

PHP 코드는 클라이언트로부터 요청을 받고, 적절한 데이터를 처리한 후 결과를 JSON 형태로 반환한다

Android로부터 요청을 받고, 간단한 결과 데이터를 Android에 보내는 과정을 담은 예제이다

<?php
// response.php
$responseData = array("status" => "success", "data" => "Hello from PHP!");
echo json_encode($responseData);
?>

$responseData

서버에서 처리한 데이터를 포함하는 배열, 상태와 메시지 포함

echo json_encode($responseData)

배열을 JSON 형식으로 인코딩하여 클라이언트로 전송

이 JSON 데이터는 Android 앱에서 사용될 수 있습니다.

 

 

Kotlin 코드 예시 (Android)

Android에서는 WebView를 사용하여 PHP 서버와 통신하고

JavascriptInterface를 통해 웹 페이지에서 Android 함수를 호출할 수 있다

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // 웹뷰 설정
        binding.webView.settings.javaScriptEnabled = true
        binding.webView.addJavascriptInterface(WebAppInterface(this), "Android")
        binding.webView.loadUrl("https://yourdomain.com/response.php")
    }

    class WebAppInterface(private val mContext: Context) {
        @JavascriptInterface
        fun showToast(toast: String) {
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show()
        }
    }
}

 

WebView

웹 컨텐츠를 로드하고 표시하기 위한 컴포넌트

loadUrl 메서드를 사용하여 PHP 페이지 로드

addJavascriptInterface

Android와 웹 페이지 간의 인터랙션을 가능하게 하는 메서드

이 예제에서는 WebAppInterface 인스턴스를 JavaScript 인터페이스로 추가하여

웹 페이지 내의 JavaScript 코드가 Android 함수 호출

@JavascriptInterface

안드로이드 메서드가 JavaScript에서 호출될 수 있도록 허용하는 어노테이션

showToast

JavaScript에서 호출될 수 있는 메서드

toast 메시지 화면에 표시

예시

<script>
function showMessage() {
    // AndroidInterface.showToast 메서드 호출
    AndroidInterface.showToast('서버로부터 받은 메시지');
}
</script>

 

결론

이 글에서는 Kotlin으로 개발된 Android 애플리케이션과 PHP 서버 간의 기본적인 데이터 통신 방법에 대해 알아보았다

예제는 PHP 서버에서 Android 애플리케이션으로 간단한 메시지를 보내고

Android 측에서는 이를 받아 토스트 메시지로 표시하는 과정을 구현한 코드이다

실제 애플리케이션에서는 이러한 방식을 확장하여 다양한 데이터 교환과 상호작용을 구현할 수 있다

이것 이외에도 보안, 데이터 검증, 에러 처리 등 추가적인 고려 사항이 필요할 수 있다

반응형

질문 리스트


  - Next.js 정의
  - Next.js의 주요 기능
  - SSR과 CSR의 차이
  - getInitialProps 기능
  - Next.js의 라우팅 방식
  - API 경로 생성 방법


면접 질문


1. Next.js는 무엇입니까? 


Next.js는 React.js, Node.js 및 JavaScript 위에 구축된 오픈 소스 개발 프레임워크입니다. Vercel에서 개발했으며 create-react-app에서 사용할 수 없는 서버 측 렌더링 및 정적 사이트 생성과 같은 기능을 활성화합니다.

2. Next.js의 주요 기능은 무엇입니까?


SSR(Server Side Rendering) - 더 나은 SEO와 더 빠른 페이지 로드 시간을 보장합니다.
SSG(Static Site Generation) - 빌드 시 React 앱을 렌더링할 수 있으며 HTML/CSS 파일로 제공됩니다.
ISR(Incremental Static Regeneration) - 이 기능을 사용하면 전체 정적 사이트를 다시 빌드할 필요 없이 배포 후 정적 콘텐츠를 업데이트할 수 있습니다.
API Routes - Next.js를 사용하면 API 라우트를 구축할 수 있습니다.
내장 CSS 및 Sass 지원, 모든 CSS-in-JS 라이브러리 지원.
Hot Code Reloading - 애플리케이션 코드의 변경 사항은 전체 페이지를 새로 고치지 않고도 즉시 볼 수 있습니다.
자동 코드 분할, 파일 시스템 기반 라우팅 및 경로 미리 가져오기

3. Next.js의 SSR(Server-Side Rendering)에 대해 설명해 주시겠습니까? CSR(Client-Side Rendering)과 어떻게 다릅니까? 

SSR에서 브라우저에 대한 서버의 응답은 렌더링할 준비가 된 페이지의 HTML이므로 브라우저는 모든 JavaScript가 다운로드되고 실행될 때까지 기다릴 필요 없이 렌더링을 시작할 수 있습니다. 이는 더 빠른 FCP(First Contentful Paint)를 제공하며 콘텐츠가 초기 로드 시 이미 사용 가능하므로 검색 엔진 크롤러가 액세스할 수 있으므로 SEO에 탁월합니다. 반면 클라이언트 측 렌더링에서는 페이지를 렌더링하는 데 필요한 JavaScript가 브라우저로 전송된 다음 DOM을 생성하고 페이지를 렌더링합니다. 이것은 보다 상호 작용적인 경험을 제공할 수 있지만 단점이 있습니다. 주요 단점은 특히 느린 네트워크나 장치에서 페이지가 표시되는 데 시간이 더 오래 걸릴 수 있다는 것입니다. Next.js는 개발자가 응용 프로그램의 각 페이지를 렌더링하는 방법을 선택할 수 있는 SSR과 CSR의 하이브리드를 제공하여 많은 유연성을 제공합니다.

4. Next.js의 'getInitialProps' 기능은 무엇인가요?


getInitialProps는 페이지에서 서버 측 렌더링을 활성화하고 페이지가 렌더링 전에 일부 데이터를 기다릴 수 있도록 하는 Next.js의 기능입니다. Next.js 애플리케이션의 모든 페이지에 추가할 수 있는 비동기 정적 메서드입니다. getInitialProps로부터 반환되는 데이터는 페이지 컴포넌트의 props를 채우는 데 사용됩니다. 이 함수는 필요한 데이터를 가져오는 데 유용할 수 있는 여러 속성을 포함한 컨텍스트 객체를 받습니다. 그러나 Next.js 9.3부터는 getInitialProps 대신 getStaticProps 또는 getServerSideProps를 사용하는 것이 좋습니다.  두 방법으로 더 나은 성능과 유연성을 얻을 수 있기 때문입니다.

5. Next.js에서 라우팅이 작동하는 방식을 설명해 주시겠습니까?


Next.js에는 파일 시스템 기반 라우팅 메커니즘이 있습니다. 이는 라우팅이 프로젝트의 'pages' 디렉토리에 있는 파일 구조를 기반으로 한다는 것을 의미합니다. 'pages' 디렉토리 내의 모든 파일은 자동으로 경로가 됩니다. 예를 들어 'pages' 디렉토리에 about.js 파일을 생성하면 your-site.com/about처럼 제공됩니다. 대괄호 []로 시작하는 파일 및 디렉터리 이름을 사용하여 동적 라우팅을 수행할 수도 있습니다. 예를 들어, pages/post/[id].js는 /post/1, /post/abc 등과 일치합니다.

6. Next.js에서 API 경로를 어떻게 생성하나요?


Next.js는 서버 사이드 API 경로를 생성하는 솔루션을 제공합니다. API 경로를 생성하려면 프로젝트의 'pages/api' 디렉토리 내에 파일을 생성합니다. 이 디렉터리의 각 파일은 호출할 수 있는 API 경로가 됩니다. 파일 이름은 경로 경로로 사용됩니다. 예를 들어 'pages/api' 디렉토리에 'hello.js'라는 파일을 생성하면 'yourwebsite.com/api/hello'에서 이 API 경로에 액세스할 수 있습니다. API 경로는 서버 측 전용이며 클라이언트 측 JavaScript 번들의 일부가 아니므로 브라우저로 전송되는 JavaScript 코드의 크기가 증가하지 않습니다.


이상 Next.js 관련하여 면접에서 물어볼 것 같은 사항들을 정리해보았다. 다들 면접 잘 뿌수고 오자 화이팅 !

반응형

개요

이 글에서는 JSON Web Tokens (JWT)에 대해 이야기하려고 한다. JWT는 JSON 객체로 정보를 안전하게 주고받는 표준으로 이 정보들은 디지털 서명되어 있어서 검증하고 신뢰할 수 있다. 주로 인증이나 정보 교환에 사용된다.

 

JWT 제작 시 주의점

1. HTTPS는 필수

프로덕션에서는 항상 HTTPS를 사용해야 한다. JWT가 전송 중에 암호화되므로, 도청 공격으로부터 안전해진다.

2. 비밀키 보안 강화

JWT를 서명하는 데 사용하는 비밀 키는 항상 안전하게 보관해야한다. 만약 노출된다면 공격자가 토큰을 위조할 수 있어서 위험하다.

3. 토큰 만료 시간

 토큰에 만료 시간을 설정하는 것은 꼭 필요하다. 토큰이 노출되더라도 만료 시간이 설정되어 있다면 피해를 최소화할 수 있다.

4. 민감한 정보는 패스

JWT의 페이로드에 민감한 데이터를 넣지 않는 것을 추천한다. 만약 토큰이 노출되면 그 안의 데이터도 노출되기 때문이다.

5. 클라이언트에서 토큰 처리 잘하기

브라우저의 로컬 스토리지나 세션 스토리지에 토큰을 저장하는 것은 피해야 한다. JavaScript로 접근할 수 없는 HttpOnly 쿠키를 사용하는 것이 제일 좋다.

6. 에러 처리 꼼꼼하게

JWT가 유효하지 않거나 만료되었거나 존재하지 않는 경우, 서버는 반드시 적절하게 응답해야 한다.

구현

그럼 이제 TypeScript와 Express를 사용해서 Node.js 서버에서 JWT 인증을 어떻게 구현하는지 알아보자.

먼저, 필요한 npm 패키지를 설치해야 한다.

npm install jsonwebtoken express
npm install @types/jsonwebtoken @types/express --save-dev


다음은 JWT 인증 구현 예시이다.

import express, { Request, Response, NextFunction } from "express";
import jwt from "jsonwebtoken";

const app = express();
const SECRET_KEY = "YOUR_SECRET_KEY";  // 비밀 키

// JWT를 확인하는 미들웨어
function authenticateToken(req: Request, res: Response, next: NextFunction) {
  // 헤더에서 토큰을 가져옵니다
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];

  if (token == null) return res.sendStatus(401); // 토큰이 없는 경우

  jwt.verify(token, SECRET_KEY, (err: any, user: any) => {
    if (err) return res.sendStatus(403);

    req.user = user;
    next();
  });
}

app.post('/login', (req, res) => {
  // 사용자 인증
  // 사용자 인증 로직 구현
  // 사용자 이름과 비밀번호를 req.body에서 가져오기 
  // 데이터베이스와 대조 (ex. bcrypt 활용)

  const username = req.body.username;
  const user = { name: username };

  // 액세스 토큰 생성
  const accessToken = jwt.sign(user, SECRET_KEY);
  res.json({ accessToken: accessToken });
});

app.get('/protected', authenticateToken, (req, res) => {
  // 이 경로는 JWT로 보호됩니다
  // 'authenticateToken'을 호출한 후에는 'req.user'에 사용자 정보가 있습니다
  res.json({ title: 'Protected content', user: req.user });
});

app.listen(3000, () => console.log('Server started on port 3000'));

 

토큰 저장

마지막으로, 액세스 토큰을 어디에 저장할지 결정하는 것도 중요하다. 이는 애플리케이션의 맥락과 보안 고려사항에 따라 달라진다. 각 방법의 장단점을 보고 판단하면 된다.

1. Cookie

쿠키에 토큰을 저장하는 것은 일반적인 방법이다. HttpOnly 쿠키는 JavaScript에서 접근할 수 없으므로 XSS 공격에 대해 안전하다. 하지만 CSRF 공격에 취약할 수 있으며, 이는 동기 토큰 패턴이나 SameSite 쿠키 속성과 같은 기법으로 완화할 수 있다.

2. LocalStorage

LocalStorage에 토큰을 저장하는 것은 쉽고 편리하며, CSRF 공격에 대해 안전하다. 하지만 JavaScript를 통해 접근할 수 있으므로 XSS 공격에 취약하다.

3. Private variable

JavaScript 클로저 내의 변수에 토큰을 저장하는 것은 가장 안전한 옵션이다. 이 방법은 토큰이 전역적으로 노출되지 않으며 XSS를 통해 접근할 수 없다. 하지만 이 방법은 페이지 간에 지속되지 않는다 즉, 사용자가 페이지를 이동하거나 새로 고침하면 토큰이 소실된다.
단일 페이지 애플리케이션 (SPA)의 맥락에서는 일반적인 패턴은 메모리에 액세스 토큰을 저장하고 (예: private variable), 만료될 때 새로운 액세스 토큰을 얻기 위해 HttpOnly 쿠키에 저장된 새로 고침 토큰을 사용하는 것이다. 이 방법은 사용성과 보안 사이에서 좋은 균형을 제공한다.

결론

어떤 솔루션도 100% 보안은 아니다. 애플리케이션의 특정 필요에 따라 최선의 방법이 결정된다. 패키지를 최신 상태로 유지하고, 사용자 입력을 sanitize하여 XSS 공격을 방지하며(ex. sanitize-html), 쿠키에 대해 HttpOnly와 Secure 플래그를 사용하고, CSRF 보호를 활성화하여 애플리케이션의 보안을 강화해야한다.

반응형

+ Recent posts