본문 바로가기

전체 글251

리액트,프론트 엔드, Page는 얼마만큼의 props를 가져야하나?, 컴포넌트에 프롭스 넘겨주기[20221207-TIL] 리액트, 컴포넌트와 프롭스 리액트를 검색해본다면 단연코 가장 빼놓을수 없는 말은 컴포넌트(component)와 프롭스(props, properties)일 것이다. 리액트는 공용컴포넌트를 만들어 비슷한 템플릿을 하나의 컴포넌트로 관리해줄 수 도 있고 단일 페이지에서 코드가 난잡하게 뭉쳐진 것들을 컴포넌트로 분리시켜 관리할 수 있다는 장점이 있다. 하지만 언제 컴포넌트를 분리시켜야하고 언제 컴포넌트에 프롭스를 넘겨주어야할 지 기준이 잘 서지 않아 많이 헷갈렸었는데 오늘은 그것에 관해서 조금 정리해보고자 글을 쓴다. 1. 컴포넌트를 나누어야하는 기준 컴포넌트는 사실 코더가 자신의 코드를 기준으로 나누어주어야하는게 아닐까 싶다. 아직 잘 짜인 코드들의 많은 레퍼런스를 보지 못해서 이렇다고 대답은 못하지만 주로 .. 2022. 12. 7.
에디터 안에서 놀기, 순 코딩 시간 늘리기[20221206-TIL] 와카타임 시간 늘리기 오늘은 메가테라 대표 홀매님과 반상회(타운홀 미팅이라고 한다.)를 가졌는데 학생들 전원이 전체적으로 순 코딩 시간이 짧다고 하셨다. ( 자료를 찾거나 티아이엘을 쓰거나 정리 등의 시간이 아니라 말 그대로 에디터에서 코드를 쓰고 하는 순 시간) 누구를 콕 잡아 비교한 것은 아니지만 사실 나의 시간대가 어디있는지는 가장 잘 보이지 않는가? 그렇게 짚어주는 것 만으로도 동기부여가 많이 되었다. 어떻게 코딩시간을 늘릴까? 이전에는 그런 피드백을 받으면 당장에 밤을 새거나 오기가 돋아서 그 한 주를 불태운다는 등 그랬었는데 사실 그렇게 단기적으로 열을 내는건 별 효과가 없었고 좋은 습관을 가지도록 유도하는게 좋았던 경험이 있다. 요새는 하루 순 12 뽀모도르( 1뽀모도르 40분 기준) 다 채.. 2022. 12. 6.
메가테라 포트폴리오 7주차 주간회고, 도메인 변경은 큰 책임을 요한다. 메가테라 7주차 포트폴리오 진행 결과 한 주가 남은 시점 내 포트폴리오의 진척도는 조금 처참하다. 처참하다는 말을 하기도 싫지만 어쩔수 없다. 사실 큰 원인은 포트폴리오 주간 절반이 넘은 시점 급격히 도메인을 스위칭 한 것인데 할 당시에는 사실 자신만만하기도하고 한 경험을 바탕으로 남은 한 달이면 일단 완성을 할 수 있다는 자신감과 나머지의 복잡도는 완성한 뒤에 붙이면 된다는 근자감이 있었다. 계획 실패 사실 큰 단위의 포트폴리오를 혼자서 처음 진행해보는 터라 단위가 클 수록 오차범위가 커지는 것은 당연했다. 내겐 너무 쉬워보였던 규모의 포트폴리오도 사실 진행해보니 엄청 엄청 더뎠고 부분 부분 빠른 구간이 있었지만 진척도의 들쑥날쑥이 심했다. 아마도 이건 프로젝트 규모의 코드를 여러번 짜보지 않은 경험에.. 2022. 12. 5.
중요한 것은 꺾이지 않는 마음[20221205-TIL 중꺾맘] 프로젝트의 끝이 오며 프로젝트의 끝 주가 다가오면서 얻은 것은 자기 의심과 불안 인듯 하다. 사실 그렇게만 보기엔 기획의 중요성, 도메인에 대한 이해의 중요성, 프론트엔드 테스트 코드 짜는 법 등등을 배웠긴 하지만 그냥 느낌적으로만 따지자면 그렇다는 것이다. 사실 좋은 의미가 아닐 수는 있는데 이것에 대해 오늘 깨달은 바가 있어서 정리해보고자 글을 쓴다. 자기 확신과 주관은 스스로가 만들어야한다. 사실 도메인을 스스로가 정하여 포트폴리오를 진행해나가는 이상 많은 것들이 나의 책임인데 무언가 잘 풀리지 않거나 내가 하는 프로젝트에 복잡도나 난이도가 충분하지 않다는 등 의심이 들 때가 많다. 이런 의심은 항상 존재하는 것이지만 이 의심의 가장 큰 단점은 나 자신을 갉아먹는다는 것이다. 그렇지만 이런 의심을 .. 2022. 12. 5.
AWS S3 버킷 만들기 S3의 장점 높은 내구도를 자랑하며 정보를 안전하게 저장 할 수 있습니다. 저렴한 비용으로 사용이 가능합니다(ec2에 이미지, 영상등을 저장하며 비용이 만만치 않습니다.) 보안성이 뛰어납니다 ( SSL을 통하여 데이터 전송과 암호화를 하므로 해킹 걱정이 적습니다.) 속도가 빠릅니다 (각 지역에 맞게 선택하며, 업/다운로드 시 지역시간 최소화를 위한 멀티 파트 업로드를 지원합니다. S3는 Simple Storage Service라는 뜻으로 간단하게 서버에 어떤 파일따위를 저장하게 해주는 도구이다. AWS S3(Simple Storage Service에서 사용되는 용어 객체 - object, AWS는 S3에 저장된 데이터 하나 하나를 객체라고 명명하는데, 하나 하나의 파일이라고 생각하면 된다. 버킷 - bu.. 2022. 12. 4.
리액트 플럭스 패턴( Flux Pattern )[20221203-TIL] Flux 패턴 페이스북에서 알림이 와있다고 표현되고 있지만 막상 알림을 클릭하게 되면 어떠한 알림도 오지 않았던 버그가 있었는데 이러한 버그가 지속적으로 나타자 이러한 문제들을 명확하게 해결하고자 나온 것이 바로 Flux 패턴이다. Flux 패턴은 기존에 사용되던 mvc패턴의 단점을 보완하고자 등장한 패턴이라고 한다. MVC 패턴 MVC (Model - View - Controller) 패턴은 사용자 인터페이스와 비즈니스 로직 처리를 하는 구간이 명확히 나누어져 있기 때문에 여러 사람들과 개발할 때 각자 맡은 부분에 대해서만 개발할 수 있다는 장점을 가지고 있어서 많이 사용되어왔다. 하지만 model과 view가 서로 양방향으로 의존되어 있는 관계 때문에 프로젝트의 규모가 점점 커짐에 따라 프로젝트의 복.. 2022. 12. 3.
백엔드에서 넘어오는 객체 속성 값 전부 Null이거나 컨트롤러 테스트값이 전부 null 일 때 위의 문제를 벌써 몇 번이나 겪는지 모르겠다. 저 디버깅 문제로 사실 6,7번은 겪은 것 같다. 그래서 디버깅 포인트를 간단히 정리해보았다. 1. 생성자 확인 해 볼 것 public ClassName(Long id, String writer, String title, String topic, String place, String time, String participants, String content, Long views, Long likes) { this.id = id; this.writer = writer; this.title = title; this.topic = topic; this.place = place; this.time = time; this.participants = participan.. 2022. 12. 2.
복잡도 ? 완성도?[20221201-TIL] 곧 메가 테라에서 정규코스로 정해놓은 날이 끝나고 포폴을 준비해야 한다. 불과 1~2주 전까지 했던 것을 다 뒤엎고 기획을 다시 하는 나에게 마감시간 맞추기란 여간 어려운 일이 아니다. 그만 보기 그러다 오늘은 문득 내가 하려는 서비스를 다시 조금 한 걸음 물러서서 보았는데 동료들 것 보닥 기능적으로 적은 것 같아 다시 내가 만든 서비스가 싫어(?) 졌다. 그러다 보니 어떻게 더 복잡한 기능을 넣지? 어떻게 바꾸지?라는 생각만 한 채 코드를 치지 않았다. 기획 당시의 나도 나다, 그냥 밀고 간다. 사실 점점 개선해야 할 것들이 보이지만 그러기엔 너무 선택의 가능성만 열어둔 채 작업의 속도를 늦출 뿐이었다. 문득 프런트를 보며 아 이렇게 하는 게 더 서비스에 용이한가? 등 별의별 생각이 다나지만 그러면 진.. 2022. 12. 1.
리액트 form , handleChange Mocking ,테스트 코드 짜기 문제: form 테스트 중 handleChange 함수를 모킹해주라는 오류가 나타나는데 아샬님 강의에선 그러지 않았다? 그리고 handleChange는 어떻게 테스트 해주나? 오늘은 CRUD에서 C 에 해당하는 form 양식을 작성하고 테스트를 하고 있었다. formPage 에는 input 태그와 그것의 값들을 바꿔주는 handleChange 함수들을 넣어놓았는데 이러한 handleChange 함수와 value 값은 store로 넘겨주어 store에서 관리해주고 있었다. 그래서 handleChange에 변화하는 값을 넣고 Create 해당하는 함수가 동작하는지를 보려는데 handleChange를 모킹해주라고 한다. 왜..? 지난 아샬님 강의에선 그러지 않았는데..? 원인: 단순하다. import 해오는 .. 2022. 11. 30.
수정하기 클릭시 수정하다 취소한 내용이 그대로 남아있는 현상, 자바스크립트 find 함수[20221129-TIL] 자바스크립트 find 메서드 find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다. 오늘은 관리자가 컨텐츠 내용을 수정하는데 수정버튼을 클릭하면 원본 내용이 있고 수정을 하다 다시 다른 버튼을 클릭하고 다시 수정버튼을 클릭했을때 다시 원본이 나와야하는데 수정중이던 것이 그대로 나오는 문제가 있었다. 문제: 아래와 같이 위 내용을 수정하기위해 수정하기 버튼을 클릭하면 fetchBasicTemplate(id) 라는 함수가 불려 각 input의 value를 채운다. 1. 수정하기 전 화면 2. 수정하기 버튼 클릭시 그런데 내용을 수정하다가 다른 수정하기 버튼이나 취소 버튼을 클릭하면 창이 닫히고 다시 수정하기를 누르면 수정되지 않.. 2022. 11. 29.

티스토리툴바