하지만 sessionStorage의 경우 세션이 종료되면 저장된 데이터도 함께 사라진다는 점이 다른점이다.

• localStorage
  • 로컬에 도메인 별로 지속되는 storage
  • localStorage는 시간제한이 없고 브라우저가 꺼져도 죽지 않는다.
  • 값을 지우려면 직접 지워줘야한다.
• sessionStorage
  • 세션이 (프로세스, 텝, 브라우저) 종료될 때까지 지속되는 storage
  • localStorage는 소멸 타이밍이 없다. 즉 직접 지워야한다. 그리나 sessionStorage는 세션의 종료시 죽음을 맞이한다.

쿠키는 서버측과 클라이언트측 양쪽에서 쿠키 데이터를 사용하는 api가 존재한다.

이와 달리 localStorage는 로컬환경에서만 컨트롤된다.

또한 localStorage는 기간 기능이 없어서 소멸 기간을 정해주지 못한다.

localStorage는 자바스크립트 객체 자체를 넣는 것이 가능하다

sessionStorage는 다른 탭이라면 데이터가 공유되지 않는다.

localStorage의 키와 값은 반드시 문자열이어야한다. 다른 자료형을 사용하게 되면 문자열로 자동 변환된다.

localStorage와 sessionStorage의 데이터가 갱신될 때 storage 이벤트가 실행이 된다.

• key - 변경된 데이터의 키
• oldValue - 이전 값(키가 새롭게 추가되었다면 null)
• newValue - 새로운 값(키가 삭제되었다면 null)
• url - 갱신이 일어난 문서의 url
• storageArea - 갱신이 일어난 localStorage나 sessionStorage 객체

event.storageArea에는 스토리지 객체가 포함되어 있다. storage 이벤트는 sessionStorage나 localStorage가 변경될 때 모두 발생하기 때문에 스토리지 종류에 상관없이 실제 수정이 일어나면 응답이 가능하다.

참고

• https://inpa.tistory.com/entry/JS-📚-localStorage-sessionStorage
• https://inpa.tistory.com/entry/JS-📚-쿠키Cookie-다루기

Promise

Promise는 비동기 함수의 결과를 담고 있는 독자적인 객체이다. 비동기 작업이 끝날 때까지 결과를 기다리는 것이 아니라, 결과를 제공하겠다는 약속을 반환한다는 의미이다. Promise 객체는 resolve와 reject로 나눠져서 성공과 실패 메서드로 나누어진다. Promise 객체 내부에서 resolve를 호출하게 되면 바로 .then메서드로 이어져서 콜백함수에서 성공에 대한 추가 처리를 진행한다. 반대로 Promise객체 내부에서 reject를 호출하게 되면 바로 .catch메서드로 이어져서 추가적인 처리가 진행된다. .finally 키워드는 프로미스가 이행되거나 거부되는 것과 상관없이 실행할 콜백함수를 등록하여 처리할 수 있다. promise의 상태에는 진행중: pending, 성공: fulfilled, 실패: rejected가 있다.

async/await

함수 앞에 async를 붙이면 "이 함수는 비동기적인 함수이고 Promise 를 반환한다"라고 선언하는 것과 같다. async를 붙이게되면 어떤 값을 리턴하든 무조건 프로미스 객체로 감싸져 반환된다는 특징이 있습니다. await를 붙이면, 해당 Promise의 상태가 바뀔 때까지 코드가 기다려야한다. Promise가 성공 상태 또는 실패 상태로 바뀌기 전까지는 다음 연산을 시작하지 않는 것과 같다. async/await내부에서 Promise.resolve(fulfilled), Promise.reject(rejected)와 같이 프로미스 상태를 다르게 지정할 수 있다.

async function resolveP() {
    return Promise.resolve(2);
}
async function rejectP() {
    return Promise.reject(2);
}

async 함수 내부에서 예외 throw를 해도 실패(rejected)상태의 프로미스객체를 반환하고 return을 하지 않아도 undefined가 처리되지만 어쨌든 프로미스 객체를 반환하게 된다.

async/await vs Promise

Promise는 .then메서드를 연속적으로 사용하여 비동기 처리를 하지만 async/await는 await키워드로 비동기 처리를 기다리고 있다는 것을 직관적으로 표현한다는 것을 알 수 있다. async/await는 비동기적 접근 방식을 동기적으로 작성할 수 있게 해주어 코드가 간결해지고 가독성이 높아져 유지보수를 용이하게 해준다.(단, 순서에 상관없이 데이터를 불러오는 상황에서 await를 막무가내로 사용하면 오히려 성능이 저하되는 문제가 발생한다.)

fetch('api')
    .then(response => response.json())
    .then(data => )
    .then(response => )
    .then(data => )
    .then()
    .catch()

.then메서드를 연속적으로 사용하면 코드가 길어지지고 가독성이 안좋아지지만

 async function getData() {
     const response = await fetch('/api');
       const data = await response.json();
       const response2 = await fetch('/api2');
    ...
 }
 getData();

위와 같이 async/await를 사용하게 된다면 훨씬 직관적이고 간결한 것을 확인할 수 있다.

Promise.then()방식의 에러 처리는 catch() 핸들러를 중간 중간에 명시함으로써 에러를 받아야하는 번거로움이 있지만 async/await와 같은 비동기 처리에 대해서 에러를 처리하려면 try/catch문을 씌우면 되게 된다.

function fetchResource(url) {
    fetch(url)
        .then(res => res.json())
        .then(data => )
        .catch(err => );
}

async function func() {
    try {
        const res = await fetch(url);
        const data = await res.json();
    } catch (err) {
    }
}
func();

위와 같이 async/await는 try/catch문으로 감싸면돼서 간결하고 편리하다.

await의 단점 보완(논블록킹/Promise.all)

논블록킹

데이터를 불러올 때 순서에 상관없이 데이터를 불러오는 상황이면 await를 사용하지 않고 미리 논블록킹으로 실행을 하고 난 다음에 프로미스 객체 결과 변수를 await를 통해서 꺼내쓰면 된다.

function getApple() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("apple"), 1000);
    })
}
function getBanana() {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("banana"), 1000);
    })
}

async function getFruites() {
    console.time();
    let a = await getApple();
    let b = await getBanana();
    console.log(a, b);
    console.timeEnd();
}
getFruites();

밑에 캡쳐한 코드는 vue를 활용하여 작성한 코드이다.

위와 같이 async/await를 요청하게 된다면 a를 받은 다음에 b를 실행하기 때문에 시간이 오래걸린다. 이를 해결하기 위해서는 아래와 같이 작성해주면 된다.

async function getFruites() {
    console.time();
    let getApplePromise = getApple();
    let getBananaPromise = getBanana();
    // 위와 같이 async함수를 논블록킹으로 작성하면 백단에서 독립적으로 거의 동시에 실행되게 된다.
    let a = await getApplePromise;
    let b = await getBananaPromise;
    // 결과 변수를 await를 통해 꺼내온다.
    console.log(a, b);
    console.timeEnd();
}
getFruites();

Promise.all

Promise.all은 배열 인자의 각 프로미스 비동기 함수들이 resolved가 모두 되어야 결과를 리턴 받는다. 배열인자의 각 프로미스 함수들은 제각각 비동기 논블록킹으로 실행되어 시간을 단축할 수 있다.

async function getFruites() {
    console.time();
    let [ a, b ] = await Promise.all([getApple(), getBanana()]);
    console.log(a, b);
    console.timeEnd();
}
getFruites();

React를 배우는 중에 :not(:last-child)구문을 만나게 되었다. 처음봤기때문에 바로 해석하기 쉽지 않았다. 하지만 코드는 읽고 해석할 수 있게 쓰여졌기때문에 찾아보고 해석하면 금방 이해할 수 있었다. :not()은 특정 조건을 제외하라는 말이고 :last-child는 부모 요소의 마지막 자식을 의미한다. 그러면 :not(:last-child)은 부모 요소이 마지막 자식을 제외하고 요소를 적용하라는 말이다. 즉,마지막 요소를 제외하고 margin-bottom을 16px로 하라는 소리다. 프로그래밍 언어는 처음보는 언어가 있을 수 있다. 그럴때마다 당황하지 않고 찾아보면서 공부하는 자세가 중요한 것 같다. 이 방대한 지식을 다 외우고 있을 수 없기때문이다.

className = {this.state.clicked ? (this.state.validate ? 'success' : 'failure') : "" }

위와 같은 문장이 있었다. 이런 문장을 처음봐서 그런지 해석하는 데 시간이 걸렸다. 이제는 한번 해석해봐서 그런지 어떤 의미로 쓴지 수월하게 이해할 수 있었다. 먼저 this.state.clicked이 true이면 (this.state.validate ? 'success' : 'failure')을 해석하고 false면 "" 빈 문자열을 출력하라는 의미였다. 그 다음 this.state.clicked가 true면 (this.state.validate ? 'success' : 'failure')로 들어가서 해석해야한다. 여기서 this.state.validate 가 true이면 'success'를 출력하고 false이면 'failure'을 출력한다는 의미였다. 즉, this.state.clicked -> true -> this.state.validate -> true -> 'success' this. state.clicked -> true -> this.state.validate -> false -> 'faliure'라고 할 수 있다. this.state.clicked -> false -> ""라고 해석할 수 있다.

2. 삼항연산자와 객체전개구문

todo.id === id ? {...todo, checked : !todo.checked} : todo

위의 문장을 보면 todo.id 와 id가 같으면 {...todo, checked : !todo.checked} 다르면 todo를 그대로 호출한다는 얘기이다. 여기까지는 삼항 연산자니까 잘 알았는데 이제 {...todo, checked : !todo.checked}가 문제였다. 먼저 ...todo는 todo의 모든 속성을 새로운 객체로 풀어서 복사한다는 의미이다.그리고 checked : !todo.checked를 해석해보면 todo의 checked 속성을 : !todo.checked지금 가지고 있는 checked속성을 반대 값으로 저장하자는 얘기이다. 즉, todo.id가 id와 같다면 checked 속성을 반대로 저장하라는 소리고 todo.id가 id와 다르면 기존에 있던 todo를 그대로 호출하라는 소리이다.

음 이거는 별거 아니지만 위의 사진처럼 parsing error가 뜨는 것을 보았다. 오류를 자세히 보면 'SubApp' has already been declared.라고 떠있는 것을 볼 수 있다. 이 문장의 뜻만 봐도 이미 선언되었다는 것을 알 수 있었다. '응? 어디서 내가 선언을 했나?' 하고 아래로 내려가서 'export default한 부분에서 두번 선언을 했나?' 하고 봤지만 정확하게 한번만 export default SubApp;으로 선언된 것을 확인했다. 그럼 왜그러지? 하고 위에서 부터 천천히 봤는데 import SubApp from '../ex34_delete/SubApp';으로 엉뚱한 SubApp이 선언된 것을 확인했다. 하지만 vsCode는 이걸 잡아주지 못했다. 그래서 확인하는 데 시간이 걸렸던 것 같다. 이런 오류를 처음보면 왜 그런지 모르지만 찾아보고 나면 다음부터는 쉽게 보이기때문에 공부를 해야한다는 것을 깨달았다. 그래서 경험이 필요한 것 같다. 오류를 보면 감사해야할 것 같다. 내가 알아가고 배울 수 있는 시간이기 때문이다.ㅎㅎ

먼저 위의 문장을 보면 boardJPQLQuery.leftJoin(reply).on(reply.board.eq(board));를 보면 on절을 명시해줘도 문제가 없었다. 하지만 밑에 문장 boardJPQLQuery.leftJoin(board.member, member);에서 원래는 on절을 사용해서 board와 member를 연결해줬는데 이렇게 하면 오류가 났다. 이유는 board.member, member로 엔티티 관계가 이미 정의되어 있어 있어서 암시적으로 조인 조건을 처리할 수 있기 때문에 on 절이 필요하지 않습니다. 반면 위에 boardJPQLQuery.leftJoin(reply)처럼 엔티티 관계가 정의가 되어있지 않는 경우에는 on절을 명시적으로 사용해줘야한다.

JPA를 사용할때 내부적으로 어떻게 돌아가는지 확인하기 쉽지않아서 관계를 설정하는 데 있어서 사용하기 어려웠지만 유동적으로 변화에 빠르게 대응할 수 있다는 큰 장점이 있기 때문에 유용하다는 생각이 들었다. 어떤 것도 장점만 있지않고 어떤 것도 단점만 있지 않다고 생각합니다. 자신의 상황에 맞게 유동적으로 필요한 기술을 사용하는 것이 중요한 것 같습니다.

다음 사진을 보면 static 폴더 안에 assets(이미지 저장하는 폴더), css, js등의 폴더가 들어있다. 저는 이 assets 폴더 안 main에 있는 banner들을 css 폴더 안에 main에서 참조하고 싶었다. 처음에는 원래 하던거 처럼 templates에서 static을 참조하듯이 절대결로로 해줬는데 작동하지 않았다. 밑에 사진은 templates에서 static을 절대경로로 참조한 예이다.

그래서 찾아보고 이것 저것 해보았더니 결과는 static에서 static안에 있는 파일을 참조할 때는 상대경로로 불러와야한다는 것이였다. 즉, templates에서 static을 참조할 때는 절대경로로 하면되고 static에서 static안에 있는 것을 참조할 때는 상대경로로 지정해줘야한다. 맨 위에 사진 보시면 url("")와 url()의 차이는 없는 것으로 보여집니다.

GET http://localhost:12000/replies/list/440?page=1&size=10 500 (Internal Server Error)

제가 마주한 오류는 위와 같은 500번 에러였다. 찾아보니까 500번 에러는 서버에서 데이터를 처리하는 과정에서 문제가 있는 것이였다. 클라이언트에서는 파라미터를 잘 보냈는데 서버에서 처리하는 과정에서 문제가 있는 것이라 생각했다. 어쩔 수 없이 서버 쪽에서 log를 다 찍어보면서 확인하는 수 밖에 없었다. 일단 먼저 서버측 문제니까 intellij로 가봤다.

서버에 찍힌 오류문장을 천천히 보니까 getMemberId가 두번이나 호출되서 나오는 것을 확인할 수 있었다. domain이나 DTO에서 memberId를 두번이나 가져오려고 해서 생긴 것이라고 생각했다. 확인 결과 ReplyDTO 부분에 memberid가 중복되어서 넘어오는 것을 확인하고 ReplyDTO를 수정해줬더니 오류가 해결되었다.

JPA를 사용하면 변화에 대처하기 좋고 유연하게 데이터베이스를 설계할 수 있지만 연관관계에 있어서 설계할때 주의를 해야한다는 것을 알게 되었다. 아니면 지금처럼 데이터가 중복되어서 넘어오는 경우가 있을 수 있다는 것을 깨달았다. 각자가 가지고 있는 오류가 다르므로 일단 500번 에러라는 것을 확인했으면 서버쪽을 확인해보자.서버쪽에 찍힌 로그를 확인하고 로그가 안 찍혔으면 로그를 하나하나 찍어보면서 추적하는 것이 중요할 것 같다.

GET http://localhost:12000/replies/list/undefined?page=1&size=10 400 (Bad Request)

콘솔을 확인했을 때 위와 같은 오류 메세지를 마주쳤다. 일단 먼저 결론부터 말하자면 400오류는 클라이언트에서 서버로 정보를 보낼 때 문제가 있다는 뜻입니다. 즉 클라이언트에서 request를 보낼때 매개변수에 문제가 있을 가능성이 있다고 판단했습니다. 그래서 오류 메세지를 천천히 보니까 https://localhost:12000/replies/list/undefined? 라고 나오는 것을 볼 수 있습니다. 클라이언트에서 replies/list 로 get요청을 보내는 과정에서 undefined로 매개변수가 잘 안들어 간 것 같다는 생각을 했습니다. 그래서 request를 보내는 front단을 확인해보았습니다.

역시나 request를 보낼 때 정의되지 않은 매개변수가 들어간 것을 볼 수 있었습니다. controller에서 정의한 변수값과 다른 이름으로 선언되어있었습니다. 그래서 그 부분을 수정하고 나니까 화면이 제대로 작동하는 것을 확인할 수 있었습니다.

위에 그림 처럼 되돌리고 싶은 위치에 우클릭을 해서 '이 커밋까지 현재 브랜치를 초기화'를 클릭해준다. 그리고 HARD를 체크해서 확인을 눌러주면 main 브랜치가 해당 위치로 돌아간다. 여기서 끝이 아니다. 이렇게 하면 pull에 엄청 많은 숫자의 pull이 생성될 것이다. 이건 절대 받으면 안된다. 그러면 다시 main으로 돌아가는 꼴이 된다. 왜냐하면 지금은 로컬 main을 초기화 한 것이지 원격까지 초기화 한 것이 아니다. 따라서 해당 파일에서 cmd 창을 열어서 'git push -f'를 입력해주면 원격으로 로컬에 있는 main 브랜치가 올라가게 된다. -f는 강제로 올린다는 말이다. 아까 맨 처음에 main으로 체크아웃을 했기때문에 따로 체크아웃을 해줄 필요가 없다.

위에 그림을 보면 main -> main (forced update)로 실행된 것을 볼 수 있다. 이렇게 main을 올리더라도 해결방법이 있으니 당황하지 않아도 된다.

그래서 sendRedirect와 RequestDispatcher가 어디서 사용되는데? RequestDispatcher는 request정보를 가지고 있기 때문에 보통 controller에서 doGet 메서드에서 많이 활용된다. 왜냐하면 브라우저에서 요청한 request정보를 가지고 다시 화면에 출력해줘야하기 때문이다. controller에서 doPost 메서드에서는 주로 정보를 저장하고 처리하는 과정을 진행하므로 정보를 다 처리하고 나서 sendRedirect를 사용해서 브라우저에 새로운 화면을 띄운다.

저는 공부할 때 뭔가 내가 공부하는 부분이 눈에 보이면 공부하기 훨씬 쉽고 생각하기 편할 것 같다는 생각에 건축공학과를 전공으로 선택하게 되었는데 막상 가서 공부하니까 저와 굉장히 안 맞는 느낌이 팍팍 들었습니다. 여러가지 이유가 있지만 직접 공사현장에 나가봐야한다는 것인데 그 공사현장이 정해져있지 않고 계속 달라진다는 것이였습니다. 이렇게 되면 제 삶이 안정적이지 않을 것 같았습니다. 그래서 많이 고민하고 생각하면서 주변의 조언도 있었고 제가 찾아본 결과 개발자의 길을 가고 싶다는 생각을 했습니다. 졸업을 할 때 쯤에 우연히 좋은 기회를 갖게 되어서 지금 6개월 과정의 개발자 교육을 받고 있습니다. 지금은 약 4개월차이고 실질적으로는 3개월정도 교육을 받았습니다. 이렇게 3개월정도 교육을 받으면서 느낀 생각이 '이 일은 내가 오래할 수 있겠다.', '어렵지만 재밌다.', '오래하고 싶다.'

개발자를 하겠다고 마음을 먹고 나서 '내가 갈 수 있는 길이 크게 뭐가 있지? 어떻게 학습을 해야하지? 어떤 방향으로 나아가야하지? 자격증은 필요한가? 남들은 이것저것 많이하는데 남들하는 것을 따라하는게 맞나? 지금 배우고 있는 것도 이해가 잘 안되고 어려운데 다른 공부를 하는게 맞나?' 하는 고민들이 많았습니다. 남들을 따라하기에는 다들 공부하러온 신입개발자들이고 저는 그들을 보고 따라하는 것이 아니라 먼저 간 사람들의 말을 들어야한다고 생각했습니다. 그래서 교보문고에 가서 책을 찾아보니까 <요즘 개발자>라는 책이 눈에 들어왔습니다. '이 책이다!' 생각해서 바로 구매하고 읽기 시작했습니다. 확실히 먼저 길을 가본 사람들의 말을 들으니까 저의 앞으로의 방향이 좀 잡히는 것 같고 어떻게 공부를 해야하는 지 조금은 명확해진 느낌이였습니다. 이제는 흔들리지 않고 "나다운" 공부를 할 수 있을 것 같습니다.

[What Makes a Great Software Engineer] 논문에 나오는 탁월한 엔지니어의 다섯 가지 주요 역량은 아래와 같다고 한다.

1. Be a competent coder 좋은 코드를 만든다.
2. Maximize current value of your work 작업의 현재 가치를 극대화한다
3. Practice informed decision-making 데이터에 기반하여 의사 결정한다.
4. Enable others to make decisions efficiently 동료의 효과적인 의사 결정을 돕느다.
5. Continuously learn 꾸준히 학습한다.

위의 다섯가지 역량을 다 갖추면 좋겠지만 실질적으로 한계가 있고 자기가 잘하는 것도 있을텐데 자기가 잘 할 수 있는 부분을 노력해서 브랜딩해야한고 했습니다. 제가 생각했을 때 위의 역량 중에서 제가 잘 할 수 있는 부분은 2. Maximize current value of your work 작업의 현재 가치를 극대화하고 4. Enable others to make decisions efficiently 동료의 효과적인 의사결정을 돕고 5. Continuously learn 꾸준히 학습한다는 역량이라고 생각한다.

먼저 2. 작업의 현재 가치를 극대화하는 역량은 제가 무언가를 할 때 나에게 필요한 것이 무엇인지 내가 배울 것은 무엇인지 생각하는 경향이 있습니다. project 기간에도 velog를 썼던 이유도 여기에 있습니다. 내가 몰랐던 부분이 계속 생기니까 이 부분에 대해서 정리하고 싶었고 기록해서 기억에 더 오래 남게 하고 싶었습니다. 그리고 현재 가치를 극대화시키기 위해서 책도 읽으면서 외부의 자극을 얻고 input만 하는 것이 아니라 output도 하려고 노력하고 있습니다. 4. 동료의 효과적인 의사결정을 돕는 역량은 제가 잘하는 게 사람들과 화합하고 사람의 마음을 공감하고 이해하는 능력이라고 생각합니다. 저는 자기계발 책을 많이 읽으면서 사람의 마음을 이해하는 능력이 커졌다고 생각합니다. 어릴 때는 관계에 대해서 생각도 많아지고 해서 데일 카네기의 [인간관계론]이란 책도 읽으면서 관계에 대해서 고민도 많이 했던 것 같습니다. 사람이 살아가면서 사람과의 관계를 안 갖고 살아갈 수는 없다고 생각하는 입장이여서 그런지 사람과 관계를 맺는 것도 중요하다고 생각합니다. 이 세상에는 혼자할 수 있는 일은 없습니다. 크게 생각하면 자신의 소득활동도 다른 사람이 있기 때문에 가능한 것이라고 생각합니다. 혼자 살아간다면 소득활동따위는 필요하지가 않다고 생각합니다. 제가 이렇게 관계에 대해서 생각하는 게 많기 때문에 동료와 소통을 더 잘 하고 효과적인 의사결정을 할 수 있게 더 노력해보려고 합니다. 5. 꾸준히 학습하는 역량도 제가 이 개발자라는 직업을 선택한 것부터 꾸준히 할 수 있는 일이라고 생각해서 선택하게 되었습니다. 저는 뭔가를 꾸준히 하는 것을 잘 합니다. 아침밥도 맨날 사과, 닭가슴살, 오트밀을 먹고 출퇴근 길에는 책을 읽는 등 뭔가를 꾸준히 하는 것을 잘합니다. 이렇게 잘하는 이유도 제가 꾸준히 할 수 있겠다 생각되는 일만 하기 때문입니다. 누군가는 아침에 맨날 그렇게 먹는게 질리지 않냐고 물어보는데 저는 저렇게 먹는게 맛있고 저런 식단을 찾기까지 여러 시도를 많이 해봤습니다. 아침에 샐러드도 먹어보고 계란도 먹어보고 요거트도 먹어봤는데 꾸준히 먹을 수 없겠다는 생각이 들었습니다. 사과, 닭가슴살, 오트밀 먹는 것이 가장 간편하고 맛도 있었습니다. 이렇게 저는 꾸준히 하는 것에 자신있습니다. 개발자에 관심을 가지게 되고 공부를 하면서 저랑 잘 맞을 것 같다는 생각이 들었습니다. 저는 뭔가 꾸준히 공부하고 성장하는 것을 좋아하는데 저의 이런 성격과 정말 잘 맞다고 생각했습니다. 단기간에 밤을 새워가면서 하루만 산다는 마음으로는 못하지만 계속 꾸준히 할 수는 있을 것 같았습니다. 그래서 저는 지금 주말에도 계속 조금이라도 공부하고 발전하지만 밤 새워서는 못 하고 있습니다. 항상 아침에 30분 일찍 와서 공부하고 끝나면 잠깐 운동한 다음에 집에서 다시 공부하는 생활을 하고 있습니다.

책에서 원하는 방향을 찾기 위해서 자신에게 강력한 욕구가 무엇인지 생각해보는 과정이 필요하다고 하면서 한국비폭력대화교육원에서 제공하는 욕구와 관련된 키워드를 제시해주었습니다. 저는 그 중에서 도전, 배움, 운동을 제가 생각하는 욕구 세 가지로 골랐습니다. 도전은 어떤 일을 하던지 한발짝 앞으로 나아가기 위해서는 필요하다고 생각합니다. 저는 지금까지 도전을 하는 삶을 살아왔다고 생각합니다. 저는 재수에 도전했고 편입에 도전했습니다. 저는 도전만 한 것이 아니라 정말 열심히 했습니다. 하지만 열심히만으로는 안되는 것을 깨달았고 방향을 잡고 가야한다고 생각했습니다. (그래서 지금 개발자의 길을 걷기위해서 방향을 잡으려고 이 책을 집어들었다.) 저는 노력의 에너지가 좋은 방향으로 가기 위해서 어려운 시험에 통과했다는 사람들의 책도 읽었고 실패를 돌아보면서 변화를 주었습니다. 지금도 개발자가 되기위해서 도전하고 있다고 생각합니다. 저도 도전을 할 때 안 가본 길이라 두렵고 망설여질 때가 있는데 그럴때마다 '남들도 했는데' 라는 생각이나 '당연히 처음에는 낯설고 어색하지' 라는 생각으로 일단 해보는 경향이 있는 것 같습니다. 이런 저 자신을 봤을 때 도전을 하는 자세가 저를 더 발전시키고 있다고 생각합니다. 책에서 이런 글을 봤습니다. "꿈이 크면 깨져도 조각이 크다" 라는 글을 봤는데 저한테 실패해도 되니까 계속 높은 곳을 바라보게 하는 글이라는 생각이 들었습니다.
다음은 배움인데 항상 배우려고 노력하는 자세가 필요하다고 생각합니다. 그래서 계속 책을 읽는 것도 있습니다. 저는 개발자로 들어선 순간 계속 배움의 연속이겠다고 생각했습니다. IT분야는 변화가 빠른 곳이고 방대한 내용들이 있어서 계속해서 배우고 이해해나가야한다고 생각했습니다. 마지막으로 운동인데 제가 자기계발 책도 많이 읽고 편입할 때는 공부에 관련된 책도 많이 읽었는데 거의 빼놓지 않고 하는 말이 운동이였습니다. 그만큼 운동이 중요하니까 계속해서 책에서 강조한다고 생각합니다. 저도 많이 느끼는 것이 운동을 하면 실제로 머리가 맑아지는 느낌을 느꼈습니다. 실제로 몸과 뇌는 연결되어있어서 몸을 움직이면 뇌도 같이 활성화되어서 집중력도 올라간다고 합니다. 너무 어려운 내용을 배웠을 때 잠깐 운동하고 와서 내용을 다시보면 이해될 때도 있고 집중이 잘되는 느낌을 받았습니다. 공부를 하면 운동하는 시간을 아까워하는데 운동을 해보시면 확실히 다르다는 것을 느끼실겁니다. 저는 또 꾸준히 오래 배우고 노력할 거기때문에 운동을 통해서 지치지 않는 체력을 만들려고 합니다. 바쁘더라도 꾸준히 운동하는 습관을 갖는 것이 좋은 것 같습니다. 운동하는 시간말고 유튜브보고 인스타그램보는 시간을 줄이는 것이 더 현명한 선택이라고 생각합니다.

글을 쓰다보니까 엄청 길게 썼는데 이 책에 마지막에서는 이렇게 나와있습니다."처음부터 위대한 일을 해내려고 애쓰면 쉽게 넘어집니다. 큰 성공을 만들어내려면 작은 성고에 먼저 집중해야 합니다.", "훌륭한 개발자가 되는 길은 짧은 스프린트가 아니라 장기적인 마라톤과 같습니다.", "목적지가 아니라 여정임을 기억하세요". 뭔가 빨리 이루려고 하지말고 한걸음 한걸음 내딛는 발걸음을 즐기면서 가는 것이 중요하다는 생각이 들었습니다. 지금 배우고 알아가는 과정이 재밌어서 앞으로도 조급해하지 않고 천천히 배우면서 성장하고 싶습니다.

저는 WEB-INF파일 안에 lib에 jstl을 넣었는데 제대로 작동을 하지 않았다. 분명 맞게 넣었는데 이상했다. 저와 같은 고민을 하시는 분은 밑에를 따라해보시기바랍니다.

일단 maven repository에 가서 jstl을 검색해서 jar파일이 있는 것을 다운 받는다.

jstl.jar파일을 직접 tomcat안에 있는 lib에 넣는 작업을 진행한다. tomcat안에 lib파일에 직접 집어넣으니까 바로 실행이 잘되는 것을 확인할 수 있었다.

정말 알고나면 별거 아닌데 알기 전까지는 괴롭고 힘들다. 오류가 났을 때는 침착하게 오류코드를 확인하고 오류코드에 대한 확신이 없으면 구글링해서 나보다 앞서간 사람들의 조언을 들어보자.

하지만 제거했는데도 불구하고 같은 오류가 나왔다. 그래서 찾아본 결과 Web Modules에는 아직 전에 했던 project가 걸려있는 것을 알 수 있었다. 바로 위와 같이 tomcat에 들어가서 Modules 탭을 확인하고 전에 사용한 project가 있는면 선택하고 remove해줘야 한다. 참 알고나면 쉬운데 모르는 오류를 만나면 당황스럽고 시간을 많이 잡아먹는다. 이런 과정도 공부라고 생각하고 다음에 만나면 빠르게 해보려고 노력해야겠다. 문제를 만나면 배우려고 노력해야겠다.

위에 사진처럼 maser와 orgin/master가 들어와 있어야하는데 안들어 와 있었다. 이 문제는 정말 단순했던게 sourcetree에서 한번 pull을 당겨오거나 push를 해보면 eclipse에서 알아서 master와 orgin/master가 연동이 되는 것을 확인할 수 있었다.

다음에 잘 가져왔는데 아무래도 Web이랑 server랑 DB를 다 연결하는 거다보니까 일반 project가 아닌 Dynamic Web Project로 파일을 만들었다. 하지만 pull로 파일을 가져오는 과정에서 계속 Dynamic Web Project가 아닌 그냥 일반 project 파일로 들어오는 것이였다. 결론적으로 말하자면 .gitignore문제였다.

gitignore에 주석처리 되어 있는 부분이 원래는 들어가 있었다. 그래서 파일이 제대로 넘어가지 않고 일반 project파일로 들어오는 것이였다. 근데 그 전에 혼자서 해결하기 위해서 끙끙거리면서 일반 project파일을 Dynamic Web Project로 바꾸는 작업을 했는데 2가지만 확인하면된다. 먼저 pull을 당겨오면 tomcat 라이브러리가 잘 들어가 있는지 두번째는 Project facets 에서 Dynamic Web Module, java, javascript 가 잘 체크가 되어 있는지 확인해야한다.

tomcat라이브러리가 없다면 먼저 maven에서 다운받는 것이 우선이고 다운을 받았고 server와 연동을 해줬다면 build path들어가서 Server Runtime에 Tomcat이 잘 들어와 있나 확인해줘야한다. 활성화되어있지 않다면 Classpath를 눌러서 add Library에서 추가해줘야한다. 이렇게 해서 라이브러리에 추가가 된다면 오류를 잡을 수 있다.

아 그리고 이렇게 라이브러리를 추가했는데도 오류가 뜨는 경우가 있는데 이럴때는 파일을 우클릭해서 위의 그림처럼 java EE Tools-> Update EAR Libraries를 누르면 된다.

이건 앞에서 말했듯이 일반 project로 들어와서 계속 삽질하고 찾아보다가 알게 되었는데 Project Facets에서 Dynamic Web Modul, java, javascript가 선택이 되어 있어야지 일반 project가 Dynamic Web Project로 바뀌는 것을 확인할 수 있다. 파일은 바꼈으나 서버가 잘 실행이 안되는 거 봐서는 위에 언급했듯이 gitignore에서 파일을 빼고 보내는 것이 아닌지 확인해야한다.

항상 git을 연동하는 데에서 너무 많은 시간을 소비하고 있다. 그래도 협업을 위해서는 계속해서 이렇게 git 문제에 부딪힐 때마다 공부하고 기록하고 회고하려고 한다.

1. 먼저 display: none;은 visibility hidden과 유사하면서 다른 점이 있습니다. none은 화면에 글을 출력하지도 않고 공간을 차지하지도 않습니다. 반면에 hidden은 글을 출력하지 않는 건 똑같지만 공간을 차지하고 있습니다. 말 그래도 hidden 뒤에 숨어 있는거죠. 동적인 효과에서는 랜더링 문제로 visibility를 사용해야한다고 했다.
2. display: block; 은 div, p, h, li태그 등 큰 단위가 이에 해당되며 기본적으로 가로영역을 모두 차지한다. 그랫 block 처리를 하게 되면 자동으로 다음 글은 줄바꿈이 되어버린다.
3. display: inline;은 span, b, i, a 태그 등 작은 단위가 이에 해당되며 block과 달리 줄바꿈이 되지 않는다. 또한 width와 height속성을 지정할 수 없어서 글자크기만큼만 속성을 추가할 수 있다. inline은 글씨나 문장에 효과를 주기위해 존재하는 속성이라고 생각하면쉽다.
4. display: inline-block; 은 block 요소와 inline요소가 결합된거라고 생각하면 되는데 width와 height를 지정할 수 있지만 줄바꿈은 되지 않는다. 한마디로 글씨나 문장에 box처리해서 효과를 줄 수 있다.

display 배운긴 배웠는데 정확하게는 몰랐는데 이번에 프로젝트를 계기로 조금 더 정확하게 알게되고 이해한거 같아서 좋다. 이렇게 사소한거라도 모르는 내용이 있으면 구글링하고 알아보고 이해하고 정리하는 습관을 가져야겠다.

document.getElementById("disclosure").addEventListener("click", (event) =>{
            if(event.target.value === "true"){
                event.target.value = "false"
            }else{
                event.target.value = "true";
            }

        })

원래의 값을 html에서 input의 value값을 true로 해놓은 상태이고 이것을 server로 보낼 대는 false로 처리하기 위해서 위와같이 if문을 활용해서 작성했다.

그리고 데이터 값을 넣어줄 때 삼항연산자를 활용해서 데이터 값이 들어가게 처리해줬다.