somin_0.log https://velog.io/ 소소하게 하나 두울 Thu, 05 Aug 2021 07:29:16 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed somin_0.log https://images.velog.io/images/somin_0/profile/0e26c91d-6c29-4ee0-b7a6-9b3c564467ce/애옹3.PNG https://velog.io/ Copyright (C) 2019. somin_0.log. All rights reserved. <![CDATA[Handlebars]]> https://velog.io/@somin_0/Handlebars https://velog.io/@somin_0/Handlebars Thu, 05 Aug 2021 07:29:16 GMT 0. 들어가며...

코드분석을 하던중 생소한 코드가 있어 찾아보았다. 참고한블로그1, 블로그2를 보고 이해하는데 많은 도움을 받았다.

1. Handlebars란?

Mustache를 기반으로 구현한 간단한 templating language라고 한다.(handlebarsjs.com)

홈페이지에서 설명하는 Handlebars의 장점은 다음과 같다.
🔷 Handlebars는 Semantic templates을 구축하는데 필요한 기능을 제공한다. 🔷 Mustache-compatible(호환)하여 Mustache를 핸들바로 교체하고 현재 템플릿을 계속 사용 사용할 수 있다.
🔷 JavaScript함수로 컴파일하기 때문에 다른 템플릿엔진보다 템플릿 실행을더 빠르게 할 수 있다.

핸들바 표현식은 {{ some contents }} 이다. 템플릿이 실행되면 이러한 표현식이 입력 개체의 값으로 바뀐다. 표현식에 사용되는 중괄호{}가 콧수염(Mustache)을 닮았다고 하여 콧수염괄호라고도 한다.


2. 적용해보자!

핸들바 템플릿을 사용하기 위해선 속성으로 템플릿임을 알려줄 필요가 있다.

<script id="entry-template" type="text/x-handlebars-template">
<table>
    <thead> 
        <th>이름</th> 
        <th>아이디</th> 
        <th>메일주소</th> 
    </thead> 
    <tbody> 
        {{#users}} 
        <tr> 
            <td>{{name}}</td> 
            <td>{{id}}</td> 
            <td><a href="mailto:{{email}}">{{email}}</a></td> 
        </tr> 
        {{/users}} 
    </tbody> 
</table>
</script>

<script>태그의 type속성을 살펴보면 text/x-handlebars-template을 통해 핸들바 템플릿을 사용한다는 것을 알 수 있다. 더불어, {{#users}}와 {{/users}}로 감싸진 부분은 users라는 배열의 길이만큼 반복된다. {{name}}처럼 내부에 괄호로 감싸진 부분은 배열 요소 값으로 바뀌는 부분이다.



앞서 말했듯이, Handlebars는 자바스크립트함수로 컴파일된다. 예제의 js파일을 살펴보자.

//핸들바 템플릿 가져오기
var source = $("#entry-template").html(); 

//핸들바 템플릿 컴파일
var template = Handlebars.compile(source); 

//핸들바 템플릿에 바인딩할 데이터
var data = {
        users: [
            { name: "홍길동1", id: "aaa1", email: "aaa1@gmail.com" },
            { name: "홍길동2", id: "aaa2", email: "aaa2@gmail.com" },
            { name: "홍길동3", id: "aaa3", email: "aaa3@gmail.com" },
            { name: "홍길동4", id: "aaa4", email: "aaa4@gmail.com" },
            { name: "홍길동5", id: "aaa5", email: "aaa5@gmail.com" }
        ]
}; 

//핸들바 템플릿에 데이터를 바인딩해서 HTML 생성
var html = template(data);

//생성된 HTML을 DOM에 주입
$('body').append(html);

id를 통해 핸들바 템플릿을 가져오고, 컴파일이 이루어진다. 변수 html에 파라미터로 데이터를 넣어주고 JQuery로 body끝에 html을 추가하였다.

참고한 블로그1에서 제공한 해당 예제의 실습링크이다.

3. 마치며...

이번 포스팅에서는 Handlebars의 헬퍼에 대해서는 다루지 않았다. 다음 포스팅에서 다룰 수 있게 되기를 바라면서 이만 글을 마치고자 한다.

]]> <![CDATA[Thymeleaf]]> https://velog.io/@somin_0/Thymeleaf https://velog.io/@somin_0/Thymeleaf Thu, 29 Jul 2021 04:04:23 GMT 0. 들어가며...

웹개발을 하면서 접해본 기술을 적어보고자 한다.

현재 프로젝트는 전자정부프레임워크를 바탕으로 Thymeleaf 템플릿 웹엔진을 사용하고 있다.

아래는 글을 작성하며 참고한 블로그들이다.(감사합니다!)

참고 블로그1 / 참고 블로그2 / 참고 블로그3

1. Thymeleaf란?

비교적 최근에 만들어진 템플릿 엔진이며 서버사이드 자바 템플릿 엔진의 한 종류 JSP와 Thymeleaf의 가장 큰 차이점은 JSP와 달리 Servlet Code로 변환되지 않다는 점이다. 따라서 비즈니스 로직과 분리되어 오로지 View에 집중가능

👏 장점

1. 서버상에서 동작하지 않아도 된다. 톰캣같은 서버가 동작하지 않아도 HTML 페이지가 잘 보이기 때문에 마크업을 쉽게 수정할 수 있다.

2. 전체적인 마크업 구조를 흐트려트리지 않는다. 다른 view Template-Engine처럼 문법을 사용하여 전체적인 마크업 구조를 흐트러 트리지 않는다.

3. 효율적 개발 애플리케이션을 개발할때 디자인과 개발이 분리되어 작업 효율을 향상시킬 수 있다.

2. Layout 사용법

Thymeleaf를 이용한 레이아웃을 간단히 살펴보도록하자.

들어가기에 앞서, 아래 3가지 구성요소로 정의해보고자 한다.

🙄 Fragments : 공통적, 반복적 구성요소 🙄 Layouts : 틀, 레이아웃으로 사용 🙄 Contents : 내용물

대부분의 html은 head, header, body, footer로 구성되어진다. 이때, 각 구성요소들을 어딘가에서 가져와 사용하는것을 Tymeleaf layout이라고 할 수 있겠다. (노란 박스들이 body이다.)

기억해야할 부분은 아래와 같다. 교체를 당할 부분은 th:replace="경로 :: 구분자"로 표시한다. 교체가 되어 보여질 부분은 th:fragment="구분자"로 표시한다.

layout의 틀을 만들때는 꼭 xmlns:layout="http://경로/thymeleaf/layout" 네임스페이스를 적어주어야 한다! (만들어진 레이아웃을 나중에 가져다 사용하므로 레이아웃이 무엇인지 알려주는게 필요하다.)



예제

🎈 교체가 이루어지는 틀 layout layout/default.html

<!DOCTYPE html>
<html     lang="ko" 
        xmlns:th="http://www.thymeleaf.org" 
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

    <!-- [head] 영역 시작 -->
    <head th:replace="fragments/head :: headFragment">
        <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">default</title>
    </head>
    <!-- [head] 영역 끝 -->

    <body>

        <!-- [header] 영역 시작 -->
        <header th:replace="fragments/header :: headerFragment"></header>
        <!-- [header] 영역 끝 -->

        <!-- [content] 영역 시작 -->
        <div layout:fragment="content"></div>
        <!-- [content] 영역 끝 -->

        <!-- [footer] 영역 시작 -->
        <footer th:replace="fragments/footer :: footerFragment"></footer>
        <!-- [footer] 영역 끝 -->

    </body>
</html>



🎈 교체가 되어 보여질 head 내용(headFragment) fragments/head.html 

<!DOCTYPE html>
<html     lang="ko"
         xmlns:th="http://www.thymeleaf.org">

<head th:fragment="headFragment">
    <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE"></title>
    <meta charset="UTF-8" />

    <!-- 공통적인 css -->
    <link rel="stylesheet" href="css/commons.css" />

    <!-- 개별적인 css -->
    <th:block layout:fragment="css"></th:block>
</head>

</html>

default.html의 head가 head.html로 교체된다.



🎈 레이아웃을 가져와 사용할 Contents default.html을 살펴보면 layout:fragment="content"부분이 있을 것이다. 이 부분에 원하는 "알맹이"를 넣으면 된다.

아래 예제에서 알맹이는 content.html의 layout:fragment="content 부분이 될 것이다.

content.html

<!DOCTYPE html>
<html     xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorator="layout/default">

<head>
    <title>content1</title>
</head>

<!-- 페이지의 개별적인 css -->
<th:block layout:fragment="css">
    <link rel="stylesheet" href="css/content1.css" />
</th:block>

<div layout:fragment="content" style="width: 100%; height:100px; background: #f2d299;">
    this area is content1
</div>

</html>

주의해야할 점은 content.html에 layout:decorator="layout/default" 를 넣어 어느 레이아웃을 사용할 것인지 알려주어야 한다.

3. 마치며...

간단히 th:replace와 th:fragment 등만 다뤄봤지만 이 밖에도 제공되는 여러 속성이 있다.

배워야 하는점도 해야하는 것들도 많지만 하나씩 하다보면 언젠가 필요할때 사용할 줄 아는 사람이 되지 않을까 생각해본다.

]]> <![CDATA[크레인 인형뽑기 게임]]> https://velog.io/@somin_0/%ED%81%AC%EB%A0%88%EC%9D%B8-%EC%9D%B8%ED%98%95%EB%BD%91%EA%B8%B0-%EA%B2%8C%EC%9E%84 https://velog.io/@somin_0/%ED%81%AC%EB%A0%88%EC%9D%B8-%EC%9D%B8%ED%98%95%EB%BD%91%EA%B8%B0-%EA%B2%8C%EC%9E%84 Wed, 21 Jul 2021 07:11:05 GMT 카카오의 크레인 인형뽑기 문제를 풀어보았다.

1. 문제

문제는 다음과 같다.

게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게 되는 데, 이때 바구니의 가장 아래 칸부터 인형이 순서대로 쌓이게 됩니다. 만약 같은 모양의 인형 두 개가 바구니에 연속해서 쌓이게 되면 두 인형은 터뜨려지면서 바구니에서 사라지게 됩니다. 크레인 작동 시 인형이 집어지지 않는 경우는 없으나 만약 인형이 없는 곳에서 크레인을 작동시키는 경우에는 아무런 일도 일어나지 않습니다. 또한 바구니는 모든 인형이 들어갈 수 있을 만큼 충분히 크다고 가정합니다. 게임 화면의 격자의 상태가 담긴 2차원 배열 board와 인형을 집기 위해 크레인을 작동시킨 위치가 담긴 배열 moves가 매개변수로 주어질 때, 크레인을 모두 작동시킨 후 터트려져 사라진 인형의 개수를 return 하도록 solution 함수를 완성해주세요.

대충 말하자면 인형을 뽑을건데 같은인형을 연속해서 뽑으면 해당인형2개가 없어진다는 이야기다. 따라서 구해야할 것은 몇개의 인형이 사라지는가이다.

2. 설계

1) Basic 설계

우선 moves배열을 보고 board배열에서 어떠한 값(변수 target)이 끄집어 나와지는지 알아야 했다. 그 후, 나온값(변수 target)을 stackArrayArrayList에 넣었다.

같은 인형을 연속해서 뽑을경우 인형이 사라지는것을 구현하기 위해 바로 직전에 뽑은 인형(변수 top)이 무엇인지 일아야했다.

target과 top이 같다면 stackArray의 마지막 인형을 없앴다. (target은 아직 stackArray에 넣지 않았으므로 top만 제거함)

이후 2개가 제거 되었으므로 변수answer를 2 증가시켰다.

2) 예외처리

인형이 없는경우는 값'0'을 가져오므로 다음 행동을 할 수 있도록 처리하였다.

3. 구현

위의 설계를 구현하면 아래의 코드가 된다.

import java.util.*;

class Solution {
    public int solution(int[][] board, int[] moves) {
        int answer = 0;
        // 쌓일 ArrayList
        ArrayList<Integer> stackArray = new ArrayList<Integer>();
        // 현재 움직이는 위치
        int currentMove = 0;
        // 현재 크레인이 뽑아올 값(인형)
        int target = -1;
        // 쌓인 ArrayList의 마지막 요소
        int top = 0;
        // 마지막 인덱스
        int lastIdx = -1;

        // 1. moves 위치의 아이템을 가져옴
        // 2. stackArray에 쌓음
        for(int i = 0; i < moves.length; i++){
            currentMove = moves[i] -1;

            // board에서 해당 값 가져오기
            for(int j = 0; j < board.length; j++){
                target = board[j][currentMove];


                if(target != 0){
                    board[j][currentMove] = 0;
                    break;    
                }
            }

            // 가져온 값(인형)이 0인경우
            if( target == 0){
                continue;
            }

            // 쌓인 종류가 없다면 삽입함
            if(stackArray.size() == 0){
                stackArray.add(target); 
                continue;
            }

            // 마지막 인덱스 수집 
            lastIdx = stackArray.size() -1;

            // 마지막 요소 가져오기
            top = stackArray.get(lastIdx);

            if ( target == top){
                // 마지막 인덱스 삭제
                stackArray.remove(lastIdx);
                // 값 2개 증가시키기
                answer+=2;
            }else{
                // 꺼낸 값을 stackArray에 넣기
                stackArray.add(target); 
            }
            target = -1;
        }


        return answer;
    }
}

4. 마무리

테스트의 1,2 번만 실패하여 코드를 보았지만 알 수 없었다. 테스트케이스의 테스트값들을 알고 싶었다.

'질문하기'의 질문내역들을 살펴보던중 값'0'이 삽입되고 있지 않은지 확인하라는 글을 읽고 코드를 수정하였다.

그 결과 테스트를 통과할 수 있었다.

문제를 꼼꼼히 읽는것도 중요하지만, 다시한번 리뷰하며 스스로 빼먹은 부분은 없는지 점검하는것도 필요하다고 생각되었다.

]]> <![CDATA[폰켓몬]]> https://velog.io/@somin_0/2.-%ED%8F%B0%EC%BC%93%EB%AA%AC https://velog.io/@somin_0/2.-%ED%8F%B0%EC%BC%93%EB%AA%AC Wed, 14 Jul 2021 06:51:29 GMT 프로그래머스 레벨1 폰켓몬을 풀어보았다.

1. 문제

당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 당신은 최대한 다양한 종류의 폰켓몬을 가지길 원하기 때문에, 최대한 많은 종류의 폰켓몬을 포함해서 N/2마리를 선택하려 합니다. N마리 폰켓몬의 종류 번호가 담긴 배열 nums가 매개변수로 주어질 때, N/2마리의 폰켓몬을 선택하는 방법 중, 가장 많은 종류의 폰켓몬을 선택하는 방법을 찾아, 그때의 폰켓몬 종류 번호의 개수를 return 하도록 solution 함수를 완성해주세요.

종류를 조합한 수가 아닌 조합할 수 있는 최대종류가 몇 개인지를 묻는질문이다! 문제를 보면서 이해했지만 푸는중간중간 잊어버렸던것 같다. (문제를 꼼꼼히 읽고 기억해야한다!)

2. 설계

문제를 보면, 총 N마리의 폰켓몬 중에서 N/2마리를 가져와도 된다고 했다. 이 말은, 결과값이 최대 N/2가 된다는 뜻이다.

다시말해, 아래 두가지 방법으로 결과값이 결정된다는 말이다.

1) 조합할 수 있는 최대 종류의 수 >= N/2 종류의수가 N/2보다 크거나 같으면 결과값은 N/2가 된다.

2) 조합할 수 있는 최대 종류의 수 < N/2 종류의 수가 N/2보다 작으면 결과값은 종류의 수가 된다.

필자는 아래와 같은 순서로 구현하고자 했다. ① 최대 갯수(N/2)를 구한다. ② 종류를 담을 배열(comp)을 생성한다.(중복된 종류를 제외하고 종류별로 1개씩만을 가진다.) ③ 위 ②에서 생성한 배열에 동일한 종류가 있는지 확인하기 위한 변수를 생성한다. ④ 주어진 배열에서 하나씩 꺼내어 위 ②에서 생성한 배열에 있는지 확인한다. ⑤ 생성한 배열에 종류가 있다면 ③의 변수를 true로 바꾼다. ⑥ 생성한 배열에 종류가 없다면 배열에 종류를 추가한다. ⑦ 생성한 배열의 길이를 구한다. ⑧ 결과값 결정을 위해 위에서 말한 두가지방법을 이용하여 배열의 길이(종류의수)와 최대 갯수(N/2)를 비교한다.

이를 코드로 표현하면 아래와 같다.

3. 풀이

import java.util.*;

class Solution {
    public int solution(int[] nums) {
        int answer = 0;
        // 동일한 종류가 있는지 확인하기위한 check
        boolean check = false;

        // 최대 선택 갯수
        int max = nums.length/2;
        // 종류를 담을 ArrayList
        ArrayList<Integer> comp = new ArrayList<Integer>();


        // 주어진 배열값 하나씩 확인
        for(int i = 0; i < nums.length; i++){
            // comp 배열과 비교
            for(int j = 0; j < comp.size(); j++){
                if(comp.get(j) == nums[i]){
                 check = true;
                 }
            }

            //comp배열에 없으면 comp배열에 하나씩 추가
            if(check == false){
               comp.add(nums[i]);
            }

            check = false;
        }

        if(comp.size() >= max){
           for(int c = 0; c < comp.size(); c++){
            }
            answer = max;
        }else{
            answer = comp.size();
        }

        return answer;
    }
}

4.마치며...

당연한 말이지만 문제이해가 정말 중요하다. 그 다음 어떤 방식으로 풀지 생각하고, 구현할때는 import java.util.*;를 일단 적고 시작하는 습관을 들이자!

]]> <![CDATA[K번째수]]> https://velog.io/@somin_0/1.-K%EB%B2%88%EC%A7%B8%EC%88%98 https://velog.io/@somin_0/1.-K%EB%B2%88%EC%A7%B8%EC%88%98 Wed, 07 Jul 2021 06:46:17 GMT 코딩테스트 준비를 위해 '프로그래머스'를 활용해보기로 했다.

이번 글은 레벨 1 정렬인 K번째수에 대한 풀이 방법을 적어보고자 한다.

1. 문제

문제는 아래와 같다. 출처

배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요.

사실 나는 commands 배열의 의미가 뭔지 몰랐다. 코딩테스트는 문제를 잘 이해해야 한다는것을 깨닫게 된 경험이였다.

commands배열은 2차원 배열로 각 원소들의 의미는 각각의 테스트케이스이고, 하나의 원소는 array배열에서 추출할 시작위치, 끝위치, 정렬 후 획득값의 위치를 의미한다.

예시를 읽어보면 더 이해가 쉬울거라 생각한다.예시

2. 풀이

이러한 문제이해를 기반으로 답으로 하는 answer 배열을 구해보자!

  1. 일단, solution 클래스의 solution 함수는 2개의 매개변수를 가지고 있다. 기본 배열array와 원하는 값을 의미하는 commands배열이 이것이다.

commands배열을 통해 결과 answer배열의 크기를 결정지을 수 있다. 요구한만큼 output이 나올것이기 때문이다.

다음은 for문을 통해 임시배열 tempArr을 만들고 그 배열을 정렬한다. 마지막으로 원하는 위치의 값을 결과 answer배열에 삽입한다.

위의 글을 코드로 작성하면 아래와 같다.

import java.util.*;

class Solution {
    public int[] solution(int[] array, int[][] commands) {
        int[] answer = new int[commands.length];

        int num = commands.length;
        for(int i = 0; i < num; i++){
            int[] tempArr = Arrays.copyOfRange(array, commands[i][0] -1, commands[i][1]);
            Arrays.sort(tempArr);
            answer[i] = tempArr[commands[i][2] -1];
        }

        return answer;
    }
}

3. 깨달은 점

알고리즘 문제를 처음 풀어본 느낌은 문제이해를 잘 해야한다는 것이다. 그리고 오타가 나기 쉽기 때문에 나 스스로를 믿지 말아야 한다는 것! 마지막으로 import와 라이브러리 클래스들을 알고 있으면 훨씬 쉬워진다는 것이다.

정리하자면,

  1. 문제이해를 잘 하자!
  2. 오타는 언제어디서나 발생!
  3. 기본지식은 많을 수록 좋다!



이상으로 알고리즘 첫 포스팅을 마친다.

]]> <![CDATA[내일배움카드💰]]> https://velog.io/@somin_0/%EB%82%B4%EC%9D%BC%EB%B0%B0%EC%9B%80%EC%B9%B4%EB%93%9C https://velog.io/@somin_0/%EB%82%B4%EC%9D%BC%EB%B0%B0%EC%9B%80%EC%B9%B4%EB%93%9C Wed, 09 Jun 2021 08:02:07 GMT 오늘은 직장인도 취준생도 저렴하게 배울 기회를 주는 내일배움카드에 대해 소개하려고 한다.

주변 사회초년생들에게 물어보니 대부분은 사용하고 있지 않았다. 지인이 말해준 적이 있어서 어렴풋이 존재를 알고 있었지만 스쳐지나가는 정보중의 하나였다. 도대체 이게 뭐길래 '배움카드'라는 걸까?

내일배움카드가 무엇인지부터 알아보자!

1. 내일배움카드란?

내일배움카드는 홈페이지에 들어가면 아래와 같은 내용을 볼 수 있다.내일배움카드란?말 그대로 배움을 희망하는 취준생, 직장인들에게 일정한 금액을 지원해 준다는 것이다! 배우고 싶었던 내용을 손쉽게 배울 수 있다니!! 금액이 부담스러웠던 사람들은 무조건 이득이다!

2. 카드발급방법

내일배움카드가 무엇인지 알았다면, 내일배움카드를 신청해야한다. 신청 방법은 요기(감사합니다 __ )에 자세히 나와있다!

요약하자면,

  1. 홈페이지에서 로그인
  2. 교육동영상 시청
  3. 맘에 드는 교육 담기(이때 담은 교육을 반드시 수강해야 하는 것은 아니다!)
  4. 카드 신청하기
  5. 카드 수령!

3. 카드사용법

카드를 만들었다면 다음은 사용하기! 내일배움카드는 어떻게 사용하는 걸까?

일단 카드를 발급받으면 내일배움카드 홈페이지에서 로그인 한 후, 사용이 가능하다.

이때, 자기부담금이 발생하는데 정부에서 지원하는 여러 패키지를 이용중이라면 자기부담금없이 수강신청이 가능하다. (자기부담금이 발생하더라도 원래 가격보단 훨씬 저렴해서 그리 나쁜 조건은 아닌것 같다.) 오프라인 훈련인 경우 출석률 등을 근거로 훈련지원금도 제공된다고 한다.

주의해야할 점은 훈련시간 140시간 이상인 경우 별도의 수강신청 절차에 따라 상담등을 해야한다고 하니, 홈페이지를 찾아보는걸 추천한다.

그럼 이만,,,😉

]]> <![CDATA[2021년 정처기 실기 1회 합격 후기😆]]> https://velog.io/@somin_0/2021%EB%85%84-%EC%A0%95%EC%B2%98%EA%B8%B0-%EC%8B%A4%EA%B8%B0-1%ED%9A%8C-%ED%95%A9%EA%B2%A9-%ED%9B%84%EA%B8%B0 https://velog.io/@somin_0/2021%EB%85%84-%EC%A0%95%EC%B2%98%EA%B8%B0-%EC%8B%A4%EA%B8%B0-1%ED%9A%8C-%ED%95%A9%EA%B2%A9-%ED%9B%84%EA%B8%B0 Thu, 03 Jun 2021 05:48:16 GMT 안녕하세요! 오늘은 정처기(실기) 합격 후기를 들고왔습니다!!

필기부터 실기 합격까지 무려 한~참이 걸렸는데요ㅜㅜ 시험응시조차 시기가 맞지 않아 내내 기다림의 연속이였네요😅

저의 2021년 정보처리기사 실기 1회 준비 방법을 알려드릴게요!

1. 책을보자!

주변에 합격한 분들이 있어서 물어보니, 필기와 실기는 공부방법이 많이 달랐다고 하더라구요

하지만, 저는 그렇게 큰 차이는 없었던것 같습니다. (아마 필기를 기출문제로 공부했어서 그랬던것같아요😀)

실기도 필기와 내용은 비슷합니다! 다만, 프로그래밍 부분이 들어있고 개념등을 확실히 알고 있어야 해요! (2021년 1회 실기에는 약술형이 안나왔지만, 기출에는 있었기 때문이죠!!)

필기때 보았던 내용들이지만, 책을 처음부터 읽었습니다.(수제비 실기책을 읽었어요!) 내용이 좀더 상세하게 서술되거나, 기본적인 프로그래밍 문법들을 익힐 수 있었어요! 필기책에서 놓친 부분들을 이를 통해 채울 수 있었습니다!

2. 기출풀기!

어느정도 필기때 까먹었던 내용들이 돌아왔다면 기출을 풀어야 합니다! 이건 필기때도 마찬가지였지만, 참 중요한것같아요

수제비 책에 수록된 2020년 기출을 모두 풀고 오답을 했답니다! 그 외에도 수제비 카페에 들어가면 족보와 다른 문제들도 풀 수 있어요! (저는 기출의 약술형이 어렵게 느껴지더라구요,, 부분점수라도 받자라는 마인드로 공부했던 기억이 나네요,,,😓)

프로그래밍 문제는 C, C++, JAVA, Python 중에서 출제되는것 같더라구요! 책에는 4가지 언어의 문법비교나 활용법들이 적혀 있어서 이해하는데 한결 수월했습니다! 실제 문제 난이도는 그렇게 어렵지 않은것 같아요!

3. 자투리 시간엔 데일리 문제!

저는 직장인이다 보니, 출퇴근 시간에 폰으로 데일리 문제를 풀었습니다. 매일 문제들이 올라와서 배웠던 내용 점검도 되고, 새로운 내용도 알게되어 좋았던것 같아요!

실제로 시험보러 가는날 아침에 데일리 문제 몇개를 풀었는데!! 그 문제가 시험문제로 출제되었더라구요!!!👍 꼭 풀어보세요!!

4. 마무리...

오랜 기간 준비하고 긴 기다림 끝에 받은 정처기 자격증!

저의 경우에 공부했던 시간만 보자면, 필기는 1달? 실기는 1달 조금 안되게 걸린것 같습니다!

확실히 필기, 실기 같은 내용이다 보니 필기때 열심히 공부한 보람이 있는 시험이였어요!

그럼 이만 마치겠습니다! 감사합니다😉

]]> <![CDATA[equals, ==, === 차이점]]> https://velog.io/@somin_0/equals-%EC%B0%A8%EC%9D%B4%EC%A0%90 https://velog.io/@somin_0/equals-%EC%B0%A8%EC%9D%B4%EC%A0%90 Fri, 21 May 2021 07:03:33 GMT 자바스크립트를 공부하다 ==과 ===의 차이를 찾아보게 되었다. 작성하면서 equals와 ==를 헷갈려했던게 생각나서 추가로 작성해보기로 했다.

참고한 글은 요기! 랑 요기!!감사합니다! (__)

1. === 는 뭐지?

===는 일치연산자로 value와 data type을 같이 비교할때 사용된다. (==는 동등연산자이다.)

예를 들어,==의 경우 아래와 같지만 

0 == ''        //true
0 == '0'    //true
1 == true    //true
false == '0'    //true
null == undefined    //true
false == null    //false
false == undefined    //false

===의 경우, 다르다는것을 알 수 있다.

0 === ''    // false
0 === false    // false
1 === true    // false
NaN === NaN    // false
null === undefined    // false

이렇다보니, 자바스크립트에서는 ==보다 ===를 권장한다는 글을 볼 수 있다.


2. equals는 뭐였지?

equals는 내용자체를 비교하는 메소드이다. 반면, ==는 주소값을 비교한다. 따라서 주소가 다르더라도 단순히 값이 같다면 equals를 사용했을 때, True가 된다.

아래의 예제는 위의 블로그에서 가져와 봤다.

String a = "aaa";

String b = a;

String c = new String ("aaa");

문제

System.out.println( a.equals(b));

System.out.println( a==b);

System.out.println( a==c);

System.out.println( a.equals(c));



결과

첫번째는 a와 b가 가지고 있는 내용을 비교하였으므로 true 두번째는 a와 b가 가지고 있는 주소값을 비교하고 있으므로 true 세번째는 a와 c가 가지고 있는 주소값을 비교하고 있으므로 false 네번째는 a와 c가 가지고 있는 내용을 비교하였으므로 true

위의 예제를 잘 풀었다면, 이해는 잘 됐다고 볼 수 있겠다.

3. 마치며...

==에 대해서는 따로 언급하지 않았지만, 설명과 예제로 이해했을것이다. 헷갈리는게 있다면 바로 찾아보는게 나중에 좋을것같다..(지극히 내생각)

]]> <![CDATA[Scope]]> https://velog.io/@somin_0/Scope https://velog.io/@somin_0/Scope Fri, 14 May 2021 08:05:37 GMT 교육을 듣던 중, 숙제를 주셔서 이렇게 찾아보게 되었다.

아래는 참고한 블로그 (__) 감사합니담~ 스코프 설명 1, 스코프 설명 2, 스코프 설명 3, 스코프 설명 4

1. Scope란?

Scope는 '범위'이다. 전역변수와 지역변수를 떠올리면 이해가 쉬울 것이다.

Scope는 가장 큰 범위인 전역 스코프(Global Scope)와 그 하위 범위인 지역 스코프(Local Scope)를 가진다. 이름처럼 전역스코프에 선언된 변수를 전역변수, 지역스코프에 선언된 변수를 지역변수라고 한다.

위 참고 블로그의 글을 인용하자면, 아래와 같다.

Scope는 코드에 접근 할 수 있는 범위


2. 방식

범위를 정하는 방식에도 종류가 있다.

1) 함수 스코프(Function Scope)

함수 안에서 선언된 변수는 함수 스코프를 가진다. 자바스크립트가 기본적으로 사용하는 스코프이다.

예시는 위의 블로그에 있는것을 가져왔다. 전역변수에 있는 name이 출력되는것을 볼 수 있다.

2) 블록 스코프 (Block scope)

대부분의 프로그래밍에서 따르던 스코프이다. 자바스크립트에서는 let과 const가 등장하면서 도입된 개념으로 모든 중괄호 {} 안에 선언된 변수는 지역 변수로 취급한다.

예시는 위의 블로그에 있는것을 가져왔다. (블로그 인용문) "블록 스코프는 각각 다른 중괄호 {} 안에서 변수, 함수를 정의하면 중괄호 안에서만 이용 가능하고 각 블록이 독립적으로 실행됩니다. (ES6의 let과 const를 키워드로 선언했을 때만 가능합니다. var일 경우는 적용이 되지 않습니다. var일 경우 전역 스코프의 console.log의 에러가 발생하지 않고, '준범'이 출력됩니다.) 또한 함수형 스코프(var 키워드를 사용했던)와는 달리 블록스코프의 변수를 전역 변수로 취급하지 않습니다."


99. 여담

10분정도 교육으로 얼핏들은 단어들을 조사한건데 생각보다 다양해서 살짝 당황했다. 포스팅한 내용 말고도 다른 키워드들이 있는데 그건 차후에 올려보도록 하겠다.

]]> <![CDATA[Git에 올린 프로젝트 가져오기]]> https://velog.io/@somin_0/Git%EC%97%90-%EC%98%AC%EB%A6%B0-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0 https://velog.io/@somin_0/Git%EC%97%90-%EC%98%AC%EB%A6%B0-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0 Thu, 13 May 2021 04:55:20 GMT Git에 올라간 프로젝트를 가져와 보자!

참고한 블로그는 요기 -> 감사합니당~!

처음에 Git을 접하고 헷갈렸던 부분이 로컬과 원격으로 나누어지는 부분이였다. 지금 생각해보면 workspace에 저장하는걸 로컬에 올렸다고 생각해서 그런것같다.

다시 정리해보자면, workspace, local, remote 이렇게 3부분으로 나눠서 이해해야 한다.

위 개념을 기억하며, Github에 올린 프로젝트를 가져와보자!

  1. 작업이 이루어지는 workspace에서 이클립스를 실행시킨다.
  2. 로컬저장소에 원격 저장소의 코드들을 가져온다.(Clone a Git Repository)
  3. import를 통해 로컬 저장소에 있는 프로젝트를 workspace에 가져온다.

이해하면 참 쉽다! 그럼 이만~!

]]> <![CDATA[Outlook html]]> https://velog.io/@somin_0/Outlook-html https://velog.io/@somin_0/Outlook-html Wed, 12 May 2021 07:22:25 GMT 업무 중 아웃룩 메일수신이 테스트를 하고 있었는데, 이미지 사이즈가 지정되지 않아 모지(?)했다. 내가 원하는 이미지배열은 아웃룩 웹 이미지 배열!!

원인을 찾아보았는데, 왜 그런지 이유만 알게되고 해결책은 아직 찾지 못하였다.

원인을 설명해준 고마운 블로그 해결책을 알고있다면 댓글을 달아주새오...ㅜㅜ

블로그가 알려준 원인은 "아웃룩에서는 이미지를 다룰때 픽셀이 아닌 Cm 단위"를 사용한다는 것이였다.


아래는 테스트했던 코드내용
모든 이미지를 동일하게 적용하였는데 왜 적용이 안돼는지 모르겠다... 
<img border="0" src="[이미지경로].png" style="width: 57px; height: 57px">

  1. 수신메일 내역 - 아웃룩 앱

  2. 수신메일 내역 - 아웃룩 웹

두 이미지는 동일한 메일을 앱과 웹으로 본 화면이다. 해결이 된다면 해결책을 들고 다시 글을 써봐야겠다.

]]> <![CDATA[정처기 필기 후기_21년 1회]]> https://velog.io/@somin_0/%EC%A0%95%EC%B2%98%EA%B8%B0-%ED%95%84%EA%B8%B0-%ED%9B%84%EA%B8%B021%EB%85%84-1%ED%9A%8C https://velog.io/@somin_0/%EC%A0%95%EC%B2%98%EA%B8%B0-%ED%95%84%EA%B8%B0-%ED%9B%84%EA%B8%B021%EB%85%84-1%ED%9A%8C Sat, 08 May 2021 15:42:07 GMT 오늘은 3월 7일에 본 2021년 1회 정보처리기사 필기 후기를 작성하려고 한다.

1. 정보처리기사 란?

정보처리기사 자격증은 IT분야에서 전반적으로 쓰이는 기본개념들을 훑을 수 있다고 보면 될것같다. 물론 기술도 빠르게 변화되고 범위도 광범위해서 실제로 도움이 되나 싶겠지만, 그만큼 기본이 되고 보편적으로 다루는 것들을 가볍게 접해볼 수 있는 기회가 될 수 있겠다.

국가 기사 자격증이다 보니, 이곳저곳에서 가산점이나 우대를 해주는것을 종종 볼 수 있는 장점도 있다.

아래는 Q-net에서 제공하는 정보처리기사 기본정보이다.

기본정보 - 개요 컴퓨터를 효과적으로 활용하기 위해서 하드웨어뿐만 아니라 정교한 소프트웨어가 필요하다. 이에 따라 우수한 프로그램을 개발하여 업무의 효율성을 높이고, 궁극적으로 국가발전에 이바지하기 위해서 컴퓨터에 관한 전문적인 지식과 기술을 갖춘 사람을 양성할 목적으로 제정됨.

Q-net 홈페이지

2. 2020년 개정

과거 정보처리기사는 대학의 졸업조건이 되거나 시험전 2일만 공부하면 충분히 취득할 수 있을 정도의 자격증이였다고 한다.(전해들은 이야기다;;)

하지만,

2020년 정보처리기사가 개편되었는데 응시과목과 유형들이 국가기술자격법 시행규칙 개정(2018. 6. 22.)에 따라 NCS(국가직무능력표준)에 맞게 출제되었다고 한다. 이미지 출처 - 큐넷

사실, 나는 별로 개의치않고 공부해서 따로 신경쓴 부분은 없는것같다. 오히려 NCS라고해서 수험자에게 더 도움이 되는게 아닌가라고 생각했다.

합격 기준은 과목별 40점이상, 평균 60점이상이다! 두루두루 공부가 필요하다는게 이 때문이다..

3. 공부법

정보처리기사를 구글이나 네이버에 검색한다면 쉽게 발견할 수 있는 키워드들이 있다. 바로, "수제비" "시나공"!! 나 역시 주변 수험자와 합격자들에게 물어보았지만 다들 교재가 똑같았다는 이야기다,,,

고민없이 수제비책을 주문했다. 작년 정처기 필기책을 본적(그냥 두께만 봤다...)이 있는탓에 아무 생각 없었는데 배송온 책을 보고 쪼끔 놀랬다.. 생각보다 두껍잖아...?!

수제비 책에는 공부법이 적혀있는데 그걸 지키려고 노력했던것 같다. (결과적으로 2/3정도 지킨것같다..;;)

처음 열흘정도(?) 빠르게 읽고, 보름정도 좀더 꼼꼼히 2회독을 했다.

출근길에 CBT 기출문제를 몇개 풀고,

마지막 3일 전쯤엔 기출을 풀었는데 이게 제일 잘한 행동인것같다.

시험에 기출이 상당부분 나왔기 때문이다. 사실, 개정 전 기출을 풀다 문제가 너무 어렵고 생소해서 멘탈이 살짝 흔들했는데 버릴건 버리고 아는걸 가져가는게 맞았던것같다.

후에 이야기지만, 실기 1번문제가 이때 공부하던거에서 나왔다.... 주륵...

4. 끝으로...

직장인으로 출퇴근하면서 공부하는게 쉬운일은 아니였던것같다. 하지만 보람도 있고, 아침에 일찍 일어나서 습관을 들이니까 하루를 더 알차게 보낼 수 있었다.

]]> <![CDATA[자바(JAVA) JDK 설치 및 환경 변수 설정]]> https://velog.io/@somin_0/%EC%9E%90%EB%B0%94JAVA-JDK-%EC%84%A4%EC%B9%98-%EB%B0%8F-%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98-%EC%84%A4%EC%A0%95 https://velog.io/@somin_0/%EC%9E%90%EB%B0%94JAVA-JDK-%EC%84%A4%EC%B9%98-%EB%B0%8F-%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98-%EC%84%A4%EC%A0%95 Thu, 06 May 2021 05:34:36 GMT 환경설정은 처음 시작할 때만 해서 그런가 너무 새롭다... 자주 하지 않으면 까먹는건 당연한건가,,ㅎㅎ

짧게 정리해서 올리기로했다. 참고한 사이트는 https://prolite.tistory.com/975 요기~ 감사합니다 (__)

1. JDK 설치

오르클 홈페이지로 접속해서 다운로드

2. 환경변수 설정

제어판 > 시스템 및 보안 >시스템 > 고급시스템설정 위의 경로에서 환경변수를 만들어보자

1) JAVA_HOME 변수값에는 JDK경로를 적어준다.

2) Path 시스템변수의 Path를 클릭후 편집창을 띄워 %JAVA_HOME%bin 을 새로만들어준다.

3) CLASSPATH 변수값에 %JAVA_HOME%\lib 를 적어준다.

3. 확인

제대로 환경변수가 지정됐는지 확인절차를 가진다.

1) cmd실행 2) javac -version 입력 3) javac 입력 4) java 입력

이상이 없다면 JDK설치 및 환경변수 설정이 완료된다.

]]> <![CDATA[학생용 IntelliJ 설치]]> https://velog.io/@somin_0/%ED%95%99%EC%83%9D%EC%9A%A9-IntelliJ-%EC%84%A4%EC%B9%98 https://velog.io/@somin_0/%ED%95%99%EC%83%9D%EC%9A%A9-IntelliJ-%EC%84%A4%EC%B9%98 Mon, 03 May 2021 07:44:29 GMT 1. 설치이유

업무를 변경할 기회가 생겨 web개발을 하게 되었다. 프로젝트에 투입되기 전 IntelliJ를 설치하기로 하였다.

기존에 사용하던 Eclipse를 뒤로 한채 IntelliJ는 얼마나 좋은지 보기로 했다. 개인적으로 IntelliJ를 접해볼겸 학교계정으로 라이센스를 발급받아 보았다.

뭐부터 해야하는지 몰라 아래 블로그를 참고하였다. https://goddaehee.tistory.com/215 감사합니다 (__)

2. 설치방법

1) 다운로드 링크
www.jetbrains.com/community/education/#students
Apply now를 클릭!

2) 정보입력
요구하는 정보를 입력

3) 학교메일 인증
인증링크가 메일로 전송

4) 로그인
기존 로그인 정보가 없다면 회원가입

5) 다운로드
IntelliJ 다운로드

6) 인증
실행시킨 후, 라이센스키를 입력

간단하고도 짧게 첫 포스팅을 마치려고 한다. 앞으로는 자주 쓸 수 있기를...

]]> <![CDATA[Init]]> https://velog.io/@somin_0/Init https://velog.io/@somin_0/Init Tue, 23 Mar 2021 05:38:06 GMT 첫 걸음

소소하게 하나 두울 해보려고 합니다.. 지금 하는 것들이 나에게 도움이 되기를 바라며..

추천해준 junsugi님 감사합니다 :)

]]>