이상과현실

넷플릭스 종말에 대처하는 캐럴의 자세 후기(스포주의)

동네주민1 — Sun, 24 Dec 2023 22:13:39 +0900

종말이라고...?

심심했던 크리스마스 언저리의 저녁, 넷플릭스를 한없이 떠돌다가 아무 정보 없이 단순히 제목이 끌려서 선택한 컨텐츠.

주인공 캐럴의 어쩐지 냉소적이고 우울해 보이는 모습에 계속 보게되는데 그와 대비되는 완성도 높은 애니메이션에 시선이 계속 갔다.

결론부터 말하자면 블랙코미디와 철학을 버무린 명작

아래부터는 스포 ------------------------------

왜 일을 하는거야?

지구멸망의 카운트다운 아래, 욕망에 충실한 쾌락주의자들 사이에서 캐럴은 취직을 한다. 더 이상 돈도 일도 아무 의미가 없는 세상에서!

처음에는 이해가 안됐다.
나는 월화수목금 일하고 지치고 힘든데 일에서 무슨 의미를 찾을 수 있는지를 전혀 몰랐기 때문이다. 캐롤의 고구마 백개 먹은 듯한 답답한 행동에 그만 볼까... 고민하기도 했다. 그걸 막기위해서 끝내주는 애니메이션을 표현수단으로 선택한걸까?

파도는 누구에게나 같지만 어떤 이에게는 완벽하고 어떤 이에게는 부족하다.

캐럴은 수많은 파도를 찾아 자유롭게 떠났지만 결국 찾지 못했다. 실망에 젖어 백사장에서 앉아있다가 옆에 나타난 정신이상자의 말을 듣고 숲속으로 떠나 개고생을 한 뒤 원래 자신이 있었던 백사장으로 돌아와 비로소 자신이 가지고 있었던 파도가 완벽하다는 걸 깨닫는다.
모든 것은 마음먹기에 달려있다. 왠지 영화 에브리띵에브리웨어올엣원스가 생각났다.

사실 멋져보이는 사람들도 다들 남을 부러워한다

캐럴보다 멋져보이는 동생이 사실은 캐럴의 행동과 취향의 확실함을 부러워했다는 에피소드와 잃어버린 물건들 에피소드도 인상적이었다. 백명의 사람이 있다면 백가지 관점과 스토리가 있다.

우리는 한순간도 남이 되어 살아보지 않았기 때문에 남의 속내를 알지못한다. 공감하지 못한다면 존중해줘라 라는 말이 무색하게 남을 보면 먼저 편견부터 씌워버리고 안 좋게 보곤 했던 요즘을 반성하게됐다.

별개의 이야기지만, 이직한 회사에서 신규사원의 눈에는 주먹구구 처럼 보이는 사정과 히스토리에는 사실 다 이유가 있어서 그렇게 된거라는 예전에 느꼈던 깨달음도 애니메이션를 보면서 함께 슉 지나갔다.

타인에게 친절하라. 그대가 만나는 모든 사람은 현재 그들의 삶에서 가장 힘겨운 싸움을 하고 있다.
- 플라톤

캐럴은 오직 캐럴만이 할 수 있는 것에 집중한다. 동료들의 이름을 외워서 부르기, 사내 모임만들기, 죽은 동료를 기리기 등. 기분전환이라는 회사를 인간답게 만들어간다. 그녀의 힘은 자기 욕망에만 충실히 사는 사람들의 마음의 벽을 허물고 함께 어울려 살기라는 따듯한 바람을 불어 넣어준다.

충족감과 소속감 그리고 따듯함, 이와 같은 돈으로는 살 수 없는 것들을 위해 사람들은 먼 바다와 낯선 나라를 그토록 헤매나보다.
상처를 받을 수도 있는데도 개의치 않고 타인에게 관심을 주는 캐럴같은 사람이 참 귀한 세상이다.

감정이 움직이는 순간이 살아있는 순간이라고 하던데 그렇다면 나는 여러 날을 죽은 채로 살아왔다. 하지만 어제 오늘은 캐럴의 이야기를 보면서 잠시 살아있었다.

script defer/async

동네주민1 — Mon, 6 Feb 2023 18:08:04 +0900

html은 세상 일이 늘 그렇듯 아는만큼만, 궁금한 만큼만 보인다.

처음 html을 배울 땐 이유도 모른 채로 script 삽입 코드는 늘 </body>의 바로 위에 넣는다고 하여 그대로 했다.

하지만 모든 일에는 이유가 있고 그 맥락을 알면 더 잘 기억할 수 있는 것 같다.

브라우저가 html을 읽다가 script를 만나면 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈춘다.

script를 마지막에 넣는 방법도 있지만 페이지 로딩이 지연될 수 있다.

그럴때 script에 defer 나 async 를 사용할 수 있다.

모던 자바스크립트 튜토리얼을 읽다가 너무 좋은 그림이 댓글로 있길래 복붙해왔다.

async	load-first order. 문서 내 순서와 상관없이 먼저 다운로드된 스크립트가 먼저 실행
defer	문서에 추가된 순으로 실행

https://ko.javascript.info/script-async-defer

defer, async 스크립트

ko.javascript.info

css module에서 global.css 통해 css variables 사용하기 (next.js환경)

동네주민1 — Tue, 17 Jan 2023 00:35:58 +0900

구조

next.js 공식사이트의 튜토리얼에 global.css를 사용할 때는
_app.js 파일로 한번 전체 컴포넌트를 감싼 뒤 거기에 global.css를 연결해야한다고 나와있다.

튜토리얼을 변형해서 커피 사이트를 만드는 중
module.css로는 처음 작업하다보니 문제 발생.
css variables들은 어디에 넣어야하는가?

바로 위에 나온 global.css에 넣어야 적용 가능!

./styles/global.css

./styles/utils.module.css

하지만 css module을 사용해보니 불편해서 sass로 바꿔야겠다.

next.js 튜토리얼 링크

https://nextjs.org/learn/basics/assets-metadata-css/global-styles

Learn | Next.js

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.

nextjs.org

넷플릭스 영화 슬럼버랜드 후기 해석 (Slumberland, 2022 스포주의)

동네주민1 — Fri, 6 Jan 2023 18:03:49 +0900

1. 전체적인 느낌

CG 때문에 두번이나 입이 떡 벌어진다.

첫번째는 꿈의 세계를 너무나 잘 만들었기 때문에!

두번째는 마지막 배 타는 장면은 예산/시간이 없었구나...!

아무 생각 없이 눈호강 하고 싶을 때 보면 좋을 영화 슬럼버랜드

그런데 보다가 깨달음의 뒤통수를 팍 때려 주고 끝난다.

주인공을 피할 수 없는 모험에 빠트리는 초반의 사건인 아버지의 죽음은

너무나 클리셰여서 김 새려다 급 전환되는 내용에 결국 끝까지 보게 된다.

슬럼버랜드 포스터

2. 슬럼버랜드 줄거리

등대에서 아버지와 함께 생활하던 니모는

아버지를 잃고 현관자물쇠 회사를 운영하는 삼촌의 집에서 살게 된다.

혼자 잘(?) 살던 삼촌은 뜻밖에 10대 여자아이를 키우게 된다.

아버지를 잃은 슬픔을 회피하기 위해 꿈의 세계로 들어간 니모

자신의 꿈을 뒤지던 플립을 만나고 소원을 들어주는 진주로 가는 지도를 통해

둘은 협력관계가 되어 모험을 한다.

플립과 니모

제이슨 모모아의 캐릭터인 플립은 회피자다.

혹시 회귀자를 잘못쓴건 아니냐고? 아니다.

-- (스포) --

그는 죽은 아버지의 동생 필립의 꿈 인격으로 현실을 회피한 자였다.

하지만 모든 스토리의 끝이 그렇듯, 현실을 외면한 자는 도망칠 곳이 없다.

도망쳤다고 생각한 곳에서조차 도망침은 계속된다.

꿈 지도와 꿈 경찰

니모는 꿈 경찰과 니모의 두려움을 쫓는 악몽도 피하다가 결국 진주를 찾게 된다.

하지만 악몽은 니모의 발목을 악착같이 붙든다.

용감하게 악몽과 맞서지만 붙잡힌 플립을 위해 결국 니모는 하나 있는 진주를 사용한다.

이미 지나간 일(아버지의 죽음) 대신 현재의 플립을 위해 진주를 사용한 것이다.

플립은 필립에게 돌아갔고 현실의 필립은 모험심을 되찾았다.

니모를 덮친 악몽은 연기처럼 펑하고 사라지고 만다.

영화나 문학작품들은 꼭 그렇더라.

현실에선 회피하지 않고 계속 나아간다는건 참 어려운 일이다.

~~닥치면 다 하게 되는건가?~~

니모는 희망을 잃어 잿빛이 되어버린 자신의 등대 꿈으로 돌아간다.

그곳에서 만난 꿈 경찰의 말대로 늘 같이 다니던 돼지는 참 장한 돼지였다.

돼지가 다시 준 진주 한 알로 니모는 꿈에서 아빠를 만나 작별인사를 할 수 있게 되었다.

3. 후기

원작이 꽤 오래전 작품이다.

무려 1905에서 1927 동안 연재한!!

Winsor McCay의 만화 "Little Nemo in Slumberland" 이다.

원작에서는 주인공이 소년이었는데 소녀로 바뀌었다.

두려움에도 불구하고 행동한다는 주제를 봤을 때 디즈니 영화 더 굿다이노가 생각났다.

이 영화에도 어린 다이노가 티라노 아버지에게서 용기에 대해 배우는 장면이 있다.

두려운건 마찬가지이지만 살기위해 맞서 싸운다는 부분이다.

디즈니 '더 굿 다이노'

웹소설에 많이 나오는 소재인 회귀물과는 달리 슬럼버랜드 영화의 소재는 꿈이다.

꿈은 회귀와는 달리 결국 회피다.

결말이 앗 띠벌 꿈...! 하고 끝나는 류의 작품을 정말 안좋아하는데

최근에 본 재벌집 막내 아들이 생각난다...ㅎ

논외이긴 하지만 그 작품의 결말을 바꿔버린 사람은 회귀물의 취지를 모르는 사람이라고 생각한다.

~~현실에서 미래와 희망이 없다고 느끼는 사람들이 회귀를 해서라도~~

~~잘먹고 잘 살아보겠다는건데 그걸 그렇게 바꿔버리다니...~~

니모는 아버지와 만나 등대의 존재 이유를 말할 수 있게 된다.

등대는 단순히 배를 안전하게 지키는 것이 아니다. 등대는 지친 여행자들에게 길잡이 역할을 한다.

등대는 배를 안전하게 지키는 항구와 다르다.

배들은 등대로 인해 안전하게 항해한다.

= 등대는 배들의 중간지점이다.

부모란 자식을 손님으로 대해야한다는 말이 떠오르는 부분이다.

형이 제 가정을 이루고 자신을 떠나서

필립이 상처를 받고 플립으로 분화되었다는 부분이 영화를 볼 때 가장 인상적이었다.

나 또한 내 가족이 그렇게 가정을 이루고 떠나면 허전하고 상처받은 기분일까?

등대에 고립된 채 살았던 형보다 도시에서 더 고립되면서 살고 있었던 필립.

못 받아들인다면 어떻게 할거야.

어떻게 할 수 있는게 없다면, 그래야만 한다면

마음을 내어 받아들이는 편이 낫겠지.

이미지 출처 https://www.imdb.com - 해당 링크

Slumberland (2022) - IMDb

Slumberland: Directed by Francis Lawrence. With Jason Momoa, Marlow Barkley, Chris O'Dowd, Kyle Chandler. A young girl discovers a secret map to the dreamworld of Slumberland, and with the help of an eccentric outlaw, she traverses dreams and flees nightma

www.imdb.com

기사 참고 - 링크

The Ending Of Slumberland Explained - Looper

From Flip's true nature to the purpose of lighthouses, we're explaining the ending of Netflix's dazzling new movie, "Slumberland."

www.looper.com

7번째 심리상담 - 성격 강점 검사, 청년마음건강 바우처, 청년 복지

동네주민1 — Fri, 18 Nov 2022 21:54:43 +0900

9월부터 심리상담을 받기 시작했다.
4번째 쯤 상담을 할 때 32만원을 써서 이제 그만하려다가 마침 복지로에 신청했던 심리상담 지원이 해당 되어서 추가로 8번을 할 수 있게 됐다.
9월에는 감정조절이 잘 안되고 죽을 것 같은 마음이 강해서 누군가에게 어떤 말만 해도 눈물이 쏟아졌다.
11월인 지금은 전보다 많이 잔잔해졌고 무기력함이 많이 사라졌다.
이제는 일주일 중에 절반은 넘게 죽고 싶지 않은 마음으로 살아갈 수 있다.

복지로에서 지원을 받을 수 있는 10회 중 2번은 심리검사로 한다고 했다.
몇 주 전에 받았던 성격강점검사(CST)의 결과를 오늘 받았다.
나는 나에게 아무런 강점이 없는 줄 알았다.
근데 놀랍게도 내 강점은 창의성, 학구열, 지혜, 진실성, 심미안으로 나왔다.
이 강점을 활용하는 방안으로, 심미안 항목에는 매일 내가 본 아름다운 것들을 기록하는 ‘아름다움 일지’를 만들어 기록하라는 게 있었다. 꽤 인상적이어서 해보고 싶은 마음이 들었다.
심미안이 강점이라는 데에서 기억날만한 에피소드가 있다.
쌍둥이가 에어프라이어를 산다고 상세페이지를 보여줬는데, 그 페이지의 디자인이 너무도 훌륭해서 정말 꼼꼼하게 끝까지 다 봤다. 그 때의 기분은 공들여 잘 짜여진 교향곡 하나를 음미하는 것 같았다.
또 사람들의 의도가 담긴 창작물, 결과물을 찬찬히 보고 그들의 의도를 읽어낼 때 즐겁다고 느끼는 이유가 바로 심미성 때문이었던 것 같다.

이 보고서에는 ‘지혜’가 타인에게 조언을 해 주는데 그 빛을 발한다고 쓰여져있다.
내가 다른 사람을 조언한다는 걸 생각해본적도 없어서 신선했다.
최소한 한달에 한번 씩 다른 사람들을 상담해주는 역할을 찾아서 하라고 하는데
상담을 해줄만한 이력의 사람이어야지만 상담을 할 수 있는게 아닌가 하는 생각이 있었다.
내가 다른 사람에게 조언을 할 처지인가? 싶은 생각이다. 이건 아직까지는 엄청 어려운 부분이다.

창의적인 사람들은, 특히 최근에 읽었던 책의 저자인 벤저민 프랭클린 같은 사람들은 분야에 경계가 없었다.
자기가 그것에 전공이 아니더라도 호기심이 가는 분야라면 어떤 분야든 책과 실험 도구 등을 사고 실험해보고 결론을 도출해 논문을 쓰고 발표까지 했다.

벤저민 프랭클린

그 시절에도 전문가가 아니라면서 프랭클린이 쓴 결과를 무시하는 사람들이 있었지만 몇몇 사람들의 같은 실험결과 도출에 그의 논문은 곧 과학계의 인정을 받기 시작했다.
요즘 시대에는 전문가의 영역이라는게 너무 강해져서 전문가가 아니라면 일반인은 시작조차 못하는 분야가 많아진 것 같다.
오히려 호기심만 있다면 인터넷으로 정보 얻기는 더욱 쉬워진 세상인데도 말이다.
세상이 너무 오래되어서 고정관념이 더 진득해져버렸다.

학구열은 아마도 내가 아침에 눈을 뜨고 일어나 어디론가로 떠날 수 있게 하는 원동력이지 않을까 싶다.
나는 항상 궁금하다. 흥미가 가는 것들을 배우는 게 재미있다.
항상 새로운 걸 배우고 다른 것과 연결지어 생각해보고 결론 도출과 깨달음을 얻는 과정이 짜릿하다. 이런 게 돈을 버는데는 그닥 소용없는 것 같아 강점이라고 생각해본 적은 없었다. 지적욕구가 강하구나라고 옅게 생각해보기는 했지만 이렇게 강점으로 나올 줄은 몰랐다. 상담선생님이 철학이랑 어울린다고, 대학원 공부를 해보고 싶은 생각은 없냐고 혹은 글을 쓰는게 어떻겠냐고 말씀하셨던게 괜히 나오는 이야기가 아니었나보다.

진실성은 거짓말을 하지 않으려고 노력하고 정직하고 진실하게 말하려는 성질을 말한다.
나는 진실한가? 솔직한 걸 좋아하긴 하지만 진실한지는 모르겠다.
나도 거짓말을 할 때가 있다. 아마도 그럴 때는 그 이유가 늘 얕보이지 않으려고 허세를 떨기 위해서 였던 것 같다. 사회에 나와서는 정말로 지독하게 무시하거나 얕보는 사람은 없었는데도 늘 스스로가 부족하다고 생각해서 가시복어가 제 몸을 부풀리듯 허풍을 떨곤 했다.

상담선생님이 글을 꾸준히 써보라고 해서 블로그를 다시 쓰기 시작했다.
자신감과 자존감이 바닥일 때 본 성격강점검사는 꽤 신기하고 도움이 됐다.
자신에 대해 깊게 생각해 볼 수 있는 계기가 된다.

혹시 필요한 사람이 있을까봐 덧붙인다.
알기로는 정부에서 지원하는 심리상담이 시에서 지원하는 것과 복지부에서 지원하는 게 있다.
시에서 지원하는건 청년포털에서 하면 되고 복지로 사이트는 터졌는지 링크가 들어가지지 않는데, 주민센터에서 신청하면 된다.

청년마음건강 바우처
청년마음건강 지원사업

https://youth.seoul.go.kr/site/main/content/mind_reliable_ask

서울시 청년 마음건강 | 심리상담·청년마음건강 | 건강지원 | 금융·복지 | 청년몽땅정보통(서울

청년몽땅정보통(서울청년포털),서울시 청년 ‘마음건강사업’은 서울시에 거주하고 있는 만19세~39세 청년의 마음건강을 지원합니다. 최대 7회기*(1회기 50분) 심리 전문가와 함께 마음을 돌아보

youth.seoul.go.kr

https://www.bokjiro.go.kr/ssis-teu/twataa/wlfareInfo/moveTWAT52011M.do?wlfareInfoId=WLF00004671&wlfareInfoReldBztpCd=01

tbu/app/twat/twata/twataa/TWAT52011M

www.bokjiro.go.kr

로컬 pc를 외부에 공유하는 방법 - localtunnel(무료)

동네주민1 — Fri, 5 Aug 2022 11:48:23 +0900

모바일로 확인하고 싶거나 다른 사람한테 내가 개발한 페이지 보여주고 싶을 때 사용하는 패키지~~~

회원 가입없이 간단하게 로컬 서버를 외부에 공유할 때 편리한 오픈소스 프로젝트 localtunnel

노드 패키지이기 때문에 Node 설치가 필요하다.

1. 터미널 명령어로 설치하기

npm install -g localtunnel

2. 보고싶은 로컬 서버 열기

npm start / npx serve -s build 등등...

3. 다른 터미널 열기

4. 열어놓은 로컬 서버 포트 번호를 밑의 명령어의 8000자리에 넣기

(ex - 3000으로 열린경우 lt --port 3000)

lt --port 8000

그럼 뜨는 url을 공유하면 됨. 처음 접속시 피씽 조심하라는 경고화면 뜨는데 컨티뉴 버튼을 클릭하면 된다.

+) 옵션으로 subdomain을 쓰고 뒤에 이름 붙이면 붙인 이름으로 도메인이 뜬다.

lt --port 8000 --subdomain lala

참조)

https://github.com/localtunnel/localtunnel
https://theboroer.github.io/localtunnel-www/

Localtunnel ~ Expose yourself to the world

Localtunnel allows you to easily share a web service on your local development machine without messing with DNS and firewall settings. Localtunnel will assign you a unique publicly accessible url that will proxy all requests to your locally running webserv

theboroer.github.io

https://www.youtube.com/watch?v=0lUJvVqSEkY

Object.assign()할 때 JSON.parse()로 깊은 복사하기

동네주민1 — Thu, 4 Aug 2022 10:47:24 +0900

copy......c....o...p...y

라이브러리를 사용하지 않고 하는 간단한 깊은 복사 방식

먼제 json 메소드 parse와 stringify를 알아야한다.

JSON.parse()

- JSON 문자열을 javascript 객체로 변환

- JavaScript 객체로 변환된 데이터는 . 나 [] 기호를 사용하여 각 속성에 접근할 수 있다.

- 외부 문자열을 내장 데이터 타입으로 변환하는 역직렬화(deserialization) 과정에서 사용

JSON.stringify()

- javascript 객체를 JSON 문자열로 변환

- 특정 언어의 내장 타입의 데이터를 외부에 전송하기 용이하도록 문자열로 변환하는 직렬화(serialization)과정에서 사용

Object.assign()으로 할당할 때 깊은 복사

function test() {
  'use strict';

  let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

  obj1.a = 1;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

  obj2.a = 2;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}

  obj2.b.c = 3;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
  console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}

  // 깊은 복사
  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
}

test();

깊은 복사 : 원본을 바꾸어도 복사본에 아무 변화 없는 것

얕은 복사 : 원본을 통째로 복사한게 아니라 주소만 참조한거라 값을 바꾸면 원본-복사본 서로 영향을 주는 것

복사하고자 하는 대상이 배열일 경우에는 Object.assign 대신 concat, slice, Array.from 를 주로 이용한다.

참조, 출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
https://www.daleseo.com/js-json/

Object.assign() - JavaScript | MDN

Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣습니다. 그 후 대상 객체를 반환합니다.

developer.mozilla.org

JSON.parse()와 JSON.stringify()

Engineering Blog by Dale Seo

www.daleseo.com

레오폴드 키보드 FC750RBT 갈축 7개월 사용 후기

동네주민1 — Thu, 21 Jul 2022 10:08:32 +0900

산건 12월인데 후기는 7개월이 지난 지금 쓰네요 허허

주변에 하도 기계식 키보드 찬양자가 많아서 한번 질러봤습니다.

레오폴드 FC750RBT

사무실에서 사용할거라 갈축 흑축 중에 고민하다가

친구의 레오폴드 갈축이 소음도 적고 괜찮아보여 레오폴드를 사기로 마음먹었습니다.

자리에 선이 너무 많아 정신사납곤 해서

살 당시에 블루투스 모델이 새로 나왔다기에 이 제품으로 골랐습니다.

블루투스지만 선도 같이 와서 유선으로도 사용 가능해요.

7개월 사용하고 난 뒤에 찍은 사진이라 좀 손때와 먼지가 탔네요.

하지만 타건감이 좋아서 왜 기계식 기계식 하는지는 알게 되었습니다.

다만 다음 세대까지 넘겨줘도 될 것 같은 가격이네요.

장점

1. 타건감, 촉감이 좋다.

2. 적당히 무게감이 있어서 호신용으로 쓸 수 있다.

3. 블루투스 짱

단점

1. 갈축이지만 시끄러워서 사무실에서 못 씀

2. 디자인 할 때는 FC900(숫자판 있음)이 낫고 코딩을 할 때는 FC750(숫자판 없음)이 낫습니다.

비싸게 주고 산 김에 쭉 가지고 가야할 듯 하네요.

경증 청각장애라 틱틱 거리는 얇고 높은 소리는 못 들었는데 다른 분이 생각보다 소리가 크다고 하셨어요.

그래서 지금은 집에서 주로 사용합니다.

블루투스인 점은 좋지만 갈축보단 적축을 추천합니다.

+ 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

네이버 부스트캠프 웹·모바일 자가진단 코딩테스트 문제 풀이

동네주민1 — Thu, 16 Jun 2022 20:02:16 +0900

문제

주어진 배열에서 숫자의 중복횟수를 배열로 반환하는 문제

내 풀이

내 풀이 설명

1. spread연산자로 복사한 뒤 sort를 이용해 매개변수로 주어진 배열의 숫자를 순서대로 배치한다.

2. 반복문으로 배열요소의 앞 뒤가 같으면 카운트를 센다.

3. 배열요소의 앞뒤가 다르고 count가 1보다 크면(중복횟수가 1보다 큼) answer배열에 count를 넣은 뒤 count를 초기화 한다.

그럼 정답이 (3) [3, 2, 3]가 나온다.

제시된 정답 1

정답1 분석

내 풀이와 다르게 Map, Set을 사용했다.

정답 2와 다른 점은 countOf 함수와 solution 함수를 나누어서 해결했다는 점이다. 한 함수는 한가지 역할만 하라는 클린코드 원칙에 맞게 풀이 되어서 내 코드에도 참고해야겠다는 생각이 들었다.

특히 이 1번 풀이는 set의 중복을 허용하지 않는 특성을 이용하여 중복값을 선별했다.

셋(Set)은 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션입니다.
셋에 키가 없는 값이 저장됩니다.

new Set(iterable) – 셋을 만듭니다. 이터러블 객체를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사해 셋에 넣어줍니다.
set.add(value) – 값을 추가하고 셋 자신을 반환합니다.
set.delete(value) – 값을 제거합니다. 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환합니다.
set.has(value) – 셋 내에 값이 존재하면 true, 아니면 false를 반환합니다.
set.clear() – 셋을 비웁니다.
set.size – 셋에 몇 개의 값이 있는지 세줍니다.

정답 2

정답2 분석

map의 key,value 값을 이용하여 중복값 더해주는 방식으로 구해줌

Map 설명
new Map() – 맵을 만듭니다.
map.set(key, value) – key를 이용해 value를 저장합니다.
map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다.
map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다.
map.delete(key) – key에 해당하는 값을 삭제합니다.
map.clear() – 맵 안의 모든 요소를 제거합니다.
map.size – 요소의 개수를 반환합니다.

Map은 객체와 달리 key값의 형태에 제한이 없다.
객체도 key가 될 수 있다.

참조

https://ko.javascript.info/map-set

맵과 셋

ko.javascript.info

https://www.boostcourse.org/selfcheck/joinLectures/360465

부스트캠프 웹·모바일 자가진단

부스트코스 무료 강의

www.boostcourse.org

html 메타태그를 알아보자

동네주민1 — Wed, 20 Apr 2022 11:15:28 +0900

https://css-tricks.com/explain-the-first-10-lines-of-twitter-source-code/

Explain the First 10 Lines of Twitter's Source Code to Me | CSS-Tricks

A question I always like to ask when interviewing a front-end candidate is: "Explain the first ten or so lines of the Twitter source code to me."

css-tricks.com

css-trick을 보던 중 흥미로운 글이 있어서 정리용으로 씁니다.

트위터 소스 캡쳐

이 캡쳐를 바탕으로 1~11번 줄이 무엇을 의미하는지 설명하는 포스팅이에요.

글 요약

Line 1 : <!DOCTYPE html>
- 브라우저가 어떤 html 표준을 사용하면 되는지를 나타내는 document 타입을 선언하는 태그
Line 2 : <html dir="ltr" lang="en">
- 텍스트의 방향이 'left to right' 방향으로 가며 언어는 영어를 사용함을 나타내는 태그
Line 3 : <meta charset = "utf-8">
- 문자집합 속성은 브라우저에 사용할 문자 인코딩을 지시
- utf-8은 문자포인트를 많이 가지고 있어서 소스코드에 모든 종류의 기호와 이모지를 사용할 수 있음.
Line 4 :<meta name="viewport" content="width=device-...
- 브라우저가 스크린 사이즈(스마트폰, pc 등)에 맞춰 보여질 수 있도록 하는 태그
- width=device-width 브라우저에 장치 너비의 100% 뷰포트로 하도록 지시
- user-scalable=0 확대/축소 기능 비활성화
- maximum-scale=1 최소 및 최대 배율을 사용하여 이러한 값 사이의 확대/축소 기능을 고정할 수 있음
Line 5 : <meta property="og:site_name" content="Twitt...
- seo와 관련된 open graph tags
- microbrowser. sns나 메신저에 공유되어 미리 보여지는 카드를 의미함
- 요즘엔 Puppeteer나 플러그인 사용한다고함

Line 6, 7 : <meta name="apple-mobile-web-app-title" cont...
- 애플 기기에 웹사이트를 최적화하기 위한 태그 ,
- 아이폰 홈 스크린에 웹사이트를 고정하여 네이티브앱처럼 느끼게 함
Line 8 : <meta name="theme-color" content="#ffffff"...
- 브라우저의 ui 색(테마) 지정 태그
Line 9 : <meta http-equiv="origin-trial" content="... Line 10 : html{-ms-text-size-adjust:100%;-webkit-text...
- origin-trial을 사용하면 새로운 실험 기능을 사용할 수 있다.
- 예) 듀얼스크린과 폴더블 기기 등의 개폐 여부에 따라 레이아웃을 적용할 수 있다.
Line 10 : html{-ms-text-size-adjust:100%;-webkit-text...
- 반응형이 아닌 모바일 페이지에서 글자 크기를 조절 할 수 있게 만들어주는 태그
- 실험적인 태그이기 때문에 -ms 벤더프리픽이 붙음
- -ms-text-size-adjust:100%는 실제 사이즈와 동일하게만 표시되게 하므로 확대 불가능하게 만드는 태그
Line 11 : body{margin:0;}
- 브라우저간의 초기 css 값이 다르기 때문에 초기화 시켜주는 코드
- 이제는 normalize.css 또는 reset.css 등을 사용

평소 궁금했던 부분도 있고 전혀 몰랐던 부분도 있네요.

더 자세한 내용은 글을 한번 읽어보면 좋을 것 같아요.