우리가 단순히 코드 상에서 줄바꿈을 해도 웹 페이지에서는 반영이 되지 않는다. 

"줄바꿈"을 하기 위해선 특정 태그를 사용해야한다.

1. <br> 태그

줄바꿈을 해주는 기능이 있으며 닫는 태그가 필요 없다. 단순한 줄바꿈을 할 때 사용된다.

https://www.w3schools.com/tags/tag_br.asp

w3s내에 정의에서 보면,

<br> 태그는 한 줄을 break해준다고 쓰여 있으며 시나 주소를 적을 때 용이하다고 적혀있다.

 

2. <p>

Paragraph에 첫 글자를 본 떠 만든 태그이다. 말 그대로 단락을 만들어주는 기능이다. 

<p>태그를 사용하면 가독성이 좋아지는 장점이 있다. 

 

https://www.w3schools.com/tags/tag_p.asp

br태그는 줄바꿈이 여러번 가능한 반면, 정해진 여백이 있기 때문에 시각적 자유도가 떨어진다. 

 

'Frontend > WEB' 카테고리의 다른 글

span vs div  (0) 2025.03.12

리뷰를 시작하기에 앞서,

저라는 사람을 간단히 소개하자면 게임 개발자 국비 교육를 받아본 적이 있으며 한 때 게임 개발을 꿈꿨던 사람입니다.

근데 왜 지금 바닐라코딩 부트캠프 후기를 올리고 있냐구요? 

네 결론부터 말하자면 실패했습니다. 

지금 생각해보니 실패하게된 두가지 이유가 떠오르는데요,

 

첫번째는 국비 교육의 "부실함"이었습니다. 

9시부터 17시까지라는 꽤 긴 시간에도 불구하고 그 시간동안 제가 직접 적은 코드 줄은 3줄도 안될 때가 많았죠

많이 적은 날은 강사님 코드 따라친 날이였습니다. 수업의 대부분은 이해도 못하고 코드가 뭐하는 앤 줄도 모르고 그냥 막 따라썼죠. 따라쓰다가 놓친 날에는 다음 날 따라쓰기를 어쨌든 따라가야 하니까 잘 따라쓴 동기꺼를 이메일로 받는게 대수였습니다. 

 

두번째 이유는 "게으름"이였습니다.

저는 솔직히 말해 매우 게으른 사람입니다. 아침에 느즈막히 일어나서 핸드폰 보다가 할 일 해야되는데..해야되는데 생각만 하다가 결국 점심이 되고 한국인은 밥심이지 하면서 밥 먹고 해야지라고 생각하다가 배불러서 힘들다가 침대에 눕고 어느덧 저녁이 되고... (너무 솔직히 터놓으니 부끄럽네요;;) 그래도 다행인건 제 게으름을 잘 알기에 저는 무언가 성실히 하려면 저를 아주 채찍질하며 내몰 수 있는 환경해서 해야하더군요. 네 이것도 사실 게으름 사람에 구차한 변명이지만 저는 이 구차한 변명에 의지해서라도 무언가를 해야겠더라구요.

 

그렇게 개발자가 되는 꿈을 잠시 접고 돈을 벌기 위해 영어 강사로 일했었습니다. 근데 일하면 일할수록 개발자로 일하지 못해본 것이 한이 되더라구요. "개발자가 되기 위해 왜 난 더 노력하지 않았을까?"  국비 교육이 아무리 부실해도 결국  개발자가 될 수 있는 기회는 스스로 만들어 나가는 것임을 왜 이제서야 깨달았는지 스스로가 원망스럽더라구요. 그러다 우연히 부모님께서  간단히 인터넷에서 배워서 부모님 사업에 관한 웹 페이지를 제작할 수 있겠냐고 여쭤보셨습니다. 그래서 전 당당히 네 알겠습니다. 라고 대답..하면 좋았을텐데 그게 가능할리가요;; 제가 게임 개발 교육을 받았다지만 인터넷에서 배운다고 일주일만에 뚝딱~!이 가능하지는 않겠죠 엄연히 다른 분야이기도 하구요 그래도 부모님이 부탁하신건데 공부하는 시늉이라도 해야하지 않겠습니까? 인프런에서 강의 끊어서 퇴근하고 짬짬히 공부했죠. 아..근데 글쎄 이게 재밌더라구요 그렇다고 뭐 게임보다 재밌냐하면 아니긴 하지만요 확실한건 제가 흥미가 있었습니다. 그래서 제가 개발자가 되지 못한 이 후회 삼아 저 스스로한테 마지막 기회를 줘보기로 했어요. 

 

그 이후로 여러 검색을 통해 프론트엔드 부트캠프를 찾기 시작했어요 제가 부트캠프를 선정하기 위한 조건은 

 

1. 혹독한 환경

    말씀드렸다싶이 제가 상당히 게으르기 때문에 딴 짓을 할 어떠한 시간도 줘선 안되는 걸 잘 알고 있었습니다. 
    이왕이면 아침부터 밤까지 절 가둬놓길 원했어요 (이상한 취향 아닙니다) 

2. 가르침을 주시는 분의 배경이나 전문성

    건방지게 들릴 수 있겠지만 저한테는 중요한 사항이였어요.

   제가 게임개발을 배우면서, 제가 강사로 일해보면서 가르침은 막대한 책임이 따른다는 것을 배웠거든요. 

3. 국비 교육이 아닌 100% 자비 부담 교육

    저는 국비 교육을 받아본 사람으로써 국비 교육을 추천하지 않습니다..다른 국비학원도 그렇다고 객관화 시키고 싶진 않지만  

    제가 다닌 국비학원은 그냥 포트폴리오 적당한거 하나만 나와서 어디든 취업하면 된다라는 식이였습니다. 오직 학원에 "취업률"

    에만 신경을 썼죠 심지어 3년이 지난 지금까지 취직했냐고 전화와서 물어봅니다; 그러다보니 당연지사 수업의 질도 안좋고 수강

    생들도 앉아는 있는데 절반은 본인이 뭘 배우고 있는 지 몰라요. 따라쓰기 바쁘거든요

 

이 조건을 충족하는데 찾다가 본 것이 바로 "바닐라 코딩" 이였습니다.

혹독한 환경? 

월~금 9시 부터 밤 10시까지 필수 학습시간입니다.

자격?

바닐라 코딩 사이트를 보면 Ken님 프로필, 명재님 프로필을 투명하게 볼 수가 있는데요, 신뢰도가 안생길 수가 없었습니다. 

자비부담 교육

바닐라 코딩은 100% 자비 부담입니다. 제가 국비 학원 때 겪었던 안좋은 점을 걱정할 필요가 전혀 없었죠.


이제 본론으로 들어와 일주일동안 제가 바닐라 코딩에서 무엇을 겪었는 지 알려드리도록 하겠습니다.

 

처음 들어와 하는 일 "체크인 세션"

처음으로 운영 매니저이신 태우님과 함께 체크인 세션을 진행하였습니다. 제가 앞으로 일주일동안 어떤 것을 중점으로 경험하고 배워야 하는 지를 상세히 알려주셨습니다. 또한 제가 참관할 수 있는 여러 유익한 수업 스케쥴도 알려주시며 제가 바닐라 코딩을 낱낱이 파헤질 수 있도록(?) 도와주셨습니다. 이 날 이후로 할일 리스트도 작성하였는데 마지막 날에 저도 깜짝 놀랄만한 할일 리스트가 완성됩니다..ㅋㅋ

 

 

스스로 깨우치는 습관 "개발 입문서"

체크인 세션 이후에는 제공해주신 웹 개발 입문서를 통해 천천히 따라나가면서 발을 담궈보는 시간을 가졌습니다.

이 입문서가 저한테 굉장히 도움이 된게, 저는 개발을 배워본 적이 있지만 사실 이 코드 조각 조각들이 무엇을 의미하는 지 궁금하지도 않고 몰랐거든요. 근데 이 입문서는 호랑이가 뭘까?로 시작했다가 그 다음은 얼룩말이 뭘까? 그 다음은 타조가 뭘까? 로 나아가다가 이걸로 동물원 만들 수 있다?! 멋지지! 하면서 끝나는 놀라운 전개를 가진 입문서입니다.

입문서를 공부하면서 만든 구글 사이트입니다. 저는 입문서를 공부하면서 중요하게 생각한 것이 있었어요 모르는건 짚고 넘어가자 읽을 때 한 단어 한 단어 쪼개가면서 모르면 찾아보고 써보기도하고 응용해가면서 했는데요 비록 오래 걸렸지만 이 공부법이 성과를 보이는 시간이 옵니다...

 

입문서를 따라가면서 구글 프로젝트 뿐만 아니라 캐로우셀 프로젝트, 메신저 프로젝트도 제작해볼 수 있었어요.

간단한 프로젝트지만 4일동안 3개의 프로젝트를 완성하니 너무 뿌듯했습니다. 

 

수업은 어떤 형태로? "세션 참관"

일주일 부트캠프 체험을 하면 아까 언급했다싶이 수업에도 참관할 수 있는 기회가 주어집니다. 

제가 처음 참관한 수업은 기초 문법 수업이었는데요

운이 좋게도 제가 참관한 기수분들이 부트캠프를 시작한 지 얼마 되지 않으셔서 기초 수업이 진행되고 있었습니다.

문법 수업은 켄님이 직접 진행하십니다.

수업 방식은 기본적인 이론 수업을 진행한 후, 배운 이론을 바탕으로 토론까지 진행하는 방식이였습니다.

토론은 개인이 조사를 먼저하고 그 다음 팀원과 함께 토론하고 그 결과를 바탕으로 발표 하는 시간입니다. 

처음으로 이 세션에 참관했을 때는 아직 아무것도 몰라서 구경만 했었는데요 

개인이 조사한걸 다른 사람과 공유하고 마지막에는 켄님께 이러이러한 개념인 것 같다라고 자신의 지식을 다른 사람한테 꺼내어 말하는 모습이 제 3자 입장에도 유익한 시간임을 느낄 수 있었습니다.

두번째 참관 시간에는 저도 이 토론에 참가할 수 있는 밑바탕이 있었는데요,

제가 입문서에서 배운 개념이 마침 토론시간 주제여서 저도 깍두기가 아닌 학생으로서 참관할 수 있었습니다. 

이 개념이 제가 4시간을 붙잡고 있었던지라 잘 알고 있어서 같은 팀원분들께 제가 알고 있는 내용을 전달할 수 있었어요.

제가 열심히 쪼개가면서 공부한 덕분인 지, 제 설명이 도움이 많이 됐다고 팀원분들께 좋은 말도 들을 수 있었어요. 

하지만 제가 토론에서 진정으로 얻은 것은 "새로운 관점"이였어요. 

팀원분들과 함께 그럼 이렇게 되면 어떻게 될까요? 하면서 서로 다른 접근법으로 이 개념에 대해 논의를 하는데

제가 잘 알고 있다고 생각한 부분도 다르게 접근하니 제 지식에 구멍이 보이더라구요.

새로운 관점이 제가 알고 있는 지식에서 가지를 뻗듯이 더 나아가면서 구멍이 채워지는게 느껴지니 더욱이 가치 있는 시간이었어요

 

이렇게 공부하는게 맞을까? "1:1 피드백 시간"

이 입문서를 차근차근 공부하고 있으면 대망의 그 시간이 다가옵니다 바로 1:1 피드백 세션인데요.

제가 아무리 쪼개 공부했다지만 잘 이해하지 못하고 넘어간 개념도 있고 미처 이것까지 공부하지 못했던 부분도 분명히 있을거에요.

근데 그 저의 허점을 보완해주는 시간이 바로 1:1 피드백 세션입니다. 물론 공부하면서 몰랐던 부분도 질문 가능하지만 반대로 알고있는 개념도 내가 이걸 제대로 알고 있는지 확인하는 시간이기도 해요.

저는 켄님과 태우님께 하루에 한 번 피드백을 받았는데요 

켄님과는 제가 입문서를 통해 배운 내용을 주로 이야기 하였고, 태우님은 제가 공부하는 습관이 잘 잡혀지도록 KPT 회고법에 대해 

얘기해주셨어요.

 

켄님과 1:1 피드백을 통해 느낀 점은 제가 입문서를 공부하면서 개념에 대해 호기심을 품지 않았다는거에요.

예를 들어, "ID는 고유해야한다"를 읽고 저는 아 ID는 한번만 쓸 수 있구나에 그친거죠.

켄님이 저에게 "ID는 고유해야한다고 하는데 여러번 쓰면 어떻게 되나요?" 라고 질문을 주셨는데,

순간 벙찌고 말았어요..그리고 추측상으로는 에러가 날 것 같습니다라고 답변을 했는데 

나중에 찾아보니 제 대답이 틀렸더라구요. 

피드백 시간을 마친 뒤 바로 자리로 돌아가서 오늘 어떤 질문을 받았고 어떤 대화를 나눴는 지 블로그에 작성했어요.

질문 부분을 제외한 회고와 후기 부분만 살짝 보여드리자면 이렇습니다.

확실히 제가 깨달은 부분이 많다는게 시간이 지난 지금 봐도 느껴지네요. 

 

태우님과 함께한 피드백 시간에는 KPT 회고법에 대해 알아가고 직접 써보는 시간을 가졌습니다.

실제로 부트캠프가 시작되면 이 회고법을 작성하는거에 익숙해져야하는데요

저는 이 시간을 통해  부트캠프가 시작하기 전에 KPT회고 작성법을 직접 써볼 수 있는 기회가 있었습니다. 

회고법에 대해 전혀 생각한 적이 없는데, 태우님과 함께 회고법에 대해 논의해보면서 저의 나쁜 습관에 대해 골똘히 생각해볼 수 있는 뜻깊은 시간이였습니다. 

 

도와주세요!! "현업 개발자 멘토링"

저녁 시간에는 현업 개발자 멘토링 시간이 있었습니다.

저는 비록 체험 수업이었지만 그런거에 제약 없이 현업 개발자분에게 멘토링 요청을 할 수 있었습니다.

질문이 생기면 slack을 통해 요청을 드리면 개발자분께서 제 옆자리로 와서 도움을 주는 방식이었는데요,

실무 경험을 바탕으로 멘토링을 해주시니 혼자 고민했다면 해결하기 어려웠을 문제도 빠르게 이해하고
해결할 수 있어 정말 유익한 시간이었습니다. 

혼자 공부할 때는 어려움에 봉착할까봐 두려웠는데 개발자 분들이 도움을 주신다고 생각하니 뭔지 모를 

자신감이 붙더라구요!✨ 얼른 프론트엔드 캠프가 시작되어서 더 많은 부분을 배우고 싶다고 생각했습니다.

 

마무리

바닐라코딩에서 보낸 저의 일주일은 저에게 정말 값진 시간이였어요. 솔직히 게으른 제가 체험 수업을 제가 잘 해낼 수 있을 지 걱정을 많이 했어요. 체험 수업이라는 핑계 아래 제가 쉽게 게을러질 것 같았거든요...하지만 놀랍게도 켄님도 알차게 보냈다고 말씀해주실 정도로  바닐라코딩 체험 수업하면서 정말 의미있게 보냈어요!!  그 이유가 뭔지 고민해보면 환경도 환경이지만 성장하는 제 모습이 좋았던 것 같아요. 그리고 그 성장이 의미 없지 않다는게 계속해서 증명이 되니까 더 열심히 하게 돼요. 그 증명이 계속 되다보면 나중엔 그냥 열심히 하게 되는 것 같아요.  이 시간 한올 한올이 도움이 된다는걸 무의식적으로 알고 있는 느낌..?

짧게 요약하자면, 바닐라 코딩에서는 단순히 기술을 배우는 것이 아니라, 개발자로서의 태도와 성장하는 법까지 배울 수 있었습니다. 또한 켄님,명재님,태우님을 보면서 이 분들이 제 커리어를 위해 이렇게 진심이신데, 저도 그 진심에 열배로 보답해야겠다고 생각했습니다. 제 마지막 기회 바닐라코딩에서 불태워보려구요!! 🔥🔥

그리고 혹시 저와 같은 조건으로 부트캠프를 찾고 계신 분이라면 정말 강추드립니다!! 

여기 링크도 같이 첨부해드릴게요 : https://www.vanillacoding.co/

마무리로 저의 꽉 채워진 체크리스트와 보여드리며 마치도록 하겠습니다:)

 

바코에서 두번재 1:1 피드백을 진행하였다. 
이번에는 태우님과 진행하였는데, KPT 회고법이 무엇인 지와 사용법에 대해 상세히 알려주셨다.

K : Keep

P : Problem

T : Try

KPT 회고법은 나의 나쁜 습관은 버리고 좋은 습관을 유지하는 회고법 중 하나이다.


 

1. Problem: 나의 문제가 무엇인 지 최대한 상세히 작성한다. 그리고 그 문제가 왜 일어났는 지에 대한 이유도 생각해보고 나열한다.

2. Try: 문제를 고치기 위해 행동 가능한 모션들을 적는 곳이다. 문제의 요점을 파악 한 뒤 그 문제를 해결할 수 있는 실천 방안을 적는 것과 같다. 단, 의지에 의해서 실천할 수 있는 것은 가능한 적지 않는 것이 좋다 예) 문제 : 늦게 자기 -> try : 일찍 자보려고 해보기

3. Keep : try를 해본 결과, problem이 나아지거나 개선되었으면 좋은 습관으로 판단하고 이걸 유지시키는 것이다. 


1:1 피드백을 통해 태우님과 간단하게 KPT 회고법을 작성해보았다.

체험 기간 동안 작성한 체크리스트를 통해 미처 실행되지 못한  판단된 일을 찾고, 그것에 대해 같이 KTP 회고법을 적용해보았다. 

간단하게 작성된 Problem, Try이다.
이 회고법에 대해 알게됨으로써 문제를 막연하게 의지로 해결하기 보단 나 자신에 대해 코딩을 짠다고 생각하고 나쁜 코딩은 좋은 코딩으로 고치고 좋은 코딩은 유지 시켜보겠다고 마음 먹게되었다. 앞으로 많은 문제가 생길 나에게 좋은 시작이다!!!!!

오후 2:32 2024-01-18 <QuestTrackerView> 어플 종료 후 퀘스트 초기화 이슈 때문에 Start함수에 조건문 추가 (실패)

오후 2:45 2024-01-18 <QuestTrackerView> 어플 종료 후 퀘스트 초기화 이슈 때문에 Start함수 변경  - Start 함수와 상관없는 이슈임을 밝힘 (실패)

오후 2:51 2024-01-18 <UserInfoManager> 어플 종료 후 퀘스트 초기화 이슈 때문에 save함수 load함수 추가 (실패)

오후 3:00 2024-01-18 <QuestTrackerView> 어플 종료 후 퀘스트 초기화 이슈 때문에 Start함수에 문제 함수 중단점 걸어보기 (실패)

오후 3:19 2024-01-18 <QuestGiver> 어플 종료 후 퀘스트 초기화 이슈 때문에 Save함수 실행 (실패) 

오후 4:21 2024-01-18 어플 종료 후 퀘스트 초기화 이슈 때문에 save 되는 곳에 PlayerPrefs.Save(); 추가 (실패!!)

오후 6:22 2024-01-18 Game내 HigestStage 변수에 접근해서 문제였음 가구 처럼 리스트 화해서 값 넣은 후 리스트 내 변수를 건들이니까 해결 됨 (해결!!)

[문제]

https://www.acmicpc.net/problem/1931

 

1931번: 회의실 배정

(1,4), (5,7), (8,11), (12,14) 를 이용할 수 있다.

www.acmicpc.net

[문제 풀이]

 

- 공책에 도식화

끝을 정렬하면 될 듯?  끝 값과 다른 회의에 첫 값 비교 후 첫 값이 더 크면 그걸 다시 끝 값으로 삼기

 

- 회의 시간 pair 사용

두 변수가 하나의 변수 처럼 사용될 때 (대신 두 값 따로 사용할 수 있는 무언가여야함) 검색하다가 pair 발견

Pair 클래스는 사용자가 지정한 2개의 타입의 데이터를 저장하는데 사용합니다.

첫번째 인자 p.first로 꺼낼 수 있기도 하고 해서 좋을 듯 

 

- sort를 해야하는데 pair라 어떻게 sort되는지 궁금해 출력해봄

원리 파악 완료 v.first 요소들만 sort - 끝 값 비교할거라 이대로 sort하면 안될 듯 싶어 push 할 때 first에 끝 값 넣음

 

 

해결!

'Coding Test > 백준 문제풀이' 카테고리의 다른 글

[백준] 19942 다이어트  (0) 2023.11.14
[백준] 2776 암기왕  (0) 2023.10.19

[문제]

https://www.acmicpc.net/problem/19942

 

19942번: 다이어트

식재료 N개 중에서 몇 개를 선택해서 이들의 영양분(단백질, 탄수화물, 지방, 비타민)이 일정 이상이 되어야 한다. 아래 표에 제시된 6가지의 식재료 중에서 몇 개를 선택해서 이들의 영양분의 각

www.acmicpc.net

[푼 방식]

재료라는 변수를 담을 곳을 고민하다 구조체를 만들기로 결정함 이 구조체는 단,지,탄,비,재료가격 변수가 포함되어있음

 

- vector을 가지고 있는 int 자료 vector  키를 가지고 있는 map을 사용함 키에 중복된 값도 들어가지 않는 점도 이용  자동으로 오름차순으로 정렬도 됨 cost 합 vector int가 여러개를 뭐가 담을 수 있나 여러개 써보다가 얼마전에 배운 map쓰니까 된다.

 

 

마지막 결과만 남았는데 에러가 뜬다..;; 제일 cost적게 나오는거 출력하면 되는거 아닌가?

 

바보였다... 여기서 이미 최저를 걸러주고 있으니 ret만 출력하면 된다

ret 초기값 설정안해줘서 오류난것도 해결했다...!

해결..!...

이었으면 좋겠지만 runtime 오류남.. 처음보는 오류였다,,

 

머리 싸매다가 초기값 막 설정하고 생각나서 다들 987654321로 설정해주길래 그렇게 했더니 해결됨...

진짜 해결

 

'Coding Test > 백준 문제풀이' 카테고리의 다른 글

[백준] 1931 회의실 배정  (0) 2023.12.12
[백준] 2776 암기왕  (0) 2023.10.19

DFS는 그래프를 탐색할 때 쓰는 알고리즘이며 어떤 노드부터 시작해 인접한 노드들을 재귀적으로 방문하며 방문한 정점은 다시 방문하지 않으며 각 분기마다 가능한 가장 멀리 있는 노드까지 탐색하는 알고리즘입니다.

수도코드

DFS의 수도코드는 다음과 같습니다. 

수도코드(pseudocode)? 는 프로그램의 로직을 표현하기 위해 쓰이는 코드입니다. 주로 어떤 알고리즘이 어떠한 로직을 갖고 있는 지 나타내기 위해 쓴다. 

 

 

<설명>

어떠한 정점 u의 visited를 참으로 바꾸고 u로 부터 연결되어있는 v지점을 탐새합니다.

이 때 방문되어있지 않은 노드에 대해 재귀적으로 DFS를 호출합니다. 

재귀적으로 1,2,4번까지 방문한다. 또한, 4번에서 다시 2번으로 가려고 했지만 이미 방문한 노드이기 때문에 다시 방문하지 못하고 5번으로 간다. 

 

1 - 2 - 4 -5 - 3

 

DFS 구현방법

1. 돌다리 두드려보기

visited 되어있는지 확인

2. 일단 GO

일단 방문되어있던 안되어있던 무조건 dfs를 호출하고 해당 함수에서 만약에 방문되어있다면 return 해 함수를 종료시키는 방법입니다.

 

+ Recent posts