티스토리

jaeha2324

검색하기

블로그 홈

jaeha2324

jaeha2324.tistory.com/m

jaeha2324 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[AWS] S3를 이용한 상품등록 기능 구현하기 AWS에는 s3라는 것이 존재하는데요, S3란 (Simple Storage Service) 의 약자로 앞글자만 따서 S3라고 부르는거 같습니다. 보통 인터넷에 글을 작성하게 되는 경우 이미지 삽입은 필수가 되는데요 이때 개별 유저가 등록하는 이미지를 모두 회사 서버 혹은 개인 노트북에 저장하는 경우 용량이 금방 차게되서 관리가 어렵기 때문에 Amazone에서 제공하는 S3에 이미지를 업로드하고 해당 이미지의 Location을 리턴받아 Location을 DB table에 저장하는 방식으로 운영을 하게됩니다. 그렇다면 소단위 팀프로젝트에서 S3이미지 업로드 적용방식을 알아보겠습니다. 이미지 업로드가 포함되는 경우 form-data 형태로 프론트에서 넘겨주는데요, 그러한 form-data를 처리하기 위해 mu.. 공감수 0 댓글수 0 2022. 9. 11.
[Node.js] 상품 찜목록 등록/삭제 구현하기 상품을 찜목록에 등록/삭제를 하는 API를 구현해보았다. Node.js Express, Layered Pattern 적용하였고 이번 포스팅에서는 Service, Dao 부분 만을 작성하였습니다. 먼저 상품등록의 경우 UNIQUE 값으로 중복이 될 수 없다는 전제조건을 달았다. 그래서 흐름을 생각해보면 찜 목록에 없는 경우에는 테이블에 추가하는 동작을, 있는 경우에는 테이블에서 삭제하는 동작을 하도록 구현하였다. 그래서 MYSQL 의 EXISTS 문을 사용하여 결과 값을 반환받고, if 문을 통해 결과 값에 따라 다른 쿼리문이 실행되도록 로직을 구성하였다. const addProductLike = async (userId) => { const checkLike = await productDao.checkL.. 공감수 0 댓글수 0 2022. 9. 10.
2차 프로젝트 회고록 2차 프로젝트가 종료하였다. 많이 부족했는데 항상 도와주신 팀원분들께 감사하다는 이야기를 하고싶습니다. 클론 대상 : 번개 장터 (https://m.bunjang.co.kr/) 개발 기간 : 2022년 08월 29일 ~ 09월 08일 (11일) 팀 구성 : 5명 ( FE - 3명, BE - 2명) 맡은 역할 리스트 페이지, 상세 페이지, 내상점 페이지, 상품 등록 기능 구현 1차 프로젝트와 다르게 2명이라 조금 더 많은 부분을 맡게 되었다. 1차 스프린트 미팅 전체 기간이 2주인데 2주 차 금요일이 명절이라 목요일이 마감날이 되어버렸다. 그래서 스프린트 미팅을 할 때 첫 주에 기능 구현을 끝내고, 2주 차는 통신과 버그 픽스를 하는 것으로 이야기를 하였다. 각자 1차 프로젝트도 했고, 비슷한 느낌의 사이.. 공감수 0 댓글수 0 2022. 9. 9.
2차 프로젝트 중간 회고록 보호되어 있는 글입니다. 공감수 0 댓글수 0 2022. 9. 4.
[JavaScript] Promise (1) Promise 란? ▶ 현재에는 없지만 가까운 미래에는 있을 수도 있는 어떤 데이터에 대한 접근방법 Promise 를 생성해보자 function returnPromise() { return new Promise((resolve, reject) => { } ); } Promise 객체는 new 키워드와 생성자를 사용해 만듭니다. 생성자(resolve, reject)는 매개변수로 "실행 함수"를 받습니다. 이 함수는 매개 변수로 두 가지 함수를 받아야 하는데, 첫 번째 함수(resolve)는 비동기 작업을 성공적으로 완료해 결과를 값으로 반환할 때 호출해야 하고, 두 번째 함수(reject)는 작업이 실패하여 오류의 원인을 반환할 때 호출하면 됩니다. 두 번째 함수는 주로 오류 객체를 받습니다. 다음은 Pr.. 공감수 0 댓글수 0 2022. 9. 4.
[Node.js / Express] CORS 에러 해결하기 클론 코딩 프로젝트를 진행하던 중 CORS 에러와 마주하게 되었습니다. 상황은 POSTMAN 통신을 통해 프론트에 전달되는 값을 확인하는 과정이였는데요, 크롬 브라우저에 직접 API 주소를 넣으면 통신이 되는데 postman을 사용하거나, 프론트와 통신을 하는 경우에 CORS 에러가 발생하였습니다. 개발환경은 Node.js 8.11/express 4.18 버전 / Layered Pattern 적용을 하여 개발을 하고있었습니다!! CORS 에러가 발생할 수 있는 상황은 1. http 와 https 혼용 2. 클라이언트와 서버의 포트 번호가 다른경우 등이 있다고 하는데요, 확인 해본 결과 위 사항들은 문제가 없었습니다. 그래서 Referrer Ploicy 메세지인 strict-origin-when-cross.. 공감수 0 댓글수 0 2022. 9. 3.
[MySQL] 중복된 row 중 하나의 row에만 값 추가하기 프로젝트 진행 중 제목과 같은 상황에 마주하였다. 원래라면 장바구니에 담기는 사용자 와 상품은 유니크해야하는데 팀내 특정한 상황으로 인하여 UPDATE가 불가능하여 밑에 row를 추가하는 방법으로 진행하기로 결정하였다. 하지만 중복된 row가 있는 경우에 수량 추가 되는경우 어떻게 처리해야 할지 고민이였다. 일반적으로 UPDATE 구문으로 처리하지만 중복되는 경우 다음과 같은 방법으로 최상위 1개 row에만 값을 추가하도록 설정하였다. UPDATE carts c SET c.quantity = c.quantity + "1" WHERE c.user_id=11 AND c.image_id=4 LIMIT 1 실행결과 공감수 0 댓글수 0 2022. 8. 27.
[JavaScript] 동등비교 연산자 JavaScript에서 많이 사용하는 연산자인 등호(=), 등호를 두개(==) 쓰는것과 세개(===) 쓰는것의의 차이점을 알고계신가요? 1. 등호 두개를 사용하는 동등비교연산자 등호를 두개 사용하는 동등연산자는 느슨한 동등비교로 강제 형변환을 수행하기 때문에 자료형이 달라도 값이 같으면 True를 반환합니다. 아주 간단한 예시를 들어보면 숫자와 문자비교가 있겠네요 두개의 값은 같지만 자료형이 Number , String 으로 서로 다릅니다. 하지만 강제 형변환을 통해 공통타입으로 만들기 때문에 True값이 반환됩니다. 2. 등호 세개를 사용하는 동등비교 연산자 등호를 세개(===) 사용하는 경우는 어떻게될까요 대충 예상이 가시죠? 등호가 세개인 경우 '자료형'이 같은지도 추가로 검사하기때문에 False가.. 공감수 0 댓글수 0 2022. 8. 27.
1차 프로젝트 회고록 길다면 길었고 짧다면 짧았던 1차 프로젝트가 종료하였습니다. 매번 혼자 코딩하다 여러 사람과 맞춰가며 하는 프로젝트는 처음이었는데 힘들었던 점, 좋았던 점, 아쉬웠던 점 등 느낀 게 많았던 거 같습니다. 항상 부족했던 저를 많이 도와준 위즐리 팀원 분들께 감사하단 말씀을 하고 싶네요! 클론 대상: Wisely(와이즐리) - https://www.wiselycompany.com/home/main 시연 영상: https://www.youtube.com/watch?v=LgIgJsmdHhU&ab_channel=%EB%B0%95%EB%AA%85%ED%98%B8 팀명: Wesely(위즐리) 팀원: 6명 - FE(3명), BE(3명) 기간: 2022.08.16 ~ 08.25 (10일) 담당 역할: 장바구니(카트) 페.. 공감수 2 댓글수 0 2022. 8. 27.
1차 프로젝트 중간회고 1차 프로젝트를 시작한지 6일이 지났다. 하루하루가 정말 정신이 없고 어떻게 지나갔는지도 모르게 시간이 빨리가는거 같다 원래는 월요일 부터 시작하는데 월요일이 공휴일이라 화요일 부터 시작을 하게되었다. 프로젝트 팀 클론 대상 사이트: 와이즐리(https://www.wiselycompany.com/home/main) 팀 구성 - FE: 3명, BE: 3명 담당역할 : ERD구성, 목데이터 작업, 장바구니 페이지 구현 (+ 결제패이지) ERD ( 작업기간 8.16 ~ 8.18 ) 우선 ERD작업은 BE 3명이 모두 달라붙어 진행하였다. 한사람이 하기에는 놓치는게 많고 다른 사람의 시선으로 바라보면 빈틈, 허점이 많이 드러나게 되서 서로 교차로 확인해가며 수정 보완을 진행하였다. 처음 봤을 때는 어디서 부터 .. 공감수 1 댓글수 0 2022. 8. 21.
[JavaScript] 클로저(Closuer) (2) - 캡슐화, 은닉화 은닉화가 왜 필요한가? 먼저 은닉화라는게 왜 필요한지, 어떻게 사용해야되는지 알아볼 필요가 있겠죠? 자바스크립트와 다른언어(C, C++, ...)들과의 차이점 중 한가지는 객체의 Private한 속성을 만들수 없다는 거에요. 그래서 아무나 변수에 접근할수 없도록, 특정한 방법들을 사용하여 자바스크립트에도 실제로 Private가 아니지만 Private한 것처럼 사용하는 방법을 은닉화라고 이야기하기로 했다고 해요. 즉시실행함수(IIFE, Immediately Invoked Function Expression) 은닉화를 하기위해 사용되는 즉시 실행함수는 정의되자마자 즉시 실행되는 JavaScript Function이다. IIFE 내부에서 정의된 변수는 외부에서 접근이 불가능하다. (function () { v.. 공감수 0 댓글수 0 2022. 8. 20.
[JavaScript] 클로저(Closuer) 혼자 공부하고 정리해보려 하였으나.. 아직은 어려운 개념인 거 같아 글 하나를 읽고 정리해보는 방식으로 포스팅을 한다 나중에 좀 더 익숙해지면 그때 나만의 정의로 정리를 시도해봐야겠다. 출처(원문) https://meetup.toast.com/posts/86 자바스크립트의 스코프와 클로저 : NHN Cloud Meetup 자바스크립트의 스코프와 클로저 meetup.toast.com 이번 게시글에 사용된 코드 예제 및 대부분의 사진, 내용 등은 위 출처에서 가져와 사용하였습니다. 사실 처음 클로저의 정의를 보았을 때 이게 무슨 소리지? 싶었습니다. 함수가 선언된 어휘적 환경, 함수가 생성된 시점을 기억한다, 폐쇄공간 등 구글링을 하다 보니 다른 분들이 각자 자신만의 언어로 정의 내린 클로저의 정의를 접하다.. 공감수 1 댓글수 0 2022. 8. 17.
[JavaScript] 스코프 체인(Scope Chain), 렉시컬환경 스코프란? Scope의 사전적 의미는 범위이다. 자바스크립트에서 스코프체인의 의미를 생각해보자면 변수가 접근할 수 있는 범위 또는 변수를 찾기위한 규칙 정도로 이해하면 좋을것같은데요! 변수를 찾는데 접근범위랑 규칙이 필요할까 싶어 코드 하나를 가져와 봤습니다. var a = 333; var outer = function() { var inner = function() { console.log(a); //(1) var a = 222; }; inner(); console.log(a); //(2) }; outer(); console.log(a); //(3) (1),(2),(3)의 결과가 어떻게 나오는지 단번에 아셨나요? 결과는 차례대로 Undefined, 333, 333 인데요, 아쉽게도 저는 틀렸답니다 하하.. 공감수 0 댓글수 0 2022. 8. 13.
[ERROR] Mysql No Database Selected 해결하기 프론트와 통신을 테스트하는 시간이 있었는데 DB 연결이 안되서 애를 많이 먹었다. dotenv 파일도 제대로 설정하였고, dbmate up도 잘 되고 테이블 생성도 문제가 없었고 db연결도 문제가 없었는데 데이터를 삽입하려고 보내면 No Database Selected 메세지가 출력되었다. 구글링 하면 use [사용할 DB명]을 입력하라고 하는데 터미널/프론트 단에서 db로 데이터를 보내는 입장에서는 그닥 유익한 정보가 아니였다. 원인은 src폴더의 Datasource / typeorm 쪽이였는데 database: process.env.TYPEORM_다른이름 이렇게 설정 되어 있어서 DB선택이 안되었다고 나왔던 것이였다. 혹시 위에말한 모든걸 해보았는데도 안된다면 src 폴더의 database의 이름이 .. 공감수 0 댓글수 0 2022. 8. 11.
[Error] TypeError: Cannot convert undefined or null to object 해결하기(Feat. 게시글 업데이트) 기술스택 추가(22.08.27) JavaScript, Node.js , Express 기반하였고 Layered Pattern을 적용하여 작업하는 상황이였습니다. ------------------------------------------------------------------------------------- 게시글 업데이트 API를 작성하던중 제목과 같은 에러에 마주하였다. 원래 의도는 게시글이 존재하는지 확인하고, 게시글이 존재하는경우 업데이트를 진행하고 게시글이 없는경우(undefined인 경우) 에러를 던져 에러 메세지를 출력하는게 계획이였다. 게시글 확인 코드 SELECT * FROM posts WHERE EXISTS (SELECT no.posts , title.posts FROM posts.. 공감수 0 댓글수 0 2022. 8. 10.
비동기처리(async/await) node.js로 서버를 실행하고 동작시키며 공부하다보니 async await이라는게 항상 사용되는게 눈에 들어왔다, 짝을 이뤄 사용한다는 것은 알겠는데 왜 쓰는지, 어떤 개념인지 몰라서 글로 정리해본다. 동기와 비동기? 동기(sychronous) 는 설계가 간단하고 직관적이지만, 해당 프로세스가 종료될때까지 다른 것을 못하고 대기하고 있어야한다. 연산이 오래걸리는 작업의 경우 대기시간이 무한하게 길어질수있다. 비동기(asynchronous) 는 동기보다 설계가 복잡하지만, 해당 프로세스가 종료 될 때까지 대기하지 않고, 다른작업을 진행할 수 있다. 연산이 오래걸리는 작업이더라도 실행시켜놓고 종료될때까지 다른 작업을 진행하고 있으면 된다. 내가 이해한 예시로는 요리사가 A 주문과, B주문을 받았는데 동기의.. 공감수 1 댓글수 0 2022. 8. 7.
[Node.js][SQL] SQL 테이블의 값을 쿼리문을 사용하여 Object 형태로 뽑아내기 SQL 테이블 내부에 1:N 관계인 데이터를 JSON 형태로 출력하는법. 먼저 for문을 사용해도 Object 형태로 추출이 가능하다. PR 피드백으로 for문 말고 쿼리문으로 해결이 가능해보인다며.. 멘토님이 참고하라며 주신 MsSQL 링크...(아니 우린 MySQL 인데,,) 적용 불가능한건데 그걸 제대로 안 살피고 안된다고 넋놓고 있었다.. 하여튼 내가 원하는 결과 값의 형태는 1명의 유저가 여러 게시글을 작성한 경우 유저 id, name은 1번만 출력되고 게시글 정보 posting에 묶여서 출력되게 하는게 목표였다. 일단 MsSQL의 JSON PATH, AUTO 이런건 MySQL에 절대 적용이 안되니 혹시 저처럼 제대로 안살피고 무작정 따라 치시는 분이 있으시면 당장 멈추시길..ㅠㅠ 테이블의 기본.. 공감수 1 댓글수 0 2022. 8. 7.
[Git] Push 오류 (리모트에 로컬에 없는 사항이 들어있으므로 업데이트가 거부되었습니다.) Git push를 하려는 도중 제목과 같은 에러가 발생하였다. 원인 전날 Git을 통해 올린 파일이 잘못 올라갔는데 Git을 통해 업데이트 하지 않고 원격 리포지토리에서 코드를 직접 수정한게 문제가 되었다. 직접수정한 것도 commit history가 남는데 원격 Repostitory에 있는 커밋 히스토리와 로컬의 커밋 히스토리가 일치하지 않아 발생한 문제였다. 해결 방안 해결 방법은 두가지 정도 찾은것 같다. 1. 강제 Push 원격 Repository의 Commit History를 Local 기준으로 맞춰준다. 개인이 혼자 사용하는 Branch라면 이 방법을 사용해도 무관하다고 생각한다. 단점은 원격 Repository의 Commit History가 사라진다는 점. 2. Pull, merge 후 co.. 공감수 0 댓글수 0 2022. 8. 5.
관계형 데이터 베이스(1:1, 1:N, N:M) 관계형 데이터 베이스란? 데이터를 테이블 형태로 저장하는데 각 테이블의 열(Column)에는 속성이 행(Row)에는 항목이 저장되며 행과 행이 연결되어 1:1, 1:N, N:M의 관계를 맺을 수 있다. 엑셀 표에 데이터를 저장한다고 생각하면 이해하기 쉬울 것 같다. 1:1 관계(일대일 관계) 상대 엔티티와 반드시 단 하나의 관계를 가진다. 예를 들어 A라는 상품에 대한 정보 중 이름, 상품 사진 등은 A라는 상품 이외에는 관계를 맺을 수 없다. A이외의 다른 상품은 다른 상품만의 이름과 사진이 있기 때문이다. 1:N 관계(일대다 관계) 한쪽이 여러개의 객체를 가질 수 있다. 한 사람이 여러개의 휴대폰 번호를 가질 수는 있지만 여러 사람이 하나의 휴대폰 번호를 가질 수는 없다. N:M관계 (다대다 관계) .. 공감수 0 댓글수 0 2022. 7. 31.
HTTP HTTP란? HyperText Transfer Protocol의 약자로, HTML 페이지를 어떻게 주고받을지에 대한 약속 정도로 줄일 수 있을 것 같다. HTTP의 특징 1. Request/Response Client와 Server는 요청과 응답으로 통신한다. Request가 있다면 반드시 Response가 있어야 한다. 2. Stateless 각각의 HTTP통신 (Request/Response)는 독립적이기 때문에 과거에 이루어졌던 Request와 Response를 기억하지 못한다. 그렇기 때문에 매번 통신을 할 때마다 필요한 모든 정보를 담아서 보내줘야 한다. 번외. Stateful 1. 세션 정보를 Server에 저장, 2. 세션 상태에 따른 응답 Stateful은 Server와 Client간 세션.. 공감수 0 댓글수 0 2022. 7. 31.
[JavaScript] CSV파일 추가하여 출력하기 csv파일을 javascript에서 읽어와 출력하는 문제이다. csvtojson 같은 모듈 사용하는 경우 코드 한두줄에 간단하게 끝나지만, node의 내장 모듈만 사용하여 구현해보았다. 우선 users.csv의 경우 정렬이 잘 되어 있었 편했지만, posts.csv 파일의 경우 띄어쓰기, 개행이 제대로 되어있지 않아 불러와서 바로 사용하는게 불가능 하였다. 그래서 첫번째. users.csv 파일을 불러와 배열 형태로 가공하고 두번째. posts.csv파일도 별도로 가공하였다. 세번째. posts.csv 파일을 user_id 별로 분리하였고 마지막으로 users.csv파일에서 user_id별로 불러와 직접 추가해주었다. // --------------------users.csv----------------.. 공감수 0 댓글수 0 2022. 7. 31.
배열에 특정단어를 포함한 문자 삭제하기 (2) 문장에서 특정단어를 포함한 문자 삭제하기 (split, splice, join, indexof) Assignment sliceCityFromAddress 함수를 구현해 주세요. sliceCityFromAddress 함수는 address 를 인자로 받습니다. address 는 주소를 나타내는 string 입니다. 주어진 주소에서 도시를 찾아 삭제하고 새로.. jaeha2324.tistory.com 위 글에서 이어지는 글입니다. 이전에 배열에 특정 조건을 포함하는 단어를 삭제하는 방법에 대한 글을 작성하였는데 indexOf 함수의 특성상 최초 1번의 단어는 삭제하지만 이후에 나오는 문자열에 단어가 포함되더라도 삭제되지 않고, 출력이 된다는 문제점이 있었다. 이 글에서는 그것을 해결한 방법에대해 포스팅 한다... 공감수 0 댓글수 0 2022. 7. 23.
문장에서 특정단어를 포함한 문자 삭제하기 (split, splice, join, indexof) Assignment sliceCityFromAddress 함수를 구현해 주세요. sliceCityFromAddress 함수는 address 를 인자로 받습니다. address 는 주소를 나타내는 string 입니다. 주어진 주소에서 도시를 찾아 삭제하고 새로운 주소를 리턴해 주세요. 도시는 무조건 ‘시’로 끝납니다. 예) “서울특별시”, “성남시” ‘시’는 주소에 한번만 포함되어 있습니다. 예를 들어, 다음과 같은 주소가 주어졌다면다음과 같은 값이 리턴되어야 합니다 "경기도 성남시 분당구 중앙공원로 53" "경기도 분당구 중앙공원로 53" 먼저 혼자 공부할때 공부했던 것들을 떠올려봤는데 마땅히 생각나는게 없었다. 단어와 단어 사이에 공백이 규칙적으로 있으니 문자열을 공백을 기준으로하여 배열로 반환하고, .. 공감수 0 댓글수 0 2022. 7. 21.
Inline, Block, Inline-block 속성 Display 속성 중 Inline, Block, Inline-block 속성에 대해 알아보자. 1. Inline Inline의 경우 줄바꿈없이 다른요소 옆에 배치된다. 2. block block의 경우 다른 요소가 있는 경우 줄바꿈 하여 단독으로 한 줄을 사용하며 너비 지정이 가능하다. 3. Inline-block Inline 속성 처럼 다른요소 들과 나란히 배치되지만, block 속성 처럼 크기 지정이 가능하다. 정리 1. Inline - 줄 바꿈 없이 다른 요소들과 나란히 배치된다. 2. Block - 다른 요소들을 밀어내고 단독으로 한 줄을 사용하며, 크기 지정(Width, Height)이 가능하다. 3. Inline-block - Inline 속성 처럼 다른요소 들과 나란히 배치되지만, bloc.. 공감수 0 댓글수 0 2022. 7. 20.
Position 속성 - relative, absolute, fixed CSS의 Position은 요소를 특정 위치에 위치시킬 때 사용하는 속성이다. relative - 일반적인 흐름에 따라 원래(static 상태)일 때 위치를 기준으로 하여 배치한다. absolute - 일반적인 흐름에서 제거하여 부모(조상) 요소를 기준으로 하여 배치한다. fixed - 뷰포트를 기준으로 화면에 배치 인터넷을 찾아보면 이렇게 나오지만 처음 봤을 때는 무슨차이인지 헷갈리는 부분들이 많아서 고민을 많이 했다. relative는 배치할 때 자유분방하게 돌아다닌다고 기억했고 absolute는 절대적인 의미로 엄격하다는 느낌을 생각해 relative에 제한을 주는 것으로 생각했다. 먼저 자식(검은색), 부모(빨간색), 조부모(보라색)로 구역을 나누어 박스를 설정해주었다. 1. Relative 요소.. 공감수 0 댓글수 0 2022. 7. 19.
Semantic Web 과 Semantic tag Semantic의 사전적 정의 : 의미의, 의미론적인 Semantic Web과 Semantic Tag란? Semantic Web 시맨틱 웹은 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하는 발상 Semaatic Tag 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹을 실현할 수 있으며 태그가 의미를 가짐으로써 검색엔진의 크롤링에게 사이트에 대한 정보를 비교적 정확히 제공할 수 있게 된다. 웹페이지 데이터에 이름(인식)표를 붙여주어 컴퓨터가 쉽게 이해하고, 분류하여 정보를 제공할 수 있도록 만든다. semantic.. 공감수 0 댓글수 0 2022. 7. 18.
접근자 프로퍼티 (Getter, Setter) 알아보기 모던 자바스크립트 프로퍼티 getter와 setter 를 읽고 작성한 글 입니다. Getter와 Setter 먼저 프로퍼티는 일반적으로 사용하는 항목(key) & 값(Value) 를 나타내며 일반적으로 직접 명시하게 되는 것들은 데이터 프로퍼티라고 불린다. 접근자 프로퍼티는 프로퍼티를 읽고 쓸때 호출 할 함수를 값 대신 지정해 놓고 함수를 통해 값을 얻고(get) 설정(set)하게 된다. get 메서드는 객체의 프로퍼티를 가져올 때 호출되는 함수를 바인딩하는데 get메서드가 바인딩 된 프로퍼티는 동시에 실제 값(데이터 프로퍼티)를 가질 수 없지만, get메서드와 set메서드를 동시에 바인딩해 유사 프로퍼티(pseudo-property)를 만들 수는 있다. const car = { carName: 'Tes.. 공감수 0 댓글수 0 2022. 7. 8.
자기소개 페이지 반응형으로 개선하기 지난번 자기소개 페이지를 만들고 창을 축소하면 이미지가 몰려 이상해지는 현상이 있었는데 오늘은 그 문제를 반응형으로 해결한 것을 적는 글이다. 기존 문제점 먼저, 글자의 경우 태그를 사용하여 작성하였는데 브라우저에 영역을 할당하는 것이 아니라 창을 축소하게 되면 글자도 같이 밀려버리는 현상이 발생하였다. 두번째로 영역을 좌, 우로 분할하고, 영역너비를 창 크기에 따라 유동적으로 변하게 코드를 작성하였는데 이러한 이유로 사진이 밀리는 현상이 발생하였다. 개선 방안 첫번째의 경우 태그를 이용하여 글자도 영역설정을 하여 창 축소시에도 형태를 유지할 수 있도록 수정하였다. 두번째 문제는 전체 구역 배치를 다시하고, css코드를 이용하여 창 축소시 형태가 바뀌도록 미디어쿼리를 사용하여 구현하였다. 코드 국내의 유.. 공감수 0 댓글수 0 2022. 7. 5.
자기소개 페이지 네비게이션 바에 :Hover, ::after 선택자 적용하기 자기소개 페이지를 만들 때 내용도 부실하고, 좀 밋밋한 느낌을 많이 받아서 고민하던 중 멋있어 보이는 CSS 기능이 있어서 적용했다. 어떤 것을 적용했는지, 무슨 개념인지 정리한 글이다. :Hover? 객체에 마우스 커서를 가져다 놓으면 다른 스타일 값을 보여주고 싶을 때 사용하는 태그. 가상 요소(Pseudo-Element)? 일부 내용에 스타일을 적용할 때 사용한다. 가상 클래스와 구별하기 위해 클래스 이름 앞에 콜론 두 개(::)를 붙여 표시하고, 가상 요소 앞에 콜론 하나(:)를 붙여도 브라우저에서 가상 요소로 인식하지만 웹브라우저, explore에서는 인식이 안될 수 있다. CSS3부터는 가상 클래스는 :로(:hover, :active, 등), 가상 요소는::로(::after, ::before,.. 공감수 0 댓글수 0 2022. 6. 29.
이중배열에서 특정 항목을 제거하는 함수 만들기 공부 중 오래 고민했던 문제를 내가 이해한 방식대로 적어보기 문제 이중배열에 들어있는 항목 중 특정 조건을 만족하는 항목을 제거하여 반환해야한다. let basket = [['양파','곰팡이'],['곰팡이','빵','딸기잼'],['귤','곰팡이','사과']]; removeGerm(basket) // [ [ '양파' ], [ '빵', '딸기잼' ], [ '귤', '사과' ] ]; basket에 들어있는 배열 중 특정 조건(ex. 곰팡이)를 제거 하고 배열을 반환하는 방식이다. 최종코드 function removeGerm(basket) { // 여기에 코드를 작성해주세요! let temp = []; for(i = 0; i < basket.length; i++){ for(j = 0; j < basket.len.. 공감수 0 댓글수 0 2022. 6. 24.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.