배운점이 많은 하루

• 수정 : 많은걸 갈아버렸습니다 20201106 일지를 확인해주시면 감사하겠습니다 !

1

// API 불러오기

2

// 실무에선 axios를 많이 사용하지만 fetch로도 충분히 끌어올수 있다. (blog 참고, 조언참고)

3

// fetch('url') = 서버에 불러올 자료 끌어오기

4

fetch('https://my-json-server.typicode.com/hackurity01/prgrms-gsmhs-rct-1-week-api/questions/1031')

5

    .then(function(response){

6

        // 서버에서 원초적인 데이터를 가져온다

7

        return response.json();

8

    }) 

9

    .then(function(myJson_data) {

10

        // 정리 1

11

        // 1차 가공

12

        // console.log(myJson_data);

13

        let Json_data = JSON.stringify(myJson_data);

14

15

        console.log(Json_data);

16

        // 정리 2

17

        // 서버에서 가져온 데이터를 가공한다 1차가공후 2차가공

18

        let Json_parse = JSON.parse(Json_data);

19

20

        // 정리 3

21

        // Mr.blog씨의 날짜와 질문(date, question) 3차가공

22

        console.log(Json_parse);

23

24

        let Blog_date = Json_parse.id;

25

        let Blog_question = Json_parse.question;

26

        console.log(Blog_date);

27

        console.log(Blog_question);

28

29

        document.getElementById('blog_question').value = "12223";

30

    });

지난 1년여간의 회고록

어찌 보면 현재 학교의 시간은 11월 이후와 이전으로 나뉘게 됩니다.
11월 이후 1년 동안 자신이 배울 수 있는 걸 펼칠 수 있는 GSM Festival과 함께 여러 IT 행사들이 몰려있기 때문입니다.

우선 잘한 점을 말하기 전에 내가 한 행동에 대한 반성을 시작하려 합니다.
어찌 보면 1년 전보다 더 발전한 부분은 있지만 더 후퇴한 부분 또한 있기 때문입니다.

첫 번째 - 시간 활용에 대한 부재

자신에게 부과된 시간을 제대로 활용하지 못한 채로 1년을 보내게 되었습니다. 이점에서 반성해야 한다 생각합니다. 여가 시간 대부분을 운동이나 독서와 같은 생산적 활동이 아닌 게임과 같은 비생산적 활동이 대부분이 차지한 점을 깊이 반성하게 되었습니다.

두 번째 - 기대치의 높은 설정

자신에게 기대한 목표치를 너무 높게 설정해서, 그 일을 해결하기 전에 포기하는 경향이 있었습니다. 이점에서 반성해야 생각합니다. 자신이 맡을 수 있는 일과 없는 일을 확실히 구분하여 처리해야 하는 능력을 길러야 한다 생각을 가지게 되었습니다. 자신이 처리 못하는 일을 자신이 하겠다고 나서게 된다면, 자신 포함 그 일을 하는 사람 전체에게 피해를 줄 수 있기 때문입니다.

세 번째 - 전환점에 대한 활용 부재

작년 제 자신에게 전환점이 될 수 있는 계기를 정확히 못 살린 점이 아쉽게 생각합니다. 이점에서 더욱더 큰 반성을 해야 한다 생각합니다. 여러 번의 개발 방향성에 대한 깊은 고민에서 제 자신이 갇혀있다는 생각을 계속하게 되었습니다.

이러한 저에게 아쉬운 점은 개발 능력 성장이란 궁극적 목표로 나아가지 못하게 되었고, 계속 개발 실력이 정체 (이해 못 한 소스코드 사용 → 무작정 개발 → 이해 못 함 → 개발 능력 향상의 부재의 악순환)이 되었다는 점입니다.

하지만 긍정적으로나마 개선한 부분은 여럿 있습니다.

첫 번째 - 카페인 의존 개선

과도 환 카페인의 의존에서 적절한 카페인 사용으로 바뀌게 되었습니다.
이러한 개선을 통해 카페인 의존에서 카페인을 적절하게 사용할 줄 알게끔 바뀌었습니다. 다만 이러한 과정을 통해 체력의 부재를 느끼게 되었습니다. 이 점은 적절한 식습관과 운동을 병행한 활동을 통해 개선해 나가야겠다란 생각을 가지게 되었습니다.

두 번째 - 머리와 글로 사용해서 코딩 문제에 접근

무작정 구글링을 통한 소스코드를 긁어오는 문제에서, 머리로 생각하고 직접 써보는 방식으로 코딩을 접근하게 되었습니다. 이러한 코딩 습관의 개선으로 기존에 얻고 난 다음 흘러 보내었던 내용에 대해 다시 한번 생각해 볼 수 있게 되었습니다.

세 번째 - 건강한 자아성찰과 건강한 자아비판에 대한 접근

항상 사람은 옳을 수 없다 생각합니다. 물론 제 생각일 수만 있지만요, 하지만 사람은 늘 잘할 수 없고 늘 못하는 거 또한 아닙니다. 잘할 수 없게 되면 다시 잘하게 만들면 되고, 못하면 그 못하는 부분을 개선하면 된다 생각합니다. 하지만 맹목적으로 나는 잘한다 잘한다란 생각의 주입으로 인한 자만감은, 더 이상 돌이킬 수 없게 커져버릴 수 있습니다. 다행히도 자신을 돌아보는 시간과 자신에 대한 비판을 건전하게 수용할 수 있게 되어서, 자신에 대해 생각해볼 시간을 가지게 되었습니다. 이점에 대해 지난 1년간의 얻은 수확 중 가장 크다고 생각하게 되었습니다

총평 / 개발적인 성과를 크게 보진 못했으나, 자신에 대해 생각을 가진 한 해가 되었다고 생각합니다.
정말 저를 좋게 봐주신 분들에게 죄송한 말씀일 수 있습니다. 저는 아직 엄청 모자란 학생이고, 많은 실수를 저지르고, 많은 부분에서 부족합니다. 하지만 항상 이렇게 살수 없으므로 이러한 점들을 개선해 나갈 수 있도록 다시 한번 마음을 다잡고 나아가겠습니다.

이 긴 글을 읽어주신 모든 분께 감사드립니다.

어제 JS로 한 삽질에 대한 기록

배우고 있는 시기에, 늘 겪는 일 중 하나인 삽질에 대해 설명해보고자 합니다. (Tmi이지만, 제가 겪어보게 되었거든요 하하..)

제 블로그를 처음 오신 분들도 있을 수 있으니깐, 2020-11-05 포스트를 참고해 주시거나

개발하다 보면 이곳을 파야 정답이 나오는데, 다른 곳을 파다 틀리는 경우도 있고 바로 앞에 결과가 있는데 빙 돌아서 다시 온 경우도 있었습니다.

일단 어제의 소스코드를 다시 올리고자 합니다.

1

// API 불러오기

2

// 실무에선 axios를 많이 사용하지만 fetch로도 충분히 끌어올수 있다. (blog 참고, 조언참고)

3

// fetch('url') = 서버에 불러올 자료 끌어오기

4

fetch('https://my-json-server.typicode.com/hackurity01/prgrms-gsmhs-rct-1-week-api/questions/1031')

5

    .then(function(response){

6

        // 서버에서 원초적인 데이터를 가져온다

7

        return response.json();

8

    }) 

9

    .then(function(myJson_data) {

10

        // 정리 1

11

        // 1차 가공

12

        // console.log(myJson_data);

13

        let Json_data = JSON.stringify(myJson_data);

14

15

        console.log(Json_data);

16

        // 정리 2

17

        // 서버에서 가져온 데이터를 가공한다 1차가공후 2차가공

18

        let Json_parse = JSON.parse(Json_data);

19

20

        // 정리 3

21

        // Mr.blog씨의 날짜와 질문(date, question) 3차가공

22

        console.log(Json_parse);

23

24

        let Blog_date = Json_parse.id;

25

        let Blog_question = Json_parse.question;

26

        console.log(Blog_date);

27

        console.log(Blog_question);

28

29

        document.getElementById('blog_question').value = "12223";

30

    });

이러한 소스코드를 쓰게 되었는데, fetch에 대해 정확한 설명을 안 보고… JSON.stringify()를 통해 JSON을 다시 문자 배열로 만들어 버리고 (여기서 이상한 걸 느끼지 못했습니다..) 어코드가 왜 안되는지 생각했습니다.

1

let Json_data = JSON.stringify(myJson_data);

문제의 코드 stringify가 어떤건지만 좀더 제대로 찾아볼껄 생각해봅니다.. 제가 더 안찾은게 잘못이지만요. 여기서 좀더 생각하는 능력을 길러야 한다고 생각하게 되었습니다. 어찌어찌해서 찾아서 해봤지만요.

제가 느끼기엔 stringify가 Json이 분리해서 가져온 데이터를 합쳐주는, 존재인거 같습니다.

그리고 난다음 그 문자열을 다시 JSON화 해서 불러오는 JSON.parse를 통해서

1

let Json_parse = JSON.parse(Json_data);

다시 Json 화를 시켜주는 코드를 가져와서 데이터를 Json 화했습니다! 엄청 돌아서 왔지만요.

1

let Blog_date = Json_parse.id;

2

let Blog_question = Json_parse.question;

결국, 처음 function으로 가져오게 된 값에 해당 JSON 데이터가 있는 이름 면을 적어주면 끝나는 일이었지만, 돌고 돌아 정답에 접근을 했습니다.

저도 사실 어떠한 방법으로 접근하면 더 좋을까란 생각으로 코딩을 하다가 이러한 참사가 일어난 거 같습니다.

이 사실을 안 것도, 이 코드가 필요한 친구가 가져와서 어떻게 하면 줄일 수 있을까란 고민 후에 저에게 알려주었습니다. 안 그랬음 오늘도 삽을 팠다가 끝날 수도 있죠,

2020-10-14 고등 개발자의 하루 회고

오늘 하루도 다사다난하게 보낸거 같다. 아무래도 정규 수업 이외에 자신이 하고 싶은걸 배우는건 방과후 시간에만 가능하기 때문에, 오늘도 바쁘게 강의를 듣고 이해를 한거 같다.

오늘은 instargarm clone codeing 강의중 javascript 기초 문법 / 데이터 타입에 대해 공부하였고
이외에도 click-event, (add, remove, toggle), scroll-event에 대해 배우었습니다.

우선 click-event에 대해 설명을 하면 javascript를 활용해서 해당 구역을 클릭하면 이벤트를 발생 시켜 내는 구조이다. 어찌보면 간단한 기능일수도 있지만 이 기능과 (add, remove, toggle)를 활용해서 간단하게 하트를 클릭하면 하트가 빨간색으로 뜨고, 다시 클릭하면 빈 하트가 되는 간단하면서 필요한 기능을 구현할수 있게 되었다.

하지만 해결해야할 문제가 한개 있다 querySelector를 활용하게 되면 최상단에 있는 구문만 선택하게 되는데, 문제는 최상단에 있는 한개만 아까의 기능(하트 클릭시 이벤트 발생)이 발생하게 된다. [다른 객체에서는 적용불가]

그래서 이부분에 대해 고민을 해보왔지만, 그리 좋은 대안은 생각하지 못했다.
querySelectorAll를 써보기도 했지만 원하는 답은 나오지 않았다.

시간이 된다면 나중에 고쳐볼 문제이기도 하다.

그런다음 scroll-event를 활용해서 일정 scroll 기준치가 넘으면 상단 네비게이션 바에 flex 속성값을 주어서 고정시키면서 따라 다니게끔 만들었다.

또한 움직이기만 하면 심심해(?) 보여서 여러가지를 손보게 되었다. transition: all 값과 height값을 일정부분 조정해서 위에 일정부분 scroll이 되면 아래로 내려가게끔 만들었다.

오늘 얻은 성과는 javascript에 대해 기초적 부분을 다시 익히고, 이걸 바로 instargram clone codeing에 적용한점이 좋았다!

오늘 배운점!

- markdown과 vim 사용법!

#재능기부 카인드패밀리
우선 이 글은 카인드패밀리에서의 강좌를 보고 도움을 받은 글 입니다!

좋은 github.io 블로그를 만들수 있게 해주셨습니다.
추후 공부할때 많은 배운점들을 기록해 나가겠습니다!
내 손으로 만드는 Django 2.x 인스타그램 클론 강의 를 재능기부 해주셔서 추후에 공부할때, 많이 참고하겠습니다! 감사합니다!!

오늘 한것!!

1. 서울-코엑스 2019 소프트웨어 대전 관람!
2. 유튜브 강의를 통한 goormide 활용 나만의 github.io 블로그 구축후 글쓰기!

해야 할것!!

1. 블로그 가꾸기!
2. 시험 끝난후 Django 2.x 인스타그램 클론 강의 시작하기!

오늘 하루에 대한 기록 2020/10/12

- 주요내용 / instargram clone-codeing 강의 header, contents, side_box 강의 수강 
- 개선할점 / 충분한 수면, 습득력 향성

오늘 하루 instargram clone-codeing 강의중 3편의 강의를 보왔다.
header, contents, side_box를 보왔고, 오늘 느낀점은 크게 3가지로 나뉘게 된다.

1. position-flex 의 다양한 활용
2. section div header 을 통한 더욱더 깔금한 html 코딩
3. css의 부모 상속 관계를 정확히 짚고 넘어간점.

position-flex 의 다양한 활용

기존에 position-flex 의 기능을 알고 있던점은 float:left의 기능과 absolute 의 부가적 기능만을 가지고 있는걸로만 알게 되었지만. 오늘 크게 느낀점이 2가지가 있다.

1. justify-content를 활용하여 양 옆을 깔금하게 치울수 있는것
2. 부모 자식에 따라 부모엔 relative, 자식엔 flex 배치를 해서 유동적으로 배치가 가능한점

우선 첫번쨰가 가장 놀라웠다.
기존에 float를 일일히 따로 주고나서 배치를 해두는 방식으로 양쪽에 필요한 이미지나 텍스트 등을 나뚜었는데 justify-content를 통하여 간편하게 관리한다는점이 흥미로웠다.

2번째는 탄력적으로 position을 수정하여 웹페이지에 영향을 줄수 있다는점을 새롭게 알게 되었다.

section div header 을 통한 더욱더 깔금한 html 코딩

기존에 div로만 주구장창 개발하거나 header section만 활용해서 코딩한 경우가 있었다. 그런 코드들의 문제점은 한번 만들고 나면 가독성이 상당히 떨어져서 추후에 코드를 리모델링 하거나 여러 다른 작업을 하기엔 문제점이 있었다.

하지만 본 강의에서 나타난 정리된 코드들로 작성을 하고 그에 대한 부가 설명이 강의에 잘 녹아들어 습득하는데 큰 어려움은 없었다.

그러나, 내용을 숙지하는데 오늘 하루를 종일 투자한거 같다.
(1강의당 대략 40~50분정도?)

css의 부모 상속 관계를 정확히 짚고 넘어간점.

css의 부모 상속 관계에 대해 정확히 모르고 있었던점이 있었다. 사실 오늘 하루에 대한 기록을 하면서도 이해가 가장 안된점이다. (추후 자기전이나 시간적 여유로울때 다시 한번 다룰예정)

다행이도 본 강의에서 물흐르듯 설명을 잘 해주었지만, 상속 관념에 대해 잘 모르는 나에겐 다시 한번 돌아봐야 할 내용인거 같다.

개선할점 : 충분한 숙면 / 습득력 향상

하루 기숙사에서 7시간 정도 자도록 노력을 해야겠다. 오늘 정규 수업시간중 1시간 정도 잠에 빠진거 같다.(이런…)

또한 다양한 정보를 습득하기 위해 습득력을 길러야 겠다란 생각을 가지게 되었다. (오늘만 해도, 이해가 안된점들은 구글링을 통해 이해를 하려고 노렸했지만, 시간적 여유가 많이 안된다.)

반가워요 여러분들!