본문 바로가기

전체 글78

[ISTQB CTFL] TIL 2 본 게시물의 출처는 모두 KSTQB에서 모든 사람들에게 공식적으로 제공하는 실라버스 및 샘플문제 (v2018)를 기반으로 작성했습니다. 문제의 소지가 있을 경우, shaawwert6044@gmail.com 혹은 댓글에 남겨주시면 게시글 수정 혹은 삭제 등의 조치를 취하겠습니다. 1. 전략의 수정 1.1 실라버스의 내용을 모르더라도, 하루에 샘플문제 1권씩 풀기 => 진도 나간만큼만 풀기 why? - 그러나 1-2장을 학습하고 문제를 풀어보니, "암기되어있는 요소들을 어떻게 문제 내에서 구현되는가?"가 샘플문제의 핵심이다. - 즉 기출문제의 관점에서 접근할 것이 아닌, 구현체의 관점에서 접근해서,,, 오히려 암기사항을 점검하는 데에는 문배2와 같이 문제와 해설이 구체적으로 되어있는 자료를 활용하여 "회독 .. 2024. 4. 17.
[ISTQB CTFL] TIL 1 SW 엔지니어링을 접하고 최근 취업시장에 뛰어들어 여러 직무를 탐색하는 중, FWE, QA, QC, RA 등 단순 개발자 이외에도 여러 직무가 SW 엔지니어링 시장에 있음을 알게되었다. 직무에 맞게 내 역량을 어필할 수 있는 요소 및 자격증이 어떤 것이 있는지 알아보던 중 ISTQB 자격이 있음을 알고 시험을 보기로 맘 먹는다. 이력서, 자소서, 직무 및 시장탐색과 병렬적으로 준비하다보니,,, 잊혀졌다가 시험접수 알림이 뜨고나서야 부랴부랴 대기번호 6번으로 접수를 하고 본격적으로 시험준비를 시작한다. 여러 커뮤니티와 후기글을 찾아보니, "1달, 하루 3시간" 이 평균,,, 반면 내게 남은 시간은 지금 글을 쓰고 있는 시간을 포함하여 9일이 남았다." 다행히 시험관련한 경험담들은 꽤 들을 수 있어, 이해도.. 2024. 4. 16.
자바스크립트의 객체지향 : public, private 자바스크립트 참고 자료들을 찾다보면, `객체의 상속`을 중심으로 설명하는 글들을 흔히 찾아볼 수 있다. __prototype__ 접근자를 통해 찾아볼 수 있는 이 객체들은 객체지향(Object Oriented) 프로그래밍 원칙에 의해 정의되어있다. 당장에 해당 객체들을 사용할 일은 없지만, 참고자료들을 빠르게 이해하기 위해서 OOP 개념들에 해당하는 속성들을 chat gpt + Mdn을 활용하여 연습해보기로 했다. * OOP 원칙 중 캡슐화 OOP는 상속, 추상화, 다형성의 개념을 활용하여 하나의 객체로부터 수만가지에 이르는 인스턴스를 생성함으로 필요한 곳에 필요한 객체를 확장하여 새롭게 정의할 수 있는 강점을 가진다. 다만 이렇게 확장된 코드들은 외부로부터의 접근에 취약하기에, 외부에 노출시킬 데이터와.. 2023. 8. 18.
단순 오타를 통해 배운 React-testing-library의 원칙과 flexible Matcher import { render, screen } from "@testing-library/react" import MyPage from "./MyPage" test("유저가 없으면 로그인 문구와 버튼을 보여준다", () => { render() // const loginRequestText = screen.getByText("로그인이 필요합니다") // 오류발생 const loginRequestText = screen.getByText("로그인이 필요합니다.") // 오류해결 const loginRequestButton = screen.getByyRole("button") expect(loginRequestText).toBeInTheDocument() expect(loginRequestButton).toB.. 2023. 7. 27.
[Trouble Shooting] setTags가 왜 not a function이지? 문제상황 : 자식 컴포넌트에서 부모 컴포넌트로 string[] 타입의 데이터를 상태 끌어올리기를 활용하여 구현하고 있는 도중에 not a function error가 콘솔에 표시되면서 페이지 전체의 렌더링이 되지 않음 추론1. 내가 아직 자바스크립트의 인터프리팅 체계에 대한 이해가 부족해서 당연한 메서드를 잘못된 위치에서 호출하고 있는 것은 아닐까? => 문제가 위치한 레이어 : 단위 함수 추론2. 타입의 설정이 잘못되어 있는 것은 아닐까? => 문제가 위치한 레이어 : 인터페이스 타입 설정 추론3. 부모 컴포넌트와 자식 컴포넌트의 Props 전달과정 혹은 타입 정의 과정에서 각자 다른 타입/함수를 사용한 경우 타입 추론에 의해 자식 컴포넌트에서 함수로 인식하지 않을 수도 있지 않을까? => 문제가 위치.. 2023. 7. 22.
[리팩토링] 내 정보 조회 : useEffect => useQuery 참고문헌 : - https://stackoverflow.com/questions/74095164/switching-out-useeffect-for-tanstack-react-query - https://gyyeom.tistory.com/125 - https://kyounghwan01.github.io/blog/React/react-query/basic/ - https://tanstack.com/query/v3/docs/react/guides/queries - 그 외 등등.. 이 짧은 수정을 위해, 정말 많은 문서와 github를 뒤졌다.. 2가지 핵심요점 1. React-query가 리턴하는 객체 2. Query Key는 뭘까? React-query가 리턴하는 객체 React-query의 useQuery.. 2023. 7. 13.
React-Query 입문 [필요성, query, mutation] 공식문서 : https://tanstack.com/query/latest/docs/react/quick-start 참고자료 : https://tech.kakaopay.com/post/react-query-1/ 필요성 프로젝트를 진행하면서 apis 폴더에 모든 서버 통신 함수들을 관리하다보니, 같은 동작임에도 불필요하게 반복되는 부분이 많았다. axios는 서버 통신을 할 때, fetch에 비해 json.stringfy()와 같은 필수적이지만 중복되는 동작들을 처리해주고 error, data, loading에 따른 동작을 비동기적으로 처리해주는 강력한 도구이다. 그러나 캐싱과 같은 서버 상태를 다루려면 종전의 fetch와 마찬가지로 필수적이지만 중복되는 코드들이 많아진다. 이 문제는 사실 redux와 같은.. 2023. 7. 8.
[프로젝트 코드 다시 뜯어보기] axios 인스턴스 까보기(class와 promise 문법을 중심으로) 1. Axios의 클래스와 인스턴스 - axios는 javascript의 클래스를 사용하여 구현되어있다. - axios.get / post 등 모든 메서드는 axios.create()를 통해 생성된 "인스턴스"이다. 2. Axios create의 기본구조 // 기본문법 axios.create([config]) const myAxios = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); // 이제 내가 미리 설정한 myAxios라는 커스텀 인스턴스에 내가 원하는 메서드를 붙여서 HTTP 통신 동작을 수행할 수 있다. const myAxios.post (.. 2023. 7. 2.
[리팩토링] 이미지 업로드 : json-data => form-data 문제발생 - 리팩토링 과정에서 RDS에 이미지를 직접 저장하는 로직이 아닌 S3에 저장하여 DB에는 url만 요청하는 방식으로 이미지 업로드 기능을 변경 - 이 과정에서 API 명세서의 data 키에 해당하는 파일 포맷이 변경됨 - 이에 따라 기존의 JSON-data 형식을 Form-data 형식으로 변경 리팩토링 전/후 코드 // 리팩토링 이전 코드 export interface MemberProfileUpdateImageDto { profileImage: string; } // TODO : Member의 프로필 사진의 수정 요청을 보내는 코드 export const updateMemberProfileImage = async ( data: MemberProfileUpdateImageDto ) => { .. 2023. 7. 2.
[리팩토링] url 난독화 (utf-8 => base64 encode) 필요성 - utf-8 형식 그대로 쿼리를 요청할 경우, 클라이언트에서 쿼리를 탈취당할 경우 해당 쿼리를 임의로 조작하여 민감정보를 탈취할 위험성이 있음 (ex. /user/id={...} => ...부분을 조작!) - 따라서 쿼리 난독화는 쿼리 탈취시 임의로 조작하여 여러 유저정보를 탈취하는 행위를 방지하는 첫 걸음! # 난독화 이전 "{url}/user/id=1" # 난독화 이후 "L3VzZXIvaWQ9MQo=" 리팩토링 코드 import { Base64 } from "js-base64"; export async function getStudyGroupInfo(id: number, isLoggedIn: boolean) { if (!isLoggedIn) throw new Error("로그인 상태를 확인하.. 2023. 7. 1.
프로젝트 리팩토링 관련 의견 공유 공간 이 공간은 아래의 프로젝트 리팩토링 코드와 진행 과정을 보시고, 자유롭게 의견을 주시는 공간입니다. 과정 중에 궁금하신 점, 혹은 개선하면 좋을만한 방안을 Discussion에 남겨주신다면, 학습하고 개선하는데 큰 도움이 될 것 같습니다! https://github.com/Whaleinmilktea/main-project16-refector_haseong GitHub - Whaleinmilktea/main-project16-refector_haseong: 코드스테이츠 메인프로젝트 리팩토링 기록입니다. 코드스테이츠 메인프로젝트 리팩토링 기록입니다. Contribute to Whaleinmilktea/main-project16-refector_haseong development by creating an a.. 2023. 6. 26.
[회고] 메인프로젝트_반성 🎧 글 진행 순서 1. 프로젝트 결과물 & 구현내용 2. 스스로가 생각할 때에 좋았던 점 3. 스스로가 생각할 때 개선하고 싶은 점 다사다난했던 프로젝트가 마무리되었다. 이번 프로젝트에서는 배운게 너무 많아서 정리하기도 쉽지 않고, 특별히 팀원분들과 멘토분들의 도움을 많이 받아서 감사한 시간이었다. 그래서, 프로젝트의 회고를 협업회고 / 기술회고로 나눠서 정리해보고자 한다. 회고에 대해 짧은 요약을 하자면, "진짜진짜진짜 많이 배웠다! 근데 이제는 개발자답게 좀 배워보자.. 왤케 반복/삽질이 많냐.." 프로젝트 결과물 & 구현내용 프로젝트 명 : 스터디 통합 플랫폼 EduSync 프로젝트 기간 : 2023.05.01 ~ 2023.05.25 인원 : FE 3명, BE 3명 배포링크 : https://www.. 2023. 5. 28.
[회고] 메인 프로젝트 / 기술 🎧 글 진행 순서 1. 프로젝트 결과물 & 구현내용 2. API 명세서 제공 이전의 FE 구현 : MSW 3. CRUD 구현 4. 회원 권한에 따른 예외처리 구현 5. apis 기능 분리 : 서버 통신 및 데이터 맵핑을 담당하는 코드의 분리 6. AWS S3 & CloudFront & Route53을 활용한 정적 웹 배포 다사다난했던 프로젝트가 마무리되었다. 이번 프로젝트에서는 배운게 너무 많아서 정리하기도 쉽지 않고, 특별히 팀원분들과 멘토분들의 도움을 많이 받아서 감사한 시간이었다. 그래서, 프로젝트의 회고를 협업회고 / 기술회고로 나눠서 정리해보고자 한다. 기술회고에 대해 짧은 요약을 하자면, "세상은 넓고, 방법은 많고, 라이브러리는 더 많다.. 근데, JS/네트워크/개발이론을 모르면 내 이야기.. 2023. 5. 27.
[회고] 메인프로젝트 / 협업 🎧 글 진행 순서 1. 프로젝트 결과물 & 구현내용 2. "2주간" 범한 실수 : 개발은 혼자하는 것이 아니다. -> 혼자 끙끙은 절대 안대! 차라리 징징! 3. "2주간" 범한 실수 : 개발은 혼자하는 것이 아니다. -> github는 단순히 "버전관리" 플랫폼이 아니다. 4. 페이지 중심의 대화 vs 기능 중심의 대화 5. Git을 활용한 협업 다사다난했던 프로젝트가 마무리되었다. 이번 프로젝트에서는 배운게 너무 많아서 정리하기도 쉽지 않고, 특별히 팀원분들과 멘토분들의 도움을 많이 받아서 감사한 시간이었다. 그래서, 프로젝트의 회고를 협업회고 / 기술회고로 나눠서 정리해보고자 한다. 짧은 요약을 하자면, "나 혼자 하는 삽질이 내 구뎅이만 파는 행동이라는 사실을 알게되었다..." 프로젝트 결과물 &.. 2023. 5. 26.
서버로부터 받은 데이터는 함부로 훼손하지 않는다. // 기존 코드 import styled from "styled-components"; import { useQuery, useMutation } from "@tanstack/react-query"; // 서버의 상태를 관리하기 위한 react-query 라이브러리 사용 import { getMemberInfo, MemberInfoResponseDto } from "../apis/MemberApi"; //apis로부터 서버 요청을 수행하는 기능 호출 import { useState } from "react"; const ProfileInfoSet = () => { const [memberInfo, setMemberInfo] = useState(null); const [isEdit, setIsEdit] =.. 2023. 5. 15.
타입스크립트의 제네릭(generic) 가만보면,,, 프로그래밍 전체로 생각하기에는 내 앎이 굉장히 좁기에 단정지을 수 없지만,,, 적어도 자바스크립트는 하드코딩을 엄청엄청 싫어하는 것 같다. 1. 타입스크립트의 제네릭 (Generic) 공식문서에 따르면, 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다고 한다. 제네릭이 타입스크립트 내부에서 동작하는 원리는 TypeScript 컴파일러가 컴파일하는 과정에서 타입 추론에 활용됨으로 코드의 재사용성 및 안정성을 높이기 위해 사용된다. function getText(text: T): T { return text; } // 이 코드는 다음과 같은 익숙한 자바스크립트 함수에 새로운 제네릭 타입 를 선언한 구문이다. function getText [제네릭이 삽입된 부분] { retur.. 2023. 5. 4.
메인 프로젝트 전, 자가점검 : 나는 내가 원하는 기능이 무엇인지 모른다. 올바르지 않은 생각일 수도 있지만, 나는 필요를 채우는 개발자가 되고 싶지만, 당장 내가 원하는 기능이 무엇인지 / 필요한 기능이 무엇인지에 대해 잘 모른다. 점검내용 메인 프로젝트를 앞두고, 스스로의 상태를 점검해봤다. 1. React와 프론트엔드 개발 기술에 있어, 구글링/공식문서/블로그와 Chat GPT 검색을 통해 배우면서 원하는 기능을 구현할 수 있는가? ⇨ Yes 2. 기존에는 알지 못했던 라이브러리(Vue.js, jest 등)를 배워야 한다면 두려움보다는 배우고 활용하고 싶은 욕구가 드는가? ⇨ Yes 3. 코드를 위한 기본적인 툴(VS Code + 확장프로그램)만을 갖고 내가 원하는 기능을 완전히 구현할 수 있는가? ⇨ No 4. 알고리즘 & 코딩테스트에 충분히 대비하고 있는가? ⇨ No.. 2023. 4. 29.
AWS 프로젝트 시작하기 프리 프로젝트 막바지에 배포를 위한 방법으로 다음과 같은 방법을 채택하기로 했다. 1. React 프로젝트 (클라이언트) : 정적 파일로 빌드하여 S3에 올리기 2. Spring Boot 프로젝트 (서버) : EC2 + RDS로 서버 및 데이터베이스 구성하기 위의 배포 방식은 수동배포뿐만 아니라 향후 유지보수 및 개선을 위한 방법으로, Github 액션 및 CI/CD 구현을 위해 경험해보기 좋은 케이스라 생각되어 채택했다. 분명 코드스테이츠 코스에서 EC2와 S3를 간략하게 경험했기 때문에 상대적으로 빌드와 구성에 있어서 용이할거라 착각했다. 하지만 생각보다 익숙하지 않은 AWS의 인터페이스와 수많은 권한/정책으로 인해 상당한 시간을 이를 이해하는데 할애하게 됐다. (사실 아직도 이해했다고 생각되지는 않.. 2023. 4. 26.
[Troube Shooting] Json-Server를 활용한 가상 페이지네이션 데이터 호출 테스트 프로젝트를 하다보니, 페이지네이션을 구현해야 하는데 서버에서 API 명세서만 제공하고 아직 기능이 구현되지 않았다고 한다 이런 경우 프론트엔드는 어떻게 기능을 구현할 수 있을까? * 여러 로직을 통해 인증하고/뭐하고, 뭐하고 해봤자, 결국 서버로부터 받는 것은 "데이터"이고, 그 데이터를 내가 가상으로 호출할 수 있다면 기능을 충분히 구현할 수 있다! 이를 위해 익숙한 개발 툴인 JSON-Server를 활용해서 페이지네이션을 구현해보기로 했다. 데이터 호출 코드 const fetchList = async () => { const response = await axios.get( `http://{{url}}/list?pages=${currentPage}&size=20` ); const data = resp.. 2023. 4. 16.
React-Quill을 활용한 구현 예제 이전 포스팅 : https://whaleinmilktea.tistory.com/80 참조 블로그 : https://velog.io/@onezerokang/Quill%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%84%9C-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%97%90%EB%94%94%ED%84%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0-Quickstart1 Quill을 사용해서 텍스트 에디터 만들기: Quickstart(#1) quill을 시작하는 가장 좋은 방법은 간단한 예제를 만들어보는 것입니다. Quill은 DOM element를 사용하여 에디터를 세팅할 수 있습니다.이게 Quill의 초기 세팅법입니다!Quill의 진정한 장점은 유연성과 v.. 2023. 4. 16.
[Trouble Shooting] 경로설정..? 이스케이프 시퀀스..? ESLint 문제해결 : https://whaleinmilktea.tistory.com/82 [Trouble Shooting] Prettier에서 package.json을 자꾸 발목잡을 때 해결방법 + 어찌 해결했더니,,, 또 다른 사실, 본인은 ESlint와 Prettier를 부트캠프에서 "설치하면 좋은 툴" + "코드 일관성 및 유지보수성 확보"라는 소개를 바탕으로 설치했기 때문에 이전 글과 같이 깊이 알지는 못했다. 기본적인 설정이 whaleinmilktea.tistory.com 보통 위와 같은 에러는 파일의 경로가 떴을 경우 많이 확인할 수 있다. 따라서, 터미널에 src/tree를 입력하고 본인이 파일구조를 잘못 파악하고 있는지부터 확인했다. (육안으로 보이는 파일구조에는 아무런 문제가 없어보였.. 2023. 4. 15.

티스토리툴바