Headwing

이번주는 리액트 숙련 주차로 다양한 것들을 배웠다. 리액트의 기본적인 훅인 useEffect와 리덕스, 라우터에 대해 배웠다. 그리고 지난 주에 한 과제를 배운 리덕스와 라우터를 적용해 바꿔보며 응용해보았다. 생각보다 일찍 끝나서 코딩애플 강의도 좀 듣고, 마지막 남은 학기 시험도 보고 왔다. 리액트 훅이 나오기 전에는 컴포넌트의 라이프 사이클을 관리하기 위해서 주로 클래스형 컴포넌트를 사용했다고 한다. 물론 state 관리도 가능했기 때문이다. 클래스형 컴포넌트를 다음과 같이 세밀하게 컴포넌트의 생명주기를 일일히 코드로 설정해주는 방식이다. 라이프 사이클들은 크게 세 가지로 나눌 수 있다. 생성될 때 (마운트 될 때 - mount) constructor, render, componentDidMount ..

오늘은 항해99의 주특기 숙련주차 과제인 Todo 리스트 페이지를 리덕스와 라우터를 사용하여 만들기를 완료하였다. 입문 주차에는 그냥 useState로만 만들었는데 리덕스를 사용해서 전역으로 state를 관리하는 부분이 낯설면서도 생각보다 할 만했다. 사실 저번주 금요일만 해도 자바스크립트 문법 공부가 너무 힘들어서 (딥다이브를 괜히 건들였다...ㅠ) 울적했는데, 저번주 토요일부터 계속 리액트를 하면서 개발이 너무 재밌있었다. 어려운 문법 공부보다 구현하는게 나하고 훨씬 잘 맞는 것 같다. 잠을 많이 못잤는데도 개발만 하면 너무 재밌어서 졸리지도 않고 기분이 좋아졌다. 내 생각대로 잘 돌아가는 것도 재밌고, 잘 안돌아가도 여러번 시도끝에 성공해내는 것도 재밌었다.ㅎㅎㅎ아무래도 개발이 천직같다고 느낀 하루..

이번주는 항해에서 주특기 입문 주차였다. 나의 주특기인 리액트로 간단한 Todo 리스트를 작성할 수 있는 페이지를 만드는 것이 과제였다. 제목과 내용을 등록하면 진행중인 todo 리스트에 등록되고 완료버튼을 누르면 완료된 리스트에 추가가 된다. 반대로 완료된 리스트에 있는 todo게시물의 취소버튼을 누르면 다시 진행중인 todo로 바뀌게 된다. 삭제를 누르면 해당 todo 게시물이 삭제된다. Vercel을 통해 배포까지 진행하였다. React App todo-pearl-ten.vercel.app 이번 과제로 기본적인 리액트 개념인 state, props, 리렌더링에 대해 배우게 되었다. 리액트는 SPA 방식으로 MPA와 다르게 가상돔을 사용하여 변경된 부분만 따로 요청하는 방식이다. 그렇다보니 useSt..

이번주는 알고리즘 주차였다. 일주일 동안 프로그래머스 중간 단계문제들 26문제를 풀었다. 사실 자바스크립트로 알고리즘 문제는 처음 풀어봐서 처음에는 달리기반에 온 것을 약간 후회할 뻔 했지만, 그래도 일주일 동안 실력이 많이 늘은 것이 보여서 매우 뿌듯해하는 중이다. 일주일 전만해도 깊은 복사, 얕은 복사도 모르고 call by value도 몰랐던 나였다ㅋㅋㅋ 알고리즘뿐 만 아니라 자바스크립트라는 언어 자체에 대한 이해도가 높아졌다. ES라는 자바스크립트의 언어 규격, 스펙에 대해 알게 된 점도 많다. 특히나 ES5에서 ES6 (정확히는 ES 2015이다.)으로 넘어오면서 달라진게 많아졌다고 한다. 가장 중요한 3가지에 대해 설명하자면 먼저 let, const 키워드가 추가되었다. 기존의 변수는 함수 s..

아래와 같이 map함수를 사용함으로써 반복적으로 사용되는 html을 간단히 나타낼 수 있다. 그런데 여기서 각각의 게시물에 대해 따봉을 클릭할 때마다 따봉의 개수를 게시물마다 따로 업데이트해야하는데, 이 부분이 조금 어려웠다. 원본이었던 따봉 배열을 먼저 얕은 복사를 한 뒤에 수정을 해야하기 때문이었다. 이것에 대해 기술매니저님께 물어보니, 리액트의 클로저라는 특성때문에 원본을 쉽게 바꾸지 못한다고 한다. 그래서 반드시 복사를 한 뒤 복사본을 수정하고 변경함수에 넣어주어야한다는 것이다! 원본을 바꾸려면 아래의 따봉변경과 같은 useEffect 변경함수안에다가 로직을 짜면 가능하다고 한다. 그런데 그렇게 로직을 짜면 복잡한 로직은 가독성이 떨어지므로 따로 함수를 만드는 것이 좋다고 한다. { 글제목.map..

오늘부터 코딩 애플의 리액트 강의를 듣기 시작했다. 가장 먼저 JSX 문법 세가지를 배웠다. 첫번째는 태그에 클래스를 설정할 때에는 className으로 해야한다는 것. 두번째로 중괄호를 이용하면 어디든 변수를 중괄호에 넣어 나타낼 수 있다는 것이다. 이것을 데이터 바인딩이라고 한다. 세번째로 태그 내에서 css를 추가할 때 그냥 html과 다르게 JSX에서는 아래와 같이 object형태로 넣어주고 속성도 "-"기호를 쓰면 안된다는 것이다. 또 value에도 반드시 따옴표안에 넣어주어야한다. import logo from "./logo.svg"; import "./App.css"; function App() { let post = "강남 우동 맛집"; return ( 블로그임 {/* 이렇게 변수를 중괄호..

드디어 항해 1주차 미니 프로젝트가 막을 내렸다. 1주차를 해보면서 정말 막막한 점도 많았고 그걸 극복하면서 성취감과 뿌듯함을 느낄 수 있었고 점점 개발자화되어가는 내 자신을 발견했다. 정말 하루하루가 마치 내 인간성을 개발자로 개조해나가는 기분이었다. 그만큼 힘들었지만 보람차기도 했다. 완성된 결과물의 유튜브 링크다. 우리조는 자취생을 위한 레시피를 올리는 게시판을 컨셉으로 했다. 간단한 요리를 올리는 게시판이다보니 5줄 이내로 올리도록 하는 "Five Line Recipe"라는 이름으로 하였다. 내가 초반에 맡은 부분은 로그인/회원가입 페이지를 구현하는 것이었는데 이에 필요한 쿠키와 토큰의 개념을 처음 접하다보니 생소한 점이 많았다. 로그인이 성공하면 쿠키라는 브라우저 임시저장소에 JWT토큰을 저장하..

1. A부터 B까지 범위를 지정했을 때 범위 안의 숫자를 모두 곱하는 함수 만들기 (p218, 1번) function apple(a, b) { let output = a for (let i = a; i