Je개발 일지

오늘은 이번에 패캠 인강에서도 포스팅했던 useState 와 관련된 프로그래밍을 했다. 패캠 인강에 기술 블로깅 할 때는 내가 인강에서 배운 내용들을 이해하고 있었을 때, 이 로직이 왜 필요하고 사용됐는지, 왜 그렇게 쓰였는지를 알고 나서 글을 작성한다. 그러니까 나는 useState에 어느 정도 감이 있었고, 그 개념이 무엇인지를 알고 있다는 것을 의미한다. 그러나... 오늘 실제로 맨땅에 헤딩으로 코딩을 작성하려고 보니까 분명히 아는 개념인데 제대로 작동하지 않아 너무 많이 애를 먹었다. 작동하지 않은 이유는 내가 useState의 문법에 어긋나서 썼다기 보다는 그냥 내 바보같은 실수(name = "username" 인데 name = {username} 이런 식으로 쓰는 어이없는 실수) 때문에 그렇게..

계속 보면 정든다고, React 계속 보니까 정든다. 아니 이제는 정이 드는 것을 넘어서 더 알아가고 싶다. React 왜 이렇게 좋아...? 프론트엔드 개발자들이 React에 그렇게 환호성을 지르던데 그 이유를, 아직 개발의 개자도 잘 모르는 내가 느끼고 있다. 사실, 여태까지 나는 HTML, CSS 만을 갖고 생코딩을 했기 때문에 더 강렬하게 느끼는 것일 수도 있다. 분명, React는 새로운 문법도 익혀야 하고, 여러가지로 굉장히 어려운 과목이기는 하지만, 그럼에도 이건 진짜 배워야 겠다는 생각이, 정복해야겠다는 생각이 하면 할수록 강하게 든다. 혼자서 패캠 강의를 들을 때만 해도 그렇게까지 느끼진 못했는데 내가 직접 만들어보니 정말, 이건 혁신이라는 말밖에 나오지 않는다. 정말 열심히 공부해서 R..

그 대단하신 React를 오늘부터 알현하게 됐다. 망했다. 사실 좀 미리 예습하기 위해서 패캠 강의를 듣고 있었는데, 패캠 강의를 듣고도 이해가 안 돼서 이해해보려고 엄청 쩔쩔 매다가 결국 코드 스테이츠의 React 시간이 오게 되었다. 이렇게 될 줄 알았으면 그냥 바닐라 자바스크립트 복습이나 할 걸. 괜히 React 한다고 패스트 캠퍼스 강의 더 많이 듣지도 못하고, 복습 기술 블로깅도 못하고 있었다. 뭐... 그래도 덕분에 React를 익히는데 다른 분보다는 굉장히 빠르게 익힌 것 같다. 이번에 React는 4일에 걸쳐서 진행되는데 나랑 이번에 맺게된 페어분은 이번이 개발 처음이신지라... 어쩌다 보니 내가 주도적으로 진행하게 됐다. 그래도 페어분께서 어떻게든 방법 찾아내시려고 노력하시는 편이라 다행..

3-2) input 상태 관리하기 이번에 만들어 볼 건 input 창에서 사용자로부터 값을 입력받으면 바로 화면에 입력받은 값이 나오도록 설정하고 초기화 버튼까지 만들겠다. input 도 사용자로부터 입력을 받고 그에 따라 화면에 값이 나오는 동적인 상황이 발생하므로 useState를 사용해줘야 한다. 수도 코드를 작성하면 다음과 같다 1. useState를 통해 input의 기본값과 동적 상태 값을 구조분해 할당으로 가져온다. 2. 동적으로 변화될 값은 input으로 입력받는 내용이어야 한다. 3. 초기화용 버튼을 생성한다. 4. 초기화 버튼을 누르면 변화될 값이 빈 문자열로 바뀐다. 그렇다면 하나씩 작성해보도록 하자. 먼저 1번부터 하면 const [text, setText] = useState(''..

오늘 맺은 페어 분은 수학과 과련된 전공을 하셨고, 파이썬 공부를 이미 하신 분이었다. 오늘은 고차함수를 배우는 날이라서 조금은 힘겨웠을 주제였는데 페어 분의 도움으로 빠르게 끝낼 수 있었다. 고차함수 중에서 배열 메소드인 filter, map, reduce를 굉장히 많이 사용했다. 저번 패캠 인강할 때 이미 공부하고 복습했던 부분이었기에 굉장히 자신 있었지만, 확실히 아는 것과 쓰는 것은 많이 차이난다. 내가 정말로 안다고 하려면 내가 스스로 작성할 수 있어야 한다고 생각한다. 개념을 익힌다면 그것을 좀 많이 활용해보는 시간을 가져야할 것 같다. [ 오늘의 TODO ] 코드 스테이츠) 고차함수 개념 코드 스테이츠) Pair-Programming // 고차함수 코플릿 패스트 캠퍼스) 인강 3개 이상 듣기..

코드 스테이츠를 진행할수록 공부하는 시간이 쭉쭉 늘어나고 있다. 이 블로그 쓰는 시간도 늦어지고 있는게 보인다. 블로그를 평일에는 개념 정리하기 위해 사용하고 있지 않고 당일에만 써야하기 때문에 그냥 블로그부터 쓰고 개인 공부를 할까 고민중이다. 그 정도로 내가 따로 학습하는 시간이 너무 늘어났다. 지금 패스트 캠퍼스 강의를 듣지 못하는 것도 그런 이유 중 하나다. 뭐.. 이 경우에는 아직 내가 완벽하게 이해하고 있지 못해서(그 놈의 React) 복습을 알 때까지 철저하게 한 후에 다음 이어지는 강의를 들으려고 잠시 강의를 듣지 않는 것이기도 하지만, 예전처럼 패캠 강의 복습 시간을 길게 잡을 수 없는 결정적인 이유는 코드 스테이츠 관련 공부 양이 굉장히 늘어났기 때문이다. 지금 새로운 것들을 배우기 시..

[ 오늘의 TODO ] 코드 스테이츠) 목~금 내용 복습 // spread, rest, 구조 분해 할당 // DOM 패스트 캠퍼스) 인강 3개 이상 듣기 // optional 생활) 물 1L 이상 마시기 생활) 수-토-일 운동 [ 오늘의 복습 ] 1. Spread, Rest, 구조 분해 할당 1-1) Spread 주로 배열을 풀어 인자로 전달하거나, 각각의 요소로 넣기 위해 사용된다. 배열, 객체, 함수 인자 등에서 사용된다. function makeString(x, y, z) { return x + y + z } const strings = ["Hello", " ", "Codestates"] console.log( makeString(...strings)) // Hello Codestates 미리 혼선..

[ 오늘의 TODO ] 코드 스테이츠) 월~수 내용 복습 // Twittler Refactorying // 원시 자료형, 참조 자료형 // 스코프 // 클로저 패스트 캠퍼스) 인강 3개 이상 듣기 // optional 생활) 물 1L 이상 마시기 생활) 수-토-일 운동 // 운동 좀 하자... [ 오늘의 복습 ] 1. 원시 자료형, 참조 자료형 1-1) 원시 자료형 원시 자료형이란 객체도 아니며, Method도 없는 타입을 의미한다. 가장 대표적인 예로 String, Number, Boolean, undefined, null 등이 있고 그외 Symbol, bright 등이 있다. 원시 자료형의 가장 큰 특징은 하나의 데이터, 값 자체만을 담는다는 것이다. let string = "Hello World!"..

오늘은 spread, rest, 구조 분해 할당을 배운 뒤 어제 오늘 배웠던 것들을 koans 라는 것으로 문제를 페어와 함께 풀면서 정리하는 시간을 가졌다. 그런데 단순하게 문제를 푸는 것이 아니다. 풀어야 하는 문제들의 답을 미리 볼 수 있도록 했다. 답을 볼 수 있다? 이건 답을 생각해내는 그 과정이 매우 어렵다는 것을 의미한다. 나랑 페어 분은 최대한 답을 보지 않고 풀기 위해 노력했는데, 그럼에도 답을 보지 않고서는 풀기가 매우 어려운 것들이 있어서 답을 몇 번 참조했다. 심지어는 지금까지 배우지 않은 개념들을 사용해서 구글링을 엄청 하고 또 계속 찾아봐야만 했다. 어쨌든 결국에는 모든 답을 찾아내고, 스프린트 리뷰를 통해서 그 답들을 도출해내는 과정까지 익혔다. 이제 복습을 해야 내 것이 된다..

오늘은 CSS를 갖고 페이지를 직접 수정해보는 시간을 가졌다. 중점적으로는 flex 를 활용해봤다. 이전에 패스트 캠퍼스 '네카라쿠배 2기'를 지원했을 때(1차 합격하고 2차 때 떨어졌다. 망할 파이썬) CSS 파트는 거의 암기하듯이 달달 외운 적이 있기에 비교적 나에게 flex라는 개념은 다른 분들에 비해서 쉽게 다가왔던 것 같다. 그렇다고 그것을 높은 수준에서 다룬 것은 아니었다. 내가 오늘 주목하고 싶은 곳은 이점이다. 역시 개념과 실전은 다르다. 그렇다고 개념을 내팽겨치고 무조건 실전에만 몰두하라는 건 아니다. 내가 다른 분들보다 flex에 대한 개념을 더 쉽게 받아들였기 때문에 어떤 문제에 부딪힐 때 더 빨리 flex를 활용해야겠다는 생각을 한다는 점에선 좋았다. 다만, 내가 활용한 방식과 다른..