Kwangkki

최근 내 개발 지식뿐만 아니라 디자인 지식까지 점프한 경험에 대해 공유하고자 한다. 웹 개발 팀 프로젝트 최근 거의 한 달 동안 진행한 웹사이트 개발 프로젝트에 참여했다. 디자이너가 없어 이제 막 개발 공부를 시작한 프론트 개발자 2명이서 머리를 싸맸다. 디자인을 어떻게 하면 좋을까 여러 가지 의견을 나누면서 우리는 얼마나 어떻게 예쁘게 만들까를 뒤로하고 한 가지 키워드에 대해 먼저 생각해 봤다. 재사용성 높은 디자인 예전에 유튜브 EO 채널에서 토스 디자인 시스템에 대한 영상을 본 적이 있는데, 비슷한 디자인과 패턴을 묶어 시스템화함으로 재사용성과 생산성을 높였다는 이야기였다. 퍽 감명적이었는지 한동안 토스 디자인 관련 블로그를 찾아 헤맸었던 기억이다. 그래서 이번 프로젝트에는 재사용성 높은 디자인을 ..

주말 내내 디자이너의 피그마 디자인 시스템을 리액트 컴포넌트로 적용하기까지의 과정을 자동화하는 시스템을 구축해 봤다. 그 과정을 복기할 겸 블로그에 정리해 봤다. ...부트캠프 강의가 종료되고 팀 프로젝트가 시작되었다. 팀이 배정됐고 긴긴 회의를 거쳤다.회의 중 디자인에 관한 이야기가 나왔고, 디자이너 외주를 맡길지 직접 할지 고민을 했다. 금액, 커뮤니케이션, 프로젝트 기간 모든 것을 따졌을 때 직접 디자인하는 것이 효율적이라고 생각했다. 1. 리액트 개발에 적합한 디자인이 나올 수 있는가?2. 수정이나 추가될 페이지도 많을텐데 커뮤니케이션이 즉각적이고 빠르게 될까?3. 사실상 프로젝트 기간이 3주일인데 1주일 안에 디자인 나올 수 있을까?4. 위 사항을 만족하는 디자이너라면 금..

React의 큰 장점은 Hooks의 존재가 아닐까 싶다. 단순한 버튼 클릭 함수라도 두 번 이상 사용한다면 custom hook으로 만들어 재사용성을 높일 수 있다. hook? react에서 hook은 함수형 컴포넌트를 클래스 컴포넌트와 같은 기능으로 사용할 수 있도록 만들어 준다. 클래스는 하나를 만들어두면 복제해서 마구마구 쓸 수 있으니까 react에서 제공하는 hook 리액트는 자체적으로 만든 내장 hook이 존재한다. 그중 자주 사용하는 5개를 간단하게 설명하면 아래와 같다. useState 아마 리액트에서 가장 많이 사용하는 hook 일지도 모른다. 처음 배울 때 단순히 리액트에서 사용하는 변수라고 생각하니까 이해가 쉬웠다. 값을 추가하고 변경할 때 사용한다. useEffect 리액트의 생명주기..

데이터 요청 후 응답 전까지 버튼 비활성화 하기public API로 파이어베이스 연습 도중 버튼 중복 클릭을 막아야 겠다는 생각이 들었다.이유는 아래 "강쥐 사진 보기" 버튼을 클릭하면 데이터를 불러 올 동안 빈화면이 나오는 데, 이때 버튼이 활성화 되어있다는 거.그럼 버튼을 광클할 수 있고,  api 요청을 여러번 할 수 있다. 아직 첫 번째 데이터를 불러오지도 못했는데 여러번 api를 요청해버리면 강아지 사진이 빠르게 연속적으로 지나가버린다. 이를 막기 위해 데이터를 받아오기 전까지는 버튼을 비활성화하는 방법을 구현해봤다. 리액트에서 useState로 isChange이라는 boolean 값을 주고 버튼을 누르면 버튼이 비활성화되고(true가 버튼 비활성화) 데이터 get 작업이 끝난 후 다시 버튼을 ..

부트캠프 초부터 node.js, next.js, react 등 여러 가지 설치와 세팅을 거쳤는데 node.js는 어떤 역할을 하는 것인지 그동안 몰랐다. 어느 정도 익숙해진 지금 node.js가 무슨 역할을 하는지 알아야겠다 싶어 정리해 봤다. node.js 👉 node.js를 간략하게 말하면 JavaScript로 크롬, 인터넷익스플로어와 같은 브라우저가 아닌 PC OS에 접근하거나 서버를 구축할 수 있도록 런타임 환경을 제공하는 것이다. 위 문장을 이해하고자 얼마나 많은 자료를 찾고 질문을 했던지.. 내가 이해한 것은 아래와 같다. 우선 자바스크립트가 작동하기 위해서는 우리가 영어로 작성한 코드를 컴퓨터가 이해할 수 있는 0101101과 같은 byteCode로 바꾸는 과정이 필요하다. 이 역할을 크롬 ..

2023년 첫 달은 하루하루를 꽉꽉 채워 지냈다.본격적으로 오프라인 부트캠프가 시작됐고 다른 무언가를 할 여유도 없이 훌렁 출렁 지나갔다.바쁘고 정신없으면 하루가 짧다고 하는데, 12~14시간을 정신 없이 보내니까 하루가 굉장히 길게 느껴지더라. 이제 4주가 지났는데, 네 달은 부트캠프를 한 것 같다.부트캠프부트캠프에서의 하루는 오전 9시부터 밤 9시까지 쉴 틈도 없이 배우고 실습한다. 한 달을 이렇게 지내니까 길을 걸으면서도 머릿속으로 코딩할 지경이다. 캠프의 강사님이나 멘토님들은 열성적이다. 이직을 위해 여기저기 면접을 보러다닌다는 멘토님은 면접 후기를 알려주며 자기가 만든 포트폴리오를 보여주었다. 취업시장이 어렵다는 말도 더했다. 마지막으로 한 가지 당부한 것은 "여러분 개발자가 되세요". 함축적인..

이벤트 버블링, 리액트를 사용하다보면 클릭이 여러번 되는 경우가 있다. 이럴 때 이벤트 버블링 현상을 의심해볼 수 있는데, 이 개념을 모르면 에러를 해결하기 어렵다. 이벤트 버블링 버블링 현상을 간단하게 표현하면, 특정 태그나 요소에 이벤트가 발생하면 상위 요소인 부모 태그에 이벤트가 전달되는 것을 말한다. 이벤트 버블링 현상 예시 아래 코드를 보면 Box라는 div 아래 span, 그 아래로 button이 있는 계층 구조다. 여기서 button을 누르면 +1이 될 것이라는 예상과 다르게 321의 결과가 나온다. button을 누르는 순간 이벤트 버블링 현상으로 부모 요소인 span과 div의 onClick 이벤트가 모두 작동하기 때문이다. 이 버블링 현상은 자식에서 부모로만 전파되며 그 반대 현상인 상..

리액트를 사용한다면 State라는 것을 정말 많이 사용하게 된다. 하지만 state의 작동원리나 개념을 잘 파악하지 못한 채로 사용하다 보니 에러를 마주해도 해결하기가 어려웠다. state에 대해 좀 더 공부해야할 필요성을 느끼고 정리해봤다. state 형태 state는 리액트 컴포넌트에서 변수로 활용한다. 세가지 형태로 이루어져 있다. state : 변수 setState : 변수를 바꾸는 기능 useState : 변수를 만드는 기능 const [state, setState] = useState(); //형태 const [title, setTitle] = useState("제목"); //예시 setTitle("부제목") // setState에 다른 값을 입력하면 state 값이 바뀌게 된다. state를..

리액트를 활용할 때 효율적이고 빠른 유지보수를 위한 폴더구조를 나누는 패턴이 존재한다. 가장 흔하게 쓰이는 패턴으로는 container/presentational 패턴, hooks 패턴, atomic 패턴이 있다. 현재는 hooks 패턴이 많이 쓰이지만, 여전히 container / presentational 패턴을 사용하는 사람들이 많기 때문에 알아는 둬야한다고 한다. 그래서 직접 써보며 알아보기로 했다. 우선 폴더 구조를 나눠봤다. 기존에 한 파일에서 작업했을 때는 다음과 같았다. const FETCH_BOARD = gql` query fetchBoard($number: Int) { fetchBoard(number: $number) { number writer title contents } } `; ..

커밋 후에 push 과정에서 실패 메세지가 뜬다. 체크해본 것은 아래와 같다. 1. git remote url도 레파지토리 경로 확인 2. 폴더에 .git 있는지 확인. 혹시 다른 자식 폴더에 .git 파일 있는지 두가지를 체크해봤지만 별 문제가 없었다. 근데 알아보니 README 파일 수정 후 이런 에러가 뜰 수 있다고 한다. 생각해보니 깃허브에서 REAME 파일을 생성하고 수정했었다. 로컬에서 작업한 것이 아니고 깃허브에서 직접 작업하다보니 이런 충돌이 발생한 것 같다. 이런 경우 몇가지 해결방법이 있다. 1. git pull 위 상황 자체가 remote의 변경 사항이 로컬 변경 사항과 일치하지 않으면서 충돌한 것이다. 그렇기 때문에 이 둘을 일치시켜주면 되는데 그 명령어가 바로 git pull을 사..