코드스테이츠44기 프론트엔드

목금 이틀동안 솔로 프로젝트로 나만의 아고라스테이츠를 만들어보았다. 섹션1에서 배웠던 개념들을 모두 사용하여 하나의 웹페이지를 구현해보는 프로젝트였다. 사실 예전에 졸업 프로젝트를 만든다던가 해커톤이나 종종 프로젝트를 참여한 적이 있어 큰 부담은 없었던 거 같다. 하지만 확실히 느낀건 그때보다 지금의 내가 훨씬 성장했다는 점이다. 예전에 화면 레이아웃을 구성할 때 flex 박스 사용방법을 잘 몰라 아무곳이나 다 flex를 때려박고 고생을 했던 기억이있는데 섹션 1에서 학습한 대로 부모요소에 적용하는 속성과 자식요소에 적용하는 속성을 따로 두어 적용하니 수월하게 레이아웃을 손 볼 수 있었다. 그럼 서론은 여기까지 적고 아고라스테이츠를 구현하면서 느낀점이나 어려웠던 점 알게된 점을 중심으로 글을 작성해보겠다..

오늘 포스트는 내 머릿속에 존재하는 개념 중 헷갈렸던 개념이나 새롭게 알게된 개념에 대해 카테고리를 나누어 정리하고자 한다 ! LetConst 내 머릿속 "const 를 사용하여 변수를 선언하면 어떠한 변수든 재할당이 금지되는 것이다 ! " 라고 생각했었다. 항상 봐왔던 const 를 사용한 예제에서는 문자열이나 숫자 타입만 다뤘었던 거같다. 그래서 배열과 객체에서는 const 로 사용하는 예제를 접해본 적이 없었다. 따라서 나는 배열과 객체를 const로 선언하면 당연히 재할당이 금지되므로 새로운 요소를 추가하거나 삭제하는 것도 금지될 줄 알았다. 새롭게 알게된 사실 1. const 로 선언된 배열 , 객체의 경우 새로운 요소를 추가하거나 삭제할 수 있다. const arr = []; const toB..

나는 현재 윈도우10을 사용중이여서 실습을 진행하기위해 컴퓨터에 우분투를 설치했다. 처음에는 튜토리얼대로 따라하면 금방 설치 할줄 알았지만 생각보다 시간이 오래걸렸고, 설치 도중에 수많은 오류와 마주했다. 결론부터 말하자면 내 컴퓨터는 고장났다. 더이상 전원이 들어오지않고 아예 먹통이 되어버렸다. 사실 코드스테이츠에 들어오기 전부터 사전안내문서로 우분투 설치를 하라고 했었지만 새로운 컴퓨터를 구매할 계획이 있어서 컴퓨터를 구매한 후 우분투를 설치하려고 했었다. 하지만 어떤 컴퓨터를 살지 너무 고민이 되었고, 여러가지 학습으로 인해 컴퓨터를 알아볼 시간이 없어서 그동안 윈도우 환경에서 실습을 진행했었는데 당장 오늘 우분투를 설치하려고해서 이런 결과가 발생한거 같다... ㅠㅠ 부랴부랴 usb를 구매하고 우분..

오늘부터는 새로운 페어분과 활동하게 되었다. 오늘의 활동으로는 계산기의 기능을 구현하는 활동이었다. 처음부터 만드는 것이 아니라 틀은 잡혀있고 그 안의 기능들을 구현하는 것이었다. 구현해볼 계산기는 위의 칸처럼 첫 번째 숫자칸, 연산자 칸 , 두 번째 숫자칸, 결과 칸 이렇게 나누어져있었고 버튼을 클릭할 시 칸에 적절한 버튼 텍스트가 뜨게 구현해야 했다. 예전에 이와 비슷하게 버튼을 클릭했을 때 .innerHTML 을 활용하여 화면에 텍스트를 변경했던 기억이 있어 그렇게 해보았는데 코드를 다시 살펴보니 아래 처럼 사용할 수 있게 변수로 선언되어있었다. const firstOperend = document.querySelector('.calculator__operend--left'); // calculat..

오늘은 하루종일 페어프로그래밍 활동을 진행하였다. 어제 학습한 조건문과 반복문 문제을 페어분과 풀어보았다. 여러 문제를 풀어본 적이 있어서 문제 푸는데에는 어렵지 않았지만 초반에는 내가 푼 방법을 페어분께 설명해주는 부분에서 내가 이해하고 있는 부분을 잘 전달해주지 못한 거 같다. 하지만 점점 문제를 풀고 풀이를 설명하는 과정에서 의사코드를 작성해서 설명해드리니 초반에 설명한 것 보다는 생각이 잘 전달된 것같다! 설명하면서 한번 더 문제를 파악하고 그에 맞는 코드를 설명해드리니 개념이 잘 정리된 거 같고 다음에 비슷한 문제를 풀게 된다면 망설임 없이 풀 수 있을 것이라는 자신감도 생겼다. 오늘은 코플릿 문제 중 헷갈려서 넘어갔다가 다시 풀어본 문제를 위주로 블로그를 작성해 볼 것이다. 조건문 addOne..

오늘은 내가 생각하는 코딩의 기초이자 코딩의 꽃 조건문 ,반복문 , 함수에 대해 공부해보았다. 어제는 간단하게 변수와 타입에 대해 배웠었는데 오늘은 조금더 심화된 부분을 배운 거 같다. 다른 언어들과 유사한 부분이 많아서 공부하기는 쉬웠던 거 같다 ! 공부를 하면서 헷갈렸던 부분이나 중요한 부분을 작성해보겠다. 동치연산자(===) 동치연산자는 두 피연산자가 동일하면 true, 그렇지 않으면 false를 반환한다. !== 는 반대로 두 피연산자가 동일하지 않으면 true, 동일하면 false를 반환한다. 예전에 나는 조건문을 쓸 때 항상 == ,!= 를 써왔었다. 자바스크립트에는 === 가 있는걸 알고 있음에도 다른 언어에서 쓰이듯 == , != 를 써왔었는데 오늘 멘토분께서 자바스크립트에서는 무조건 동치..

오늘부터 자바스크립트에 대해 공부하게 되었다. 자바스크립트는 예전에 공부했던 c java python 등 다른 프로그래밍 언어보다 가장 공부할 때 흥미로웠던 언어인거 같다. 그만큼 매력적이면서 어려웠던 부분도 많았던 거같다. 기초부분은 다른 언어들과 비슷한 부분이 많아 간단하게 공부하고 넘어갔던 기억이 있다. 따라서 기초부터 다시 차근차근 복습해가면서 내것으로 만들겠다는 생각을 했다. 가끔 알고리즘 문제를 풀면서 배열의 몇번째 위치 찾는거 그거... 그 뭐였지 ? 하면서 구글링하는 일이 많았는데 다 기초가 부족한 탓이었던 거 같다. 따라서 처음부터 다시 기초부터 탄탄하게 쌓아야겠다 !! 오늘 배운 부분은 코드실행 그리고 타입과 변수이다. 이 중 내가 헷갈렸거나 기억이 잘 안났던 부분에 대해서 정리해보겠다..

오늘은 어제부터 이틀간 페어프로그래밍 활동으로 계산기 목업을 만들어보았다. 틀만 잘 잡으면 디자인은 얼추 하면 되겠지 하는 내 생각에 뒷통수라도 치듯.. 계산기를 디자인하는데 걸리는 시간이 레이아웃 작업보다 4배는 더 걸렸던 거 같다. 아무래도 동기들과 작년 기수 선배분들의 작업물을 보고 내 작업물을 보다보니 많이 부족함을 느끼기도 했고 살짝 부끄러웠던 거 같기도 했다.. 그래서 어제 정규 세션이 끝나고 잠깐의 휴식 후 구조부터 다시 차근차근 시작해나갔다. 디자인 또한 생각이 나는대로 메모장에 적어두고 하나씩 내가 생각한 디자인의 배경을 골라보았다. 그렇게 몇시간 동안 찾아본 결과 또한 .. 찾지 못하였다... 그래서 대충 배경색을 하늘색으로 설정해두고 잠에 든 거 같다. 그렇게 오늘이되고 9시부터 페어..

오늘은 css를 공부하면서 가장 큰 어려움을 겪었던 flexbox를 공부했다. 사실 공부라기 보다는 필요할 때마다 구글링을 해서 찾아보며 하나하나 실패를 거듭해가며 써왔지만 이렇게 개념부터 차근차근 공부해간건 오늘이 처음인거 같긴 하다. 그래서 더 열심히 공부하고 학습한 부분이기도 하다. Flexbox로 레이아웃을 구성한다는 것은 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다. 사용 방법은 display: flex 를 선언해주면 된다. 여기서 중요한 점이 있는데 이 속성은 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정한다는 점이다. 아래의 코드에서는 부모요소는 이고 자식요소는 3개의 이다. box1 box2 box3 각 요소들을 구분하기 위해 아래의 CSS를 적용해 볼 것이다. ma..