1주차가 지나가버렸다..! 두둥짝

인턴을 하던 중 디자이너님께서 이렇게 말씀하셨다.

8px 그리드도 한번 배경에 깔아놓고 작업해보는 연습도 해보시길 추천합니당:)

왜 맞춰야 한다는 걸까?! 라는 호기심에 일단 기존에 해뒀던 피그마 작업들을 8의 배수로 조금씩 찌끄려보기 시작했다.

그러나 사람이 모름지기 '왜?'라는 궁금증이 해소가 안 되면 답답하지 않은가?! (말투 왜이런가?!) 그래서 구글링 해보았다. 아래부터는 내가 공부한 내용 요약본.

요약: 디자인 에셋의 사이즈, 간격 및 모든 수치를 8pt 단위로 맞추면 픽셀이 깨지지 않고, 개발 친화적인 디자인을 할 수 있다-!

px이 아니라 pt(dp)인 이유? : 화소밀도에 따라 달라지는 px에 비해, pt(dp)는 같은 비율로 보여지는 독립적인 수치기 때문이다.

적용 가능한 디자인 요소

• Font Sizes
• Line heights
• Padding
• Margins
• Radius
• Fixed Width
• Fixed heights(잘 사용되지 않음.)

The Box Model

• 구성 요소: border, margin, padding, dimensions of the element itself

What are points(pt)?

화면 해상도에 따라 달라지는 공간을 측정하는 값이다. 1x resolution(@1x) 이라면 1pt = 1px이고, @2x라면 1pt=4px이 된다.

기본 원리, 방법

8의 배수를 사용해 블록 및 인라인 요소의 치수, 패딩 및 여백을 정의한다.

• 하드 그리드 : 8의 배수로 정의된 그리드에 요소를 배치. 이미 4 포인트 그리드로 디자인된 Material Design은 자연스럽게 이 방법을 따른다.
• 소프트 그리드 : 개별 요소 사이의 8의 배수를 측정. 많은 시스템 UI 요소가 짝수 그리드로 정해지지 않은 iOS에 유리할 수 있다.

왜 사용해야 하는가?

그리드가 없으면 앱 전체의 디자인 퀄리티가 전반적으로 저하되어 보인다. 또한 서비스 일관성 부여와 유지보수가 어렵고, 디자인과 개발팀이 같은 시각을 공유할 수 없다. 크기나 여백의 요소에 8과 같은 짝수를 사용하면 다양한 디바이스를 쉽고 일관되게 조정할 수 있다. 1.5배 해상도의 디바이스들은 홀수를 깨끗이 렌더링하는 데 어려움을 겪는다.

• For 디자이너 : 요소들끼리 퀄리티가 저해되지 않고, 디자인 일관성을 유지하면서 의사 결정 과정을 최소화할 수 있다.
• For 팀 : 디자이너와 개발자 간의 쉬운 의사소통 시스템 (개발자가 매번 측정하지 않고도 8pt 단위로 쉽게 생각할 수 있다.)
• For 사용자 : 일관된 느낌을 주어 브랜드 신뢰성을 높인다. 어떤 디바이스던 흐릿한, 깨지는 오프셋이 없다.

[🍯TIP] 피그마에서 8의 배수로 간격 조정하기

참고: figma에서 8의 배수로 간격 조정하는 기능

[NEW!] 8px 그리드의 시대가 끝나고, 4px 그리드의 시대가 열릴까?

참고: 8px 그리드의 시대가 끝나고, 4px 그리드의 시대가 열릴까?

출처, 참고 (감사합니다 꾸벅) 8-point 그리드로 디자인하기 The good line-height The 8-Point Grid 8-Point 그리드 시스템 8 Point Grid, 더 적은 결정 = 더 적은 시간 figma에서 8의 배수로 간격 조정하는 기능

어느 날 생각한 건데 나는 '네이티브 앱'과 같은 기초적인 용어에 대해 정확한 답을 정의하지 못하고 있었다. 그걸 반성하는 차원에서 글로 정리하는 나의 궁금증들- (특히 플러터와 관련된.)

계속 추가하는 중.

목차 🚙

1. 네이티브 앱? 모바일웹앱? 하이브리드앱?

2. API?

3. [플러터] dispose(), 생명주기?

4. [플러터] Stateless/ful Widget?

5. [플러터] final? const?

1. 네이티브 앱? 모바일웹앱? 하이브리드앱?

출처: https://m.blog.naver.com/acornedu/221012420292

1)네이티브 앱

우리가 흔히 말하는 ' 어플리케이션 '이다. 모바일 기기에 최적화 된 언어로 개발된 앱으로, 안드로이드 SDK를 이용해 Java로 만드는 앱과 iOS 기반 SDK를 이용해 Swift로 만드는 대부분의 앱이 여기에 속한다.

2)모바일 웹앱

모바일웹과 네이티브앱을 결합한 형태로, 모바일웹의 특징을 가지면서 네이티브앱의 장점을 갖고 있다. 모바일웹 보다는 조금 더 모바일에 최적화 된 앱을 의미한다. 웹앱도 모바일웹처럼 모바일 브라우저에서 실행되지만, 풀 브라우저 방식이 아닌 단일 페이지 방식으로 화면을 진화해 속도가 빠르다.

모바일웹이란? 모바일에서 PC용 사이트의 데스크탑 브라우저에서 실행되는 기능(글자폰트와 이미지, 터치 아이콘, 플래시 등)을 모바일에 맞추어 표현한 사이트를 의미합니다. 쉽게 말해, *PC용 홈페이지를 모바일 스크린의 크기에 맞춰 줄여 놓은 것**이라고 생각하시면 됩니다.

3)하이브리드 앱

하이브리드 앱은 '네이티브앱 + 웹앱' 이라고 생각하면 쉽다. 일반적으론 네이티브웹에 웹view를 띄워 웹앱을 실행시키는 것이 보편적이며 양쪽의 API 를 모두 사용할 수 있는것이 큰 장점이다.

장단점 정리

2. API?

출처 1, 출처 2

그림이 좀 요상하긴 한데 정확하다

API는 프로그램들의 상호작용을 돕는 매개체로 볼 수 있다.

API는 어떤 서버의 특정한 부분에 접속해서 그 안에 있는 데이터와 서비스를 이용할 수 있게 해주는 소프트웨어 도구입니다. API를 이용하면 두 개의 소프트웨어가 서로 통신을 주고받을 수 있으며, 이는 우리가 모바일을 이용해서 하는 모든 행동들의 기반을 이루고 있다고 할 수 있습니다.

1)API의 역할

• 서버와 DB에 대한 출입구 : 모든 사람이 DB에 접근하면 안 된다. 따라서 우리가 가진 서버와 DB간 출입구 역할을 하여 허용된 사람에게만 접근성을 부여해 준다.

• 애플리케이션과 기기 간 원활한 통신 : 데이터를 원활히 주고받을 수 있도록 돕는다.

• 모든 접속을 표준화한다. : 기계/운영체제와 상관없이 누구나 동일한 액세스를 얻을 수 있다. 쉽게 말해 범용 플러그처럼 작동한다.

2)API의 유형

• private API : 내부 API로, 회사 개발자가 내부적으로 발행하여 제 3자에게 노출되지 않는다. 자체 제품과 서비스를 개선하기 위함.

• public API : 개방형 API로, 모두에게 공개된다.

• partner API : 기업이 데이터 공유에 동의하는 특정인만 사용 가능하다. 비즈니스 관계에서 사용되고, 종종 파트너 회사 간에 소프트웨어 통합을 위해 사용된다.

3)API의 장점

• private API를 이용할 경우 개발자들이 애플리케이션 코드를 작성하는 방법을 표준화함으로써 간소화되고 빠른 프로세스 처리가 가능하다.
• SW 통합 시에 개발자들 간 협업이 용이하다.
• Public API와 Partner API를 사용하면, 기업은 타사 데이터를 활용해 브랜드 인지도를 높일 수 있다. 또한 고객 DB를 확장해 전환율도 높일 수 있다.

4)API의 구조

SOAP는 프로토콜, REST는 아키텍처 스타일이다. SOAP는 서비스 인터페이스를 통해서, REST는 URI를 이용해 서버에 접근한다.

• REST API : Representational State Transfer. 네트워크를 통해서 컴퓨터들끼리 통신할 수 있게 해주는 아키텍처 스타일이다. 인터넷 식별자(URI)와 HTTP 프로토콜을 기반으로 하여 단순하다. 데이터 포맷은 브라우저 간 호환성이 좋은 JSON을 사용한다. 클라이언트와 서버 사이에서 통신할 수 있게 하고, 아키텍처를 만들 수 있게 한다. 즉, REST방식의 API라면, 클라이언트-서버 모델로 구축되었다는 것을 의미한다. 웹에 최적화되어 있고, 데이터 포맷이 JSON이기 때문에 성능과 확장성이 뛰어나고, 브라우저 간 호환성이 좋다.

• SOAP API : Simple Objecy Access Protocol. 그 자체로 프로토콜이고, REST보다 더 많은 표준이 정해져 있어 조금 더 복잡하다. 보안, 트랜잭션 등을 준수해야 하는 조직에게는 적합한 방식이 될 수 있다. 웹 서비스 시나리오에 적용하기엔 좋지 않고, 기업용 애플리케이션 작업에 좀 더 이상적이다.

• 보안 수준이 엄격하다.* SSL을 지원, WS-Security라는 자체 표준 보안 기능도 가지고 있다. 따라서 은행용 앱이나 메시징 앱 등에 선호된다. 성공/반복 실행 로직이 규정되어 있어, SOAP API를 통해 통신하면 처음부터 끝까지 신뢰성을 제공한다. ACID를 준수하기 때문에 데이터의 변형을 줄여주고, DB와의 상호작용에 대해 사전에 정확하게 정의하기 때문에 데이터의 무결성을 지켜준다. 금융 정보 등의 민감한 데이터를 주고받을 때 일반적으로 많이 사용된다.

SOAP는 서버와 매우 긴밀하게 연결되기 때문에 그 통신 방식이 매우 엄격하며, 그래서 수정이나 업데이트를 하는 것이 보다 더 어렵다. REST 방식의 API에서는 클라이언트에서 해당 API가 필요하지 않지만, SOAP 방식의 API에서는 상호작용을 시작할 때조차도 클라이언트에서 API에 관한 모든 정보들을 필요로 한다.

5) SOAP vs REST

웹서비스에서는 REST API를 택하는 경우가 많고, 기업용 애플리케이션인 경우에는 많은 리소스, 엄격한 보안, 여러 요구 사항의 만족을 위해 SOAP를 택하는 경우가 많다!

3. [플러터] dispose(), 생명주기?

출처: 플러터 StatefulWidget 생명주기 (감사하게도 정말 자세히 설명되어 있다.)

StatelessWiget은 생명주기가 없고, State 객체를 생성하는 StatefulWidget만 생명주기를 가진다.

// 예) StatefulWidget의 initState에서 스트림을 사용하는 경우, 
// streamController에 할당된 메모리를 닫기 위해.
@override
void dispose() {
    cameraController?.dispose();
    bannerAd?.dispose();
    timer.cancel();
    suepr.dispose();
}

컨트롤러 객체가 제거될 때 변수에 할당된 메모리를 해제하기 위해 사용하는 메소드다. 트리에서 State 객체가 영구적으로 제거될 때 호출된다. 영구적으로 제거되었기 때문에 build()가 다시 호출되지 않는다. 이미 State 객체가 폐기되었기 때문에 dispose()에서 setState()를 호출하면 안 된다.

4. [플러터] Stateless/ful Widget?

출처: 플러터 StatelessWidget 플러터는 모든 UI를 위젯으로 처리한다. 플러터는 크게 두 가지 위젯을 가진다.

1) StatelessWidget (이하 stless)

상태(State)를 가지지 않는 위젯이다. stless위젯은 build() 함수를 통해 만들어진다. 상태 변화를 감지하지 않기 때문에 화면 구성 시 최초 한 번만 build()를 호출한 후 다시 호출하지 않는다.

따라서 '어떤 버튼을 누를 시 텍스트가 변경되는 동작' 구현에는 적합하지 않다. 텍스트의 상태 변화를 알지 못하기 때문이다. Text위젯이 갱신되려면 build()를 다시 해야 하는데, 그러지 못해서 화면 상에는 변화가 없다.

따라서 stless는 상태 변경이 불필요한 화면 구성에 사용하기 적합하다.

2) StatefulWidget (이하 stful)

State 객체를 가진다. 거의 대부분의 stful위젯은 createState()를 통해 State 객체를 만드는 작업만 한다. 이 변경 가능한 특징을 갖고 있는 State 객체가 상태 변경 처리를 할 수 있다.

setState() 함수는 build() 함수를 재호출한다. 따라서 변경된 상태를 위젯에 반영해 화면이 갱신된다.

3) State의 특징

1. 위젯이 빌드 완료된 후 읽을 수 있다. 따라서 build() 호출 전 State 설정이 돼야 한다.
2. 위젯이 유효한 동안에 State는 변경될 수 있다. State는 생성되면 BuildContext에 연결된다.

• BuildContext : 위젯 트리에서 위젯의 위치에 대한 참조. 하나의 BuildContext는 하나의 위젯만 가진다.
• Widget Tree : 위젯은 트리 구조로 구성된다. 모든 네모 박스가 다 위젯이다. 부모 위젯, 자식 위젯 개념도 있다.

4) 플러터의 세 가지 트리

1. 위젯: 요소의 구성(Configuration)을 기술, 처리한다.
2. 요소: 트리의 특정 위치에서 위젯을 인스턴스화 한다.
3. 렌더 객체: 크기, 레이아웃 등을 다루고 렌더링을 처리한다.

• 한 컬러 = 한 BuildContext
• 컬러 속 흰 박스 = 위젯이 배치된 상태(인스턴스화) = 요소

5) 인스턴스화?

BuildContext에 위젯이 배치된다는 것. State가 생성되면 BuildContext에 연결되기 때문에! State 생성 시 요소(Element)가 만들어진다는 말과 같다.

즉, State 생성 > 트리의 특정 위치를 참조하는 BuildContext 존재 > 해당 BuildContext에 연결 > 연결된 각 BuildContext에 위젯 배치(인스턴스화) > 요소(Element) 생성

5. [플러터] final? const?

출처

1. 공통점

한 번 설정한 값을 변경할 수 없다. 다른 값으로 변경하려고 시도하면 컴파일 오류가 발생한다.

2. 차이점

const : 컴파일 타임에서 상수를 정의할 수 있다. 즉, const로 정의한 상수는 런타임에서는 정의되는 값을 설정할 수 없다. 예를 들어, DateTime.now()는 런타임에서 호출될 때마다 결과 값이 다르기 때문에 const로 설정할 수 없다.

final : 런타임에서 결정되는 값도 설정할 수 있다.

final List<String> languages = []; //final: 값 추가 가능
const List<String> companies = []; //const: 값 추가 불가
languages.add('dart');
/* 둘 다 새로운 배열로 변경하는 건 불가능
// compile error
companies.add('Google');
languages = ['Java'];
*/

즉, final로 선언된 변수는 해당 변수에 새로운 값이 설정되는 것은 불가능하지만, 객체나 배열에 값을 추가하는 행위에 대해서는 관여하지 않는다.

3. final 장점

예기치 못한 상황에서 값이 변경되어 발생하는 문제를 해결 가능하다. 멀티 스레딩을 지원하는 경우에는 별도의 예외 처리 없이 간결한 코드를 작성할 수 있다.

4. 그런데 왜 const를 써야 할까?

요약하면, const가 더 불변의 정도가 강하다.

const는 app의 lifecycle에서 절대 변치 않음을 의미하기 때문에 색상, 글자 크기 등이 고정일 때 그 변수의 앞에 const를 붙여주어야 flutter 의 build method가 그 부분을 rebuild 하지 않게 되어 app의 속도가 빨라진다.

final도 고정 상수이긴 하지만, 상황에 따라 변할 수 있는 (주로 constructor에서 설정되는) 변수 앞에 주로 선언해 줘야 한다.

final은 widget이 생성되는 시점마다는 변경될 수 있지만, 한 번 생성된 위젯 내에서의 const 상수는 변경할 수 없다.

StatelessWidget이 그 대표적인 예다. 자체적으로 상태를 가지지 않기 때문에 '다른 속성을 가지는 StatelessWidget'으로 바꾸려면 constructor에 새로운 property 값을 전달하면서 새로운 위젯을 만들어야 한다. 이때 사용되는 것이 const variable이다. StatelessWidget의 모든 property는 const variable이다.

하단 내비게이션 바 https://yoonjaepark.github.io/2020-01-19/flutter-bottom-navigation

아이콘 찾기 https://api.flutter.dev/flutter/material/Icons-class.html

CRUD

1. https://here4you.tistory.com/230
2. https://www.youtube.com/watch?v=t4QJoivDNqg

https://github.com/sbis04/flutterfire-samples/blob/crud-firestore/lib/screens/login_screen.dart

(터미널) flutter create --org com.sudar.snslogin art (art는 프로젝트 이름) > cd art

(Firebase 콘솔 접속) 새 프로젝트 생성 'art2021' 패키지 번들 ID 넣어주기 (사진 참고-Xcode 열고, ID 복사)

GoogleService-Info.plist를 Runner/Runner 폴더에 추가 (사진 참고) *Copy items if needed 체크

GoogleService-Info.plist에서 REVERSED_CLIENT_ID 복사 > Runner/Info 탭에 URL Types에서 +누른 후, URL Schemes 칸에 붙여넣기 firebase 나머지 단계들은 SKIP

[Firebase 사용을 위한 패키지 설치 - pubspec.yaml]

1. 가장 기본이 되는 패키지: firebase_core pub.dev/packages/firebase_core/install
2. 로그인을 위한 패키지: firebase_auth https://pub.dev/packages/firebase_auth/install

[코드]

1. lib/src에 app.dart 파일 생성 (앱 단위의 초기화 코드 작성)
2. lib/src/pages에 home.dart 파일 생성 (로그인 파트 코드)
3. lib/main.dart 코드 수정

[에러] 돌려봤는데, google auth 버전 관련 에러가 났다. 해결방법 - 참고 Podfile에서 platform :ios, '10.0' 즉, 10.0 이상으로 바꿔주고 난 후, flutter clean > flutter pub get > cd ios > pod install 한 후 다시 디버깅 해주니 해결되었다.

[중간점검] 이 창이 뜬다면 잘 연결된 것.

  <!-- header -->
    <header class="navbar-fixed-top" id="header">
        <nav>
            <ul>
                <li><a href="#ch1">1.<br>가나안 성도,<br>그들은 누구인가?</a></li>
                <li><a href="#ch2">2.<br>가나안 성도가<br>증가하고 있다.</a></li>
                <li><a href="#ch3">3.<br>한동대 내<br>가나안 성도의 목소리</a></li>
                <li><a href="#ch4">4.<br>그들은<br>지금-</a></li>
                <li><a href="#ch5">5.<br>그들은<br>틀린 게 아니다.</a></li>
            </ul>
        </nav>
    </header>
    <!-- ./header -->

2. jquery

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

3. JavaScript

<!-- header scroll event -->
    <script>
        // Hide Header on on scroll down
        var didScroll; 
        var lastScrollTop = 0; 
        var delta = 5; 
        var navbarHeight = $('header').outerHeight();

        $(window).scroll(function(event){ 
            didScroll = true; 
        }); 
        setInterval(function() { 
            if (didScroll) { 
                hasScrolled(); 
                didScroll = false; 
            } 
        }, 250);

        function hasScrolled() { 
            var st = $(this).scrollTop(); // Make sure they scroll more than delta 
            if(Math.abs(lastScrollTop - st) <= delta) 
                return;

            // If they scrolled down and are past the navbar, add class .nav-up. 
            // This is necessary so you never see what is "behind" the navbar. 
            if (st > lastScrollTop && st > navbarHeight){ 
                // Scroll Down 
                $('header').removeClass('nav-down').addClass('nav-up'); 
            } else { 
                // Scroll Up 
                if(st + $(window).height() < $(document).height()) { 
                    $('header').removeClass('nav-up').addClass('nav-down'); 
                } 
            } 
            lastScrollTop = st; 
        }

        // for carousel _ add 0613
        $(".carousel").swipe({
            swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
                if (direction == 'left') $(this).carousel('next');
                if (direction == 'right') $(this).carousel('prev');
            },allowPageScroll:"vertical"
        });

    </script>

4. CSS code

/* Header
==================================================*/

header {
    text-align: center;
    -webkit-transition: all .5s;
    transition: all .5s;
    height: 100px; /* 변경: header 높이 */
    position: fixed;
}

/* 구글링 https://webdir.tistory.com/481 */
.nav-up {top: -130px;} /*조금 남아서 20px 크게 잡음*/

nav ul {
    display: inline-block;
    padding-left: 0;
    list-style: none;
    padding: 20px;
    margin-bottom: 0;
    -webkit-transition: all .5s;
    transition: all .5s;
}

nav li {
    display: inline-block;
    margin: 10px;
}

nav li a {
    color: rgba(173, 173, 173, 0.767); /*바꿈*/
    font-weight: bold;
    font: normal normal bold 13px/20px Noto Serif CJK KR;
    letter-spacing: -0.1px;
}

.bg-nav {
    background: #fff;
    border-bottom: 1px solid #f3f3f3
}

.bg-nav ul {
    padding: 10px;
}


a:focus {
    color: rgba(173, 173, 173, 0.767);
    text-decoration: none;
}

a:hover {
    color: #ffffff;
    text-decoration: none;
}

a.active {
    color: #daedff;
}

바로 2021년 8월 13일 정도부터 로그인 방식이 바뀌었기 때문인데, 새롭게 바뀐 것은 깃에서 개인 토큰을 발행받는 것이다.

https://curryyou.tistory.com/344

나는 이 블로그 글을 보고 해결했다. 생각보다 시간이 별로 안 걸린다.

요약 !atom에서!

1. html 기초
2. css 기초
3. 여러 가지 단축어들

여러 단축어들

• 시작 시에: ! tab
• 코드 깔끔하게: ctrl + option + B
• div class/id 한번에 만들기

GSAP: 그래픽 기반 자바스크립트 라이브러리 사용-> head에 src 추가해줌.

* vw: viewport width vh: viewport height 100으로 하면 화면에 꽉 채워짐. -webkit-text-stroke: 4px #fff //무슨뜻..? overflow:hidden; //넘쳐도 바운스가 없음.

<script>
    document.addEventListener("mousemove", e => {
      gsap.to(".text", {
        x: e.clientX, //x좌표
        y: e.clientY, //y좌표
        stagger: -0.05 //초 단위 (이동속도?)
      });
    });
  </script>

• 닷홈 / FileZilla 이용해서 서버에 올리기

2021-03- 이 날짜 표시를 회색 박스에 맞춰 정렬하기 회색 박스 안에 있는 글자 크기 줄이기 '특강 신청' 글자를 날짜와 같은 열에 놓는 방법도 있을듯.

2.SW 최신 공지 아이콘 크기가 글자보다 큰거 고치기

3.드롭다운의 경우엔 정렬이 안맞는다(갑자기 줄이 높아짐). 알아봐야할듯!

4. <설문 만들기> 전체적으로 글씨체 맞추기

5. <회원 관리> 이름+학번 Search 반대편에 조건 검색 배치하면 어떨까?

1.페이징 (list.jsp) 2.User일때 'Add New Post' 안보이게 (list.jsp) 3.Add New Post버튼 위에 배치 4.게시글 검색 5.파일 관련 5-1. 파일이 View.jsp에서 잘 보이게 5-2. 파일 다운로드

여기서부터는 제가 할 부분입니다! 1.CSS 수정 2.url heroku에서도 잘 mapping되게 3.CSS 통일성 있게 (폰트 통일, 글씨크기, 라인맞추기, 색깔 등) 4. 메인페이지에서

1.list.jsp 페이징 2.CSS 수정 3.list.jsp-User일때 'Add New Post' 안보이게 4.검색 5.파일 관련 5-1. 파일이 View.jsp에서 잘 보이게 5-2. 다운로드 (<-하연언니꺼 보기) 6.url heroku에서도 잘 mapping되게

1. list.jsp 페이징
2. CSS 3. list.jsp <c:if> 코드 Session 이용해서 수정 4. 신청한 사람 수 나타낼 때 '확인'된 사람만 세는건지. ('대기중'이면 집계 X?)
3. 파일 관련 5-1. 파일이 View.jsp에서 잘 보이게 5-2. 다운로드 (<-하연언니꺼 보기) 6. ../../이렇게 쓰는거 대신 redirect:를 써야하나!!

<2021-02-23 회의 전 자체피드백> 1. DB에서 BOARD Title varchar 늘려야겠다.. ㅎㅎ 2.

1. Fileupload 구현에 참고한 블로그: https://private.tistory.com/59
2. https://moondol2525.tistory.com/34
3. Filedownload 구현 참고: https://private.tistory.com/60?category=753861
4. resultType에 저장할 수 있는 값: http://www.devkuma.com/books/pages/740
5. 세션 유지: https://junghyun100.github.io/Session%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%83%81%ED%83%9C%EC%A0%95%EB%B3%B4-%EC%9C%A0%EC%A7%80%ED%95%98%EA%B8%B0/
6. 난수 생성: https://velog.io/@josworks27/Back-end-%EB%9E%9C%EB%8D%A4-%EB%AC%B8%EC%9E%90%EC%97%B4%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%EC%9E%84%EC%8B%9C-%EB%B9%84%EB%B0%80%EB%B2%88%ED%98%B8-%EC%83%9D%EC%84%B1#%EB%9E%9C%EB%8D%A4-%EB%AC%B8%EC%9E%90%EC%97%B4%EB%A1%9C-%EB%B9%84%EB%B0%80%EB%B2%88%ED%98%B8-%EB%B3%80%EA%B2%BD
7. <c:set>: https://fruitdev.tistory.com/130
8. c 태그: https://offbyone.tistory.com/367
9. session 다루기: https://hyeonstorage.tistory.com/125

요약

(나의) 해결방법: Clone 후 Properties > Web Development Assembly 설정을 건드려 주었다.

문제

Git을 이용해 sts 프로젝트를 진행하고 있다. 그렇기에 Git에서 프로젝트를 Clone하여 로컬에 import하는 방식을 써야 하는데, 문제가 발생했다.

문제: import후 maven update를 해주었을 때는 괜찮았던 프로젝트가 Project Facets 설정에서 Dynamic Web Module/Java/JavaScript를 체크하니 pom.xml에서 오류가 났다.

(캡처본은 없지만) web.xml is missing and < failOnMissingWebXml > is set to true 오류였다.

pom.xml이 말썽이니 다른 컨트롤러들도 돌아가지 않았고, Run on Server를 했을 때도 404 에러가 났다. (에러 직후 콘솔창을 확인했는데, 에러 로그도 없었다.) 구글링해봤지만 해결이 안됐고, 결국 교수님께서 도와주셨다.

해결

1. git repository clone하기 (사진대로 따라하기) 사진 속 체크박스를 선택하면 자동으로 import된다.

2. Maven > Update Project

3. Properties > Java Build Path 버전 맞추기 (나는 1.6->1.8로 변경했다.)

4. Properties > Project Facets 체크박스 선택

5. (중요) Properties > Development Assembly : pom.xml에서 오류가 나는 분들은 여기를 확인해보면 좋을듯하다. 나는 이 단계에서 사진(해결 후)과는 달리 항목이 7~8개 정도 있었다. 우선 항목들 중, 경로가 src/main/test인 것들을 remove했다.

그런 뒤 add를 통해 /src/main/webapp과 Maven Dependencies를 붙여주었다.

*Maven Dependencies 붙이는법

*/src/main/webapp 붙이는법

이렇게 Development Assembly를 정리해 주고, Maven Update와 Project > clean까지 해주니 잘 돌아갔다.

드디어.. 해결끄읕!!!